Optimizing the online user experience for people with visual impairments
Problem
The Netherlands strives for an inclusive society so that everyone can participate in our growing digital landscape. A significant portion of our community faces challenges when shopping online due to various disabilities, including people with visual impairments.
This research focuses on optimising the online shopping experience specifically for visually impaired people, recognising their unique needs in the digital realm.
Goal of the project
Enhancing the online shopping experience for people with visual impairments, enabling them to be independent and self-reliant in doing their groceries online.
Desk and field research
The target group and their wishes
The target group involves a wide audience with many different variations and degrees of visual impairment. Nowadays, it is mainly older people who are affected. The various interviews showed that each person has his or her own personal needs and preferences, but that there are also many similarities between them. For instance, it was found that the design of supermarkets is busy and very tiring for the visually impaired user. Someone who is blind does not experience this problem, but values a logical structure in a design and a clear naming of buttons, actions and images. It is experienced as a big maze where the user has to find the exit by himself.
The importance of supermarket accessibility for people with visual impairments
Visually impaired and blind individuals prefer being able to handle tasks online independently rather than relying on friends or family. They don't want to encounter frustration or obstacles in the process, only to start over on another website. Dealing with visual impairment is challenging enough, so ensuring that online shopping, which is meant to simplify processes, is indeed easy, becomes crucial. As society leans more towards digitalization, the expectation for everyone to participate increases, yet the visually impaired demographic is often unintentionally left out. Following the Accessibility Act, which mandates that government websites become accessible, commercial websites must also adhere to WCAG guidelines for accessibility by 2025. This initiative aims to foster inclusivity, ensuring that every individual is a part of the inclusive society we strive for.
The existing applications that enhance the digital accessibility for people with visual impairments
The primary applications are the WCAG guidelines. Compliance with these guidelines ensures an interface is perceived as accessible. When certain guidelines are met, such as providing correct alt-text for buttons and images, navigation with a screen reader is facilitated. Various screen reader software exist, each with different functionalities, such as converting text to braille and/or speech. Braille is a skill primarily taught to visually impaired or blind children in schools today. Elderly individuals who develop visual impairments often place less value on learning braille and may choose not to. Other applications typically consist of external devices, such as keyboards with large and high-contrast letters to enhance readability.
The content and design needed for an interface to improve the user experience for the target audience
The market research on Albert Heijn and Jumbo has revealed that online supermarkets do indeed strive to design environments that are as accessible as possible, but often fall short. It's crucial for an interface to have a clean design without unnecessary distractions, making it clearer and less visually taxing. Text should be easily readable, ensured through contrasting colors and a clear font. Essential actions, like error messages or buttons, should occur near the focal point and not elsewhere on the page. Make it easy for visually impaired users, avoiding repetitive unnecessary actions.
Visually impaired and blind users don't want a variation of the current Albert Heijn or Jumbo app. They desire a universal app accessible to all users, regardless of visual impairment. Use contrasting colors to avoid the appearance of an accessible app.
Concept
SUPER
After conducting a brainstorming session with the target audience, collectively generating various concepts, and testing them with the audience, the following concept has been selected.
A supermarket platform app where the user can select their desired supermarket to do their shopping. It is an online platform comprising different bundled supermarkets offering online and local delivery, facilitating easy grocery shopping. The user can choose their preferred supermarket to do their shopping. Through a simple design, consistent across all online supermarkets, groceries can be ordered and delivered.
The app will be customisable to personal preferences, making it easy for individuals with various forms of visual impairments to navigate.
Prototype
Paper prototype
Testing a paper prototype is challenging for visually impaired users and impossible for blind users. Written texts and sketches are difficult to perceive, as the written text is typically on a white background, inaccessible to screen readers.
Therefore, it was decided to test this initial prototype with an expert in online accessibility who is not visually impaired. The aim of this test was to discuss the initial flow and brainstorm ideas to bring about initial improvements and new concepts.
Flowchart
Based on the initial test results, a flowchart was developed to provide a clearer understanding of the final screens and different interactions.
This is a flowchart of the final concept prototype, outlining the basic flow from account creation to completing an order. It is still in its early stages, but provides a solid starting point for the initial elaboration of the design.
Test
Low fidelity
After an initial paper prototype and detailed flowchart, a low fidelity prototype was developed in the program Adobe XD, so it could immediately be tested with the target audience. Two flows were developed, namely: the registration process, and ordering in the online supermarket app up to placing the order.
Some of the test results
/ Selecting allergies with the checkmark or cross is not user-friendly because the distance between the allergy and the buttons is too far when zoomed in on the page. Doing this for each allergy can become a time-consuming task.
/ How should users who don't have any allergies handle this? It's unnecessary for them to see the entire list. Besides allergies, some people also have diets, which would be a useful extra option to add. Personalization has many advantages and reduces the need to look at product ingredients.
/ Add supermarket logos in the future; this provides recognition and feels familiar.
/ Always keep buttons in the same place; for example, don't suddenly move the back button from the top left to the bottom right of the screen.
Mid fidelity
For the mid-fidelity prototype design, an initial dark mode design was developed because it works better for the people being tested, and it needs to be tested if a dark background works better for visually impaired users. In this design, the feedback and findings from previous tests have been incorporated. Additionally, a first attempt has been made to use color in the design.
Some of the test results
/ The buttons at the bottom of the page can easily disappear off the screen. They should be placed closer to the area where the focus point is, namely the action that needs to be completed on a page.
/ The italic letters are not easily readable; larger and bolder letters work better for readability.
/ Cookie notifications should not be necessary here because this is an app that runs on your phone.
/ The supermarket logos are a good addition and provide nice recognition!
/ Pay close attention to the design of the icons, as some of them look quite similar. The icons for meat, fish, and vegetables look very similar.
/ Carefully consider the arrangement of products; this can be, for example, in alphabetical order. This is especially useful with the voice-over function, as it gives an indication of how long it will take. However, different types of apples do not necessarily need to be in alphabetical order.
Final product
Testing the final product
The conducted interviews, tests, and iterations have led to the final design of the app SUPER. The user can configure the app to meet their personal preferences, using a personal and accessible approach combined with a simple design. Visual clutter has been minimized to almost nothing, so the user is not distracted from the goal. This final prototype was tested with the target audience to see if the app is well-received, the flow is correct, and if there are any areas for improvement.
Conclusion
Conclusion of the project
It is important that an interface has a calm design without unnecessary distractions. This makes it more organized and less tiring for the eyes. Additionally, texts must be easily readable, which can be ensured by using contrasting colors and a clear font. Necessary actions, such as an error message or button, should occur near the focus point and not in another part of the page. Make it especially easy for visually impaired users and avoid repetitive unnecessary actions.
Visually impaired and blind users do not want a variant of the current Albert Heijn or Jumbo app. They desire a general app that is accessible to users with or without visual impairments.