During a course on Human Computer Interaction, we were asked to evaluate the usability of a new version of a website that all UH students use on a regular basis: MyUH, a gateway page to many student services including course registration, course availability, and tuition payments. We assessed the nearly-finished version in February, and the new site officially replaced the old version in early April. We were asked to address the developers of the new website in our reports.
The new user interface for MyUH is bold and highly customizable, but also confusing and disorganized. While I see serious flaws in the interface, the good news is I believe that my greatest concerns can be addressed by implementing relatively small iconographic and organizational improvements, which would not require drastically rethinking the new interface. I am confident that the new site can be superior to the old in ways that are both clear and meaningful to the average user – but it’s not there yet.
I began my analysis of the new site a few user tasks and a few usability goals in mind, and evaluated the experience based on Nielsen’s heuristics. Those heuristics are 1) visibility of system state, 2) match between system and the real world, 3) user control and freedom, 4) consistency and standards, 5) error prevention, 6) recognition, not recall, 7) flexibility and efficiency, 8) aesthetic and minimalist design, 9) help users recognize, diagnose (evaluate) and recover from errors, 10) help and documentation.
I had three specific user goals in mind to begin with as a test case: 1) determine what classes I should take next semester, 2) pay tuition, and 3) check on degree progress. But, regarding just the MyUH portal, these goals are actually quite similar in their execution, so I believe it will actually be more helpful to define a single, more generalized user goal (though I will return to the specific examples in my analysis). That goal is, in two parts: a) find the site I need to execute a task via a link on the MyUH portal, and b) determine if all of the information/functionality I need is present within that site, or if other complimentary information/functionality is found via a different link.
Since the MyUH portal is a gateway, I focused on utilitarian aspects of the usability and experience goals. To that end, I prioritized 1) efficiency of accomplishing the user’s goal, 2) learnability of the system (to improve initial and subsequent efficiency, as well as to improve the emotional experience by decreasing the user’s frustration), 3) effectiveness at accomplishing the user’s goals, 4) enjoyability of the experience. I would also add safety as a goal, if an private information would need to be stored securely within the MyUH website – but so far as I can tell, the login credentials are the only sensitive information, and that may be handled exclusively within a separate system. I would recommend the designers follow, roughly, these same priorities.
I will organize my feedback around a few key and broad-reaching issues, that may each involve several different tasks, goals, and heuristics. I hope this will highlight the importance of addressing these usability barriers, but also make clear that it is feasible to address these issues in a satisfying way.
Unless otherwise noted, my feedback is primarily in regards to the main landing page.
The first issue, which is also the most ubiquitous and problematic, is lack of hierarchy or grouping. Each link exists as its own card, without being adjacent to related or similar cards. For example, if you find the card “Class Availability (Manoa),” that does not help the user find the similar card “Class Availability (Hilo)” if that is actually the link they need, nor does it help find the related card “Register for Classes” which you would often need in combination with checking for class availability. Ideally, these should all be grouped together. This is a huge barrier in bridging the gulf of execution, presenting problems for the heuristics of recognition over recall, poor efficiency, presents a poor match between system and the real world, and has poor consistency. These problems would slow down users significantly, but would be partially mitigated over repeated use by skilled users, since users can mark favorite resources. Most troubling, however, the lack of grouping presents a major barrier in helping users recognize and recover from errors, specifically if the portal takes them to site “a”, but the information/functionality they actually need is in site ”b” (or a combination of “a” and “b”). Since I am familiar with the old MyUH portal, I know roughly which websites and how many different sites I need to find in order to accomplish a given task. For an incoming freshman, however, hours could be wasted on the “Class Availability” pages searching for a way to register for classes, without ever realizing there is a different system for registration. This needs to be fixed.
I should note that the filters and searchability of the new portal are improvements on the old, owing to the flexibility of the cards design. But that flexibility has also lead to the problem of poor organization. The simplest solution would be to introduce a default ordering of cards, 1 through 97, that controls the order when no filter have been applied. That way, there will always be some logical organization to help navigate the information.
Additionally, I would recommend larger cards (roughly twice as big) that contain more than one link apiece. This would allow for rigid groupings of extremely related resources, such as course availability and course registration. Keeping the cards fairly atomized would still be possible (it would make sense to me, for example, to still have separate class/registration cards for each campus), but in this case, the similar cards should still be adjacent by default.
The second issue is related, though more minor than the first issue, and I only discovered this problem in regards to the “Register for Classes” card. This card actually links to a sub-menu of registration links. This is a failing of consistency, in that this card behaves differently than most, and a failing of visibility since there is no indication that this card behaves differently until it is clicked. The biggest problem is that not all of the links available on this sub-menu actually relate to “Registration for Classes” so they would be hard to find! This is a big problem for visibility, error prevention, and error recovery. I believe the best fix is my suggestion above for larger cards with more than one link apiece – that way, no sub-menus would need to be used at all, eliminating the problem entirely. Ideally, the main landing page could be the only page of the new MyUH portal. I believe the new system is flexible and customizable enough to make that a practical design choice, without making the page too crowded. The designers deserve credit for making that a real possibility. Take advantage of the new system’s strengths!
Thirdly, the icons chosen for most of the cards don’t convey much information, although some are effective. For a good example, the eTravel icon is an airplane – perfect! This aids in recognition over recall, and provides good mapping between system and the real world, but many of the icons fail in this regard. Take for example the icons for “Check Status of UH Username” (a person using a tablet), any “Class Availability” card (a person’s hand using a tablet), and “Banner Student Information System (SIS)” (a computer monitor). All three of these are very different systems with different purposes, but the icons are virtually interchangeable because the icon does not represent the task the site will help the user achieve. Consequently, these icons are not memorable, and not informative, leading to poor recognition, poor efficiency, poor mapping, and even a more hum-drum aesthetic. These icons should be changed to some icon representative of a real-world task or activity (other than using a device). Ideally, with some consideration, an intuitive icon can be devised. But even if the icon choice is mediocre or based in cultural mapping (and therefore not intuitive or informative for some users), the icon should at least be more memorable, to aid in learnability in the system, and improved efficiency over time. A third category of icons is the logo of the card’s service or system (examples Gmail and Laulima). In the case of Gmail, the logo is so recognizable that nothing else would make sense. For Laulima, a proprietary system, the same principles should apply – as is, this is a good illustration of an icon that is memorable without be intuitive; it is okay, but it could be better.
Fourth, I believe the “favorites” section should be pre-populated with at least one or two cards. The user would still be able to remove these cards, but this will rapidly highlight the key advantages of the new portal, and make sure that first-time users will be able to find and access the most critical systems – so that incoming freshman will be able to register for classes, and pay tuition on time, for example.
All in all, I see the framework for a system that is improved across the board. In radically changing the design of the portal, some usability issues have been addressed in a clever and effective way, allowing great customization and flexibility for the user, and improved efficiency for experienced users that take advantage of those features. But in improving the old, serious new issues have been introduced. These should be addressed before final launch. Not only do I believe fixes to these issues are feasible, but I am excited for the final version!