How to Design for Dyslexia
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?
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.”
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.
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.
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.
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.
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.
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.
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”.
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.”
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.
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!