What to Keep in Mind When Designing Mobile Apps for the Visually Impaired

Going by estimates, there could be 115 million blind people around the world by 2050, an increase of 38.5 million from 2020. If you are an app developer working on a project that you hope is likely to make it big in the future, you do not want to seclude the large chunk of the visually impaired audience which can benefit from your product. Making an app visually impaired friendly enhances the overall UX in more ways than one.

Good UX can topple the future of any product towards success. Talking of the visually impaired, UX needs to be experiential, effective, meaningful as far as app interaction is concerned. As tedious as it might sound, designing mobile apps for the visually impaired is easy. There are simple and low-cost ways that all app businesses can leverage to make their apps visually-impaired friendly.

We at Promatics, are a team of app developers with vital experience in app development.  Over the years, we have developed mobile applications for our clients that are blind user-friendly. In this article, we discuss useful ways in which app developers can inculcate accessibility in their app design, to make it usable for the visually impaired audience around the globe.

Best UX Design Practices for Designing an App for the Visually Impaired

 

• Text Size

It is a common practice to use the ‘zoom’ feature to clearly read the text on an app for people. However, having to resort to ‘zoom’ time and again incurs time in the app session and ruins the user experience on the whole. If it is difficult to read for people with normal vision, it is evident that it needs to be re-touched for the visually impaired.

Do not shy away from using enlarged text in abundance when designing an app for the visually impaired. Moreover, you can give your weak-sighted audience a manual option to adjust the font size of the text on the app according to their preference and convenience.

• Color Code & Textures

The charm of colour coding a message would be lost on someone who is visually impaired as they can hardly detect the colour changes on the screen. This is the prime reason why a UX designer must not rely heavily on colour to convey a message to end user if they want to develop an app for all. Moreover, reliance on colours for conveying a message to a global audience can be tricky as different cultures interpret colours differently.

A great alternative to using colour is using texture to differentiate one element from the other, creating an indulgent experience for your user. Even normal-sighted users would find the use of texture in the app aesthetically appealing.

• Sound Code

Another alternative to colour coding your messaging and communication to the user; is to use sounds. Add distinct sounds for simplest activities like navigation from one option to another, change of screen and incorrect passwords. This helps a visually impaired user form a good interactive relationship with your app product as they feel for informed about app activities.

• Dark Mode

It is best to integrate a dark/ night mode in your apps. If yours is a text content-driven app, it would be easier for the visually impaired audience to read it when it is laid out in lighter hues on a dark background instead of the opposite.  If you are designing an Android app, the dark mode can be a game changer for your UX. However, if you are designing for Apple be sure to make your app product compatible with the company’s latest ‘Smart Invert Color’ feature, which inverts the UI keeping the images and icons intact.

• Screen Reading Tools

Screen Reading tools like VoiceOver and TalkBack come built into iPhones and Android handsets respectively. They facilitate product interaction with blind users by aiding them in hearing what’s on the screen they are unable to see. As an app developer, you must ensure that your app can at least perform main tasks with the help of these tools.

• Deliberate Hierarchy

Imagine yourself as a user interacting with a text-rich app page, do you read it all at first glance? Or you try to configure which part is the most important in the content through looking for the title etc, to make better sense of it? Screen readers must allow the visually impaired to figure out the most important content of the page first. To create such a hierarchy, iOS developers use headings, break down the text into categories for easy navigation.

• Add Alt-text for images

Images are added to text content for better consumption. However, when a visually impaired user consumes content with the help of a voice search tool, he only hears the word ’Image’ instead of a description of what is portrayed in it. This makes it important that developers working on an app for visually challenged label their images. An appropriate caption to go with the image enriches the user experience for the blind and adds value.

• Descriptive Language

Since the blind users consume all the information on the app through in-built screen readers, it is the responsibility of developers to ensure all the information is available for them as it is for the users with normal vision. Include simple text that lets a blind user know what you expect them to do and what is happening on the app.

• Label Buttons and the Loading States

It is convenient that screen reading tools read the text on the app screen out loud to the visually impaired audience. However, there still are other elements on the screen like buttons and loading stages that need to be interpretable for the reading tools. Developers must ensure that each button is labelled the way the screen reader should read it. All apps have loading states too. If a loading state in an app is left without labels, it can confuse blind users to believe that nothing is happening on the app or it has crashed. Just label your loading states to let the user know that the app is loading and content will be available soon.

You can refer to Apple’s guide to best practices for using the correct language for labels if you are developing an app for iOS. Additionally, Android accessibility guideline help android app developers in labelling UI Elements in apps.

Conclusion

Every business wants its app product to be a popular mass product. Unfortunately, people with visual disabilities cannot enjoy an app designed for a general user.  While the needs of low vision and blind users vary significantly, both must be kept in mind during the app design process. A little empathy from a user’s perspective helps elevate the overall app design. An app experience that fares well for a visually impaired individual as well as it does for someone with normal vision is the need of the hour.

Over the years our team has worked for various clients and developed app products that look well to a layman’s eye as well as they are read by the screen reading tool for the impaired. Here is a list of simple tools that can help you refine the accessibility of your app design:

a.) io/color: Accessibility tab allows you to check if colours, font sizes, and opacity are legible and readable before you actually start designing.

b.) Strak: This plugin allows you to check the accessibility of your designs directly from Sketch.

c.) Photoshop: Photoshop offers built-in testing for the two most common types of colour blindness, deuteranopia and protanopia.

d.) Skala Preview: It is a go-to tool for developers for seeing what the app designs look like, in real time, on a device. It has the ability to to preview designs from the point of view of people with deuteranopia, protanopia and tritanopia as well as monochromats.

Thus, a little empathy towards the visually impaired, minute changes in the UX, and accessibility testing can help you bring to life a product that will serve the low-vision and blind users as well as it serves a normal-sighted individual.