Walkthrough Setup

Evaluation Completed by: Gary Thompson and Paul Zablosky
Date: August 22, 2007
Environment/URL: MyUBC uPortal 2.5.3

Scope of Walkthrough

uPortal: Public/Guest page, Login, UBC WebMail, Logout

User profile(s) and context of use

Persona: Ed McClellan, Undergraduate
Ed is a first time user of the portal. Ed has just completed a non-portal registration process and has been assigned a UBC CWL (student) account and an email account through the registration process and is familiar with those terms. Ed expects to access his UBC email via the portal, but does not know the scope and ability of the portal in relation to his being a student at the institution. Ed is accessing the portal via his laptop in a corner of the student union building through the wireless network.

User Expectations & Conventions

• Portals: MyYahoo, Facebook
• Email: Microsoft Outlook, Gmail

Scenarios

Ed has just completed his first-time student registration process and is now going to the portal to check his institution email for the first time. Ed is also curious about what online services UBC has to offer and what the university portal is like.

Walkthrough

Public / Guest Page

Usability Issues Principle Priority Suggestions for solution Component Identified? Logo and institution identification confirms the overall property and location Visibility of system status     Page Header Standard portal layout and feel (tabs, columns, boxes of content) Consistency and standards       Unauthenticated state can be inferred from the presence of the login form and lack of personalized content Visibility of system status       Indication of current tab was not immediately clear. First pass assumption would be that the colored tab (About MyUBC) is the selected tab. Primary first position of the actual selected tab (Main) reinforces it to be the selected tab. Continuous color and association (white tab with white page background) of the actual selected tab reinforces it as the selected tab on further investigation Visibility of system status     Main Navigation/Tab Navigation Channel icons mostly unclear (compare to Yahoo). Shader icon is likely to be recognized but is in reverse. i and box icons are not immediately known. Consistency and standards     Portlet Container/Controls Help icon symbol immediately recognizable as help Consistency and standards     Portlet Container/Controls, Help Discontinuity between presence of channel icons of the two channels on the Main tab; not sure why there are not the same controls on the second channel. This causes some discomfort, especially since the second channel does not have a help icon Consistency and standards     Portlet Container/Controls Presence of Help link in top right corner Help and Documentation     Help Help link needs to be more prominent (singular link, color blends, far right location) Help and Documentation     Help Help and documentation available through the news on the Main tab and the content on the About tab. Were a user to read through this content, it would help shape understanding and expectations Help and Documentation     Help Login Usability Issues Principle Priority Suggestions for solution Component Identified? Match between registration and login term (CWL) Consistency and standards     Login Standard login form Consistency and standards     Login Documentation/explanation of CWL and login form Help and Documentation     Login Help links are present in forgot password, contact us, and help desk Help and Documentation   More prominence to the login help links Login Notation of downtime and instructions for how to avoid error/lost information Error Prevention   Probably should be highlighted as a warning Login Human readable error statement when username/password do not match Help users recognize, diagnose, and recover from errors     Login Login error message is properly associated with login form Help users recognize, diagnose, and recover from errors   Error message needs to be labeled as such, and made more identifiable (use a different color than is used on the input labels) Login Did not further assess the login help as it is specific to the institution and not to the portal

Home Page

Usability Issues Principle Priority Suggestions for solution Component Identified? Indication of logged in status by non-presence of login form, change in content and number of tabs, and additional content in header (specifically welcome/personal information and logout link) Visibility of system status       Difficult to recognize portal system tasks (header links) Recognition rather than recall   Add icons, use more familiar labels Toolbar Survey promotion appears in an unexpected place. Would expect to see the survey promotion in the content rather than associated with system tasks Aesthetic and minimalist design   Create a promotion area in the content, ensure system tasks are clear and readable Promotion/Advertisement Headers and banner graphics use a large amount of screen space, not available for user-selected content Aesthetic and minimalist design   Create a reduced-size version of the Guest Page graphics and banner   Login name is not displayed, and is not apparently available. CWL person name is displayed, possibly exceeding privacy comfort limits of user Recognition rather than recall, Visibility of system status   Add a function that user can invoke to display login name, person name, and login time/date, duration etc. Mechanism for popping up status information, but not leaving it on the screen Noticed a new channel icon, the X, recognizing the ability to remove content, and some greater awareness of customization of the content and layout Recognition rather than recall       Clicking the X icon on a channel brings up a confirmation to remove or cancel; this potentially is inefficient if truly desiring to remove (adds one more click) Error prevention, Flexibility and efficiency of use       Trouble! Clicking the X and confirming desire to remove a channel did not result in expected behavior (channel was not removed). Appears that clicking the X produces no result, but there is no error message. Comes across as broken functionality or system problem. I must question the competence of the overall portal and I am less inclined to explore. I must question my assumptions about whether or not I can really customize my portal. Error prevention, Consistency and standards, Help users recognize, diagnose, and recover from errors       Try the other button (maximize) to see if it works and what it does. Discover the focused view. Match between system and real world       Return to portal link present User control and freedom   should be more prominent, use the term "home" instead of "portal"   Get back to task of checking mail. Scan tabs, click Webmail. Match between system and real world

Webmail

Usability Issues Principle Priority Suggestions for solution Component Identified? Webmail tab in the main navigation is now selected Visibility of system staus       Webmail tabs are a familiar navigation mechanism are have recognizable labels (inbox, compose, folders, address book) Match between system and the real world, consistency and standards     View Navigation No email in the inbox made the view less recognizable, but a message indicates that I have zero mail messages Visibility of system status, Recognition rather than recall, Aesthetic and minimalist design   Greater readability of the status message by increasing its prominence (remove other controls and actions that are only needed when there is email in the inbox, use more white space, indicate notice with an icon   Mail actions are noted, like delete and check for mail, because of their grouping and use of icons (trash can, for instance) Match between system and the real world, consistency and standards     Toolbar Check for mail icon is a bit puzzling Match between system and the real world   Use a more conventional icon (envelope, for instance)   Unsure of the difference between delete and delete permanently; assume that delete will move to a deleted folder and that delete permanently will remove the email entirely, but this is not clear Error prevention   Have only one delete action, move delete permanently action to the Deleted folder actions   Note quotas, both number of emails and overall storage space - helps the user know the boundaries Visibility of system status     Quotas Notice a help icon in the top left Help and documentation     Contextual Help Help link uses the same ? symbol, but is in a different location and uses a different visual treatment; confusing overall - still aware that it is the help, but unsure why I am experiencing help in different locations Consistency and standards   Follow platform standard for help location and treatment Contextual Help Notice a new pencil icon has appeared on the channel title bar, not sure what this is supposed to do or why it has shown up in this context. Alt text reveals "settings". Clicking the icon loads the Webmail settings view. Scan reveals mail settings, primarily from the content, labels, and title. Consistency and standards, Recognition rather than recall   Settings should appear in context and put with other Webmail views (inbox, compose, folders, etc.). Use a clearer view title.   Settings view: confusing first content is "YesNo" with no context; appears to be an error - this increases my perception that the portal is not competent Error prevention   Ensure this "code leak" gets plugged.   Settings view: interface is cramped and jumbled, making it hard to read and understand Aesthetic and minimalist design   More closely associate the form input labels to the inputs and provide more space and readability.   Settings view: notice filter function. Confused about the initial filter presentation - not sure if the filter inputs indicate an active filter or not Error prevention   Present "add filter" inputs only when user starts an add filter workflow   Form submission buttons are consistent with previous experience on the login form - same visual formatting Consistency and standards   Would be even better recognition and error prevention if the buttons were default standard submit button formatting   Canceling out of settings took us to focused view rather than the tab view. Settings now appears as a link at the top, the icon doesn't match - this is another subtle undermining of the portal's competency. Consistency and standards   User should be returned to the view/mode they started from to complete the flow   Click through the views, not much to interact with since there is no email or contacts. Overall a reasonable visual presentation, but fairly clunky - not drawing me in or producing desire to use the interface, more subtle undermining of the portal's competency (expectations of MS Outlook or Gmail - more professional polish) Aesthetic and minimalist design   Use a standard grid, give more breathing room, use better icons, etc.   Try sending a test email via the Compose view. Good confirmation messages, again formatting could be better. Visibility of system status   More clearly identify messages   Assume Ed knows to click Check Email, now get the Inbox view with test email listed. Visibility of system status, Match between system and the real world       Icon legend at the bottom is distracting and confused as actions Aesthetic and minimalist design, Help and documentation   If the icons are not immediately recognizable, they should be changed; if they are, the legend is not necessary. If determined to still be needed, the legend should be moved to the help.   Click email title link to view message, get read view as expected. Familiar labels and email address formats. Note that the quota information updated Visibility of system status, Consistency and standards       Try the Delete Permanently link. Confirmation dialogue appears, confirm delete. Still not fully sure of the difference between Delete and Delete Permanently, but works as seems expected and returns to Inbox showing 0 messages Visibility of system status, Error prevention       Noted empty Address Book and no import option,; therefore Ed assumes adding contacts is a manual process and will be a headache by duplicating an already existing address book in another application - likely will not go through the effort of duplicating address book entries here unless there is an easy means of doing so; disappointment at the lack of import ability and another subtle undermining of portal competency Flexibility and efficiency of use   Add import/export and/or sync functionality   Summary: Ed decides that the portal webmail is usable - "I can send and receive email" - however, he doesn't like or enjoy the interface - "If I must use it I can, but I prefer and will use Gmail for everything else. It would really be cool to get my institution email through Gmail, because now I have two places to check mail."

Other Interaction

Ed might consider leafing through the other tabs to see what other content and functionality is available to him; in this review he does not

Logout

Usability Issues Principle Priority Suggestions for solution Component Identified? It is possible depending on context of portal access, that Ed might simply shut down the browser without logging out. Even though it is Ed's personal laptop, Ed is familiar with systems like Gmail and Yahoo that have login and logout actions and therefore looks for the logout "Banner-blindness" to the footer instructions to logout - dismissed it as copyright stuff that I don't need to read. User control and freedom, Match between system and the real world   Login/Logout notes and instructions should be associated with the login interaction. As help or warning for the user, this message should also be displayed as a notification that the user can remove when he/she is familiar with the instructions Login Logout link is findable, though not immediately prominent. Expected behavior returns Ed to the public guest page. System status reinforced by the appearance of the login form and recognition of guest content. Visibility of system status, User control and freedom   More association of logout to user identity, clearer "emergency exit". Login Navigate away from MyUBC to Facebook.

Accessibility

Guest / Login

B - surface up links in the login box
B - increase font size, too small for visually impaired
C - tested change in font size, if user has custom stylesheet or screen magnifier; does okay for a webapp, but has some issues - larger font moves tabs around, content shifts
C - tabs visually break at 4-5x magnification
C - + for focus starting in the login form
C - tabbing through page; loses focus in certain places in the tab order, tab order should be more logical and obvious
G - when lost in the tab order, hit Enter and minimized the news channel - with no visual indicator, it seemed to suddenly remove the content of the channel
C - had no content in the News channel in Firefox
C - links should be more contextual than "here" (e.g., click here)
C - tab order is confused by the channel icons/controls; removing unnecessary features would be good (e.g., shade/unshade)

Login

C - aside from the color, the error message is not otherwise labeled as such (should test with a screen reader and see if the error message is prominent enough)
C/B - red color of the error message matches the form input labels - should not use the same color for error messages as normal content

Home

B - preferences not clear, header information not clear (e.g., header links not formatter or underlined)
C - tab order starts with the header/system links rather than content
C - term "webmail" should be simplified to "mail" for greater recognition and clarity
C - lack of quick navigation features (no skipping, much tabbing to get to certain functions)
C - basic tab ordering is decent
C - would be good to have a function to tab-cycle through the portlets

Sidebar

P - suggested clicking on the Student Service Centre link; this launches a new window and loads content
C - similar branding and interface, enough similarity to make the connection, but clearly is a break from one interface to another
C - communication of when leaving the portal (or returning) is important
C - signaling the spawn of a new window

Webmail

C - two sets of tabs is troubling
C - chrome distracting (and unnecessary?) when there is only one channel
P - suggested looking at the focused view
B - not what the user expects
C - loss of main navigation disturbing
C - settings now more obvious
C - focused view could be more focused (less header, extraneous information) and tabbing gets quickly into the content
C - not apparent what all the tasks on the task bar do or are related to (initially recognized it to be a legend)