User Interface Design Pattern Library Project


Home

Work Distribution

Assignment 1
Proposal

Assignment 2
Revised Problem Statement
Persona Explanation
Personas and Goals
Task Analysis
Appendices


Assignment 3
Scenarios
Persona Revisions
Task Revisions
Comparative Analysis
Initial Design Ideas

Assignment 4
Prototype
Write-up
Appendices

Assignment 5
Write-up
Interactive Prototype
Presentation (ppt)

Assignment 6
Heuristic Evaluation for UC HIPO

Assignment 7
Write-up
2nd Interactive Prototype
Appendix

Assignment 8
Write-up
Appendix

Assignment 9
Write-up
Presentation (ppt)
Final Interactive Prototype

Heuristic Evaluation of UC-HIPO

Summary Findings

Overall the application needs to improve consistency in labeling, layout and user interface components. This will improve the user experience significantly. The application also needs to provide more feedback to the user about the state of the system. In particular, it would help to provide confirmation after user actions. The violations described below provide more detail and context for these findings.

Number of Violations
General
5
Scenario 1
9
Scenario 2
5
Scenario 3
9
Total
28

General Issues

1. [H1 Visibility of system status] (Severity 4)
The sequential circular images at the bottom of each page, indicate that there is some process flow involved between these tasks.  However,  there are no real visual cues other than the preview table that they are connected.  As the user progresses through the stages, there is no feedback on what he/she is doing or what quiz he or she is editing.  Additionally, the breadcrumbs on the top of the page  signal something totally different -- that there are two levels that don't have a sequential connection to each other.

2. [H3 User control and freedom] (Severity 3)
There are no clearly marked exits when the user is completing tasks.  For instance, when the user changes templates to edit the metadata template,  there is no clear exit or cancel to the operation. 

3. [H4 Consistency and Standards] (Severity 4)
There is no consistent placement of headers, forms or action buttons on each page. Specifically, when moving from one screen to the next, the navigation/action options (edit template, switch template) are inconsistently placed on the page and the design treatment changes. This is confusing as it forces the user to reorient themselves to the page and find where the options are to work with the data. For a specific example, the “edit” link changes location and treatment between the two screens.

4. [H7 Flexibility and efficiency of use] (Severity 3)
It is unclear what the “prev | next” links correspond to. If this is related to the clickable graphic at the bottom of the page as a way of moving the user through a process, consider a UI pattern called the process funnel in which all steps are visible and the current step is highlighted and you have only one clickable element to move through the process. Also, Navigation components are rarely at the bottom of a page. It needs to be visible to remind users where they are and allow them to easily click to the next step. The current location is not intuitive and will move off the page if it ever gets longer. 

5. [H10 Help and documentation] (Severity 2)
The help button at the top right is clear, but it isn't clear that it will provide contextual help for the task stage the user is in.  There should be help or infomation for the particular items on the page -- 'using template'. 

Scenario 1: Bookkeeping Metatdata

6. [H1 Visibility of system status] (Severity 3)
Once the user sets a ‘default template’ for a quiz, there is no indication of that. The form option disappears. Which templates are set as defaults should always be visible to the user.

7. [H1 Visibility of system status] (Severity 2)
Once the user sets the default, the screen changes to something else but there is no confirmation of what happened. The interface should provide some message like “Default set” or “Changes Saved.”

8. [H1 Visibility of system status] - (Severity 4)
On the Bookkeeping Metadata stage, there are no cues about what this page is for.  The user is dropped into a "Daily Quiz" template, but a user would no idea what that means.  There is a home page above this page, and I hope that there's a dashboard on that page with more information about the use of templates and default settings.

9. [H1 Visibility of system status] - (Severity 3)
There is no visual connection between 'changing the template' and adding bookkeeping metadata.

10. [H2 Match between system and real world] (Severity 3)
Language like "change the template" does not communicate what task it is associated with.  Additionally, the use of the terms "bookkeeping" and "metadata" are both confusing.  I associate bookkeeping with accountants, so in this context "bookkeeping metadata" to me means information about an account, etc

11. [H4 Consistency and Standards] (Severity 2)
The "Daily Quiz" form is laid out differently on the "switch template" screen, which makes it seem like they are different templates.

12. [H4 Consistency and Standards] (Severity 3)
"Edit", "Delete", and the "Set As Default Template" links are unusual because usually actions like these are buttons rather than links. Do these links lead to pages for editing or deleting or does the action take place right away? The "|" symbol between both sets of choices should not be the hyperlink color.

13. [H6 Recognition rather than recall] (Severity 2)
On the Generic CS3 Quiz form, pre-populate the “Date Modified” field with the current date to minimize burden on the user.

14. [H6 Recognition rather than recall] - (Severity 3)
The action of changing the template to provide metadata on another quiz should not be in a list amongst actions for the same template.  It should be moved up to the same level as "using template: DailyQuiz" because these actions are switching state between templates while the other actions pertain to the template a user is in.

Scenario 2: Instructor Notes

15. [H4 Consistency and Standards] (Severity 3)
Standard form layout and functions are not used. The cancel button is at the top of the form, the save button at the bottom. These elements should be together.

16. [H4 Consistency and Standards] (Severity 3)
The cancel button does not appear on other forms. This should be consistently applied throughout the application.

17. [H2 Match between system and the real world] (Severity 4)
It is unclear what the difference is between “Need to Fix” and “Need to Edit.” Labels need to be more clear. All fields related to editing the same record should be available on one page so users won’t have to switch back and forth.

18. [H4 Consistency and Standards] (Severity 3)
On the Instructor Notes “Need to Edit” page, the breadcrumb does not include the current page, and the previous Instructor Notes page isn’t hyperlinked. This make it harder for the user to know her current location or back up to the previous step.

19. [H8 Aesthetic and minimalist design] (Severity 2)
Minimize clutter by not repeating “Need to” in every option on the menu. If you do, then capitalize the word “to” consistently.

Scenario 3: Cognitive Learning Metatdata

20. [H2 Match between system and the real world] (Severity 1)
The colored bar moves vertically as the list expands. This might falsely indicate something is going on with the data on the screen. The bar should be in a fixed position unless it does signify some change on the screen.

21. [H4 Consistency and standards] (Severity 3)
It might be clearer to put the preview window on the right side of the page. Since all the other actions proceed from left to right, it’s inconsistent to have the results of actions show up on the left side of the page.

22. [H5 Error prevention] (Severity 4)
It is unclear what the goal of this screen is. What are the actual tags being applied to the quiz questions? The labeling and instructions need to be more clear.

23. [H5 Error prevention] (Severity 3)
It is confusing to first click a word and have the + symbol become a link later. This is very difficult to see and it is unclear what happens when you do this beforehand.

24. [H7 Flexibility and efficiency of use] (Severity 4)
The task flow is not clear on this page. The relationship between the columns on the page is not clear. For instance, does each of the steps of the quiz have the same optional elements in the learning spectrum? If so, there should be a more efficient way to associate these tasks with actions.

25. [H7 Flexibility and efficiency of use] (Severity 2)
This scenario requires a large number of clicks to get through it. It would be ideal to minimize the steps required to tag quiz questions. Reduce clicks by allowing the user to edit directly within the context of where they are clicking instead of a separate space on the page for all editing functions.

26. [H7 Flexibility and efficiency of use] (Severity 1)
No clear affordance on the "Modification" link. Probably better to have a set of links next to it that say "edit" or something like that.

27. [H7 Flexibility and efficiency of use] (Severity 1)
The blue panel displays the same text as what is in the edit box as well as what is in the Learning Spectrum list. This seems redundant and potentially confusing. Allow the user to edit the phrase directly and once instead of displaying it as editable and not editable in the same panel.

28. [H8 Aesthetic and minimalist design] (Severity 1)
The rainbow of color on this page seems to be clutter unless it conveys some information. A rainbow of clutter is really attention grabbing and should only be used if it helps the user somehow.