How to Implement Inclusivity into Your UX/UI Design
![](https://cdn.prod.website-files.com/5fb39592cb1bfc03c9f9b6d2/66a21c3942bb29ec1c62c9d6_Blog%20cover.jpg)
Welcome back! I hope you enjoyed the first part of this blog post, where we talked about the basics of inclusive design and highlighted some benefits it can bring to brands.
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.
When designing a web or mobile app, you should follow these design principles to ensure that the UX/UI is:
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.
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:
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:
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:
Use actual text instead of images for users with screen readers.
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:
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.
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:
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:
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.
There are many plugins that can help you review and improve your design. Here are some of them:
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. 🪄
Ena is a UX/UI Designer at COBE who loves all things creative. When she's not crafting amazing user experiences, she enjoys making illustrations, photography and aerial silk.