How To Design Web and Mobile Apps for Inclusivity

There's been a lot of talking about inclusive web design in the past few years and that's great, as long as it's not only used as a keyword to boost SEO but is actually being considered by design teams.

To create an inclusive design means to allow every user to have the same pleasant experience when using your website, web or mobile app, despite various conditions they may be living with, e.g. color blindness, dyslexia, anxiety, and many more.

It's not easy to consider in advance all possible use cases, but this doesn't have to be a one-time effort. It can be gradual, so you can continuously improve your designs to allow access to more vulnerable groups over time.

It's also difficult to design for inclusivity in a closed environment - within your design team. As much as your team wants to put themselves in other people's shoes, there's only so much the imagination can do. Everyone has something called personal bias, which helps you see things from your perspective with you as the center of the universe.

This makes it difficult to imagine what someone on the autistic spectrum may be experiencing when using your app. The most obvious solution to this is to involve members from different communities and user groups when creating your designs and to test every step along the way.

Specific design solutions may vary and there's never only one option, but here are a few things to consider and maybe use as a starting point to develop more inclusive designs:

Autistic Spectrum

(In 2018 the CDC determined that approximately 1 in 59 children is diagnosed with an autism spectrum disorder (ASD))

First of all, consider using simpler, calmer color combinations (e.g. more pastel yellow, orange, green), instead of bright, heavily contrasting colors (e.g. magenta, bright pink, velvet).

When describing your service or instructions for usage, avoid using any idioms or weird figures of speech. Try to be more straight to the point and describe the actions users should undertake in plain language. Visually, you can use simpler sentences and structure your points in bullets, instead of creating a wall of text.

When designing buttons with specific actions, put labels that clearly describe that action ("Next" vs. "Click").

Finally, create a simple and consistent page layout across different screens/sections.

Anxiety

(According to the World Health Organization (WHO), 1 in 13 globally suffers from anxiety.)

The most important thing here is to provide users with enough time to complete their actions. There's no point to put time limits on interactions with your product, such as a button on a carousel that disappears when the image changes after a few seconds.

Again, be sure to create clear instructions, in this case illustrating what the next steps are and what will happen after the user performs a certain action. Avoid creating confusion or unpleasant surprises and unexpected app behavior. The users should know without a doubt what will happen when they "click here", but they should also know the sequence of actions they need to perform (1, 2, 3...).

If you need to have some kind of form, survey or any piece of information filled out by the user, leave them with an opportunity to review their answers multiple times, before submitting.

Still, if confusion arises, users should have an easy way to reach out for support. You can make sure this happens by putting clear Help and FAQ options.

Dyslexia

(Globally, Dyslexia International (2017) suggests that between 5-10% of the population experience dyslexia, which equates to around 700 million people worldwide.)

Similar to some previous tips (yes, there is a pattern), make sure information is delivered in a clear format. It's a good idea to mix text with images and charts, to avoid long blocks of text. Be sure to also have enough contrast between the background and the text.

When using text, maintain consistent formatting - left alignment, no underline, no caps). Again, keep instructions simple and short, and if you need to have search functionality, provide a flexible autocomplete or provide suggestions.

You can even consider creating additional mediums to deliver information, apart from text, like video or audio.

Low Vision

(Of the 285 million people worldwide with vision impairment, there are 80 million people who have permanent vision impairment and can potentially benefit from low vision services(The International Agency for the Prevention of Blindness).

The most obvious solution here is using readable font size and good color contrast. But there are also other considerations designers often leave out. An example would be to list all necessary information on the website/mobile app and not include any additional details in downloadable files that can easily be missed.

Also, avoid using just color to convey information, e.g. instead of having a red square with no text, use a "Cancel" caption inside the red square. Try not to separate actions such as clickable buttons from the context they're intended to function in. This will avoid confusion like "what am I canceling if I push this?".

Conclusion

As you can see, these tips are not only valid for helping people with autism, anxiety or dyslexia better navigate your products. They're also common sense practices, which will overall improve your product. And that's the key thing to have in mind here:

Creating web and mobile design to include one vulnerable group of users doesn't mean in the end you'll have designs that will feel bad for someone else. 

There are universal design practices that work well for everyone and that's what inclusive means.

A few months ago, on one of our Melewi learning exchange calls, our UI designer Mary gave a great presentation on designing products for the colorblind. If you're interested to learn more about the subject, check out her presentation on SlideShare.