Hi, I’m Jakrayut. As a Lead UI designer at Morphosis, I create intuitive web and mobile user interfaces for some of Thailand’s leading organizations.

Inclusive Design: Why designing for the extreme benefits everyone

Imagine a playground filled with only 1 type of swing and it requires you to be a specific height with 2 arms and 2 legs. Evidently, the only people who will come are people who are compatible with the swing, simply because the design welcomes them and no one else. Despite that, there are various ways you can design the experience of swinging. For example, you can change the shape of the seat, the length of the chain or even make the environment swing and keep the person stationary. Participation shouldn’t be thwarted by a particular design, but the design should rather change to facilitate participation. 

The exact phenomenon also applies to technology. If expressing your thoughts required a keyboard, mouse, computer screen and fluency in English, the only stories we could read are from people who match these criteria, while people may not fit these criteria are left unheard. In this case, designers have the ultimate power to decide who can interact with the environment and who is excluded.

Inclusive design is often confused with designing for people with disabilities. While it’s true, inclusive design goes beyond this – it’s about designing a product for a diverse range of people as possible and being able to use it in a variety of different environments. Inclusive design is how to make your app easy to use when people are trying to navigate a busy street while carrying shopping bags, not simply making texts and images bigger for visually impaired people. It encourages us to consider how gender, age, sexuality, ethnicity, education levels, income, language and culture shape the way we interact with the world. Although it’s impossible to satisfy all 7 billion people in the world, more importantly, it’s about designing products and services in light of inclusive design. 


Source: https://unsplash.com/

Why design for a diverse market?

The ethical case for inclusive design is apparent, most of us want to build a world where everyone has an equal chance of engaging in society. Coupled with an ageing population in most parts of the world it makes perfect sense at a societal level. On a business level, inclusive design is lucrative and is adopted by some of the world’s leading companies to develop a larger customer base. Conceivably, the most useful business case is designing products that a greater number of people can use and be satisfied with mainly because of a greater fit with everyone’s capabilities. When thinking about capabilities, it’s more convenient to imagine 3 levels:

  1. Permanent disability (e.g losing an arm)
  2. Temporary disability (e.g. arm injury)
  3. Situational disability (e.g. carrying a baby)

Source: https://www.microsoft.com/design/inclusive/

The market for people with one arm is probably small, but a product that can be used by new parents carrying a baby is larger. Therefore, designing for the smaller market of permanent disabilities is perhaps an effective way to develop products that make the lives of the majority more efficient and enjoyable.

Text-to-voice services were initially developed to aid disabled people in living independently. But the technology was further developed and has been integrated into software that people use daily, including Alexa and Siri. Alexander Graham Bell might be credited as the inventor of the telephone, but it was initially created as a hearing aid for his deaf mother. Television closed captioning and transcription were designed for the deaf, but are now widely adopted and useful in a loud bar or a quiet lounge. By designing for the extremes, the product becomes useful for all types of people. 


Source: https://unsplash.com/

Inclusive design is a win-win for customers and businesses. It expands your product’s reach, sparks innovation, and helps your company take on a position of social responsibility.

Where to start?

There is a wide array of blogs and tools that help audit your website to ensure they meet accessibility standards. But if you don’t want to get lost in a flood of information, a good starting point is the WCAG (Web Content Accessibility Guidelines) published by WC3 (World Wide Web Consortium). The guideline provides a comprehensive overview of how to ensure your website is accessible. 

We prepared a summary to familiarize yourself with the requirements as a starting point and how the implementation might look like. 

Visual Representation

Choose colors wisely

Over 90% of content information is depicted using color, but creating an accessible website means not solely relying on sensory characteristics (e.g. sight, color, shape, sound) to display information. Essentially, color shouldn’t be used as the only visible means of conveying information, in case your user is colorblind. 
You should make sure the color of foreground elements and the background has sufficient contrast to ensure everyone can distinguish between the elements on the page. The WCAG recommends a contrast ratio of 4.5:1. You shouldn’t dismiss usability just because a grey background and white text have better aesthetics. 

Avoid using clashing colors that could cause eye strain. Bright colors are used in advertising and graphic design to draw attract attention, but some color combinations could be unpleasant on the eyes.

Source: Morphosis

Size matters

There are no strict requirements on font size, but designers should stick to common sense. Nonetheless, enlarged texts shouldn’t lose functionality and readability; in other words, text can be resized without requiring users to scroll horizontally. According to the WCAG, users should enlarge text to 200%. To accomplish this, you should use percentage, instead of a specific font size (pixel, point). A good starting point is 16px for body text.

Spacing

Line spacing might not seem important for the average user, but line spacing is as important as font size for the disabled. Text that are too cramped becomes hard to read, while large spacing makes elements seem unrelated. Users with cognitive disabilities or visual impairment might have issues tracking lines of text.
Line length also heavily affects readability. The WCAG requires a maximum of 80 characters per line, but the ideal line length is 40-60 English characters.

Alignment

Left aligned text is the easiest to read and people with cognitive disabilities have issues with justified and center aligned texts. Right aligned text results in uneven left margin that greatly reduces reading speed.

Font

There are no requirements for fonts, but naturally they should be readable and plain, fantasy and cursive fonts are a poor choice for a website, regardless of accessibility. 

Source: Morphosis

Navigation and Layout

Keyboard navigation

For a website to be accessible, the website should be usable without a mouse, this includes accessing pages, links, buttons, forms, etc. People with motor and visual impairment rely heavily on keyboard-only navigation. The most common method is using the Tab key and arrows for navigation and enter to submit. Designers should make sure to have a visible indicator around an element to show it is selected. Most importantly, there shouldn’t be any keyboard traps, which is when a user can’t move from the object in focus. Also, the entire website should allow keyboard navigation, not only in certain sections.

Heading structure

It is important to organize your content with the correct structure because screenreaders navigate a website by heading structure. Therefore, it is important that you don’t skip headings levels so that the content of the website is clear and has a meaningful flow.

Tips for proper heading structure:Use h1 for the primary title of the page only and don’t skip heading levels (e.g h1 to h3) as the flow will be interrupted if a screen reader is used.

We hope this short summary provides sufficient information to have a basic understand of how to design a website or application for a more diverse group of users. Inclusive design is a win-win for customers and businesses. It expands your product’s reach, sparks innovation, and helps your company take on a position of social responsibility.

Comments (0)

Connect with