Inclusive design for a better User Experience

To begin with, did you know that:

1 in 5 people are disabled
15% people have dyslexia
1 in 5 disabled adults have never used the Web in 2019
774M people can’t read or write

By creating a website, have you ever thought that millions of people could be excluded because of a handicap, even because of a specific colour that you used? This article will guide you through the principles of Inclusive Design. We will also give you tips on how to create a more inclusive website to build a better user experience for all.

What is inclusive design?

First, what is inclusive design? Inclusive design is a way of creating digital products that are easily accessible by a wide range of people. This includes designing for people with and without impairments.

Why use inclusive design?

Many people may think that designing an inclusive design can be boring and ugly. However, taking into account inclusivity has many great advantages:

Increase your market shares: By including more people and creating inclusive products, you will increase your market share, which will help to increase revenue.
Increase your creativity: Creating inclusive products can be challenging for designers and developers due to constraints. But this generally forces them to be more creative.
Strengthen social ties: It engages with more people, making them feel less left out, hence more receptive to your messages.

How to create an inclusive design?

1. Plan a clear visual hierarchy

The way you plan your content on your website is an important part in making inclusive design. You will have to align information with visual hierarchy.
Check Gestalt’s Principles of grouping to know how to rank your information. The principles can be applied to design in order to visually order and group similar information. It states that related items should be placed close to each other to guide the eyes of the viewers to the intended direction.

2. Think about the size of buttons

Touch target should be a minimum of 48*48px.
Touch elements should be separated by at least 8px of space.

3. Use a larger font size

Set your font size of at least 16 px and 20px for body text.
Example: This line of text is 20px.

4. Use high-contract colour combinations

Use contrast ratio of at least 4:5:1 in larger elements, and 7:1 in regular ones.
You can check the W3 accessibility guidelines for further information or use online tools to check the contrast ratio.

5. Use forms with boundaries and visible labels

Clearly define boundaries for form fields. It can be done by adding a rectangle around the text area.
Always label the purpose of the field.

6. Simplify language

Improve readability

Align text to the left or right only.
Underline links for added visual contrast.
Paragraph width: no more than 80 characters.

Reduce cognitive loads

Use simple language.
Define abbreviations upon first use.
Ensure that link text is described efficiently.
Match identical URLs with identical link text.

7. Don’t add unnecessary pressure

Simplify the layout.
Avoid unnecessary dynamic elements (carousels, pop-ups, alerts).

8. Don’t make people hover to find things

Lightening the contrast of secondary icons and darken them on hover.
Using tangible items as triggers for larger hovers. You can use a descriptive icon to trigger the user to launch a content-filled hover.
With that said, hovers don’t function well on mobile phones and we recommend to avoid it unless absolutely necessary.

Finally, if you want to go into more details about inclusive design, you can check these tools:

Extensions tools: AXE, Deytools
Plugin: Stark sketch
Apps: Contrast mac app

We hope this article helped you better understand inclusive design and how it can create an enhanced User Experience. Whether you’re working with elderlies or people with disabilities, you’ll be able to adapt to your audience and create designs that won’t exclude them anymore.

Source: Centre for Inclusive Design

Need help to evaluate and design an inclusive website design?

Our business coaches are available for a consult or explore the Brand Accelerator Programme.