uPortal Walkthrough - Student Email Scenario

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

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?

(plus)
Logo and institution identification confirms the overall property and location

Visibility of system status

 

 

Page Header

(plus)
Standard portal layout and feel (tabs, columns, boxes of content)

Consistency and standards

 

 

 

(plus)
Unauthenticated state can be inferred from the presence of the login form and lack of personalized content

Visibility of system status

 

 

 

(minus)
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

(minus)
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

(plus)
Help icon symbol immediately recognizable as help

Consistency and standards

 

 

Portlet Container/Controls, Help

(minus)
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

(plus)
Presence of Help link in top right corner

Help and Documentation

 

 

Help

(minus)
Help link needs to be more prominent (singular link, color blends, far right location)

Help and Documentation

 

 

Help

(plus)
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?

(plus)
Match between registration and login term (CWL)

Consistency and standards

 

 

Login

(plus)
Standard login form

Consistency and standards

 

 

Login

(plus)
Documentation/explanation of CWL and login form

Help and Documentation

 

 

Login

(plus) (minus)
Help links are present in forgot password, contact us, and help desk

Help and Documentation

 

More prominence to the login help links

Login

(plus)
Notation of downtime and instructions for how to avoid error/lost information

Error Prevention

 

Probably should be highlighted as a warning

Login

(plus) (minus)
Human readable error statement when username/password do not match

Help users recognize, diagnose, and recover from errors

 

 

Login

(plus) (minus)
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?

(plus)
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

 

 

 

(minus)
Difficult to recognize portal system tasks (header links)

Recognition rather than recall

 

Add icons, use more familiar labels

Toolbar

(minus)
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

(minus)
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

 

(minus)
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

(plus)
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

 

 

 

(plus)
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

 

 

 

(minus)
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

 

 

 

(minus)
Try the other button (maximize) to see if it works and what it does. Discover the focused view.

Match between system and real world

 

 

 

(plus)
Return to portal link present

User control and freedom

 

should be more prominent, use the term "home" instead of "portal"

 

(plus)
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?

(plus)
Webmail tab in the main navigation is now selected

Visibility of system staus

 

 

 

(plus)
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

(minus)
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

 

(plus)
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

(minus)
Check for mail icon is a bit puzzling

Match between system and the real world

 

Use a more conventional icon (envelope, for instance)

 

(minus)
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

 

(plus)
Note quotas, both number of emails and overall storage space - helps the user know the boundaries

Visibility of system status

 

 

Quotas

(plus)
Notice a help icon in the top left

Help and documentation

 

 

Contextual Help

(minus)
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

(minus)
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.

 

(minus)
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.

 

(minus)
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.

 

(minus)
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

 

(plus)
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

 

(minus)
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

 

(minus)
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.

 

(plus)
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

 

(plus)
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

 

 

 

(minus)
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.

 

(plus)
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

 

 

 

(plus)
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

 

 

 

(minus)
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?

(minus)
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

(plus)
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)