Evaluating the Usability of British Airways Website: A Detailed Analysis

By Sayed Us Sadat

Introduction

Heuristic evaluation enables users to quickly and efficiently identify potential usability problems in software based on expert knowledge and established usability principles in books or research papers. It's a crucial part of the design process, ensuring that products are user-friendly and accessible. I investigated the British Airways website's user experience (UX), focusing on its alignment with Nielsen's ten usability heuristics as a reference framework. British Airways (BA) is the second largest UK-based flag carrier airline. Besides providing online flight booking, they are providing add-ons such as car rentals, hotel stays, sharing flight plans, picking up from the airport, etc. In this blog post, I will discuss the significant opportunities to enhance usability and increase customer satisfaction and company sales. Additionally, I will also include some recommendations that can be implemented by developers or designers to avoid those issues while designing a similar website.

Usability Issues and Recommendations

Defect 1: Lack of loading indicator while flight result is not displayed 😕

Figure 1: Result loading after users filter flight details and click the Find Flight button. 

Shown in the red box, the information is still being fetched.

The website needs to provide clear feedback to users after they take action. For example, when users perform a flight search using the filter form, there may be a delay in fetching the results. This leads the users to be made aware of what is going on.
This issue falls under Nielsen's heuristic of "Visibility of System Status," which discusses the importance of informing users about what is going on through appropriate feedback within a suitable time.

Recommendations:

You can implement a loading indicator. The indicator could be an animated Aeroplan icon or any icon relevant to your website niche with a progress circle or a percentage, which will clearly let the users know how much the system will take to show the result. This will also ensure that the website is still processing and not stuck or crashed.

Defect 2: Confusing baggage-carrying rules and regulations 🧳

Figure 2: Shows the baggage allowance when a desired flight is selected.
Shown in the red box, the term ‘checked baggage’ may confuse some users.

On the BA website's baggage information section, the website has terms like "checked baggage allowance," "cabin baggage," "hand luggage," and "personal item" through their baggage information page. Usually, these are standard words used by the airline industry. Still, there can be a scenario where a traveller who is traveling for the first time using an aeroplane might need help understanding the differences between these terms. For instance, "checked baggage allowance" might mean that it refers to how many items they can put, their weight, or their dimensions. Similarly, "cabin baggage" and "hand-carry" could be confusing because both can be carried on board, but they have different restrictions on the dimensions.

This scenario violates Nielsen's usability heuristic of "Match between the system and the real world," which states that systems should use words, phrases, and concepts familiar to the user rather than system or business-oriented terms. If a customer needs to be clearer about the baggage they can carry, it can affect the company's revenue as the correct ticket won't be purchased. 

Recommendations:

You can include a website feature called tooltips or a reference link to a glossary explaining the different baggage terms clearly. The guide or popup can consist of icons and visuals of baggage to represent the type of luggage, the dimension policy, and the weight.

Defect 3: Unable to fix a mistake in flight search quickly 🔍

Figure 3: No way to rectify the filters in one shot. 

Shown in the red box, there could be a ‘Reset’ button to clear all the filters.

Sometimes, a user may change their mind or realize they have made a mistake while filtering out the flight options to narrow down their choices. If they wish to modify their preference, they will find that the form is not allowing them to reset the entire search. Rather, they need to change each field individually, which can be a time-consuming and frustrating experience.

This situation violates Nielsen's heuristic of "User control and freedom." Users should be able to exit or undo changes without going through a lengthy process.

Recommendations:

You can add an easily accessible and clearly labelled 'Reset' option on one end of the filter form. This would allow users to modify individual filters without starting over.

You can also implement a mechanism when users are in edit mode; clicking on individual fields may populate a 'cross' icon, which, when clicked, will reset the field. Right now, users must click on the backspace button until the field is empty. An 'undo' feature can also be added to allow users to revert to their last change without clearing the whole form.

Defect 4: Website design inconsistency across different services 🎨

Figure 4: Shown in the red arrow, the left side is the new version of the website, 

and on the right is the old version or a different style with a different font, color, etc.

I observed that the BA website needs consistent interface elements across different pages. When the Flight + Hotel, Flight + Car, Hotel, and Car search criteria are chosen, it can be observed that the redirected result page has a different website design. This could be an old website design, and the new layout only works for the flight search. This can confuse users and hamper brand trust. A study on website consistency shows that an inconsistent website design can lead to a high bounce rate, which means that the user will leave the website without interacting or purchasing from the website.

This problem violates Nielsen's heuristic of "Consistency and Standards," which specify that users should not have to wonder whether different design, situations, or actions mean the same thing. If web design is consistent, it will allow the users to interact with the website interface with prior knowledge.

Recommendations:

When developing a website, you may set design standards must be set to ensure visual consistency across all web pages. Also, interaction design standards must be set, which will define how the customers should interact with different pages and elements.

Defect 5: Overuse of promotional ads and large text blocks to divert customers away from the target 🔈

Figure 6: Screenshot showing Promotional banners in the red rectangular box.

At the checkout page, the website might have a design issue as the element on the page is cluttered. This leads to a visually overwhelming experience for users. As shown in Figure 6, the third-party service advertisements filled the page, distracting users from their primary task of booking and confirming their flight. Moreover, the website does not follow a consistent visual hierarchy (colour scheme, typography scale, and component styles). The flight details are shown on top of each other, making the height of the information larger.  The main call to action on the checkout page is confirming the purchase after seeing the flight purchase summary. Here, the users will be confused and lose the purchase button, resulting in a bounce rate and loss of sales. The issues above violate Nielsen's heuristic of "Aesthetic and Minimalist Design," which states that in a system interface, there should be no irrelevant information. It is a severe issue as it will lead to a loss in sales.

Recommendations:

You can use a design pattern that takes up less space. For example, a carousel is a great idea that will allow users to browse through promotions without them all competing for attention at once. More importantly, the promotions should be placed as a sidebar or below the purchase confirm button, or there could be a step where it will ask the user if they are looking for an additional service. The flight summary is a dense text block, and it can be broken up into bullet points and shorter paragraphs. The content must be modified to have a more concise meaning.

Conclusion

The heuristic evaluation of the British Airways website shows the importance of bridging the gap between user expectations and actual experience. Addressing identified issues, such as lack of immediate feedback, navigational inconsistencies, and insufficient error prevention, is crucial. This exercise was an enlightening journey for me into the world of UI/UX design. It is fascinating to see how even small changes can significantly impact the overall user experience. I hope you found these insights interesting and maybe even a little inspiring for your web projects!

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] Markettailor. (n.d.). Why consistency is key in website design. https://www.markettailor.io/blog/why-consistency-is-key-in-website-design
[4].  British Airways, URL: www.britishairways.com

Feel free to share your experience or ideas about this blog post in the comments below.