Insights

  • Rebecca Brown

How to make website design more inclusive

Updated: May 12

Inclusivity is at the heart of good service design. In this blog post Rebecca from our Business Consulting practice talks about what inclusive design is, why it’s important, methods to achieve inclusive design and how it can help you deliver a better service for users.

Why is inclusive design important?

Everyone involved in the design of a digital service, from software developers to product managers, is responsible for understanding the social impact of the products they deliver. Service designs that fail to understand the diverse range of user’s needs can cause unwelcome and costly problems later on, for example:

  • Costly rectification work after go-live

  • Increased customer support costs

  • Customer dissatisfaction

  • Brand degradation

And in some circumstances… legal action.


Inclusive design is about being aware of users of different abilities, genders, languages and cultures, and applying that understanding to your design decisions.

The essentials for inclusive design

So, where do you start?

Build a diverse team

Consciously or unconsciously, there is a tendency to assume that others have experiences similar to our own. Building a team with people from different cultural backgrounds, genders, abilities and experiences will improve self-awareness of unconscious bias, and lead to design solutions that address a broader range of user needs.

This is equally applicable to small teams, even if you’re working on your own. Researching and reading about different experiences and inclusive design standards will help you discover new points of view and deliver a more inclusive solution.

Design with users, rather than for users

Conventional design tries to find the most direct route for the typical user, but is there really a typical user? In case you were wondering the answer to that is, no there isn’t. Denial of this brings risk. Inclusive design requires a shift in patterns of thinking. Designing with a diverse range of users from the start will help produce a design that better reflects your actual customer base.

Examples of inclusive design techniques that often get overlooked


Use of colours

Colour theory goes a lot deeper than “pink is pretty”. Colours are used to elicit different emotional and cognitive responses and associations, often to convey brand identity and style. But, have you ever stopped and considered the needs of colour-blind users?

Colour blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In the UK this means that around 4.5% of the entire population suffer with colour blindness. Users who are colour-blind can mistake shades and/or be unable to distinguish between colours.

How does inclusive design help us here?

  • Don’t use colour as the only visual means of conveying information or action.

  • Ensure there is a sufficient contrast ratio between foreground items, for example text or icons, and their background.

  • Test your service using colour blindness simulation tools


An example of a poorly contrasted booking form

This example of an online booking form above does not provide enough contrast between the yellow and lime green colouring for a red-green colour-blind user to easily interact with. In the context of a booking form, a simple colour choice like this could lead to higher user dropout rates.

Avoiding the use of jargon and complex language

We can all think of examples of work jargon that we have grown accustomed (and immune) to, in our own industry bubbles. But, as soon as we step outside of it, we quickly realise it’s a bit meaningless and confusing for others. To break through this and create a more inclusive design, think about conducting a language audit with your users. This will help identify language choices that are unfamiliar or incomprehensible to others. The picture below helps to illustrate this:


An image showing the difference between using jargon and more familiar terms

Graphics

“A picture speaks a thousand words”. It’s a well worn phrase and is, therefore, easy to dismiss. For inclusive design, the choices we make for graphics represent low hanging fruit that can bring quick wins.


Your service should represent the audience it’s speaking to. Duolingo successfully incorporates diversity in graphics. Their ethos is to bring people together through language, and their service reflects that. Working through the app’s exercises you are met with a diverse variety of characters – genders, races, ages, physical expression and even heights.


A screenshot of Duolingo's app showing multiple genders and races
Credit: Duolingo

The use of diverse imagery in its learning exercises is a great example of inclusive design that helps users to see part of themselves reflected in the service.

Customisation

Conventional design choices can lead us down the path of designing for the “perfect user journey” or “blue-sky” scenario. But does everybody really fit that profile?

Customisation can be a useful inclusive tool that gives users the opportunity to tailor their experience according to their preferences. For example allowing users to customise their design and experience in settings.

  • customise keyboard shortcuts for common actions

  • customise sizing and styles

  • enabling haptic feedback (haptic feedback is the use of touch to communicate with users, for example, the vibration of a mobile when you click on the incorrect option)

Finishing thought

Inclusive designs create a great user experience by considering a broad cross-section of perspectives and removing barriers.


By creating a diverse team, involving users in the design, or by following inclusive best practice methods (preferably a combination of all three!), you will be well on the way to creating an amazing, inclusive service for all users.

224 views

Recent Posts

See All