Article
Product design

updated on:

5 Sep

,

2024

Design That Benefits Everyone: Top 5 Inclusive Design Examples

9

min to read

Share
Table of contents
Share

Have you ever thought how many people left your website or app just because they couldn’t use it? Probably, they were unable to read the small-sized text, got puzzled with a complex site structure, or didn’t notice a low-contrast CTA button. The fact is something frustrated your potential customers so that they decided to go elsewhere. These barriers not only frustrate users but also lead businesses to miss out on valuable engagement and, consequently, revenue.

According to the World Health Organization, approximately 15% of the global population lives with some form of disability. This statistic underlines the significance of designing digital products that are not only accessible but inclusively cater to the needs of a diverse user base. Inclusive design transcends the traditional boundaries of accessibility to embrace human diversity in its entirety, creating multiple pathways for every individual to feel valued and included.

At Eleken, a design agency specializing in SaaS products, we have long championed the cause of inclusive design. Our approach is rooted in the belief that design should cater to the full spectrum of human diversity, ensuring that everyone, regardless of their abilities or circumstances, can have an enriching and positive experience with digital products. Through our work, we aim to illuminate the path for businesses to forge stronger, more inclusive connections with their audience.

In this article, we delve into the concept of inclusive design, distinguishing it from mere accessibility, and underscore its paramount importance in today's business landscape. Let's dive in! 

Inclusive design vs. accessibility

First things first, let's tackle our terminology.

What is inclusive design?

Inclusive design is a design philosophy that emphasizes creating products and digital experiences that are accessible and usable by as broad a range of people as possible, regardless of their abilities or circumstances. It goes beyond accessibility to include and learn from people with a range of perspectives, ensuring everyone feels included and can fully engage with the product.

Microsoft, supporting the global inclusivity trend, states on a corporate website: “Inclusive Design is a methodology, born out of digital environments, that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives.”

Maybe you've heard about universal design. So are the universal and inclusive design the same?

Comparing universal design vs. inclusive design, there will be a distinct difference in their key purpose. Whereas the universal design aims to create one way as many people as possible can use, the inclusive design develops various solutions suitable for those being usually excluded. An example of the inclusive design would be accessibility widgets on websites or custom responses on gender-related questions in typical data collection forms.

How does inclusive design differ from accessibility?

While both inclusive design and accessibility aim to make products usable by people with disabilities, inclusive design takes a broader approach by considering the full range of human diversity. Accessibility typically focuses on technical standards to accommodate users with specific disabilities, whereas inclusive design seeks to create multiple ways for all users to participate.

Inclusive design examples

Let's see how famous products adhere to the principles of inclusive design.

Intercom Messenger

intercom messenger page design

Intercom Messenger is accessible and fully complies with WCAG 2.0 guidelines.

The features that make the Messenger accessible are:

  • Screen reader support
  • Keyboard navigation
  • Color contrast

Also, Intercom Messenger provides a possibility to include descriptions of images and captions of videos you share.

The company’s website has a clear and easy-to-follow structure. Text blocks alternate with images and make it easy to percept the information.

Zendesk

zendesk help page design

Though Zendesk is not fully WCAG compliant yet, they follow WCAG 2.0 guidelines to provide their customers the best possible experience.

Zendesk products include these accessibility features:

  • Clear navigation, page titles, and headings
  • Keyboard shortcuts
  • Image tagging and text alternatives
  • Comprehensive links
  • Color recognition

Here you can find the full features list for your reference.

Salesforce

salesforce main page design

Salesforce products meet WCAG 2.1 guidelines. They are accessible to all people, including those working with assistive devices such as speech recognition software and screen readers.

Depending on the product, the design features include but not limited to:

  • Meaningful page titles
  • Logical page layout
  • Text magnification up to 150%
  • Captions for videos
  • Screen readers
  • Keyboard navigation
  • Images alternative text
  • Color contrast

Userway

userway main page design

Userway is the world-leading provider of an automated website accessibility solution that can work on different platforms. Userway’s accessibility widget can easily activate multiple features that make the website design inclusivity-friendly.

The widget switches on:

  • Keyboard navigation
  • Screen reader
  • Text magnification
  • Special dyslexia font
  • Dark and light modes
  • Invert colors
  • Color desaturation

Also, it can show the page structure, highlight links, and pause animations.

Headspace

headspace main page design

Headspace's website also has a customizable widget, giving a possibility to activate necessary features upon a particular user’s needs.

The widget provides this kind of adjustments:

  • Navigation – screen and text reader, keyboard navigation, voice commands
  • Color – background change, dark and bright high-contrasts, monochrome
  • Content – text magnifier, image descriptions, readable fonts

Apart from the widget, the Headspace website design has a clear layout, good color contrast, large buttons, and self-explanatory links.

Now that you've seen how brands can tackle inclusivity, and maybe got a bit of inspiration, let's tackle some theoretical questions. 

Why is inclusive design important?

If we omit the global value of inclusivity and consider it from a business perspective, the answer is pretty straightforward. The more people you reach, the more you increase your market share and pool of potential customers.

The inclusive design serves as a strong base for beneficial business-customer relationships and adds one more point to your company’s social responsibility score. Also, being down to earth, making your website accessible can merely protect you against lawsuits. If many people can’t access your product, they can blame you for discrimination—this problem you likely want to avoid.

While the inclusive design is a mindset, accessibility remains its core objective. It’s never too late to make your website and products more accessible to ensure better business results.

Can inclusive design benefit users without disabilities?

The answer is also: absolutely. Inclusive design benefits everyone, not just those with disabilities. For example, larger text and clear navigation can improve the experience for older users, while voice recognition technology can make multitasking easier for all users. The principles of inclusive design enhance the overall usability and satisfaction for a diverse user base, including those with temporary or situational limitations.

What does it mean for a website to be accessible?

As it's been mentioned above, accessibility is one of the main goals of inclusive design. Every page on your website should be easy to understand, use, and navigate for all users, including those with permanent or temporary disabilities, either physical or mental. Disabilities that complicate or make it impossible using the web include visual, auditory, cognitive, neurological, and speech impairments. 

However, improved accessibility also benefits people with age-related disabilities who have poor sight and weak memory or those with situational limitations like a broken leg, lost glasses, too bright sunlight, etc.

Web accessibility is regulated by guidelines that cover recommendations for making digital products more usable for people with special needs.

ADA compliance and WCAG guidelines

ADA stands for Americans with Disabilities Act and communicates a prohibition of discrimination on a disability basis. The ADA principles underlie Web Content Accessibility Guidelines (WCAG).

The Web Content Accessibility Guidelines require a website to be:

Perceivable: if a person can’t see, they can read written content by a screen reader. Audio content has captions for those who can’t hear

Operable: if a user is unable to use a mouse or touchpad, they can navigate by keyboard or voice commands

Understandable: if people click on a navigation menu or a form, it behaves in an expected way

Robust: the website or product is compatible with current assistive technology and has the capacity to extend to its future versions

And now we’re getting closer to the design itself.

Inclusive design principles

Implementing inclusive design starts with a commitment to understanding and valuing human diversity. Businesses can begin by conducting user research to identify the needs of diverse users, including those with disabilities. Following best practices and guidelines, such as the Web Content Accessibility Guidelines (WCAG), is crucial. 

If to translate accessibility guidelines into the design language, they would be saying the following:

  • Use distinct colors and good contrast
  • Write in simple language and use bullet points
  • Create the logical, easy-to-follow layout
  • Break content with images and videos
  • Design large buttons and make them distinctive
  • Use readable font size and ensure text magnification
  • Describe links comprehensibly
  • Enable keyboard navigation
  • Provide subtitles for video and transcripts for audio
  • Add descriptive alt tags to images

This list doesn’t pretend to be extensive, including all the requirements of inclusive graphic design. I outlined those that would be great to focus on when working on your website accessibility improvement.

Let’s see how big and not that big brands build the inclusive UX design and learn what we can implement on our end.

A final word

The importance of inclusivity and web accessibility continues to grow. 

Based on inclusive design principles, your digital products will provide a seamless user experience to all users, no matter whether they have a temporary or permanent disability.

Also, inclusive design implementation will make your website usable to a broader audience and attract more potential customers to your business.

Contact us at Eleken if you want to develop an inclusive design for your product. We specialize in creating a user-centered design for SaaS and always ready for new challenging projects.

written by:
image
Natalia Borysko

Content writer with 12+ years in marketing, specializing in SEO-friendly web content, UX design, SaaS, product marketing, and competitive analysis.

imageimage
reviewed by:
image

imageimage