Improve Accessibility on Lieferheld & PizzaDE iOS app by VoiceOver feature
It started from the email of a Lieferheld user complaining that he can’t use the product anymore as a visually impaired person, after 2 months from Lieferheld iOS app new UI/UX design release. So, we began the task to design VoiceOver, Apple's built-in screen reader feature for the vision impaired users, for newly released UI/UX. I participated research, VoiceOver UX design and QA. Later, I presented our work and process in the Product crunch.
Research & Development
To understand user context, I studied how the blind user or the visually impaired user use the feature since they are 'the fast listener'. Together with developers, we I defined basic UX apatterns based on the VoiceOver users' behaviour of navigating and consuming the contents. we set the basic principles that would apply on across UX/UI in the app, which has been used as a guideline for development and QA of VoiceOver feature.
VoiceOver UX Guideline
1. Group the content by context
Accessibility users listen to just enough to orient themselves, and make a decision, and then skip to the next element. By grouping the content by its context, it helps the users to skip around the contents fast, and find the information they want easily. For example, For the restaurant list, content is grouped by the restaurant, so user can jump to restaurant to restaurant without listening all details. On the other hand, for the check out page, user can move to one input field to the another.
2. Reorder the content description by importance
The blind users tend to listen only front part, but not the whole. As they can’t consume the contents not by overview but by snippet, the order of what is read first creates a hierarchy. Therefore, it’s important that reading out the contents not from the top to down, but from the most important to the least important. In the pre-order cell UI, preorder information is place on top of the restaurant cell but VoiceOver reads the restaurant name first. It allows user to recognise the restaurant first and check the related information next.
3. Guide interactive fields
The VoiceOver reads out not only the on-screen text but also the status of the UI elements. Putting descriptive information everywhere can overwhelm the user. However, when it directs user to hidden information or when user has to interact active elements, it is critical to explain the UI status clearly.
4. Use custom gesture mapping
The main gesture to manipulate the VoiceOver feature is swiping. Like close button, when the UI element is place in the same corner repeatedly, the user is easily able to access it. But in case of that the interactive element is on the middle of somewhere or even as the tiny size, gesture mapping is a good option. For example, Lieferheld cart page use scrolling up and scrolling down as adding an item and deleting an item.