How to Design for Dyslexia
Knowledge Share | Industry Savvy

How to Design for Dyslexia

on / by Robyn Collinge

According to The Yale Center for Dyslexia & Creativity, up to 20% of the world’s population could be struggling with dyslexia. Yet when it comes to creating accessible products and platforms, it is frequently overlooked. Dr. Sally Shaywitz explains, “with dyslexia, we don’t have a knowledge gap; we have an action gap.”

Thanks to our access to a huge amount of feedback data, here at Usabilla, we know how important accessibility is to all users. That’s why improving our own has a high-priority on our current digital roadmap.

So, if one in every five of your visitors are potentially affected by dyslexia, what can you be doing to optimize your digital touch points with these users in mind?

Defining Dyslexia

Contrary to popular belief, dyslexia is not simply a case of seeing letters and words back to front. It’s a cognitive disorder in which the brain takes longer than usual to identify and connect letters and words with other kinds of knowledge, for example translating them into sounds.

Although dyslexia affects a large percentage of the population, designers are often ill-equipped to create accessible online experiences for dyslexic users. As Andrew Zusman points out, “the number of blind users, for example, pales in comparison… but it is likely that most designers have a far clearer picture on how to design for blind users compared to how to design for dyslexic users.”

Fotolia_117153785_Subscription_Monthly_M-n4zj4b0rgwuf0mk4hty1aha28mevvcfgimaowtyhs0

With such a large variety of factors to consider, how do you get started?

Well, first up, after surveying a large amount of dyslexic people, UX Booth identified three key takeaways to consider when optimizing an accessible digital experience.

1. There aren’t a universal set of symptoms

Dyslexia affects people in a huge number of ways. Difficulties could manifest in reading while others struggle with writing, and for some, it’s numbers and mathematical challenges.

2. Dyslexia has its advantages

Malcolm Gladwell has famously used dyslexia as an example of a ‘desirable difficulty’, and many sufferers take pride in their unique approach to creative problem solving as a result. Notable entrepreneurs who identify as dyslexic include Richard Branson (Founder of Virgin) and Gary Cohn (President & COO of Goldman Sachs).

3. There isn’t a one-solution-fits-all

After asking those in the survey which websites, apps, and devices benefited them most, UX Booth received a diverse amount of answers. Where one user might favor clear typography, another prefers reassurance in a checkout process.

Designing for Dyslexia

So, now we know a bit more about the struggle dyslexic users can face, it’s time to consider the best practices designers can abide by to ensure their digital experiences are accessible as possible.

Typography

Often the most commonly cited best practice, there are a lot of font and typography decisions that can make a real difference for dyslexic users.

Try to use a sans-serif font. The ‘hooks’ on the main strokes of serif letters may be visually appealing, but they can create problems for dyslexic users by distorting the shapes of the letters. If you are required to use a corporate serif font, then Mel Pedley suggests reducing the letter-spacing slightly so that the letters within a word lie closer together but increasing the word-spacing to create a larger distance between individual words.

Dyslexie-typeface-by-Christian-Boer-dezeen_SQ01

There are also typefaces developed especially for dyslexic users, check out OpenDyslexic or Dyslexie for ultimate readability.

Also, try to avoid using italics. The letters have uneven lines compared to regular styling and can visually distort your text. This also applies for underlining, which can have the same effect as the hooks of a serif font. We recommend using bold to emphasize instead.

Layout

When it comes to the structure of your page or platform, stick to general readability guidelines and try to be as clear as possible.

The wider the text spans from one side of your screen to the other, the more difficult it is to follow. A good rule of thumb is to use columns with no more than 80 characters per line as narrower text columns make for easier reading. Consider setting a percentage width for text areas and set the margins to “0 auto” via CSS, this way the margins will increase proportionately on wider screens. Remember, white space is your friend.

That being said, your white space needs to be consistent. So try to avoid justified text alignment and double-spacing after a full stop. This uneven word spacing can easily disrupt pattern recognition in the brain and slow dyslexic users down.

Screen Shot 2017-03-02 at 14.04.30

When designing the content of your website or app, we also recommend avoiding high-contrast colors. Using a more gentle, off-white background like tan or gray, with a dark gray font instead of solid black is easier on the eyes, meaning your users can focus on the text instead.

Tools

Offer your dyslexic users an element of control by providing them with readability tools. There are a variety of simple tools available that let users adjust font size, line height, and even mask certain areas of the screen.

For users who really struggle with reading, a text-to-audio option could also be beneficial. This can be done with an automated tool, or by providing an audio clip of someone reading the text areas in full.

Screen Shot 2017-02-27 at 13.30.55

Implementing tools like this doesn’t mean making big changes to the design of your website or app. James Lambert explains, “just the use of a recognizable cog symbol in a corner near the page header can bring up these tools while having minimal impact on a design”.

Navigation

A final best practice to consider is ensuring your online platforms have flexible navigation, which is defined by a variety of paths and user flows that lead to the same destination. As UX Booth uncovered, many dyslexics ‘connect the dots’ in a different way to their peers. Andrew Zusman explains, “since organizational skills were considered an advantage of dyslexia, creating varying patterns of organization in terms of navigation and findability will improve a design for not only dyslexics but for everyone.”

Screen Shot 2017-03-02 at 15.41.11

Try to keep navigation as logical as possible. We recommend making sure your Home page is accessible from any part of your website or app; knowing the way back to the start offers an element of reassurance should your users start feeling confused.

Conclusion

When designing for dyslexia, it’s important to remember that there aren’t any quick fixes or one-size-fits-all solutions. Try to consider the best practices above and avoid any elements that might take away from white space or result in visual distortion.

If you want to know more about dyslexia there are some great resources here and here, or if you’re interested in accessibility in general then be sure to check out our guide to designing for color blindness.

Do you have any insights into designing for dyslexia that we’ve left out? Let us know in the comments or send us a tweet @usabilla!




IWD Event

Article by

Robyn Collinge

As Usabilla's Copywriter, Robyn brings nice words together - like peanut butter, napping, and Sunday brunch.

Share your thoughts

  • If you are producing information to be read by others, it is important to remember that up to 10% of your readers may have dyslexia.

  • Greg Fields

    Great article! Thank you. The one piece of advice I would share contrary to what was advised here has to do with tools. Someone who needs ‘Assistive Technology’ to help with reading web content already has the tool they need. Content authors just need to make sure their content is accessible to the platform conventions of accessibility (WCAG for web content) as the tools needed are already designed to work in browser.

    Hope that helps.

    Cheers,
    Greg

  • There a number of one pagers that talk about how you might design a site for users with dyslexia, I would recommend this three part series Designing for Dyslexics as a solid foundation:

  • Pingback: Your Users Might Not be as Tech-Savvy as You Think - WELOVEUXD()

  • Jerry

    Great article. I am a designer and have noticed that accessibility design is often overlooked in designing everyday productivity applications. I am currently undertaking a project to acknowledge these gaps and to aid the schoolchildren in creating and managing content in the text heavy classroom environment. Have a look at it here and let me know you thoughts:

    https://www.behance.net/gallery/51851565/Accessibility-Design-Application-for-Dyslexic-Students

Pin It on Pinterest