Quick Guide to Inclusive Web Design

Key Takeaways:

• Inclusive design aims at taking perspectives of diverse user groups when designing a digital product.
• It considers temporary and situational factors that may play into user’s experience of a product.
• There are 8 principles of inclusive web design that designers may use when creating inclusive experiences.
• One of an exercise for designing inclusive web products is Microsoft’s inclusive design thinking.

A common misconception is that inclusive web design is an interchangeable term for accessible design. While there is a link, it’s important to recognize that accessibility is one component of inclusive design where we look at a feature or product from the perspective of multiple demographics.

Unfortunately, the word inclusivity is highly politicized, confusing designers about how to apply an inclusive midset. This article looks at inclusive web design, what it is, what it isn’t, and how design teams can build more inclusive user experiences.

Test product experiences on diverse user groups using code-based high-fidelity prototypes and get meaningful feedback with UXPin. Sign up for a free trial today!

What is Inclusive Design?

Inclusive design is a UX methodology where designers consider the environment and circumstances of diverse user groups and demographics to ensure products are accessible to everyone rather than a narrow set of users.

Following an inclusive design process encourages UX designers to think of permanent, temporary, and situational factors which prevent someone from using a digital product as intended.

Designers must avoid bias or assumptions when considering inclusive design like gender, age, race, and other generalized demographics. To view such broad demographics as limitations is biased (and potentially offensive) and could do more harm than good.

Inclusive Design vs. Accessible Design

Think of inclusive design as an umbrella term that encapsulates accessibility. Where accessibility focuses specifically on users with disabilities, inclusivity extends to other factors where users might feel excluded, such as language barriers, physical limitations, technical constraints, and even internet connectivity.

Accessibility addresses permanent limitations or disabilities, while an inclusive design approach looks at temporary and situational factors.

Permanent, Temporary, Situational Considerations of Inclusive Design

There are three categories UX designers use when considering inclusive web design:

• Permanent
• Temporary
• Situational

Within each of these categories are several disabilities, limitations, or constraints:

• Visual
• Dexterity
• Hearing
• Cognitive
• Speech

Design teams often make the mistake of only thinking about permanent disabilities when designing for accessibility/inclusivity, like someone with a permanent hearing impairment.

But what about those with temporary or situational hearing impairments?

• Permanent: Someone who is permanently deaf or hearing impaired.
• Temporary: Someone who has temporarily lost hearing ability due to injury.
• Situational: Someone who cannot hear because of the environment, like a busy commuter train with no headphones.

Often when you design for a permanent disability, temporary and situational users benefit too. But designers must look at each situation independently to ensure the experience is fully inclusive.

In this hearing impairment example, video subtitles would benefit all three categories. Still, designers might consider starting the video muted, so the busy commuter train user (situational) doesn’t disturb people around them.

The Importance of Inclusive Web Design

Inclusive web design is not only a good idea from a social perspective; it’s also critical for business value. Products that exclude certain human beings create missed revenue opportunities for companies.

Let’s say you’re designing an app for the US market and assume that everyone speaks English when in fact, 41 million native Spanish speakers live in the United States; it’s more than 10% of the population.

In another example, you assume that only people with a physical disability can’t use their hands. But what about someone who has injured their arm? Or the parent who’s holding a child and only has one hand available?

When you extrapolate disability, limitation, and constraint possibilities, you see the importance of an inclusive design approach and how it affects the business and its customers.

8 Principles of Inclusive Design

inclusivedesignprinciples.org lays out eight principles UX designers can use to create inclusive experiences for their users.

1. Provide comparable experience
2. Consider situational challenges
3. Consistency
4. Give users control
5. Offer choice
6. Prioritize content
7. Add value
8. Get diverse perspectives

Many designers might already apply these principles to designs, but understanding how they enhance inclusivity might encourage you to look deeper and find even more room for improvement.

1) Provide Comparable Experience

A user interface should enable all users to accomplish tasks with comparable value, quality, and efficiency. A great example is how we use alt text for icons, images, and other graphics so visually impaired users can digest visual content.

UX designers must also consider how technology might exclude users. Can someone complete the same tasks on desktop and mobile devices? Are there any differences between Android and iOS?

2) Consider Situational Challenges

How does someone’s environment impact their user experience? When designers empathize with users and test using digital products in various conditions, they can design solutions to meet situational challenges.

For example, designing a train ticketing app so that users with only one hand can buy a ticket also helps the busy able-bodied commuter purchase a ticket with only one free hand while walking to catch a train.

3) Consistency

Design consistency is vital for any digital product experience, but it’s even more critical when considering inclusivity. Users with cognitive issues often struggle to navigate user interfaces, so inconsistent designs or naming conventions could further confuse and frustrate people. 

Building a design system is one way organizations can maintain consistency and create the foundation for accessibility. With an accessible design system, UX teams can spend more time solving core usability issues rather than using style guides to build UI components from scratch for every project.

With UXPin, you don’t need plugins, addons, or extensions to build, host, and share a design system. Sync your organization’s design system to all users, set permissions, and even add documentation for each element and UI component. Sign up for a free trial and build your first design system with UXPin today.

4) Give Users Control

A good design gives people the features to control their user experience. You also want to avoid overriding browser and device settings, such as orientation, font size, zoom, and contrast.

Users with disabilities often require specific settings to use a digital product. Overriding these will impede their usage and exclude them from the user experience.

Designers should also consider how they apply UX patterns and animation. Infinite scroll is a challenge for users who only use a keyboard or screen readers. Adding a “load more” button gives users control while providing the same level of convenience.

5) Offer Choice

UX designers must balance convenience with choice. For example, swiping is quick and convenient but not always possible for everyone. Providing a button or link to achieve the same task makes the feature accessible to all users.

6) Prioritize Content

Prioritizing content and layouts can help users complete core tasks and find information effortlessly. Designers can also use UI components like accordions to hide content that users don’t need right away.

For example, using an accordion for an FAQ section helps screen readers quickly find the answer they need rather than going through every Q&A. Other users also benefit from this FAQ format because they can scan each question to find the one they want.

7) Add Value

UX designers must leverage device features to increase value for users. A device’s microphone, camera, vibration, and geolocation are helpful tools that benefit a wide range of people.

For example, optimizing your product for voice search and commands not only benefits screen readers but people using Alexa, Siri, or Bixby. 

There are many circumstances where UX designers can employ a device’s features to improve a digital product’s user experience and create more value for everyone.

8) Get Diverse Perspectives

UX designers must seek diverse perspectives from stakeholders and usability participants. Research and testing must include participants who might fall outside your user personas.

Maybe people with disabilities or limitations aren’t using your product because it excludes them. So, if you only conduct tests based on customer data and analytics, you might be unknowingly excluding people.

Applying Inclusive Design Thinking

Microsoft’s inclusive design toolkit outlines a design thinking methodology for UX designers:

• Get oriented: Start by educating yourself about user disabilities and limitations and how different people interact with technology.
• Frame: Look at your designs through the lens of human limitations.
• Ideate: Identify the mismatches between your designs and the limitations from step two. Recognize that there is no one-size-fits-all for product design.
• Iterate: Build and test concepts with prototypes.
• Optimize: Look at how inclusive design solutions impact the product experience, is it feasible, and how will it translate in real-world use?

Inclusive Web Design With UXPin

Prototyping and inclusivity testing during the design process is challenging. How do you test cognitive load or accessibility issues with image-based prototypes? How do you know whether the UI or prototype’s lack of fidelity and functionality is the cause of someone’s cognitive overload?

Designers must eliminate accessibility and inclusivity issues during prototyping and testing, or these end up in the final product, causing adverse effects for users. The problem is that image-based prototypes lack the fidelity and functionality for accurate testing. UX designers also struggle to get meaningful feedback from stakeholders.

UXPin is a code-based design and prototyping tool, giving UX designers the ability to create high-fidelity prototypes with final product functionality. Designers also get UXPin’s built-in accessibility tools to test color and contrast against Web Content Accessibility Guidelines.

UXPin’s high-fidelity, fully functioning prototypes allow UX designers to perform accurate tests during usability studies for meaningful results from diverse user groups, including those with impairments and disabilities. 

Design teams can also impress stakeholders with immersive prototype experiences that prove design concepts and get buy-in from decision-makers.

Four code-based prototyping features you won’t find in popular image-based design tools:

• States: Apply multiple states to a single element or component, each with different properties, interactions, and animations.
• Interactions: Create complex interactions with advanced animations and conditional formatting.
• Variables: Capture and store user inputs and use that information to take actions or personalize a user experience.
• Expressions: Create fully functioning forms, validate passwords, update shopping carts, and more with Javascript-like functions.

Sign up for a free trial and start designing more inclusive user experiences with UXPin’s advanced end-to-end design tool.