An eye for those who can’t see
Designing for the blind
Can you remember the first night the power went out and you desperately needed a glass of water? The house was probably completely dark and you had no clue what obstacles lay between you and the kitchen. Since then, you’ve probably had lots of practice walking in the dark and the trip to the kitchen has probably become a lot easier since you are now familiar with the space you are moving through. Now, imagine waking up to get a glass of water, and all your furniture has been re-arranged.
People who don’t have the ability to use their eyes rely heavily on familiarity. They need to take time to get to know their surroundings before they can confidently move around. The same goes for the digital environments they interact with. The only difference is, in a digital space there is no physical aid. There are no guide dogs or canes or even the option to stick out your hand and feel your way around. And because each digital environment is different, it can feel as if someone keeps rearranging the furniture. That’s why we, as designers and developers, have to work closely with people who are visually impaired, to build standards that can help visually impaired users feel comfortable and confident when interacting with digital products.
My journey towards a more accessible world (starting with a banking app)
In 2018 I attended a workshop on design and development for accessibility. I spent the day innovating app design principles for blind users with a group of designers and two wonderfully inspiring blind women. A few months later, the opportunity I had been waiting for, to bring about change, presented itself. I had the honour of working with my colleague, Helen Samodien, on not only optimising our company’s banking app for blind users, but also instilling empathy for disability in our colleagues.
Never having done any major work for accessibility, we had no idea what to do or where to start. So what do you do when you have no clue what you’re doing? You turn to Google. We spent the first week or so browsing the internet for any research and standards we could find on designing for blind users. Although we found some really eye-opening facts on the subject, we realised that there was only one major principle we were encouraged to adhere to — labelling.
Labelling is the practice of developing every component on an app/website to have a verbal description. This means that when someone uses a screen reader to navigate through your domain, they can hear instead of see the components on the screen. For example, where there is a continue button, it would read “continue, button” and so forth.
As someone who is quite passionate about user experience, I was taken aback by the lack of care shown for blind users in a digital space. Treating accessibility as merely a checkbox was not enough, we needed to do more. We needed to create a customer experience for disabled users that is on parr with the amazing experiences we always create for our able-bodied customers.
Where the real research began
After sitting with our noses in our screens and learning all that we could learn, we knew it was time for some practical experience. It was time to step into the shoes of our customers. This is an impossible feat when the customers you’re designing for have any form of disability, but we did our best. We switched our screen-readers on, closed our eyes and started exploring our company’s banking app. You can just imagine my shock when it took me almost 10 minutes to get past the first screen, and this is considering the fact that I‘m familiar with where everything is placed on the screen.
It was a real eye-opener to see what we had been putting our customers through all these years. We formed an alliance with Blind SA and decided to get their view on things. We put our app in front of them and got their (very honest) opinion about it. In short, their feedback reflected that there was nothing good about the app from an accessibility perspective, and the saddest part was they still found it to be better than our competitors’ apps at the time.
Making our app more accessible
After understanding what our customers’ pain points were, we were able to create a set of standards that would help us create an amazing user experience for blind customers using our banking app.
One or two things you need to know to understand the next section:
- To hear the different elements on the screen (while using a screen reader), users need to swipe right, left, up or down,
- To select a component, users need to double tap on the screen.
I urge you to turn on your screen-reader, blindfold yourself and try to use your banking app before reading the next section.
These are the guidelines we used to change our banking app:
- Labelling: Make sure that every component in an app is labelled in a way that is understandable, and communicates the purpose and action of that component. A simple way to do this is to ensure that the component category (e.g. heading, button, etc) is clearly stated along with the action related to it. For example, a button could be labelled “pay, button” to make it clear that the component is clickable, and what would happen if the user clicked on it. To be even more clear, you can tell users how to action the component as well, for example “pay, button, double tap to select”.
(Tip: Build these labels into your component library to ensure that your developers build it in to every project they work on).
- Hierarchy: Create an audio hierarchy that is different to the visual hierarchy on the screen. Since blind users are forced to listen to what is on the screen, they don’t benefit from the boldness, size or colour of a component. When looking at any design, our eyes are drawn to bolded statements and colourful elements, but a screen reader simply reads the elements on the page from top to bottom and left to right. This means that any hierarchical intent from the designer is lost for blind users. One way to mitigate this is to ensure that elements with greater importance are read out first, so that the page structure and intent remains clear for anyone using a screen reader. For example instead of reading out a monetary amount and then only telling the user what the amount is related to, read out “Account balance” first and then the amount.
- Grouping: The way our app was designed and developed caused screen readers to read out every element or line of text individually. This means that the user would physically need to swipe the screen every time they wanted to hear the next thing. Realising how much work this causes for the user, we wanted to group elements together, especially those that are naturally grouped. For example, instead of reading out “R10” and then “amount” with two separate swipes, we combined hierarchy and grouping to have it read “Amount, R10” in a single swipe.
- Audio relevance: Because the screen reader is trained to read everything on the screen that is labelled, it even reads out things like “line” or “circle”. Elements like divider lines and icons, are great visual aspects, but add no value for someone who is visually impaired. We wanted to train the screen reader to ‘ignore’ purely visual elements to ensure we only ‘show’ our customers things that are relevant to them.
Going back to our customers
We took our app, equipped with new accessibility standards back to Blind SA, and although they were happy with the standards we had introduced, our target customers were not too impressed with our execution thereof. We, for example, wanted to incorporate a more friendly tone into our labelling (e.g. instead of just saying “account balance”, saying “your account balance is…” as an example). Although a friendly tone is great, our customers were more concerned with having short and concise labels that would help them get the job done faster. We also tried to group too many elements together and this meant that, instead of just swiping to hear the next thing on the page, customers had to listen to longer sets of text just to see if the thing they were looking for was contained within the group being read out.
Going back to the drawing board
After collaborating with our customers throughout the design process, we were able to write a set of principles which looks at design from a blind user’s perspective. These are as follows:
- Don’t show me things I don’t need to see. Make the screen reader “blind” to certain visual elements that won’t benefit or assist me (See audio relevance section above).
- Keep it simple and to the point. Don’t try to be too conversational in your labelling, just tell me what I need to know in as little words as possible.
- Don’t make this harder than it already is. Don’t use UI elements that don’t translate well to a screen reader. There is no point in making something aesthetically pleasing if it puts any of your customers at a disadvantage.
- Don’t reinvent the wheel, just make it better. Don’t stray away from what has been done. There are many great principles and standards out there (https://www.w3.org/standards/webdesign/accessibility) that our customers are familiar with and that work very well.
An overview of what we learned (and there was a lot)
- There is no one-size-fits-all approach when designing for our customers. Each customer has different needs, goals and priorities, and we need to cater to all these needs, whilst still keeping our products simple and effective for use. This can only be done with vigorous customer testing and multiple iterations throughout the product life-cycle.
- Test, test, test! This means testing with customers from each of our user segments to insure we give the best possible experience to everyone. Testing is even more important when dealing with customers who are very different to you and have different experiences or abilities to you.
- Accessibility is not a checkbox. Our research has made it very clear that accessibility should be considered from the start and throughout the design process, from UX, UI and testing, straight-through to the development of our products. Javier Sánchez Sierra and Joaquín Selva Roca de Togores in their article Designing Mobile Apps for Visually Impaired and Blind Users, make a fantastic analogy in which they explain that considering accessibility as an after-thought is like placing a ramp on a set of stairs. The ramp will be way too steep for anyone in a wheelchair to use, and it would have been much better if they had built a ramp for wheelchair users from the get-go.
- We’re all still learning. One would think that Apple, being a pioneer of accessibility in digital products, would have it all figured out. It might surprise you to know that not all of the native apps on your iPhone are conscious of accessibility standards. Luckily Apple makes use of Siri, which is widely used by the visually impaired, but using SIRI becomes a bit tricky when you are working with a very secure banking app.
Disability is our responsibility
The greatest lesson I learned whilst working with the incredible people at Blind SA, is that disabilities are not much more than symptoms of bad design and negligence. Although someone who is blind might have lost the use of their eyes, they more than make up for it with the incredible use of their other senses, and are able to function quite effectively. I believe that what truly disables a person, is an environment and society that doesn’t enable and support them to do what they need to do.
Ruby Zheng, in an article she wrote for the Interaction Design Foundation, places focus on the difference between the medical and social model of disability. She explains that the medical model of disability places the burden of the disability on the person with the disability. It paints a picture in which society believes the person with the disability is the problem and that they need to be fixed or cured to be normal functioning members of society. The social model of disability, on the other hand, describes disability as “a consequence of environmental, social and attitudinal barriers”. In this case society takes on the responsibility to remove barriers in order to improve the lives of anyone living with a disability.
Maybe it’s time we stop thinking of people with disabilities as disabled, but rather differently-abled, and realise that it only takes a change in our attitude to help them achieve greatness or, at least, normality.
The age-old question: “Why do we need to design for accessibility?”
Aside from the fact that approximately 1.3 billion people worldwide suffer from some sort of visual impairment, there are many other reasons we should be designing with disability in mind.
Alan Cooper in his book The Inmates are running the Asylum, makes it clear that designing for one means designing for all. He shows us an example of how TV screens in airplanes were initially designed for people who suffer from Arthritis, and how its design ended up benefitting many travellers. Michael J. Fordham also reminds us how curbs on sidewalks were designed for wheelchair users, and is now appreciated by people with trolleys, prams and wheeled luggage alike.
When designing, we tend to focus our solutions on able-bodied customers, since its the group of customers we can easily relate to. If we changed our outlook to focus on disabled users, we would actually be enhancing the experience for a broader group of people who interact with our products every day. This approach also makes sure we cater for customers who become disabled over time, for example our older customers who become visually impaired with age.
Where do we go from here?
Being aware and having a good understanding of the people who use our products is imperative for any design process. This includes working harder to understand the customers we may not easily relate to, instead of only designing for the customers we do relate to.
There are billions of people worldwide who suffer from visual impairments, and this fact only takes people with one form of disability into account. We need to start realising the benefits of designing and developing with our disabled customers in mind, and that’s not even to mention our social responsibility to do so.
“So what can I do about it,” you might ask
Step away from your computer and get to know all of the people you are designing for. Put your screen reader on and interact with your own products to really step into the shoes of your visually disabled users. Make a point of bringing accessibility into each of your projects. Spread awareness and take on the responsibility to break down barriers for the differently-abled members of our society.
