UI DESIGN FOR DYSLEXIC USERS

Pradipto Chakrabarty
UX Planet
Published in
9 min readFeb 22, 2023

--

Photo by NordWood Themes on Unsplash

Dyslexia is a neurological condition that affects an individual’s ability to read, write, and spell. It is a type of learning disorder that can make it difficult for people to accurately and fluently recognize words, comprehend written text, and spell words.

Dyslexia is not caused by low intelligence, poor vision, or lack of motivation. It is typically caused by differences in the way the brain processes language, and it can be inherited. Dyslexia is a lifelong condition that can impact people in different ways and to varying degrees.

People with dyslexia may have difficulty with phonemic awareness, which is the ability to identify and manipulate the individual sounds in words. They may also have trouble with decoding, which is the ability to sound out words and recognize them quickly. As a result, reading can be slow and laborious, and comprehension may suffer.

I wonder what it’s like to be Dyslexic by Sam Barclay

‘I wonder what it’s like to be Dyslexic” is a beautifully designed book by Sam Barclay that illustrates some of the issues a person with Dyslexia might have.

The prevalence of dyslexia varies by country, and estimates of the number of people with dyslexia can vary depending on how it is defined and diagnosed. However, here are some general statistics on dyslexia:

  • Dyslexia is estimated to affect about 5–10% of the population worldwide.
  • It is more commonly diagnosed in boys than girls, with a ratio of approximately 3:1.
  • Dyslexia is a neurodevelopmental disorder that affects people of all ages, races, and ethnicities.
  • The severity of dyslexia can range from mild to severe, and it can impact an individual’s ability to read, write, and spell.

Dyslexia can present a variety of challenges that impact an individual’s ability to learn and perform certain tasks. Some common challenges associated with dyslexia include:

Reading difficulties: People with dyslexia may struggle with reading accuracy, fluency, and comprehension. They may have difficulty recognizing words, understanding sentences, and making sense of longer texts.

Writing difficulties: Dyslexia can also make it challenging for individuals to spell words, organize their thoughts, and express themselves in writing.

Language difficulties: Dyslexia can impact an individual’s ability to understand and use language. This can include difficulty with word retrieval, grammar, and syntax.

Time management: Dyslexia can make it challenging for people to complete tasks efficiently, manage their time effectively, and keep track of assignments and deadlines.

Memory difficulties: People with dyslexia may struggle with working memory, which can make it difficult to remember and process information.

Attention difficulties: Some individuals with dyslexia may also have difficulties with attention and concentration, which can impact their ability to stay focused on tasks and sustain their effort over time.

Self-esteem and confidence: Dyslexia can also have a negative impact on an individual’s self-esteem and confidence, as they may struggle to keep up with their peers and feel frustrated or discouraged by their difficulties.

It’s important to note that dyslexia can impact individuals in different ways, and not everyone with dyslexia will experience all of these challenges. However, with appropriate support and accommodations, individuals with dyslexia can overcome these challenges and achieve their goals.

Neurodiverse design

Neurodiverse design is an approach to designing products, environments, and systems that takes into account the diverse range of neurologies and sensory preferences of different individuals. It aims to create designs that are accessible, inclusive, and accommodating to people with different cognitive, sensory, and physical abilities.

Neurodiverse design involves a multidisciplinary approach that brings together experts from various fields, including neuroscience, psychology, design, engineering, and user experience. It considers a wide range of factors, such as color contrast, lighting, sound, spatial design, and user interfaces, to ensure that designs are inclusive and effective for all users.

Color and Contrast

Visual design heavily relies on color as a dominant component. Our eyes are naturally drawn to color, making it the first thing we notice in an image. Contrast, which refers to the difference in brightness between background and foreground color, is also an important consideration for neurodiverse design.

In the process of making decisions for neurodiverse design, it’s important to take into account both color and contrast. Saturated colors such as blue, brown, and green are preferred by the neurodiverse audience, while brighter shades are typically avoided.

When it comes to contrast, designers must be extra careful. Individuals on the extreme ends of the neurodiversity spectrum may have strong reactions to poor contrast. It’s best to avoid high-contrast situations, such as classic black and white. Instead, opt for muted shades, pastels, and deep-toned colors with a low level of sensory distraction. Yellow is the color that causes the most sensory overload across the entire spectrum. Cooler, milder tones are more sensible when inclusive design is the goal.

It’s worth noting that dyslexic individuals are particularly good at detecting contrast between text and background color. If you’re unsure whether your contrast levels are appropriate, the Web Content Accessibility Guidelines (WCAG) is a great starting point.

As a general rule, color should not be relied on to carry the entire burden of communication. Other elements, such as text, should be used to help convey the intended message.

Typography

Readability is a crucial aspect of design that becomes even more important when designing for neurodiverse users. When it comes to typography, there are three key areas to consider.

Firstly, font choice is important. Certain fonts are designed to be more legible and comprehensible than others. Sans serif fonts are generally easier to read and understand than serif fonts, particularly on digital mediums where the latter can be challenging for dyslexic individuals. If serif fonts are necessary, they should be used for headings only and should have enough spacing between letters to avoid reading difficulties.

Photo by Brett Jordan on Unsplash

In addition to font choice, designers must also pay attention to spacing. Regardless of the font type or style, appropriate kerning is critical. Crowding words together can make reading difficult for individuals with dyslexia. The British Dyslexia Association (BDA) recommends keeping the letter width at 35% of the average letter and the inter-word spacing at least 3.5 times the inter-letter spacing.

Lastly, font size is important for all users. The letters should be large enough to read comfortably without squinting or holding the device at arm’s length. According to the BDA, font sizes of 12–14 points are ideal for body text, while headings should be 20% larger than the body text.

Language

To ensure that your design is considerate of all audiences, it’s important to improve your language. This is particularly important for dyslexic users, and making changes in this area can have a significant impact. Here are some tips to keep in mind:

  • Simplify your vocabulary: Instead of using technical jargon, opt for plain and simple language that is easy to understand.
  • Use shorter sentences and paragraphs: This makes your text less overwhelming and easier to follow.
  • Avoid metaphors and abbreviations: These can be confusing for dyslexic users. Instead, use clear and direct language.
  • Use active voice: This is easier to understand than passive voice.
  • Break up instructions into smaller steps: This makes the process easier to follow, and is useful for all readers.
  • Use bulleted lists: This helps organize information and makes it easier to read

Hierarchy

The use of hierarchy in a design can greatly enhance its readability by indicating the flow of information. By varying the size, placement, spacing, and other features of elements, viewers can easily understand the sequence of information presented. This is particularly beneficial for dyslexic users, who may struggle with traditional reading methods. Not only can hierarchy be established through text, but also through the use of icons, buttons, and other imagery.

When structuring the layout is to avoid using “Justified” formatting, which can be difficult for all users, particularly those with dyslexia or other neurodiverse conditions.

Designers can employ several tools to establish hierarchy in their layouts, including headings, pointers, text alignment, and spacing. Effective use of white space can also help to segment and organize the design.

Tolerance for Error

By acknowledging that users may make mistakes while navigating a design, you can develop interfaces that work to minimize errors and provide options for correcting them. This approach to design promotes universal usability and a positive user experience for a wider range of users.

Graphics and Multimedia

Incorporating graphics, images, and multimedia can help individuals with dyslexia understand information more easily. Visual aids can help break up text and make information easier to digest.

Readability Tools

Using readability tools such as text-to-speech software or dyslexia-friendly fonts can help individuals with dyslexia access information more easily. These tools can help improve the readability of text and make it easier for individuals with dyslexia to process information.

Conduct User Testing

To ensure that the design is effective in addressing the needs of dyslexic users, it is important to conduct user testing with dyslexic individuals to get feedback and identify areas for improvement.

Simpler Visual Cues

Strike out a balance between visuals and text in design. When designing for dyslexic users, it is important to remember their preference for visual information. As graphic designers, we are aware of how even little design decisions can affect the whole impact of the image. A slightly brighter color, a tweaked icon, inappropriately placed image, is what epic design fails are made of. Designers should strategize how supplement the text with adequate visual cues that dyslexic user won’t be turned off. An icon-rich visual can as easily is a sensory overload as a long piece of text.

Photo by Nick Fewings on Unsplash

Consistency

In terms of design, inconsistencies can cause issues for users with dyslexia and other neurodiverse conditions, as they have to frequently reorient themselves to the visuals. This can lead to a decision to not interact with your product, brand, or service at all.

However, incorporating consistency in your work builds trust with users. They can anticipate what comes next, such as the look of headings, the length of paragraphs, and the meaning of certain icons in specific contexts. This not only results in a thoughtful design but also a more reliable one.

Here are few websites that are accessible and usable for dyslexic users:

BBC News: The BBC News website has a dyslexia-friendly option that can be enabled in the settings. This changes the font to a more dyslexia-friendly font, as well as increasing the spacing between lines and letters. The website also has a clean and simple design, with easy-to-read headings and short paragraphs.

Oxford University Press: The Oxford University Press website has a range of accessibility features that can be enabled in the settings. These include a dyslexia-friendly font option, as well as options to change the font size and color scheme. The website also has a clear and simple layout, with easy-to-find menus and headings.

Dyslexia Help at the University of Michigan: This website is specifically designed to provide support and resources for dyslexic users. It has a clean and simple design, with large headings and easy-to-read text. The website also has a dyslexia-friendly font option, as well as options to change the background color and font size.

The Yale Center for Dyslexia and Creativity: Yale University’s Center for Dyslexia and Creativity seeks to illuminate the strengths of those with dyslexia, disseminate information, practical advice, and the latest innovations from scientific research, and transform the lives of children and adults with dyslexia. Visit their site to learn more about their cutting-edge research and get concrete tips for parents, educators, and individuals with dyslexia.

Inclusive and neurodiverse user interface design is an essential aspect of creating digital content that is accessible to as many people as possible, regardless of their abilities or disabilities. Inclusive design aims to remove barriers to access and ensure that all users can interact with digital content in a way that is comfortable and effective for them.

FURTHER READING & REFERENCES

Proposed user interface design criteria for children with dyslexia — International Journal of Engineering & Technology

--

--