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.

Usability Evaluation of StudioTax

By Dengyu Liang

Introduction

Filing taxes is no stranger to most people. In addition to seeking help from tax experts and providing them with extensive personal information, many people also want to file their own taxes. At this time, they need tax filing software that allows them to file taxes quickly, has a user-friendly interface, and has full functions. 

StudioTax is one of the relatively popular tax preparation software. After more than ten years of continuous operation, StudioTax is now used by hundreds of thousands of people. As a NEIFILE-certified software, StudioTax has powerful functionality, providing flexible and extensive functionality to handle self-employment and rental income. I was particularly impressed by its comprehensive coverage of various tax scenarios, from simple to more complex ones.  The software guides users step-by-step, ensuring that all relevant deductions and credits are considered. As a long-established tax preparation software, StudioTax's functionality is time-tested, although its interface is slightly outdated. This old-fashioned interface may not offer the most intuitive user experience, and it destroys the integrity of the user experience to a certain extent.

In the next two sections, I will talk about how I evaluated and some of the usability problems encountered while conducting a heuristic evaluation and a Cognitive Walkthrough for the StudioTax software.

Evaluation Methods Used

This blog summarizes the evaluation employed heuristic assessment and cognitive walkthrough methods to meticulously examine the core processes and advanced functionalities of tax return completion within StudioTax's user interface (UI). We scrutinized the UI design for intuitive interaction and evaluated task processes for accuracy, focusing on the primary user interactions: initiating a tax return, inputting personal and financial information, detailing deductions, reviewing the summary, and final submission.

User Experience Problems and Suggestions

When people want to file taxes, they often need to prepare a lot of materials. If they seek advice from a tax expert, they'll be given a checklist, but if they want to file their own taxes, it's up to the software to guide them. Unfortunately, StudioTax does not provide such a checklist, and tax filers need to prepare all the information themselves. This also leads to a big user experience problem. The user experience problem that makes this situation even more difficult is the lengthy input mode.

Lengthy input mode

Figure 1: Step-by-step Wizard.

Once you start creating a new return, whether you're starting from scratch or reading from a previous year's return, you'll need to enter most of the information at once using StudioTax's own guidelines (Wizard). (Figure 1) In this case, if it is an old user, it is okay, they will have expectations of how many things they need to do. But newcomers, have to read through all the options and complete about 20 pages of data entry. There is no way to exit or save during this process unless they want to cancel their tax filing task. This destroys the Visibility of System Status and User control and freedom in Neilsen’s Heuristic, users cannot know what progress they are at and how much information they need to fill in until they finish everything. 

Propose solutions:

A feasible solution is to separate the input content and input. For example, Break down Personal Information, Income Details, and Deductions and Credits in different modules. This not only avoids re-entering due to incomplete information preparation but also simplifies the time for users to prepare information. They can create their personal information first, save it, and select to input their own Income or Deductions and Credits or any other necessary tax fill information. Also, break down the steps of each module and list the proportion completed, for example: we are in steps (5/7).

Mismatched Controls

Figure 2: Some problematic controls

Mismatched Controls are another user experience problem. In StudioTax, they mixed the appearance of controls (Figure 2), which led to quite bad expected errors. For example, all controls looked like they were for inputting text, but in fact, they were not. Some controls looks like text box but are actually drop-down boxes, and some control is a text box, which looks like it can be input, and the cursor can select it, but it cannot actually be edited. You need to click the button next to it to edit. The SIN number and the phone number are entered in three separate parts. However, the SIN number can automatically switch to the next input box, but the phone number cannot. You need to manually select the next input box after entering the three-dimensional number. There is also a problem with the input and switching order of names. After entering the first name, the middle name is displayed, but the last name is switched. The above situation undermines the Consistency and Standards of usability.

Propose solutions:

The use of controls needs to be thoroughly reviewed to ensure each control has a distinct appearance. For example, the option buttons of the drop-down box are displayed directly in the list instead of hiding until selected, the text box that cannot be edited is displayed with a special text color, the input boxes for phone numbers are merged, and the order of name input is re-adjusted. These practices can effectively eliminate confusion caused by mismatched controls.

Inadequate Error Messaging

Figure 3: Error message, flashing message

Wrong input prompts are also a part worth improving. For an incorrect input, StudioTax uses a frequent flashing prompt, which is not a good design. Figure 3 shows when the user tries to skip a required question, a flashing prompt appears, and for multiple errors, error prompts flash at the same time. However, there are no more detailed tips beyond that. It destroys the Aesthetic and Minimalist Design of usability and is also useless for Help and documentation.

Propose solutions:

The way to fix it is to only display the prompt without flashing, and for the first error, display the reason for the error. For example: SIN number format error, invalid address type, etc.

Outdated Terms and Confusing Icons

Figure 4: Pages to review and verify information.

Some Terms and Icons need to be changed, such as Wizard, which is a computer term used to indicate step-by-step instructions. As an old-school software, this was indeed the scene at which it was created. However, the term was not popular, and coupled with the image of a magic wand, users were often very confused about its abilities. The same problem is in the optimizer and RRSP. The two icons are equally confusing. These words and icons do not conform to the Aesthetic and Minimalist Design and Match between system and the real world of usability.

Propose solutions:

Re-adjust the use of terminology and use more understandable words, such as fill in again instead of the Wizard. Choose a more appropriate icon, for example, use the avatar of an old man instead of the picture of RRSP.

Zoom Function Issues

Figure 5: Different zoom levels will cause different results

The Zoom Issue is worth noting. Although the zoom function is provided, it is not well tested, and the content display will become incomplete except for 100% zoom (Figure 5). In addition, the zoom function will only change the size of the form without Changing the table or UI interface. it destroys the Aesthetic and Minimalist Design of usability.

Propose solutions:

The correct method is to adjust the text box's handling of scaling so that the scaling degree of the text box is consistent with the scaling degree of the forms and conduct sufficient testing to ensure that there is no occlusion under the provided scaling situation. In addition, UI following scaling is also an implementation that can be considered. The interface of StudioTax software is not large enough, and it is necessary to implement more modern scaling.

Inconsistent and Useless Help Functions

Figure 6: Different sources of help function

Because of the characteristics of tax software, it needs more detailed help functions to help user understand what they should do. Although help documentation is provided, it doesn't provide real guidance. When you click the help button, it will pop up a chm file. On the other functions, when you click the help link on the start page, it will point to the online web page, which provides the same content as the chm file. In fact, StudioTax offer more helpful video help on YouTube, but StudioTax don't mention it anywhere. Among usability principles, this violates two usability principles: Help users recognize, diagnose, and recover from errors, and Help and documentation. StudioTax needs to unify the help function they provide and give more useful information instead of having to dig through the manual.

Propose solutions:

Categorize the help provided and open the right help in the right place. Considering the offline design of the software, StudioTax should maintain offline help. The best way is to create a complete tutorial to guide users to use it correctly and fill in the information. Moreover, for the buttons on the review page, there should be more detailed descriptions or tutorials to inform users of the functions of each button.

Lack of Undo Functionality

The undo function should be a common feature to prevent erroneous operations. Unfortunately, StudioTax does not have an undo function. Users cannot make sure what they have edited, nor can they undo changes. It doesn't provide enough user control and freedom. The only thing they can rely on is the save function to return to the previous state. This issue violates the usability heuristic of User control and freedom. Therefore, it is necessary to provide an undo function and provide modification comparison.

Propose solutions:

StudioTax should provide undo and recovery functions and list the contents of each modification. The granularity does not need to be too fine, you just need to remember the content to be modified each time by running the wizard function or double-clicking to enter the modification page. This not only eliminates usability heuristic problems but also improves the Visibility of System Status, allowing users to clearly see their modification history.

Conclusion

StudioTax provides a Full-featured and affordable solution for tax filing, especially for someone with a flexible income. Despite this, the software's user interface is disappointing. Its user interface feels outdated like it hasn't been updated in decades. This does affect its usability. For new users, this is quite unacceptable. Developers need to consider providing a better user experience to improve software competitiveness. These outdated interfaces, inefficient data entry processes, inconsistent controls, and inadequate error messaging—all of which hinder usability.

References

1.      World Leaders in Research-Based User Experience NN. 10 usability heuristics for user interface design. Nielsen Norman Group. https://www.nngroup.com/articles/ten-usability-heuristics/ (accessed 18 Nov2023).

2.      StudioTax. Canadian Personal Income Tax Software. StudioTax. https://www.studiotax.com/home.html (accessed 18 Nov2023).

3.     Agency CR. Government of Canada. (CRA) - Canada.ca. 2023.https://www.canada.ca/en/revenue-agency/services/e-services/digital-services-individuals/netfile-overview.html (accessed 18 Nov2023).

Usability Evaluation of the TorontoCupcake Website

 By Mohammadreza Davoudi (Payam Davoudi)

Introduction:

The TorontoCupcake website is an online marketplace that provides Canada's finest selection of gourmet cupcakes and chocolate treats. They make delicious handmade cupcakes in many flavors. Toronto Cupcake is a small business established in August 2010 and owned by Ms. Michelle Harrison.

Why Did I Choose Toronto Cupcake?

Torrento Cupcake is number one on the Google search for cupcakes in Toronto! In Google Maps, users have given TorontoCupcake a 4.9-star review for their fantastic cupcakes and outstanding customer service. On the other hand, their website earned a 1-star review as well! Small businesses should have the best websites to attract more users to grow their business. Moreover, they can prevent customer loss by identifying and addressing significant issues on their website. 

I conducted heuristic evaluations and cognitive walkthroughs on the Toronto Cupcakes website and identified several key issues and problems. This blog aims to highlight these issues and offer suggestions for improvement.

Issues and Recommendations:

Lack of a Beautiful Homepage and Minimalist Design:

According to Nielsen Norman Group, designing beautiful and minimalistic website pages and focusing on the essentials is the key to improving user experience. All websites must have an attractive design on their homepage for a better first impression. 

The website's homepage is where we welcome our users. Unfortunately, On the homepage of TorontoCupcake, we see more packaging of the product instead of the cupcakes. Although TorontoCupcakes has gorgeous product packaging, this website is a Cupcake shop and not a packaging shop website. 

They also used the company logo eight times in a row on the top of the website, which is redundant. These icons are not even clickable and are just there for decoration. The best place to put the website logo is on the top-left side of the website. That is the first place most users look when they enter a website. 

In the middle of the homepage, there is a picture of a cupcake with low resolution. As you can see in the picture, images like this will be pixelated when the user zooms on it or opens the page on a high-resolution monitor. Another issue I can mention on this page is that they didn’t follow any pattern and alignment for their contents, and each line has its length, and there is also a typo mistake. 

Recommendations: 

• A beautiful layout will make users feel comfortable on the website. The best practice for TorontoCupcake is to replace the homepage design and add a more attractive and informative design for the homepage, focusing on cupcakes and flavors instead of the packaging. 
• Using proper alignment for all the elements on the page that can be adopted based on the screen size 
• Always use a high-resolution image for a better look on high-end monitors.

By making these changes, we will improve the consistency as well as usability of the website.

Lack of Efficiency of Use: 

TorontoCupcake does not support filtering or sorting cupcakes on the cupcake selection page. There is a very high chance that a user wants to filter items based on flavors or their allergy to the foods or sort cupcakes based on popularity and rating on the website. Unfortunately, the lack of these features can lead to frustration for users to find their favorite cupcakes. According to Nielsen Norman Group, it is best practice to design web pages as efficiently as possible, including in the item selection, to improve usability.  

Moreover, the users cannot change the size of the text or switch between light mode and dark mode. Another problem is in the checkout process. In the final step, when the user wants to pay for their cupcakes, the owner should process their request and manually send them an invoice request based on their order, which means more waiting time for the user to finish an order. This will dramatically reduce the efficiency of use.

Recommendations: 

• It is a good idea to implement good filtering options based on the ingredients of cupcakes or tastes. Also, it is a good idea to execute a search and sort based on the popularities and other factors. 
• It is also a good practice to bring theme customization, like font size and colors, to help older adults and disabled people work with the website more efficiently. 
• For payment, using different gateways from banks or PayPal is highly recommended to ensure the checkout process is automatic. 

Lack of Consistency and Standards on Website:

According to Nielsen Norman Group, for all eCommerce websites, it is essential to have standard features like proper page navigation and search. The lack of these features can confuse the users and frustrate them. TorontoCupcake has a navigation menu, but it is minimized by default. If you look at the top left of the website, there is a three-line icon (Hamburger icon) for the navigation menu.

The problem is that the menu is minimized by default, even for the desktop screens. Although it is a good practice to have a hamburger icon for mobile screens, in the desktop version, it is recommended to show the full-size navigation menu to make the navigation easier.

Moreover, we need more consistency in the website's pages. In other words, there is no menu bar or footer on some pages, like the checkout page, and the style of each page is slightly different from the others. Some pages have a menu bar and footer, and some don’t.   

Recommendations: 

• To solve these issues, developers usually use a Master page. A master page is like a container to wrap other pages and all the necessary elements.
• For navigation, we can also use the proper navigation and search bar based on the device's screen size; if the user opens the website on a mobile device, we can use a minimized menu and a hamburger icon, and if it is on a desktop screen, we can show the maximized version of the menu to the users to improve website usability.

How Can I Bring the Removed Items Back to The Cart?

Upon removing any item from the cart, the website gives users no feedback or confirmation prompt to check if they want to delete that item or click by mistake. Moreover, the “Undo” option is missing as well. So, if the user removes items from the carts even by mistake. Items are gone forever, and the users have to reselect them again from the selection page.

Another problem is that users don’t have a cancel button on the cart page, and continuing shopping is the only way to cancel the checkout process. 

Recommendations: 

• According to Nielsen Norman Group, implementing a multilevel undo and redo functionality for the website is a good idea. 
• When trying to clear the cart, give the user a confirmation prompt
• Use proper naming and labeling for the buttons.

Progress bar missing and showing Cart's Items in a bad way:

According to Nielsen Norman Group, system status should always be visible to the user. A progress bar is necessary here to make it easier for users to know the current state and upcoming tasks. Moreover, the place order button looks like it will complete the ordering process, but in the actual scenario, it does not end the process and moves the user to the next page to gather more information. In addition, the unnecessary spacing on this page makes it hard for users to read and track the items at a glance.

As we can see in the picture, there are four chocolate peanut butter cupcakes in the shopping cart, but the system, instead of showing it in one line and adding the quantity of that, shows it in 3 separate lines, which is not the best way to show items on a cart.

Recommendations: 

• Adding a progress bar on top of the page for each step is necessary to show the user the current state and give them an idea of what they will do in that step.
• In addition, instead of auto jumping to the cart page, we can let the user add items to the cart together, and when the user finishes the Cupcake selection, then go to the shopping cart list and place the order.
• Moreover, reducing the spacing in the cart’s lines is also recommended to make reading more accessible for the user. 

In Conclusion:

To summarize my adventure on the Torrento Cupcake website, by employing cognitive walkthroughs and heuristic evaluations, I have identified many user experience problems on the Torrento Cupcake website. It is very important for all website designers to follow at least the basics of user experience guidelines. This will help their users achieve their goals on the website more efficiently.

Based on my experience, usability improvement is an ongoing process. We should always look for improvement in our work and accept criticism for our designs. Even when a design is good, the designers must constantly search for methods to improve their designs and keep them up to date. I hope this blog post helps the Toronto Cupcake team enhance their design in their future web application.

Acknowledge:

Thanks to Grammarly for improving my writing for this blog post.

Please share your experiences or ideas about this blog post in the comments!