Inclusive product experiences are driven by a deep understanding of user backgrounds and abilities. Digital interfaces that prioritize inclusive design can positively impact the user experience by fostering a sense of belonging.

Inclusive design describes methodologies to create products that understand and enable people of all backgrounds and abilities. Inclusive design may address accessibility, age, culture, economic situation, education, gender, geographic location, language, and race. The focus is on fulfilling as many user needs as possible, not just as many users as possible.

At its core, inclusive design is about empathizing with users and adapting interfaces to address the various needs of those users. Inclusive design generates inclusive-design patterns. Let’s consider an example of an inclusive-design pattern.

Across the web, from government sites to job applications to obtrusive account-creation processes, users are asked to select their race from a predetermined set of options. When I was younger and trying to make a decision regarding this input, I struggled because the options were mutually exclusive. As a mixed-race woman, a form asking me to pick a single race felt like a small identity crisis — no one option did communicate my identity. Luckily, this form and its corresponding options have evolved to include a Two or more races option (or checkboxes instead of the former radio buttons). This is an example of an inclusive design pattern.

Accessibility and Universal Design vs. Inclusive Design
Two concepts related to inclusive design that are often mixed up with it are accessibility and universal design. All three concepts aim to reduce barriers between humans and technology and create inclusive experiences.

Accessibility is focused on ensuring that interfaces and technology can be used by people with disabilities (including auditory, cognitive, physical, and visual disabilities). Accessibility has a narrower scope than inclusive design in that it is focused on specific accommodations. Additionally, accessibility standards such as Web Content Accessibility Guidelines (WCAG) make accessibility somewhat easier to assess than inclusive and universal design. However, accessibility is only a bare minimum for meaningful experiences for individuals with disabilities.

Universal design aims to create one experience that can be accessed and used to the greatest extent possible by all people. Unlike inclusive design, universal design enforces a single design solution without need for adaptations or specialized design. Inclusive design accepts and embraces multiple design variations so long as they achieve the desired outcome. In general, universal design is more widely used in tangible and environmental contexts (after all, it’s costly to produce multiple functional variations of a physical object or space). Comparatively, inclusive design is applied more frequently to digital-product design because its relatively cheap and easy to adapt such interfaces.

Inclusive-Design Patterns: Examples
To reiterate, inclusive design may address a variety of topics, including accessibility, age, culture, economic situation, education, gender, geographic location, language, or race. In what follows, we provide several examples of inclusive design patterns.

Text Legibility and Dark Mode for Older Users
During our research with seniors, one participant remarked, “One thing I don’t like about computers is they make the type too small on the screen.” To ensure legibility, designers must use reasonably large font sizes, have high contrast between characters in the foreground and background, and use a clean typeface. These characteristics are important to all users; however, older users are particularly challenged by interfaces with poor legibility because presbyopia, a form of farsightedness, is common after middle age.

A webpage with small text and a cluttered layout
An 81-year-old participant browsed recent articles on the Globe and Mail website but struggled to read the text on the screen. While reading headlines, he lost his place multiple times (due to the densely organized text) and leaned closer to the laptop screen to see the text better.
Throughout three rounds of research, the most common complaint from seniors has been that sites and apps are designed with young people in mind and are often hard to read for older users. In the words of one study participant: “the internet is unfriendly to people with bad eyesight.” To make your UIs more inclusive, opt for legible fonts and offer a button for users to increase the font size.

Font size controls on an article webpage
Controls to increase font size in articles were provided on the Washington Post website. This function was inclusive to senior users with reduced visual acuity.
Another common issue in old age is cataract or problems produced by cloudy ocular media. Individuals with such issues have trouble processing interfaces in light mode; to help them, consider (but do not enforce) a dark-mode option for your UIs and take advantage of any dark-mode APIs that various operating systems may offer so that users who decide to switch to a dark mode can still use your interface.

Surname Inputs for Global Audiences
Successful global interfaces are reliant on digital inclusion. Around the world, there are many variations of surnames; however, Last Name form fields don’t always accommodate them. Restrictions like character limits, no hyphens, or restrictions on names that are spelled the same as inappropriate English words can make some people feel excluded.

On its support pages, TaxSlayer, a tax-filing software, communicated Last Name field limitations: hyphens are okay, but special characters such as apostrophes or accented characters are not. These limitations are due to Internal Revenue Service (IRS) formatting requirements. As a result, a Spanish surname like Martínez del Río would not be considered a valid entry.

A support page with information about last name form field limitations
TaxSlayer’s support page communicated Last Name field limitations, which were due to IRS formatting requirements.
The problem of denying authentic Name entries was prominent enough that Facebook created a support page dedicated to it. The page writes: “If you were unable to sign up for Facebook account using your authentic name, please fill out the form below so we can get you set up.” The form requested users to attach a document that confirms their name.

A form for users to submit in case their Facebook account username was rejected
A Facebook support form for users whose name was not accepted as a valid entry.
A Variety of Demographic Identifiers
In contexts where demographic identifiers (e.g., race, gender, sexual orientation) are requested, provide inclusive options. For example, Tinder, a dating application, allowed users to type a word that described their gender identity and provided more than 30 options. This level of specificity was inclusive to users who align with the selections.

Data entry fields in a mobile app which allowed users to type to select a gender identify
Tinder, a mobile-dating app, allowed users to select from a variety of gender identities. The interface also enabled users to share their gender on their profile, even though this setting was off by default.
Inclusive Facets
When you understand the needs of your users, you can come up with some delightful ways to satisfy those needs. For example, Pinterest, an image-sharing app, released a new feature which allowed users to filter based on some nontraditional options — for example, by hair pattern (e.g., protective, curly, straight). Though this pattern may seem like a minor addition, it is empathetic to Pinterest’s diverse user base and created an inclusive browsing experience.

Mobile app with card layout, images, and filters to search by hair pattern
Pinterest added inclusive filters to enable users to sort hairstyles based on their hair pattern.
Similarly, Sephora allowed users to search skincare products by Age Range (e.g., Teens, 20s, 30s). This design pattern is inclusive because it enabled users to find products that target age-specific concerns like acne or wrinkles.

Ecommerce webpage with skincare products and filters to search by age range
Sephora provided a filter that allowed users to find products relevant to their age range.
Diverse Illustrations
For many years, designers opted for minimal illustrations that often consisted of outlines of characters with colorful hair. These characters were intended to be generic, and the absence of skin tone was meant to make the graphics inclusive. In reality, these designs did the opposite. Without skin tones or other characteristics to communicate diversity, these illustrations all looked like white people, thus excluding everyone else. Over the years, multiple companies have shifted their illustrations and imagery to be more diverse and align with their user populations.

2 styles of illustrations used at AirBnb over the years
A before (left) and after (right) of Airbnb’s illustration evolution, which now prioritizes inclusion and diversity. (Sourced from Airbnb https://airbnb.design/your-face-here/)
2 styles of illustrations used at Atlassian over the years
A before (top) and after (bottom) of Atlassian’s illustration evolution, which now prioritizes diversity and inclusion. (Sourced from Atlassian https://www.atlassian.com/blog/inside-atlassian/designing-inclusive-illustrations-at-atlassian

Conclusion
Inclusive design can look different to different people. What may not seem exclusive or insensitive to you, can be incredibly offensive to another person. Remember, you are not your user. Use the examples in this article as inspiration and consider the following tips to grow your inclusive-design practice:

Prioritize inclusive research practices. When testing and evaluating your interfaces, ensure a diverse representation of users. Learn from this diversity and use it to target real needs.
Educate stakeholders on how different people use technology. Involve them in your research, share examples, and highlight user quotes.
Recognize exclusion. Don’t be biased into thinking your product is made for everyone. Monotony in aspects such as illustrations can communicate exclusion. Aim to reflect how people really are, not an oversimplified version.