uPortal UX Walkthrough - Allison
(Accessibility and usability heuristic evaluations combined with cognitive walkthroughs)
Evaluation Completed by: Allison Bloodworth
URL: http://my.ubc.ca....
Date: 9/13/07
Heuristic reviews and cognitive walkthroughs were performed on a MacBook Pro at 1600x 1200 resolution (most common resolution) and Dell2001FP colors (most common novice resolution; if graphics work at this resolution, they'll work in higher resolutions) using OS 10.4.10 at a T-1 connection rate.
See UX Walkthrough Heuristics for heuristics used in this evaluation.
Scope of Walkthrough
• See uPortal Evaluation Plan
User profile(s) and context of use:
Profiles will generally only be used for the cognitive walk-through, not the heuristic evaluation. However, users may be set up with a certain role in the system (e.g. student, instructor) for the heuristic evaluation.
• See Sakai Personas
Scenarios
Scenarios will generally only be used for the cognitive walk-through, not the heuristic evaluation. However, it is fine to use these scenarios for the heuristic evaluation if it is helpful to evaluators in figuring out how to walk through the application. See uPortal Content Management Scenariosfor a list of all possible scenarios. Evaluators will likely only cover some of the scenarios, in one of the roles, in their individual evaluations.
• General Overview (heuristic evaluation)
• Finding.....
• Scenario 3
• Scenario 4
• Scenario 5
Assumptions for this evaluation:
• [List any additional assumptions used in evaluation]
Positive Findings
All positive findings, from both the heuristic evaluation and the cognitive walk-through, should be placed in this section.
Usability Positives |
Tool |
Evaluator |
---|---|---|
Nice affordance on the ^ which indicates a portlet can be expanded or contracted |
portlet container |
AB |
In the NewsReader, nice icons and pop-up messages for 'Add Feed,' 'Add Folder,' etc. |
NewsReader |
AB |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Accessibility Positives |
Tool |
Evaluator |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Summary of Usability & Accessibility Issues Found
All usability & accessibility issues found, in both the heuristic evaluation and the cognitive walk-through, should be placed in this section.
Priority Legend:
High = Task cannot be completed
Medium = Task completed with significant effort and failed attempts
Low = Task completed with minor complications and/or annoyance
Usability Issues |
Principle |
Link to screen shots |
Priority |
Suggestions for solution |
Tool |
Component Identified? |
---|---|---|---|---|---|---|
When session times out, portal changes to two tabs, which is disconcerting, and doesn't give the user a message about what has happened |
Visibility of System Status |
|
Low |
Give user a message about what has happened (e.g. the session timed out and they need to log in again). |
portal |
Error Message Container |
When the login fails, it is difficult to see the error message because it is styled in exactly the same manner as the field labels. It is also strange that the error message is both at the top and bottom of the "Login" box. |
Visibility of System Status |
|
Low |
Create a container for the error message which will be used as a standard across the portal/portlets |
portal |
Error Message Container |
When you expand or contract a portlet using the ^ icon (or it seems, possibly take any action on a portlet), the page shifts downward so that this portlet is at the very top of the page, which is disconcerting to the user. |
Consistency & Standards |
|
Low |
Keep the page where it is. |
portal |
|
When a user expands a portlet using the 'window' icon, they are 'taken out' (at least that's what they are told) of the portal without warning, and may not understand where they are. The 'Return to portal' link, which takes them back, is hard to see and uses terminology they may not understand. |
Consistency & Standards, Match between system and the real world |
|
Medium |
Use clearer text to explain what happens in the pop up which comes up when a user mouses over the 'window' icon. Use text and visual design in the wrapper for the expanded portlet to make it clearer the user is still in the portal. Make the 'Return to portal' link much more prominent, and perhaps explain more about what that means. It looks graphically like you are sort of in the portal, so its difficult to understand exactly what that means. And is that distinction even helpful to the user? |
portal |
Container for expanded portlets |
When the user expands a portlet, the container on the upper left groups what appears to be the title of the portlet, e.g. "Student Services Center" and the 'Return to portal' link together in a way that almost makes them look like breadcrumbs and is not at all prominent. There is also an issue with the graphic design where the words are not centered vertically on the background. |
Consistency & Standards |
|
Medium |
Move the portlet title to the center of the screen, and disconnect it from the 'Return to Portal' link. This should also help to make the 'Return to portal' link more prominent. |
portal |
|
In certain portlets (e.g. Student Services Center"), users have to perform another click to get to the actual student services center. |
Flexibility & Efficiency of Use |
|
Low |
Put more than one link in a portlet window. Save valuable portlet real estate by aggregating these links. A single link should not have its own window. |
portlets |
|
When the user clicks the "X" button they get a message asking , 'Are you sure you want to remove this channel,' with no explanation of what that means, or how to reinstate it if the user changes their mind. |
User Control & Freedom |
|
Medium |
Explain this in the confirmation message. |
portal |
Did you really want to do that? (w/optional help) |
When the user clicks on certain links (e.g. news article links in the News Reader, the Help icon), they are taken, without warning, to a new window. This could be exceptionally disconcerting to users of screen readers. |
Consistency & Standards, User Control & Freedom |
|
Medium-Low |
Give an indicator when a link will open a new page. |
portal |
|
If the users are in the middle of one action, e.g. editing the NewsReader, and go to another tab, when they come back to the NewsReader tab the action has not been canceled and there is no visual indication the user is in a different 'mode.' |
Consistency & Standards, Recognition Rather Than Recall |
|
Medium-Low |
Indicate that the portlet is in an edit state visually and with mark-up that will make this obvious to a screen reader. Consider asking whether the user wants to cancel an in-progress action if they navigate to another tab. |
portal |
|
When editing the newsreader, it is very difficult to see the instructions that say 'Click on Ok to confirm your changes..." |
Consistency & Standards |
|
Low |
The visual treatment (e.g. color, shape, alignment) of all the buttons (and even the text) on this page is too similar. There should not be any need for instructions like this if the page visual design and flow (for screen readers) made it clear that it was necessary for the user to take an action. |
NewsReader |
|
In the NewsReader "My Feeds Subscriptions" folder it looks like the icons (e.g. the folders and RSS icons) should be clickable. However, only the the labels are clickable for the icons which display by default. This is even more inconsistent because you activate other icons (those which allow you to perform actions on the current folder or feed) by clicking on them. |
Consistency & Standards |
|
Medium |
Make the folder & feed icons clickable. |
NewsReader |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Accessibility Issue |
Principle |
Link to screen shot |
Priority |
Suggestions for solution |
Tool |
Component identified? |
---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Cognitive Walkthrough Worksheet
This section should be used by evaluators to keep track of the steps & screens they followed through the application in the cognitive walk-through. Any positive results or issues found should be included in the two sections above.
Scenario 1: Brief description
# |
Step |
Screen |
Comments/issues |
Principle |
Suggestions for solution |
---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Scenario 2: Brief description
# |
Step |
Screen |
Comments/issues |
Principle |
Suggestions for solution |
---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Scenario 3: Brief description
# |
Step |
Screen |
Comments/issues |
Principle |
Suggestions for solution |
---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Scenario 4: Brief description
# |
Step |
Screen |
Comments/issues |
Principle |
Suggestions for solution |
---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|