Asda groceries

How might we design inclusive grocery shopping experience for all?

In this accessibility audit, we evaluated the online grocery shopping website against heuristics and suggested design recommendations that not only meet the minimum web accessibility criteria, but also can enhance the user experience for users with a diverse range of abilities.

users and technology

USER: General public of various ability
TECHNOLOGY: E-commerce website (ASDA Groceries)

goals

To identify accessibility violation as well as usability issues
To suggest improvements to make ASDA groceries more accessible and inclusive.
Although it is out of scope, estimated revenue gain by improving accessibility of online shopping websites can be calculated by using existing statistics. For example, according to Family Resource Survey 2016-17, around 14 million people have disabilities in the UK, meaning one in five (22%) lives with a degree of impairment. This can be further analysed along with demographic data tied to the same survey results.

research design

Evaluative | Heuristic evaluation | Sample size: n/a | Team size: 1

User journey mapping

To contextualise the audit, I mapped user journeys with a specific start and goal. It starts from a user visiting Homepage and completes with adding a Cathedral City Mild Cheddar Cheese to the shopping trolley. It includes signing in, browsing and searching for the cheese, checking user reviews and adding the product to the shopping list for future purchase.

Accessibility and inclusive design heuristic evaluation

After examining violations using the Accessibility Heuristics (Deque systems, 2018), I explored design suggestions using the Inclusive Design Principles. I also stack-ranked violations and usability issues from users' perspectives, by applying a 4-level severity scale (Dumas & Redish, 1993, cited in Sauro, 2013).

Keyboard navigation and screen readers

To assess how well the current design supports users's wayfinding, I navigated through the user journey using keyboard navigation and screen readers. This enabled me to identify the areas where users with visual impairments are likely to struggle.

Programmatic audit and simulators

I then ran Lighthouse in Chrome DevTools to investigate major Web Accessibility violations such as the lack of image alt text, insufficient colour contrast, and inconsistent header structures. As a result, critical yet easy-to-fix programmatic issues have been identified.

Figure 1: User Journey in scope for this study

key findings

While the website is designed with some considerations for screen reader users, there are experience gaps for users with physical, motor, and cognitive impairments whether it’s permanent or temporal.
The current website fails to offer comparable experience for users with dexterity challenges as well as visually impaired users. In other words, there are discrepancies in features and functionalities available for mouse users as opposed to those available for users with non-mouse input methods (e.g. keyboard).
The current site navigation and wayfinding do not support easy and through navigation for users with non-mouse input methods. For instance, its fly-out menu (as shown below) of the search bar from which users can directly select a product is designed only for mouse users. Similarly, the main navigation menu interaction is optimised for mouse users, limiting choices available for non-mouse users to locate a product they want.

Fly-out navigation menu does not support users with non-mouse input tools, e.g. keyboard.

Heuristics violated:

Navigation & wayfinding
Account for multiple interaction methods

Users cannot use the fly out menu navigation with keyboard navigation and screen readers.

Inclusive design Recommendation

Consider the following to make the user journey more inclusive for everyone:

Homepage

Adding a function for users to stop or change the speed of the moving images used to avoid causing some users nausea or distraction. (2. Give control)
Using plain language throughout. For instance, replacing “The personal touch” into active form such as “Learn how to shop”. (5. Be consistent)
Offering an option to enable geolocation detection instead of asking users to enter postcode manually to reduce user effort. (7. Add value)

Signing in

Enabling “Show password” for users with keyboard navigation in addition to mouse and screen reader users to help everyone to verify the inputs as they enter the password. (7. Add value)
Enabling selection of sign out for keyboard users not just for mouse users. (2. Give control, 1. Provide comparable experience)

Browsing

Empowering keyboard navigation users when they try to find a product. For instance, enabling browsing feature in addition to search will support users when they do not know the exact name of the product they look for.
Additionally, ensure each text element in the top of the navigation menu bar is programmed to be read by screen readers as intended so it makes sense to screen reader users. (1. Provide comparable experience, 3. Offer choice, 4. Consider situation)

Searching

Making sure users of screen readers and keyboard navigation are also able to skip from the search bar to the product information just like mouse users can. It would be very convenient when users are in a hurry. (4 Consider the situation, 3. Offer choice, 1. Provide comparable experience)

Search results and product information

Helping users to focus on key tasks by revealing features such as “Add to shopping list” little by little, as needed, instead of showing everything at a time. (6. Prioritise content)
Making the icons and product name bigger as it is important to make clicking physically easier by making the targets larger for people with dexterity demands. (1. Provide comparable experience, 6. Prioritise content)
Ensuring users with keyboard navigation can access to user reviews from the product thumbnails as mouse users and screen reader users can. Also add alt text that describes the number of stars given to the product not just the number of reviews as these two are the main interest of users who check user reviews. (1. Provide comparable experience)

Read full report

Result

The study found a total of 27 accessibility/inclusive design heuristic violations have been found, with more than a half (15) preventing users from completing their tasks.

Severity level 1 (Issues that prevent user task completion): 15

Severity level 2 (Issues that create significantly delay and frustration): 5

Severity level 3 (Issues that have minor effect on usability): 7

Design recommendations to improve accessibility and inclusivity of the site have been delivered.
Had I been given access to relevant customer demographic data, I would have monitored changes in metrics such as the number of traffic and bounce rate, etc and translate these metrics to key business values such as increase in revenue.

RefLection

Mapping each violation and recommendation to corresponding items of heuristics increased transparency and credibility of the audit.
While the audit disclosed important heuristic violations, the study could have been strengthened by having another researcher to conduct the evaluation separately and synthesising the results together afterwards.

team

Myself (Planning, user journey mapping, expert evaluation, simulation and diagnosis, project management, reporting and presenting)

10 Accessibility Heuristics checkpoints

Navigation and wayfinding
Structure and semantics of page
Colour contrast and legibility
Language and readability
Error prevention and error states
Predictability and consistency
Alternatives for visual and auditory content
Account for multiple interaction methods (i.e. mouse, keyboard, touch, etc.).
Provide enough time and preserve information
Control of movement and flashing

Accessibility Heuristics, V1.0. (Deque Systems, 2018)

7 Inclusive design principles

Navigation and wayfinding
Structure and semantics of page
Colour contrast and legibility
Language and readability
Error prevention and error states
Predictability and consistency
Alternatives for visual and auditory content

Inclusive Design Principles (inclusivedesignprinciples.org, no date)

Page updated

Google Sites

Report abuse