UX Design

What Is Inclusive Design?

When thinking about the digital products we use daily, as product designers, our role also includes asking ourselves: who are the people using them? An inclusive design ensures that your users have a high-quality experience with your product regardless of their identity, preferences, cultural background, disabilities, or impediments. 

This article will explain how to design for inclusivity, familiarize you with the challenges and fears of such design, and provide some practical examples, so read on.

Diverse multi-color skin hands in the air, behind is the word Inclusive

What is inclusive design?

A design for inclusivity is not the same as a design for accessibility.

Accessibility design allows users with permanent, situational, or temporary disabilities in areas such as hearing, vision, speech, motor, or cognition to access a specific digital product and use it to achieve their objective. Still, disabilities are aspects of a user’s identity, so accessibility is one element of inclusive design.

As a fellow product designer, you’ve probably heard of using and exercising the skill of empathy when designing. But, when you need to design for inclusivity, empathy isn’t enough. 

A famous graphic and industrial designer, Charles Eames, explained his view of a designer and a user in a relationship similar to a guest-host one. He explained that the designer’s role is akin to a “very good, thoughtful host, whose energy goes into anticipating the needs of his guests.”

However, digital products today only sometimes live up to this premise. Because of reasons such as budget, pressure, deadlines, and other relevant limitations, designers fail to leave their comfort zones to understand the user entirely. Designs that are not inclusive can prevent a specific user from attaining their goal while using your product or, even worse – inhibit their autonomy.

Inclusive design makes designers bear diverse users in their minds when creating a product. To start designing for inclusivity, you need to ask yourself who you do not include in your designs and how to amplify their experience.

How to create cross-culture inclusive design

Be aware – delivering a cross-cultural design is challenging. To make your design effective, you must be mindful of not only language differences but also cultural customs, values, tendencies, and taboos. 

To design for cross-cultural inclusivity, your digital product will have to provide more than a simple language or currency change and representing imagery. When designing cross-culture inclusive design, you must consider different dimensions of cultures, which can extend to color psychology, symbol interpretation, or even complete mental models. 

For example, when you create a digital product for users worldwide who don’t read or write in the same direction, you should consider “mirroring designs – LTR and RTL versions of the wording, images, navigation elements, and CTA buttons.

When it comes to graphic or image representation, designers must take care of using culturally appropriate images. What is perfectly normal in one culture could be frowned upon in the other, so do your research. An inclusive design ensures that the chosen images won’t offend anyone and doesn’t steer them away from using your digital product. And this isn’t limited to the imagery: ensure all the other UI elements follow the inclusive and suitable tone. 

Product designers must also be aware of the number of characters that differ from language to language. For example, if you’re designing buttons for a product in English with German translation, you must be aware of special characters and the width of German words. Japanese and Italian are also one of the best examples of text shrinkage or expansion. To design for inclusivity, work to resolve this in the early UI stage to avoid bothersome and long hours of adjusting the already-completed design.

Finally, to deliver a high-quality cross-culture inclusive design, it’s paramount to employ a native speaker who will check the language and perform cultural checks. Cultural checks include reviewing imagery, used colors, phrases, context, abbreviations, and idioms to confirm everything is suitable and will resonate with users. 

We highly recommend conducting qualitative and quantitative research in the early UX phases when designing for inclusivity. It can be interviews, ethnographic studies, analyses, surveys, and similar, with the final goal of getting as much relevant data about the culture of your users as possible.

Facebook's login screen - reading left to right (English version)

Facebook’s login screen – reading left to right (English version)

Facebook's login screen - reading right to left (Arabic version)

Facebook’s login screen – reading right to left (Arabic version)

How to create a gender-inclusive design

One of the ways to deliver an inclusive design is to consider gender inclusion. Gender might be a buzzing word nowadays, but it’s an essential part of our identities. Gender is often confused with sex, but they are different things. Plainly speaking, the term “gender” is more complex and personal than the term “sex,” which refers to the biological differences between female, male, or intersex people.

Your users could be women, men, trans, nonbinary, and other genders, so when designing a digital product, you must ensure your design won’t ignore them, discriminate, or mistreat them in any way.

So, how to deliver a gender-inclusive design?

  • Think if there’s an actual need to include the gender parameter
  • Use the term “sex” instead of gender
  • Add inclusive options, such as non-binary, or a total list of diverse gender options

Suppose you intend to collect the gender information solely for salutation purposes. If you want to design for inclusivity, we suggest using options such as Ms, Mr, Mrs, Mx, etc., or opt for honorifics instead. Similar to gender, ensure providing enough honorific choices to avoid excluding anyone.

Check out the design system for GOV.uk, which contains straightforward approaches applicable to anyone who want to take a step toward a gender-inclusive design. Good UX writing can also help you to add inclusion to your product. Additionally, try to avoid gendered words. 

Terms such as guys, ladies, gentlemen, mother, and girls imply a gender. It is impossible to be 100% sure that all of your users identify with the word you’d use to address them. Moreover, you cannot know whether all of your users will appreciate you addressing them with terms that imply gender. To design for inclusivity, we suggest you refrain from such language and use more neutral terms, such as friends, fellow *input profession*, colleagues, parents, etc.

For more examples of forms with inclusive design, check out this inclusion guideline from the University of British Columbia. Another example of non-gender-inclusive design is the fashion industry. Most e-commerce sites let you browse women’s and men’s “sections” separately. Some users want to explore other clothing options for various reasons, and such separation might affect their experience.

From the societal point of view, some users feel obligated to fit in the binary gender system, which prevents them from expressing their fashion style or finding the proper size or fit. Such negative user experiences can have a strong psychological impact. 

A man and a woman wearing eyeglasses, and you can decide between browsing through men's or women's products, one at a time

The app allows for deciding between binary options before viewing an eyeglasses collection

List of multiple options you can choose from simultaneously based on what products you use the most

The app allows for selecting multiple shopping profiles at once and allowing you to browse through products gender-neutral

How to make a racially inclusive design

Gone are the days when racial diversity isn’t adequately represented within the products we use. Creating a racially inclusive design is another vital step to take if you want to advance the overall inclusion of your product. Racial bias in design happens when designers (and other people connected to the process of developing a digital product) miss the opportunity to design for inclusivity and consider the needs of users of a different race.

Having the same perspective within a whole team can result in blind spots that can cause a backlash, lousy responsiveness, and, more importantly, dissatisfied users prevented from reaching their objective. To avoid such an unfortunate result, you should conduct adequate usability tests with diverse users and consider their feedback.

For example, software engineers at Google discovered their camera app took low-quality pictures of their dark-skinned users. After such discovery, they undertook full-bodied and highly diverse usability tests to improve their camera.

On the other hand, having an inclusive design can open up new opportunities and show ways to new markets. Numerous businesses claim to experience higher success rates and revenue after designing for racial inclusivity.

So, how to design digital products that are racially inclusive?

  • Build personal knowledge about racial differences
  • Recruit more racially-diverse participants for user testing
  • Ensure your team reflects the diversity of your users
  • Gather more relevant feedback via racially diverse user interviews
  • Include more racially inclusive graphic or image representation
  • Constantly reiterate your design process to avoid blind spots

Unfortunately, there are numerous examples of colorism offline and online. Many companies still fail to design for inclusivity of races: they lack in images, respectful and correct phrasing, or even options in solutions. Work to start recognizing such failures to deliver an inclusive design and apply this knowledge to your projects whenever possible.

How to make LGBTQ-inclusive design

There are multiple steps you can take if you want to make a digital product that is welcoming for all your users, including the LGBTQ.

Such a design will positively benefit your business and your users. Your target audience most likely includes users who belong to the LGBTQ community or at least have LGBTQ friends or family members. So, as a product designer, you want to ensure everybody has a seamless experience while using your product. So, why would you estrange a significant part of your users because of their sexual preference?

An inclusive design that validates the LGBTQ users will appear more friendly and modern and automatically feel better to use. The easiest way to start working towards LGBTQ inclusivity in your digital products is to include representative imagery. Still, try to go beyond selecting a cliche photo of a same-sex couple. Opt for higher-quality images that represent LGBTQ individuals, as well as couples. Deliver adequate icons, or add drawings and sketches that represent LGBTQ.

Similar to gender-inclusive design, when designing LGBTQ-inclusive products, use gender-neutral terms and provide options in your radio buttons. By giving more options, you also get an opportunity to dive deeper into the nature and life of your users. Inclusive design shouldn’t be reserved for Pride month only – it should create a positive and friendly environment every day.

Design for inclusivity with the following tips:

  • Allow your users to choose their suitable pronouns;
  • Provide with gender neutral avatars;
  • Avoid stereotypes in colors, aka steer clear from using pink and blue to represent gender data;
  • Utilize LGBTQ people in your research and design testing phases (you can reach out to your local LGBTQ charity or volunteering organizations);
  • Get familiar with the correct terminology and utilize it in your UX writing process;
  • Determine the protocols for protection from harassment.

According to the LGBT+ Pride 2021 Global Survey, around 10% of the population belongs to the LGBTQ+ spectrum. Delivering a product that excludes this population will give the impression of an outdated and neglectful business that doesn’t care about its users.

Diverse multi-color skin hands in the air

Allow your users to choose their suitable pronouns;

The challenges of inclusive design

For the record – there are numerous other ways to create an inclusive design. Your product can also consist of generationally inclusive or socio-economically-inclusive – the possibilities are endless. But, the central challenge of designing for inclusivity is if it’s even possible to design for universal human diversity.

Moreover, it’s still hard to learn about all the inclusion possibilities and solutions since there aren’t any determined benchmarks we can try to achieve. Most examples of inclusive design still refer to the industrial world, which you can apply to build a sidewalk or design a kitchen utensil. It remains unclear how to design for inclusivity in digital technology. 

Some challenges considering designing for inclusivity include fear, hesitation, and the never-ending process of it.

Some stakeholders and designers might show reluctance when hearing the word “inclusive” because they immediately start connecting it with being “politically correct.” Because of the rising trend and somewhat hyperbolized political correctness, some might fear losing their creative freedom. In reality, inclusive design is all about understanding all your users and producing a solution that will resonate with them and help them achieve their goals, regardless of race, gender, culture, generation, or sexual preference.

Moreover, designing for inclusivity is a continuous process. To quote Kat Holmes from her book called “Mismatch,“the work of inclusion is never done. It’s like caring for your teeth. There is no finish line. No matter how well you clean your teeth today, over time, they require more care.”

Conclusion

To summarize, delivering an inclusive design is a complex and strenuous task, but it always brings good results and benefits the whole community. Design is a tool you use to create function and bring beauty to lives – all lives, so it’s crucial to have a consistent engagement. 

If you want to learn more about how to design for inclusivity, we highly suggest following books like Mismatch, Building For Everyone, and Inclusive Design for a Digital World. You can also explore various toolkits for inclusion, such as the Inclusive Design Toolkit from the University of Cambridge or the Microsoft Inclusive Design Toolkit

Different disabilities are still parts of our individualities and identities, so designing for accessibility falls into designing for inclusivity. In one of our recent blog articles, we dived deeper into how to design for accessibility. You can learn more details about accessibility, its types, and a couple of supercharged tricks there.

For more educational and inspiring content, follow our Instagram, where we share daily tips, tricks, and other valuable insights.

If you want to deepen the conversation about inclusive design, feel free to reach out via our contact form.

Happy designing! 🥳

UI DESIGN FOUNDATIONS

Kickstart your career in UI design by building solid UI foundations

Are you a beginner looking to start your journey into UI design? Or perhaps you’ve been self-learning for a while but aren’t quite confident you’ve grasped the basics?

You might like the following
Blog Articles