Heuristic Evaluation of Air Canada Website

 By Vrushali Nadre

Introduction

Heuristic evaluation is a usability engineering method for identifying the usability flaws in user interface design so that they can be attended by designers or developers as part of continuous design improvement process. I performed Heuristic evolution on the Air Canada website by referencing Jakob Nielsen’s ten heuristic evaluation standards (Nielsen 1990). Air Canada is most popular airline in Canada (www.aircanada.com). It is among top 20 largest airlines in the world. Air Canada offers services to the customer through their online website. They provide services such as online flight booking, car rentals, hotel stays, share flight plans and many more. This blog post highlights the usability issues found during heuristic evaluation and usability testing. Furthermore, recommendations are provided to fix these issues. Provided recommendations can help developers to improve the usability of user interface design.

Usability Issues and Recommendations

1. Date calendar shows invalid dates

Figure 1. shows the calendar on Air Canada website. When selected date on the calendar, it has been observed that all the past dates (invalid dates) are grayed out on calendar except day before current date, which should be grayed out as it is past date. This might be because of different region has different time zone.This invalid date is selectable and not showing any validation message when user selects it, which is incorrect. Moreover, if invalid date is selected for flight search and clicked on find button after filling all the information, an error message is displayed on top of the search section. This displayed error is unclear and not communicating what exact issue is encountered while searching flight. This leads confusion to user and user have to check carefully what went wrong, as a result it consumes more time. This issue violates the heuristic “provide good error massage”. Figure 2 clearly shows that invalid date is selected by user, which is not supposed to happen. Moreover, figure also shows, the displayed error message on top of the page when user selects invalid date during flight search.

Figure 1. Calendar on Air Canada Website

Figure 2. Shows selected invalid date and Displayed error message

Recommendations:

The best recommendation to this problem is, past date (invalid date) should be disabled so that user is unable to select that past date. If in case, past date is not disabled and user tries to select past date, then error tooltip or inline validation should be displayed (near calendar field). This will notify user about invalid date selection rather than displaying an error message on top of the page, when user hits find button to search flight which is happening in the current scenario. This way the displayed message communicates well with user about occurred problem, so that user can fix it quickly. Additionally, it is also recommended that invalid (past) date should be differentiated from valid date in terms of color (like in grey color for other dates) so that user’s eye focus is only on valid dates.

2. No consistency maintained for optional field (* symbol) on create user profile page

Create user profile page have few inconsistencies related to asterisk symbol used for fields. In Figure 3 and 4 it clearly shows that, asterisk symbol used for middle name, suffix and suite fields denote these are optional fields and user can ignore it. On other hand, Figure 5 displays asterisk symbol used at password section for challenge question and answer field treats that field as mandatory and it must be filled by user before proceeding to next step. This inconsistency leads strong confusion for user. This is another serious usability issue found on air Canada website that does not comply with the heuristic principle “provide good error message”.

Figure 3. Shows middle name field as optional and denoted by * symbol

Figure 4. Shows Suffix and Suit field as optional
and denoted by * symbol

Figure 5. Shows Challenge question and Answer field as required field
(mandatory) field and denoted by * symbol

Recommendations:

The obvious and simple solution to this problem is to use asterisk symbol either to denote optional field or mandatory fields. Another solution is to add tooltip for each field so that user get notified about optional or mandatory requirement about field while filling information. It will be a value add to have highlighter together with tooltip to notify user upon missing field. Again, it is necessary to design actionable and clear error messages to communicate properly with user. Hence designing good error messages can solve this issue as well.

3. User interface design and consistency issues for placeholders

Figure 6 shows that fields on create my profile page are not arranged properly as per usability standard. Moreover, consistency of placeholder is not maintained for fields. Some fields have placeholders in bold uppercase letters such as title, gender field etc. Few fields such as country, home, date of birth (day) and language of correspondence have first letter in upper case and remaining letters in lower case with bold font. There is no placeholder provided for province field. This usability issue violate heuristic of “be consistent”.

Figure 6. Highlighted inconsistencies on create my profile page

Recommendations:

This issue can be solved by arranging fields in systematic way so that create profile page will be short, attractive and easy to fill. To maintain consistency, similar placeholder should be added for all the fields and add placeholder at province field.

4. User interface issues and unnecessary added features on language selection page

Air Canada website supports few languages like Canadian English, USA English, Chinese, French and Espanol (Spanish) as shown in Figure 7. All these supported languages are already displayed on selection page. There are unnecessary drop-downs to list countries and languages which result in redundancy. Moreover, it does not show country specific languages for most of the cases. Thus, there is no need to have country and language drop-downs. This issue violates heuristic of “use simple and natural dialogue”.

Figure 7. Language selection Page

Recommendation:

UI design issue can be resolved by removing unnecessary drop-downs. Supporting languages are already displayed on page. Hence there is no meaning to display these same languages through drop-down. As a result, it saves user’s time.

5. No scroll to top (Back to top button) feature on flight search result page

The result of the flight search shows a very long list of flights (Figure 8). Users need to simply scroll down using their finger or the mouse to go at the bottom of the page and it becomes too tedious to scroll back up through screens and screens of content. Moreover, user have to scroll up and down many times to check the content on page and this makes user frustrating. It also takes longer time to get desired search and to proceed further. This issue violates heuristic “provide shortcuts”.

Figure 8. Flight result page

Recommendation:

The solution to this problem is to have the Back to Top button at the bottom of the search list on web page. This is a shortcut that allows users to quickly navigate to the top of the page. When users get at the bottom of a long search page, they often will need to get back to the top to access filtering and sorting features, to modify search, and to enter or edit a query in the search box. This feature provides user friendly navigation to the user and user can access feature on top of the page in single click. Hence, the role of the Back to Top button is very important for long pages.

6. No informative tooltip on Air Canada website to help user

The use of tooltip is become a common practice in many user interface applications in which user moves the mouse over the field and informative tip displayed near field to help user. Generally, these tooltips provide exact description of that field’s functionality in order to guide user in identifying the correct functionality for the task at hand. With tooltips, a user does not need to remember exact functionality of field, but without tooltip there is chance to misidentifying the functionality of that field which designers attempt to communicate. In addition, user have to remember what function the field has to performs. Tooltips plays an important role in reducing the user’s memory load. Unfortunately, there are no tooltips used on air Canada website to help user instantly while performing their task. As a result, it creates difficulty to the user while accessing site. This issue violates heuristic “minimize user’s memory load” as user has to remember what type of functionality a feature has.

Recommendation:

To solve this problem, descriptive tooltip text should be added to essential feature on Air Canada user interface. In addition to that these tooltips should provide very succinct descriptions of feature which helps user to perform their task easily and quickly. 

Conclusion:

Air Canada provides almost all services to customers through their online website. Everyday lot of customers use these services online. However, those usability issues identified on website significantly reduces user experience. During usability testing, it has been observed that experienced user finds these tasks relatively easy whereas new users struggle to complete these tasks, as they found this user interface complex and confusing. Proposed recommendations could be helpful to the designers to improve these usability issues and could help in making user interface more user friendly, attractive and effective.

References:

[1].  Nielsen, J. (n.d). How to Conduct a Heuristic Evaluation. Accessed February 9, 2005, http://www.useit.com/papers/heuristic/heuristic_evaluation.html

[2].  Nielsen Norman Group, https://www.nngroup.com/articles/ten-usability-heuristics/

[3].  Lethbridge, Timothy. http://www.site.uottawa.ca/~tcl/csi5122/coursenotes

[4].  Air Canada, URL: www.aircanada.com