How to Implement Inclusivity into Your UX/UI Design

If you haven't read it yet, make sure to do so before jumping into this one. Now, let's dig deeper and discuss what aspects you should consider to make your design emphatic and respectful for diverse users. 

Essential Principles and Practices

When designing a web or mobile app, you should follow these design principles to ensure that the UX/UI is:

• Clear – to help users navigate through intuitive layouts with a distinct CTA
• Powerful – to be adaptable to diverse user needs and scenarios‍
• Specific – to support platform-specific assistive technologies like touch, keyboard, and mouse

Inclusive design is a process that takes time and constant refinement. To create an intuitive user experience, start with UX research to truly understand your users’ needs. This crucial step helps you present content that resonates with them and identify any usability issues, accessibility barriers, and other challenges. But before you start, there are a few aspects to think about first.

Information Architecture

Organizing information clearly and logically in digital products is crucial for helping users find what they need. This is particularly important for visually impaired users who rely on assistive technology that converts written text on screens into speech. 

To ensure that, focus on layout as an essential aspect of design:

• Make the layout responsive, with different screen sizes and resolutions, so that users can access and navigate the interface on various devices. 
• Ensure the interface has clear and consistent navigation, especially for ones with visual and motor disabilities.
• Provide alternative navigation options, like keyboard shortcuts, or skip navigation links to accommodate users who can't use a traditional mouse or touchscreen.

Content

The next important thing to consider is content and inclusive language, which should be crafted to respect all users, stressing simplicity and tone to make everyone feel welcome. According to the Nielsen Norman Group, content must be easily visible so users with specific challenges can still experience the presented information. Some features like speech functionality are crucial for those who rely on text-to-speech reading.

Let me give you one common example. CTA buttons labeled “Learn more” or “Click here” can often lack clarity outside their context, hindering inclusivity. To improve usability in this case, consider renaming such labels. Instead of saying “Get started,” go for something more specific, such as “Book a meeting”. This will make the users feel they’re starting a valuable journey. That’s why you should: 

• Reduce mouse clicks (ideally to one) to assist users with weaker motor skills who may struggle to target UI elements.  
• Ensure clickable UI components are adequately sized and spaced apart to improve usability.
• Avoid interactions that rely on timing.

Typography

Did you know there are around 7.5 million people with dyslexia in Germany alone? This data tells us how important it is to use typography that's easy to read, which involves selecting fonts that are legible and readable. Legibility refers to how effectively a user can distinguish individual letters, while readability means how effectively a user can read and understand sentences. You should also consider to:

• Maintain a line length that allows comfortable reading; e.g., 45-75 characters per line is acceptable, and approximately 66 characters per line is comfortable. 
• Use accessible typefaces that are readable at both small and large sizes. You should also ensure that individual letter forms are distinct (e.g., I, l, 1, and 0 and O are different). For example, you can't go wrong with Sans-serif.
• Use font size and line width to determine line height for easier reading. Too tightly spaced lines can reduce readability, making it difficult for the eye to know where to return when the line breaks.

Use actual text instead of images for users with screen readers.

Colors

To make your design inclusive, use high-contrast color combinations. This will help users with visual impairments or color vision deficiencies easily recognize different components by focusing on the contrast ratio.

Pay attention to the contrast ratio between text and background. According to WCAG, contrast has three levels of compliance based on the contrast ratio of layered colors:

• A – basic/minimum level of accessibility 
• AA – mid-range level of accessibility; the compliance level that most organizations strive to meet
• AAA – the highest level of accessibility; the optimal compliance level that maximizes accessibility and enhances user experience

Keep in mind that not everyone perceives colors the same way. Therefore, color shouldn't be the only way to convey information or prompt actions. Instead of relying only on color, use additional visual cues like icons or text to make your message clear to everyone.

Multimedia

For years, UX/UI designers have used minimal illustrations with outlines and colorful hair to be more generic and inclusive. But without skin tones and distinct features, these figures often ended up looking white, unintentionally excluding others. To truly represent diversity, multimedia, like photos and illustrations should show a wide range of human characteristics and activities:

• Avoid stereotypical depictions of professions and make sure to include people with disabilities.
• Pay attention to details like left-handed users or those with prosthetic limbs.

When it comes to multimedia, alt text or alternative text is often overlooked. It's brief, descriptive text for images and visuals on a website embedded in HTML that helps screen readers describe content to users with visual impairments or specific preferences. 

Plus, it's useful for those with slow internet connections. By providing key details about an image, alt text ensures everyone can enjoy and interact with the content equally:

• Avoid terms like "image" or "picture," as screen readers already convey this information. Instead, try to describe an image or illustration in as much detail as possible like in the image below.

Most animations, videos, and moving text are usually harmless. However, some designers insist on using dramatic flashing or flickering light effects, such as strobe effects, especially in video content. These effects can cause continuous screen flashing, which might be dangerous for people sensitive to seizures triggered by such lights.

Let's not forget a crucial part of video content — captions. They help those with hearing impairments and people in noisy environments. Nowadays, most social media videos come with captions, making it easier to watch them without sound, especially when you're out in public.

Useful Figma Plugins to Check Accessibility

There are many plugins that can help you review and improve your design. Here are some of them:

• Contrast Checker lets you quickly check if your colors meet WCAG
• Stark is a powerful combination of integrated tools, such as a contrast checker, focus order, alt text annotations, and vision stimulator
• Color Blind shows the design for eight different types of color vision deficiencies, ensuring the design remains effective for all users
• A11y ensures that text is readable for users by adhering to WCAG and provides color sliders to adjust the colors and contrast ratio
• A11y Focus Orderer lets you add accessibility annotations to your designs for the interactive elements of websites, web pages, and mobile apps

Final Thoughts

And that's that! I hope this blog post helped you understand why inclusive design is crucial for creating a welcoming space and making simpler, more successful products.

Always prioritize empathy and social responsibility in every design phase. By doing so, you'll enhance usability for everyone, which will result in higher engagement. It's more than just a step; it's a guiding principle that drives impactful design. 🪄