PROJECT 1. Heuristic Evaluation and Cognitive Walkthrough of Goroo.com

Transcription

1 PROJECT 1. Heuristic Evaluation and Cognitive Walkthrough of Goroo.com Cherese Cooper, Tatiana Iegorova, Andrew Wasowicz HCI 460 Usability Evaluations Spring

2 Executive Summary In this report we analyzed heuristic evaluations used to develop recommendation to improve the functionality of Goroo.com. We based evaluations on the heuristic principles developed by Jacob Nielsen. Each evaluator focused on several functions and features of Goroo.com. We gauged the extent to which those functions and features adhered to Nielson s heuristic principles. Goroo.com is a travel planning site which provides information on the public transportation systems of the Chicago land area. We assume that the user s immediate goal for using the site is assumed is to retrieve travel information and the user s extended goal is to travel from one location to another within the Chicago land area. The evaluators applied ten heuristic criteria while exploring how Goroo.com aided users in acheiving their immediate and extended goals. The ten heuristic principles are: 1. Visibility of system status 2. Match between system and real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help with errors 10. Provide help (if needed) After analyzing the evaluations, we have established ten core issues that affect the usability of Goroo.com. These issues are provided in the following report and are coupled with a listing of elements, from the site, which adhered appropriately to the heuristic guidelines. are developed to offer solutions that will fit with the overall feel and intent of Goroo.com. After analyzing the evaluations, we have established ten core usability issues: 1. No Status shows when loading different travel methods 2. Account creation confirmation looks like an error alert 3. Does not show current login status 4. Location information requires a specific address 5. Provides inaccurate walking/ bicycling/driving directions 6. Cancel button appears grayed out when editing trip details 7. Using browser back/forward navigation causes problems for results page 8. Inconsistencies between query buttons and user constraints 9. Sign out option is only accessible inside the user s account 10. There is no cancel button for update account A report is provided on two cognitive walkthroughs. Evaluators explored cognitive walkthroughs for 1) querying Goroo.com for directions from one loacation to another, and 2) editing the query after results have been provided. These Cognitive walkthroughs explore potential user knowledge and how the system works to allow the user to utilize his or her knowledge to achieve their immediate goals. After discussing our findings in this report, we compiled a list of the top priority recommendations. The 2

3 following recommendations should be implemented as soon as possible: 1. Make search results persistent to ensure that users can navigate between the pages using browser controls without losing previous states. 2. Walking/Bicycling/driving instructions need to reflect the actual path the user will need to take. 3. Account set up should display the notification in an overly window instead of a javascript alert. Introduction This report is an analysis of three heuristic evaluations of Goroo.com. The follow describes the evaluated site, and target users. The report presents several problematic aspects of Goroo.com. Additional descriptions of features which adhere to Nielsen's heuristics are provided for comparison and to illustrate aspects of the site s design which were well thought out and which can inform potential solutions. Product Description Goroo.com is an online site which provides users with travel plans for public transportation in the Chicagoland area. The site provides users with travel instructions that include options for buses, trains, driving, walking, and bicycling. The site also provides users with alerts of conditions affecting bus and train routes. Users can customize these alerts and receive notifications via or text message for their prefered train or bus lines. Goroo.com provides information in English, Polish, and Spanish. Target Population There are three populations targeted by the developers at Goroo.com. 1. Chicago area residents who rely on public transportation infrequently or those using public transportation lines with which they are unfamiliar. These users would need the site to query information on efficient ways to navigate the public transportation systems from one location to another. Included in this population are Spanish and/or Polish speaking residents who may have difficulty or limited skill speaking English. 2. Out of town tourists. This population is likely to be unfamiliar with the Chicago area and may be apt to query Goroo.com for travel plans to specific attractions in and around Chicago. 3. Users who are familiar with Chicago s public transportation system or who use specific transportation lines regularly. The user can set up notification accounts that will push travel alerts to their accounts or phones, updating them of conditions that are affecting their preferred bus and train lines 3

4 Heuristics & Severity Heuristic used in the evaluations Number Heuristic Description 1 Visibility of system status 2 Match between system and the real world 3 User control and freedom 4 Consistency and standards 5 Error prevention 6 Recognition rather than recall 7 Flexibility and efficiency 8 Aesthetic and minimalist design 9 Help with errors 10 Provide help (if needed) Severity ratings Rating Description 0 No usability problem 1 Cosmetic problem fix only if time allows 2 Minor usability problem low priority 3 Major usability problem high priority 4 Usability catastrophe imperative Findings Summary of s After the analysis of the heuristic evaluations, evaluators composed ten usability issues which require attention. These problems have been rated by their severity. Violated Heuristic principles have been listed for each problem and a rational has been included to explain why and how each applicable heuristic was violated. Similar features which adhere to Nielsen's heuristics have been listed in the full details to illustrate how potential solutions are already present in the design. Explicit recommendations are provided in the full details as guidelines of how each problem could be improved. 4

5 # Heuristics Severity General Heuristic 1 No Status shows when loading different travel methods 2 Account creation confirmation looks like an error alert 1 1 Keep the user informed of what the system is doing Suggests an error status, javascripts alert boxed commonly used for error messages, may cause the user to err 3 Does not show current login status Log in status is not visible, Increases cognitive load by forcing user to remember login status 4 Location information requires a specific address 5 Provides inaccurate walking/ bicycling/driving directions 6 Cancel button appears grayed out when editing trip details 7 Using browser back/forward navigation causes problems for results page 8 Inconsistencies between query buttons and user constraints 9 Sign out option is only accessible inside the user s account 10 There is no cancel button in the edit account section Public transportation is usually navigated by general locations, Causes errors if the user lacks full information, User must conform to rigid interaction 2 4 Directions do not match real world paths, these directions are superfluous unless made functional User is lead to believe that they cannot cancel Edit Trip Punishes the user for using interface in an unexpected way, User cannot easily back navigate without causing errors 4 3 different button conventions are used in different areas of the site Does not follow common conventions, user can sign out from only one location, slows down ability to carry out goal 3 4 The user is not allowed to cancel the edit account option. Full Details of Areas 1. No loading status when changing between travel methods # Heuristics Severity Details 1 No Status shows when loading different travel methods 1 1 Keep the user informed of what the system is doing After the user has queried the system, results are displayed providing the user with directions to the desired 5

6 destination. From this state the user can select different travel options. When switching between these options the site does not provide feedback that the system is loading new information. When the system is functioning this causes no problems, but if there is a slow connection or if the system is having problems loading the information, then the user is not shown adequate feedback that they have performed an appropriate action and must wait for the system to update to be certain. Rational 1) Visibility of system status: Keeping the user informed of changes in system status helps the user understand what is happening and what effect their actions have. Without this feedback the user may mistake slow to update information as a failed interaction on the users part. The user may exacerbate a problem by repeating the action or attempting other unnecessary actions. Examples of appropriate adherence to heuristics Fields are highlight when in focus Navigation tabs are highlighted when the user is on that particular page Loading animation plays when system retrieves train or bus schedules The site should use the same loading animation used for transit schedules when the user is selecting between travel options. 2. Notification of confirmation sent looks like an error message # Heuristics Severity General Heuristic 2 Account creation confirmation looks like an error alert Suggests an error status, javascripts alert boxed commonly used for error messages, may cause the user to err When the user has signed up to create an account the system displays a javascript alert informing the user that a confirmation has been sent. This is meant to inform the user that they have successfully created an account and to instruct the user of the next action they should take to complete the signup process. Because the notification looks like an error alert the user is likely to assume that a mistake was made. The user may attempt to sign up again only to find another error message telling them that they already have an account. 6

7 Rational 1) Visibility of system status: Notifying the user that a confirmation has been sent informs the user that the signup process has been successful thus far. By using a javascript alert the system is suggesting that the task was unsuccessful and that the system is in error status. 2) Consistency and standards: The system uses javascript alerts to inform the user of errors in several other places. The confirmation notification is the only non error javascript alert found. it breaks from consistency within the site 3) Error prevention: The confirmation alert may cause users to make mistakes by suggesting that something went wrong in the signup process, prompting the user to take unnecessary actions. Examples of appropriate adherence to heuristics Icons are consistent with industry standards Icons are used consistently throughout the site Overlay panels appear in areas where the user moves out of the normal task flow but still moving forward The site should display the notification in an overly window as is done during edit trip. Focus of the confirmation should be prominent, and include colors and icons that would clearly communicate that the user has successfully completed a sign up (e.g. check mark, green colors). And also notify that an was sent to the provided address. 3. Does not show current login status # Heuristics Severity General Heuristic 3 Does not show current login status Log in status is not visible, Increases cognitive load by forcing user to remember login status Goroo.com allows the user to set up a personal account. Accessing the account requires that the user login to the site. The site does not dynamically display whether or not the user is logged in. The navigation option for the user s account displays My Account both when the user is logged in and logged out. Rational 1) Visibility of system status: The system should display the current status. By displaying My Account. With no other indication of logged in status, the system is creating a false user expectation. The user will expect to be able to access their account immediately and that they are already logged in. 2) Recognition rather than recall: The user must remember whether they are logged in. If the user cannot remember the user will need to check his or her account. 7

8 Examples of appropriate adherence to heuristics Icons are consistent and reduce cognitive load on the user Language status is effectively displays in the upper right corner Navigation tabs are highlighted when the user is on that particular page The My Account button should dynamically change values from Sign in when not logged in, to My Account when the user is logged in. Additionally, there could be a quick link Sign Out when a user is logged in. That will allow for one click sign out, and it would also be a visual cue that the user is currently signed in and has an option to sign out. 4. Queries require specific addresses # Heuristics Severity General Heuristic 4 Location information requires a specific address Public transportation is usually navigated by more general location, user must look up address if unknown, User is must conform to rigid interaction The site is intended to help users plan their method of transportation. Queries require that users have specific location information. Users (especially target population 2) may find this difficult if they do not have exact address. Rational 1) Match between system and real world: Bus and train travel is not an address to address service. Stops and stations are at set locations and often identified by location descriptors which are more general than addresses (Pulaski Station, Rush and Division). By requiring a specific address the system fails to match real world concepts of public transportation 2) Recognition rather than recall: If a user does not know the actual addresses of locations, then the user will need to look up the addresses from another resource or rely on selecting nearby attractions. Users will need to look up the proximity of the attractions (those recognized by the system) to see which matches their need if they are unfamiliar with the area. If a user is planning to travel to an attraction then the system may work fine but this assumes that the user s intended attraction is recognized by the system. 8

9 3) Flexibility and efficiency of use: The rigid requirement for location information prevents the user from developing a report with the system. The user is limited in their options of interaction methods. Additionally if the user must look elsewhere to verify and address then the system has lost efficiency of use. Examples of appropriate adherence to heuristics Order of information input is logical and matches a from/to conceptual model of travel Users can input an address or he/she can select from their recent locations for efficiency Users can customize their trip method of travel Allow users to query by more general terms such as intersections and provide multiple stops from which they can choose their destination. Provide search results and additional suggested attractions depicted on the map. Allow to pick a location from the map and retrieve directions to/from it. 5. Provides inaccurate walking/bicycling/driving directions # Heuristics Severity General Heuristic 5 Provides inaccurate walking/ bicycling/driving directions Directions do not match real world paths, these directions are superfluous unless made functional The site provides instructions for walking, bicycling, and driving to, from, and between public transportation stops. These instructions are vague and do not reflect the actual path the user may need to travel. One instruction is given (i.e., Bike north from 95th St, or Drive south on Archer Ave. ), when several actions would actually be required. 9

10 Rational 1) Match between system and real world: Often times travelers may choose to walk, bicycle, or drive to a location, or may need to travel to, from, and between stops and stations. The site provides instructions that do not match the real world paths of travel. 2) Aesthetic and minimalist design: Because many of the directions are not functional, these directions (the non functional instructions) serve only to take up space. The non functional directions are unnecessary unless they can provide real value for the user, Examples of appropriate adherence to heuristics Icons match real world concepts of modes of transportation Transit tracker and scheduler removes additional content so only pertinent information is available Condition alerts are only displayed if they affect travel via relevant routes Walking/Bicycling/driving instructions need to reflect the actual path the user will need to take, or should be removed. 6. Cancel button appears grayed out when editing trip details # Heuristics Severity General Heuristic 6 Cancel button appears grayed out when editing trip details. 3 3 Looks like requirements for cancel haven t been met, User is lead to believe that they cannot cancel Edit Trip After the user has queried the system for directions, the user can edit the query. When the Edit Trip overlay is displayed the cancel button is grayed out. 10

11 Rational 1) Visibility of system status: Suggest that the button is inactive, when it is actually active. Suggests that there are actions that must be taken before the button becomes active. 2) User control and freedom: A grayed out cancel button on the edit trip overlay will mislead the user to expect that they cannot exit the edited trip, and that they are required to move forward in the task flow. Examples of appropriate adherence to heuristics Home page form allows the user to Show Advanced Options and then Hide Advanced Options The user can manage and customize their preferred routes Transit Tracker and Schedule pages contain buttons that are deactivated until appropriate information has been supplied Add hue to the cancel button. 7. Using Browser navigation causes errors in results # Heuristics Severity General Heuristic 7 Using browser navigation causes problems for results page Punishes the user for using interface in an unexpected way, User cannot easily back navigate without causing errors When the user navigates between pages using the browser back/forward arrows, the results on the trip results page cease to display correctly. After navigating back to the results page, the user often no longer able to view the results properly. Rational 1) User control and freedom: The system suffers from errors and punishes the user for using browser controls to return to the results page. 2) Flexibility and efficiency of use: The rigid controls require the user to requery the site if the user has navigated away from the results page. Examples of appropriate adherence to heuristics Users can input an address in a text field or the user can select from their recent locations from a dropdown menu Users can control how they receive service alerts Make results persistent to ensure that users can navigate between the pages using browser controls without losing previous states 11

12 8. inconsistencies between controls and constraints # Heuristics Severity General Heuristic 8 Inconsistencies between query buttons and user constraints 4 3 different button conventions are used in different areas of the site On the homepage the button labeled take me there is active throughout the task (adding trip information), however if the trip information is not entered correctly then a javascript alert is displayed. The alert requests that the user supply required information. On the Transit Tracker and Schedule pages the button that moves the user forward in the task flow is deactivated until the appropriate information is selected. The two modes of interaction are inconsistent with each other. Rational 1) Consistency and standards: There are two conventions for buttons that move the task flow forward. One button (Homepage) is active at all times and uses an alert to correct the user, while two buttons (on the Tracker and Schedule pages) are activated only when appropriate information is provided and these buttons prevent user errors. The three buttons should work similarly because they have the same function and design. Examples of appropriate adherence to heuristics The three buttons used to query the system all share the same design adhering to consistency Page layout is the same for each page where possible The forward moving button should become active (acquire orange color fill) only when the user has provided all information needed to build a trip. Otherwise it should remain greyed out to prevent a user error. 9. Sign out option is only accessible inside the user s account # Heuristics Severity General Heuristic 9 Sign out option is only accessible inside the user s account Does not follow common conventions, user can sign out from only one location, slows down ability to carry out goal The option to sign out of My Account can only be found on a side panel when the user has opened the My Account page. 12

13 Rational 1) Consistency and standards: Web sites often place login/sign out options in a static location accessible from all pages. Goroo.com breaks this convention by placing the sign out option in an isolated loacation on one page. 2) Flexibility and efficiency of use: There is only one location where the user can sign out of his or her account. The user must find the option by remembering what page it is on or searching for it. The task of signing out is inefficient because the user must access a specific page. Examples of appropriate adherence to heuristics Language options are consistently present on each page Current time is displayed in upper right hand corner similar to other sites and applications There should be a quick link Sign Out when a user is logged in. That will allow for one click sign out, and it would also be a visual cue that the user is currently signed in and has an option to sign out. 10. No cancel button when updating account # Heuristics Severity General Heuristic 10 No Cancel button when updating account 3 4 The user is not provided with the control to back out of editing an account. There is no cancel button for the Edit My Account page. Once the user has entered this screen they are told that their and password are required to move forward (update). There is only an option to update. 13

14 Rational 1) User control and freedom: The user should be free to back out of this editing their account without having to make any changes. The form suggests that once opened, the Edit My Account page requires the user s and password and that the user cannot cancel out of the option. Examples of appropriate adherence to heuristics A cancel button is provided in the Edit Trip state Drop down calendar on the Home state has a close button which allows the user to close the calendar without selecting a date Add a cancel button to the Edit My Account state that will return the user to Preferred Routes. 14

15 Cognitive Walkthroughs For the cognitive walkthrough we chose two user tasks: (1) build a trip, and (2) edit your trip. The following tables break down user steps when performing these tasks, and also evaluate how supportive the system is to the user. Task 1. User task is obtain public transportation directions from one location to another. Actions Will users even realize step is needed? Will users identify relevant control? Will users recognize connection between control and desired results? Step 1 To goroo.com via search engine Yes this a common practice Yes depending on search engine user may type name in url field or search field Yes standard process Step 2 onclick focus in "From" text field Yes There is a logical task flow for the input of information. The "From" field is placed before the "To" text field. Yes Text fields in forms is a common practice. A blinking curser is an indication that an entry is required. Yes The form uses Hints shown as examples Step 3 Enter address "4653 N Beacon St,Chicago, Il 60640" Yes Text fields in forms is a common practice. A blinking curser is an indication that an entry is required. The text field has an appropriate length for the entry of an address. Yes The form is a standard form and is commonly used. Step 4 onclick focus in "To" field Yes There is a logical task flow for the input of information. The "To" follows the "From" text field. Yes Text fields in forms is a common practice. A blinking curser is an indication that an entry is required. Yes The form uses Hints shown as examples Recommendation: After the "From" field is entered auto focus to the "To" text field. Step 5 Enter address "1 E Wacker Dr, Chicago, IL Yes Text fields in forms is a common practice. A blinking curser is an indication that an entry is required. The text field has an appropriate length for the entry of an address. Yes The form is a standard form and is commonly used. Step 6 Press "Arrive on" radio button Maybe The task flow is logical but this step in the form does not stand out and the radio button for "Leave" is preselected. Yes radio buttons are use to restrict the user to one selection "Leave" or "Arrive on". Yes intuitive Recommendation Create a section for 15

16 departure date and time that can be differentiated from the rest of the form. Step 7 Click on calendar icon to select date to arrive Maybe The calendar icon is placed to the right of the radio buttons "Leave" and "Arrive on". The date field is prepopulated and if overlooked the system default is the present day. Yes Calendar icon creates a correlation between the real world and system. Yes standard icon and used widely Recommendation Somehow call attention the calendar icon and/or text field. Step 8 Select April 22, 2013 on the calendar Yes Once the calendar is opened the present date is selected but as you hover over other dates they become highlighted alerting the user that they may make a selection. Yes Arrows allow users to select previous or future months. There is also a "close" button to exit the calendar Yes calendar plugins are standard to similar applications Step 9 Click on dropdown arrow to select hour of Arrival Maybe It follows the calendar icon. Recommendation Bring the dropdown menu in to focus. Yes Dropdowns are common practice and intuitive. Clicking on arrows will allow them to open the dropdown menu. Yes Dropdown menus allow users to select from pre entered data Step 10 Select the number "2" to indicate the two o'clock hour Yes Dropdown menus allow users to select from pre entered data Yes intuitive Yes intuitive Step 11 Click on dropdown arrow to select the minute of Arrival "Maybe It follows the hour dropdown menu. Recommendation Bring the dropdown menu in to focus. " Yes Dropdowns are common practice and intuitive. Clicking on arrows will allow them to open the dropdown menu. Yes Dropdown menus allow users to select from pre entered data Step 12 Select the number "30" Yes Dropdown menus allow users to select from pre entered data Yes intuitive Yes intuitive Step 13 Select pm from dropdown menu Maybe Dropdown menus allow users to select from pre entered data Yes Dropdowns are common practice and intuitive. Clicking on arrows will allow them to open the dropdown menu. Yes Dropdown menus allow users to select from pre entered data. Step 14 make sure "I prefer accessible services" "No" radio button is selected Maybe "No" button is selected by default Recommendation Make the layout in order steps Yes Radio buttons are used and only allow the user to select one option Yes There is an icon to assist users 16

17 Step 15 Select from transportation mode preferences "Train" checkbox Maybe multiple checkboxes are selected. User may forget to deselect boxes that they do not need. Yes Check boxes are standard a Yes The text is self explanatory Task 2. User would like to modify the trip: get reverse directions to get home at 8 pm that day, and to check how they can get to their destination by other modes of transportation (bus). Actions Will users even realize step is needed? Will users identify relevant control? Will users recognize connection between control and desired results? Step 1 Find and click on "Edit Your Trip" Maybe users may not be aware of an option to update current trip with no need to go to the Homepage and rebuild a trip Maybe the link is somewhat hidden, not very noticeable on the page. Or the wording of the link does not provide enough information about what's behind that link. Recommendation: bring this feature into focus; make it a button and/or add an icon to make this option easy to locate on the page. Also, provide enough text in the link/button that would clearly communicate what is behind the link (e.g. Edit or Modify Your Trip"). Yes the link (an underlined text) is a standard way to get to another page Step 2 Locate and click on the 'Reverse directions' button between 'From' and 'To' text fields Yes this step is logical and matches the system and real world Maybe the icon representation may not be intuitive to all users. Also, in when hovering over the icon with a mouse the system does not provide a description of this UI element. Maybe some users may not understand that this UI element will reverse the "From" and "To" addresses Recommendation: add text label to the icon and tag description Step 3 Click on dropdown arrow to select hour of arrival Yes users are familiar with this step when they first built this trip Yes users have already used this control before Yes standard form to expand available options Step 4 Select number "8" to indicate the three o'clock hour Yes users are familiar with this step when they first built this trip Yes users have already used this control before Yes standard way to select an item 17

18 Step 5 Click on drop down arrow to select minutes of arrival Yes users are familiar with this step when they first built this trip Yes users have already used this control before Yes standard way to expand available options Step 6 Click on "00" to indicate zero minutes Yes users are familiar with this step when they first built this trip Yes users have already used this control before Yes standard way to select an item Step 7 Select Transportation Mode Preferences by clicking 'Bus' checkbox Yes users are familiar with this step when they first built this trip Yes users have already used this control before Yes standard way to select multiple items Step 8 Click on "Update Trip" button Yes in order to complete the trip updates and get new direction results page, users need to click this button Yes the button representation is a standard form, and the button wording matches the task in hand Yes intuitive Review of Top Priority We conducted heuristics analysis of the site and identified some major design and functionality problems of the site. Cognitive walkthrough of two user tasks helped us evaluate how the system supports user mental model when building or modifying a trip. Based on our findings we suggest three top priority recommendations to improve usability. We gave these recommendations priority due to the severity of problems they cause the user. Recommendation 1. Make results persistent to ensure that users can navigate between the pages using browser controls without losing previous states. Recommendation 2. Walking/Bicycling/driving instructions need to reflect the actual path the user will need to take, or should be removed. Recommendation 3. Account set up should display the notification in an overly window instead of a javascript alert. Focus of the confirmation should be prominent, and include colors and icons that would clearly communicate that the user has successfully completed a sign up (e.g. check mark, green colors). And also notify that an was sent to the provided address. 18