Friday, March 17, 2017

Recommendations to Improve the Usability of Enrol

By Abdulaziz Algablan,

Rabaska, which was the course registration system at the University of Ottawa that had been used for years by students, was permanently shut down prior to the fall semester of 2016. Enrol, which is an installation of Peoplesoft Campus Solutions, is currently part of UOCampus and has replaced Rabaska. Enrol offers a new and wanted feature: a class’ waiting list. Previously, classes suffered from students who drop a course after attending few classes; preventing other students who are interested in a course from getting in. This is the good part, on the other hand, the newly adopted system (Enrol) surprisingly has several major usability issues. A full heuristic evaluation of the usability of Enrol can be downloaded from this link. This blog will, instead, focus on making recommendations to improve a few critical issues of Enrol. In a nutshell, the usability of Enrol can be significantly improved by:
  1. Enhancing the aesthetic appeal.
  2. Ensuring consistency and meeting standards.
  3. Preventing and better handling of user’s errors.
Although these three recommendations will help to leverage the usability of Enrol to a high level, but still there are many “less severe” issues that are not mentioned here and they contribute to “the usability bleeding”. So, let us discuss each recommendation in more detail.

1) Enhance the Aesthetic Appeal of Enrol 

There is a clear weakness in the aesthetic quality of Enrol. A clear sign of that is the poor layout of the website. In fact, the content of the website resides in the left-side of the webpage, leaving the right-half of the webpage empty. This is shown below. While the rule of thumb says if a website use a partial space of the webpage, the content should be centered, I think centering the content is better but not the best alternative; the layout should utilize the webpage space and should be resizable to fulfill different screens.

Figure 1: Right-half of the page is empty in Enrol.

The main tabbed view has weaknesses that hinders its visual effectiveness. First, the active tab should not only use a different background color. It should utilize different visual clues, such as color, boldness, and size of the font. In addition, the active tab should be enlarged to appear in front of the inactive tabs. Second, the main tab should consistently appear in all webpages. However, it disappears completely when a class is added to the shopping cart. Finally, “My class schedule “tab and “term information” tab would be better to be placed as subtabs under “my academics” tab.

Figure 2: Using a white color for the background of the active tabs is not a good choice.

Selection of color is a dominant usability issue across the entire website. The color scheme of Enrol’s components reduces users’ readability. The website should use high contrast colors for labels and their backgrounds instead of using very low contrast colors. This issue applies to almost all webpages and appears in several components including the main tabs, tables and labels.

Figure 3: Low contrast for background color and label color of various elements in the shopping cart.

The Enrol website is not a mobile-friendly website; it uses the desktop version for mobile browsers. Today, a mobile-friendly website is a critical part of online presence. It is highly recommended to offer a mobile version of Enrol since it is high likely for students to use their mobile phones for the registration tasks.

2) Ensure Consistency and Meet Standards

There is deficiency in Enrol in following web conventions and in conforming to uOttawa website’s standards. The following cases show the failure of Enrol in this area:

Case 1: There are two ways to change Enrol’s language:
  1. The standard language selection of the website of University of Ottawa.
  2. The language drop-menu selection “Data language”. It appears on the right-top of the webpage below “Home” link.
The drop-menu selection “Data language” is not consistent with the standard way to change the language for uOttawa websites. Enrol should allow administrators to easily hide settings that has a standard way to achieve it.

Case 2: The name of the user (student) is placed on the top-left as a title for the webpage. In fact, the student name is placed in an inappropriate place. As a web convention, the name of the user is usually placed in the top-right menu (near sign out).

Case 3: The top-left menu has the item “favorites”, but it shows the recent visited pages within Enrol. Therefore, the “favorites” menu should be either deleted, or be used as a bookmark for the favorite webpages.

Case 4: The back button should go back to the previous page in “add class page” when the user presses “find class button” and then redirected to “class search page”.

3) Better Prevention and Handling of User’s Errors

Good software should anticipate users’ errors and prevent them to occur. Enrol is not up to the level in this area too. Let discuss two critical cases:

Case 1: There is a bug in the “add class” page that requires urgent fixing. The error occurs after adding a class to the shopping cart; classes are displayed and students can select “enroll” button to finish the registration. The button “enroll” always generates an error. Students have to navigate again to the shopping cart from the top menu in order to finish registering for a course. The error message appears in a modal dialog. Modal dialogs should be avoided in general (except for specific situations such as confirmation of deletion). Moreover, the error language of the dialog contains technical terms. Therefore, most students will not be able to know why there is an error. In addition, the solution to fix the error is very generic; contact your system administrator. There is no any link to contacts, emails, or webpages.

Figure 4: Error message appears in a modal dialog after selecting class to enroll. 

Figure 5: Maximized Error message of Figure 4. 

Case 2: To do a class search, there are required fields which must be filled out before submitting the search. When a student leaves some fields blank. Enrol shows an error message at the top. The position of the message is very far from the location of the error. This can be fixed by using the standard red asterisk symbol at the end of the name of the required labels to highlight required fields. When a field is left blank, the error message should be placed near to the field in which the error occurs.

Figure 6: Required fields should use the red asterisk.

Summary

Enrol has several usability deficiencies that are rooted to its low aesthetics, none compliance with standards, and the poor prevention and handling of errors. This article focuses only on highlighting “urgent” recommendations to improve these deficiencies. To find about more issues and their recommendations, I recommend you to read the usability heuristic evaluation report (link).

No comments:

Post a Comment