activated is a platform that allows students to create, organize, and share the steps on their road to college.

Transcription

1 Heuristic Evaluation of [ activated ] 1. Problem activated is a platform that allows students to create, organize, and share the steps on their road to college. 2. Violations Found 1. H7: Flexibility and Efficiency of Use / Severity: 4 / Found by: A, C At startup, the application immediately goes to the sign-up flow rather than presenting the option to either log in, given that the user has an account, or sign up if not. By offering no option to sign in with existing credentials, returning users need to go through the sign-up flow more than once which is not an efficient use of their time. FIX : Add another initial screen with buttons allowing you to log in and go straight to road map, or sign up and go through sign up process. 2. H10: Help and Documentation / Severity: 1 / Found by: A After signing up, users are given the option to start a roadmap from scratch or a template, or, alternatively, enter a Group ID. There is no explanation of what this Group ID is or looks like. As a result, users can get confused as to what value should be entered into this box or what a typical ID would look like. FIX: Have a clickable question mark icon next to Group ID header that, when clicked, explains what the ID is and provides an example 3. H2. Match Between System and the Real World / Severity: 1 / Found by: A, E In terms of presenting information in a natural and logical order, having the uploading of the profile picture in the same screen as the two options for creating the roadmap may seem a bit unnatural, as these two actions are entirely unrelated. One is personal information while the other caters to the content of the application s function. FIX: Move upload profile picture to the screen where user clicks options for what year they are in and what their plan is (i.e. the profile building screen)

2 4. H1. Visibility of System Status / Severity: 1 / Found by: A, B, E There is no progress bar in the sign up process to see how many more steps the user will have to take in order to complete the process. Thus, users are unaware of the system status. FIX: Add a progress bar to all the signup process screens. 5. H10: Help and Documentation / Severity: 2 / Found by: A, B While the tutorial as a whole is very helpful, the pop-up for Roadmap View - We re going to college! doesn t give any information about what the roadmap view is meant to accomplish. Thus, the quality of this help/documentation can be improved. FIX: Change the pop-up for roadmap view to something like Overview of the steps and milestones to make it to college. or something informative like that. 6. H2. Match Between System and the Real World / Severity: 4 / Found by: A, C, D, E The difference between milestones and steps isn t super clear, especially in the tutorial view, which is where users would expect to learn the definition of these two concepts. This misleading use of the users language violates this heuristic. Perhaps using more natural language that clearly specifies the fact that the steps are components of the milestones. FIX : Change the milestones and steps to clearly hierarchical words. Also add more of an explanation of their difference within tutorial flow. 7. H4: Consistency and Standards / Severity: 2 / Found by: A The location pin icon is often used in most applications to point to a map tab or some sort of navigational tab. It s a bit confusing to use this icon to represent the milestone tab. As a result, this violates the heuristic by diverging from platform conventions. FIX : Change the milestone tab icon to a more representative icon, like the icons used to show the steps on the roadmap. 8. H6: Recognition Rather than Recall / Severity: 3 / Found by: A, B, D The color coding of the steps by milestone is helpful. However, having to go to the

3 milestone tab in order to remember which colors refer to which milestones can eventually get tiresome. This need to remember colors or go to a different screen for a refresher violates this heuristic. FIX : Add some overlay legend that can be toggled to be visible or not that details these color mappings on the roadmap screen itself. 9. H10: Help and Documentation / Severity: 1 / Found by: A No explanation of what * means in the form screens. Form screens, in general, have little information about what each input requires. Thus, this violates the heuristic of providing necessary help and documentation. FIX: Add an explanation that * means required on the form screen. Add more details on what is required for each question/form component. 10. H5: Error Prevention / Severity: 2 / Found by: A Save button appears in form screens even if necessary information isn t filled in - for example, in creating a new step, without choosing a milestone or a date and time, the save button already appears. This violates the heuristic as users will be more prone to saving incomplete information or having to attempt to submit incomplete information in order to know which information is necessary for completion. FIX: Only show the save button when required information is filled in 11. H4. Consistency and Standards / Severity: 4 / Found by: A, C, E The back button seems to take you to whichever screen you visited last, although the back button expectation is that it takes you back to the screen one higher in the hierarchy. For example: from the home screen, clicking on the notifications tab, then the week view tab then the back button should take you to the home screen, but it currently takes you back to the notifications tab. Fix: Change the back button to point to the previous screen hierarchically action as per conventions of most mobile apps. 12. H7. Flexibility and Efficiency of Use / Severity: 3 / Found by: A, B

4 On the page that lists the step for a particular milestone, there is no way to filter through the steps (for example, which steps that are completed, which steps are still pending, which steps are due this week, etc) or sorting them. This decreases the flexibility of the system, which violates this heuristic. FIX : Add way to filter and sort through steps of a milestone. 13. H4. Consistency and Standards / Severity: 1 / Found by: A When in the page that lists the step for a particular milestone, navigational bar says that weekly view is selected instead of the milestones tab which isn t consistent with previous flows. This divergence across the application results in the violation of this heuristic as the user may get confused as to when the weekly view will be toggled or when the milestone view will. FIX : Make the milestone tab selected when in this view. 14. H7: Flexibility and Efficiency of Use / Severity: 3 / Found by: A There is no way to search through your contacts in order to pick who to share it to. Additionally, there is no clear place across the prototype where you can view these contacts or even add other people, which makes this sharing component a bit confusing. This violates the heuristic as the lack of searching results in a lack of flexibility and having to scroll through the small pop up window rather than a dedicated screen may result in an inefficient use of time or screenspace. FIX: Add ability to search or filter through contacts when sharing. Add additional ways to view your contacts and groups. 15. H4. Consistency and Standards / Severity: 2 / Found by: A The use of the word group for both the roadmap template in the sign up process and student groups like Per 2 AVID can be confusing as the initial use of group with its associated ID makes you think that you are only ever a member of a single group, while the settings page lets you add multiple groups. The lack of consistency in the use of this word across the application is what violates this heuristic. FIX: Use a different term for the two concepts

5 16. H4. Consistency and Standards / Severity: 1 / Found by: A Rows in weekly view are not clearly clickable, unlike in the page that lists the steps for a particular milestone. This violates this heuristic as users may become confused as to why text/components with the same function are presented in different ways across the application. FIX : Make weekly view screen rows clearly clickable with the same... underline as in the milestone step view. 17. H7 Flexibility and efficiency of use / Severity: 2 / Found by: C The intro page of the app asks the user to enter their high school year and intended program, but there are many students who don t follow linear paths. Consider, for example, a student who is going to repeat a grade or take a gap year or want to explore both two and four year options. These students might feel confined by the choices. FIX: Replace these questions with the minimal information the app needs. Maybe: When do you want to start college? 18. H5 Error prevention / Severity: 1 / Found by: C, D The log in page has a slot for group id even if you choose Start Roadmap from Scratch. This may lead to the user adding a group id for an individual project. FIX : Have this option only appear if the user chooses to use a group template 19. H8 Aesthetic and minimalist design / Severity: 1 / Found by: C The tutorial slides from one screen to another although the background does not change. It adds a lot of business to see the background twice as it slides across the screen. FIX: Don t have the background move during the tutorial. Instead just move the objects that aren t consistent between both screens 20. H7 Flexibility and efficiency of use / Severity: 2 / Found by: C

6 Advanced users might not need a tutorial, however there is no way to skip the 10-slide tutorial FIX : Add a skip tutorial button 21. H10 Help and documentation / Severity: 3 / Found by: C, D The tutorial covers a lot of information that is not directly relevant to what the user is doing. A user who wants to just view the roadmap might not want to hear or be able to process a tutorial on notifications at the beginning, but might want to see this information later. FIX: Keep the intro tutorial very basic, just pointing out the immediately important icons. Then add a help option in each section to guide the user should they need it. 22. H4 Consistency and standards/ Severity: 1 / Found by: B, C The settings tab allows you to change the two options you had on the intro screen as well as terms. It is unclear why this option wasn t introduced before. FIX: Every time there is an option to add or edit one of those three options, include all of them. 23. H6 Recognition rather than recall / Severity: 3 / Found by: C, E The notifications tell you that there was a step shared, but count on you to remember what that step was. FIX: Have the notifications tell the user what the step that was shared was. 24. H1 Visibility of system status/ Severity: 2 / Found by: C Once an event is shared, there is no mention of who it was shared with. This might cause a user to reshare events or mistakenly think they had already shared events FIX: Have a button that tells the user who has seen an event 25. H3 User control and freedom / Severity: 4 / Found by: B, C

7 If a user mistakenly checks a task as complete, there is no way to uncheck the task. FIX: Make the check a toggle that the user can go back and forth on 26. H9 Help users recognize, diagnose, and recover from errors / Severity: 4 / Found by: B, C When the user deletes a milestone, it just disappears without any notifications or comment on what happens to the tasks under this milestone. This can lead the user to delete many tasks accidentally with no way to recover them. FIX: Prompt the user to verify that they want to delete the milestone, and show them a list of all the steps that this will also delete. Potentially also allow them to recover information. 27. H4 Consistency and standards / Severity: 2 / Found by: B, C, E It is a bit confusing that clicking on a step on the roadmap links you to a page on the milestone. The user could become confused about the distinction. FIX: Clicking on a step should lead to a page with information only about this specific step. This page could then link to information about the milestone should the user want. 28. H3: User Control & Freedom / Severity: 1 / Found by: B The settings tab is only accessible from the upper left corner of the maps tab, and the logo isn t that prominent (relatively speaking). This makes it hard to locate and requires the user to remember where to find it. FIX : Make settings reachable from every page (or at least more visible so people remember where it is). 29. H2: Match between System and World / Severity: 3 / Found by: B, E The windy roadmap is an interesting concept, but in it s current iteration, the UI feels to reduce the timeline concept ad absurdum. The gamification of the college application process is a cool concept, but the color scheme and sign-post-clad UI for this feature feel a little young, like it s geared more towards a child audience as

8 opposed to a high schooler. FIX : Dress up the UI and color scheme a bit. 30. H8: Aesthetic & Minimalist Design / Severity: 1 / Found by: B On the calendar view page, you display headers for days of the week, even when there isn t anything to do that day. Makes it feel a little cluttered and I m not sure whether to click on the or not (i.e. not sure if they are expandable elements or empty). FIX : Don t display the header for days that don t have any tasks in them. Also, the less full this page is, the more relaxing it will feel for a stressed-out user! 31. H7: Flexibility & Efficiency of Use / Severity: 2 / Found by: B The task page entitled SAT makes it hard to understand how to edit each of the elements. Hitting the + button on the upper right is clearly how one adds a new element, but once I start filling out the details, there is only a save button: How to cancel is not super clear. FIX : Add a Cancel button to the left of the Save button. 32. H1: Visibility of System Status / Severity: 4 / Found by: B While this may have been outside the scope of the medium-fi prototype process, but thinking about state consistency when it comes to sharing tasks is important. What if my teacher adds something to my roadmap, and then edits the date of that task after the fact? If other people manage elements of my roadmap, I want to be alerted whenever anything changes. FIX : push notification sent anytime a date, time, or detail about an task/ milestone is updated by it s manager. 33. H7: Flexibility & Efficiency of Use / Severity: 4 / Found by: B The notification page doesn t allow a person to click into any of the elements (say, to add a step that has been shared with you to your calendar). This should be the interface where a user decides whether or not to add an event/ step that has been shared with them, not just a passive inbox.

9 FIX : Add an Add task button to sharing notifications and make it possible to interact with other notification types. 34. H8: Aesthetic & Minimalist Design / Severity: 3 / Found by: B Hitting the + con at the bottom of the window opens up the add a task page. It is hard to see t the choose a milestone dropdown at the top of the window because the color scheme deemphasizes this element's importance. Since it is the necessary first step in the workflow, make this more visible. FIX : Make the entire workflow of this page the same general color scheme, and make the choose a milestone element more visible so the flow of this page is easier for the user to interpret. 35. H8: Aesthetic and minimalist design / Severity: 2 / Found by: D The homescreen/roadmap view contains a couple of elements that don t seem to serve any particular purpose. This adds to an effect of what I feel might be a cluttered homescreen. Initially I was wondering if each little clip art picture meant anything, but I don t see that it adds any value to my understanding of my upcoming milestones, perhaps removing these would give a clearer picture. FIX : Remove unnecessary images 36. H7: Flexibility and efficiency of use / Severity: 2 / Found by: D In the roadmap view, the only way to get more information about each of the little circles is to click them. If I am staring at a map with a bunch of circles I wrote last month, I feel that it may be a hassle to click through each of them individually to check which step of which milestone each circle refers to. Perhaps holding on the circle could show a small description of the task, or the circles could be labeled with the step number for the milestone category, but currently the circles feel very uninformative (though I guess this might be part of the design as well) FIX : Maybe make the screen a bit bigger to begin with and have mini descriptions, and as you zoom out they disappear (kind of like Google Maps) 37. H5: Error prevention / Severity: 3 / Found by: D

10 Currently there is no confirmation on when I am entering a new milestone/step. If I make a typo or enter the wrong date and press save, I am unable to backtrack and fix this error. If the application runs as is, a bunch of erroneous milestones might pop up and cloud up the roadmap. Perhaps it should show a quick confirmation before you add/remove a milestone. FIX : Show a quick confirmation before you mess with a milestone (especially if it s something as big as deleting the entire milestone) 38. H9: Help users recognize, diagnose, and recover from errors / Severity: 4 / Found by: D On a similar vein, I don t seem to be able to recover if I do make this error. There is only an option to delete an entire milestone rather than the specific steps within a milestone. Users should probably have an option to delete a step also, and this could just be as simple as a trash can symbol next to the edit and share symbols for the steps in the milestone view. FIX : Add some sort of undo feature or a delete step feature 39. H2: Match between system and the real world / Severity: 1 / Found by: D The map, while it shows the relative order of the steps, doesn t really feel like it matches my perception of time. Do the benchmarks showing Junior Yr and Senior Yr refer to the starts of each year (i.e. September)? I think it would be good to relate this a bit more to my current state of the world by maybe putting in month indicators. Also, like we talked about in class, maybe having the default view of the roadmap be a bit more zoomed in. FIX : Maybe add some more markings on the roadmap to show the time of month (maybe grooves like a sidewalk) 40. H7: Flexibility and efficiency of use / Severity: 2 / Found by: D I think the application currently isn t too flexible in terms of scalability. As with any app, there will probably be power users and average users. The power users may want to include 100 steps in breaking down each of their 5 milestones, and I m not sure that the current roadmap would be too efficient to use as it might really be difficult to distinguish between the different steps and figure out exactly where what is.

11 FIX : Maybe if you zoom out the really close steps combine into one step (for visual purposes) 41. H7: Flexibility and efficiency of use / Severity: 0 / Found by: D It is mentioned in the simple task that you can drag to rearrange/organize tasks, but it seems problematic for the reason that each step has a set date; if I have written the PSAT to be after SAT applications, but I drag it to be before, I might have to reenter all the information again and enter a new date, which might end up being just as much work as adding a new milestone. Maybe there is a more efficient way to control the tasks. FIX : Maybe some sort of more involved way of rearranging tasks rather than just changing their relative order, maybe put it up against a calendar of some sort (although I know you guys were trying to avoid that). 42. H1: Visibility of Status / Severity: 1 / Found by: E When the user has entered the group ID, there is no button or indication from the app that it has registered the number, it simply goes to the next step (upload profile picture). FIX : Have a checkmark appear. 43. H8: Aesthetic and Minimalist Design / Severity: 1 / Found by: E Within the creating a new step screen, there is an option to add pictures. It isn t immediately obvious to the user why pictures are needed, and I think it is extra functionality that distracts from the task at hand. FIX : Remove the picture option unless justifiable 44. H1: Visibility of Status / Severity: 1 / Found by: E When a new step is created from the screen of a pre-existing step, it goes back to the pre-existing step when you click save. There is no indication of whether the step has been properly saved by the system or where it has been placed on the map. FIX : Go back to the map when clicked save and highlight the new step on the path so it is immediately visible.

12 45. H1 Visibility of Status / Severity: 1 / Found by: E When scrolling through the different functionalities of the app with the green text bubbles that teach a new user how to do things, there is no way to know when the short demo will be over. I don t know how many times I need to click to finish. FIX : Once again little circles at the bottom so you know how many more things you need to scroll through 3. Summary of Violations Category # Viol. (sev 0) # Viol. (sev 1) # Viol. (sev 2) # Viol. (sev 3) # Viol. (sev 4) H1: Visibility of Status H2: Match Sys & World H3: User Control H4: Consistency H5: Error Prevention H6: Recognition not Recall H7: Efficiency of Use H8: Minimalist Design H9: Help Users with Errors H10: Documentation Total Violations by Severity Note: check your answer for the green box by making sure the sum of the last column is equal to the sum of the last row (not including the green box) # Viol. (total)

13 4. Evaluation Statistics Severity / Evaluator Evaluator Evaluator C Evaluator Evaluator E Evaluator A B D sev % 9% 0% sev % 26.6% 21.4% 18.2% 54.5% sev. 2 25% 20% 28.6% 27.3% 9% sev % 26.7% 14.3% 27.3% 18.2% sev % 26.7% 35.7% 18.2% 18.2% total (sev. 3 & 4) 20% 26.7% 23.3% 16.7% 13.3% total (all severity levels) 35.5% 33.3% 31.1% 24.4% 24.4% * Note that the bottom rows are not calculated by adding the numbers above it. 5. Summary Recommendations In general, great job! The functionality of the application is really solid and a lot of the usability errors were minor and fairly surface level. In other words, the issues we found were mostly cosmetic or dealing with consistency across the application/platform itself, rather than a fundamental issue with either the functionality of your application or its usefulness. Two of the bigger issues we found were making sure that the naming conventions were intuitive and the aesthetic is not condescending (i.e. childish). In other words, making sure that the UI is more intuitive and catered towards your target audience. Severity Ratings 0 - don t agree that this is a usability problem 1 - cosmetic problem 2 - minor usability problem 3 - major usability problem; important to fix 4 - usability catastrophe; imperative to fix

14 Heuristics H1: Visibility of System Status Keep users informed about what is going on H2: Match Between System & Real World Speak the users language Follow real world conventions H3: User Control & Freedom Exits for mistaken choices, undo, redo Don t force down fixed paths H4: Consistency & Standards H5: Error Prevention H6: Recognition Rather Than Recall Make objects, actions, options, & directions visible or easily retrievable H7: Flexibility & Efficiency of Use Accelerators for experts (e.g., gestures, kb shortcuts) Allow users to tailor frequent actions (e.g., macros) H8: Aesthetic & Minimalist Design No irrelevant information in dialogues H9: Help Users Recognize, Diagnose, & Recover from Errors Error messages in plain language Precisely indicate the problem Constructively suggest a solution H10: Help & Documentation Easy to search Focused on the user s task List concrete steps to carry out Not too large