Currently, businesses of all scales are working on improving their inclusivity. This praiseworthy initiative allows people to get the benefits of the goods and services regardless of their health limitations.

Digital services are trying to embrace inclusivity as well, with web and mobile development industries leading this race. Instagram recently launched an update of its app with two accessibility features, automatic alternative text and custom alternative text.

These features allow visually impaired users to get the best experience from using the app.

Currently, the industry is still learning to create inclusive UX/UI designs that would be equally user-friendly for different people. In this text, you will find information on UI/UX design for users with dyslexia.

If you wonder why it matters, here is one fact: based on its studies, the Yale Center for Dyslexia & Creativity arrived at the conclusion that up to twenty percent of the population of the world could suffer from dyslexia to some extent. That is, two out of ten users of your app or website might not be able to get a decent user experience while using it.

Dyslexia Awareness

Dyslexia is a condition that causes difficulties in writing, spelling, and reading in children and adults of all age groups, ethnicities, social statuses, and intelligence levels. Dyslexia is a common neurological learning disability that is not entirely curable. It is not contagious and not inheritable. This condition has nothing to do with laziness and reluctance to studying. Though this language-based learning disability is not curable, it does not automatically prevent people with this condition from succeeding academically, professionally, and personally. With proper intervention and technological assistance, dyslexics can lead a successful life just like everyone else.

Some of the famous and successful people have dyslexia. Albert Einstein, Richard Branson, Tom Cruise, Jim Carrey, Walt Disney, and Whoopi Goldberg were diagnosed with dyslexia. This condition hasn’t prevented John F Kennedy, George Washington & George W Bush from becoming presidents of the US. When not diagnosed and adequately addressed, dyslexia can cause academic underachievement, much anxiety, frustration, and low self-esteem.

There are also legal aspects of making the web accessible to everyone. You can check out WAI Web Accessibility Policy Resources to view articles on legal policies regarding accessibility.

Designing for Dyslexia

Modern education is highly digitalized. Quite often, children learn the basics of reading and writing from their iPads. However, they are not the only group needing accessible solutions. Different people around the world need accessible web and mobile tools they can use and benefit from regardless of their limitations.

Some quite successful digital educational solutions for dyslexics already exist. Among them are apps like Leo, Teen and Adults Phonics Library, Knoword, Reading Machine and Draw Something. Check them out for inspiration when working on the dyslexic-friendly design of your product.

Designing UX and UI for dyslexia might be harder than creating a regular web or mobile app. In this case, a designer needs to do more than merely follow the best practices of the industry. To design a dyslexic-friendly UX/UI, one has to keep up with the recent developments in this sector and follow the guidelines that have already proven to be successful. When making your website or app easy to use for dyslexics, it’s best to work with designers who have relevant successful experience and can show you their portfolios or case studies.

When you make your product accessible for a peculiar group of people, following the best practices for the case is not enough. You should always let the target audience test the product to see how they interact with it. Even after a thorough quality assurance testing, there might be an issue that only a dyslexic can notice. No matter what digital product you design, you need to keep an eye on its users all the time. A solution that seems best to you might be confusing and unfavorable for people that are actually using it.

Best Practices of Designing UX/UI for Dyslexics

An accessible UX/UI, user-friendly for dyslexics can be developed as follows:

• High contrast and dyslexia don’t match well. People with dyslexia often find it challenging to read texts on the screens with high contrast levels. From their point of view, it looks like the letters, words, and lines are “dancing around”, changing their place and giving the reader a hard time. To make it easier for the users, opt for pastel backgrounds instead of high-contrast colors. Choose dark grey text instead of black when working with a white background. It will not impact the clarity and readability for regular users, but will significantly improve it for dyslexics.
• Be careful with fonts. Fonts, suitable for dyslexia, have increased line-spacing and distinct typographic elements for letters that are usually confusing for them. There are dyslexic-tailored fonts like Dyslexie or Open Dyslexic. An often ridiculed Comic Sans font works surprisingly well for this audience as well. The reason behind it is quite simple – the letters in this font have large spaces between them and have unique typography elements that help users distinguish between similar letters easier. When your font choice is limited to regular options, go for Arial, Century Gothic, Tahoma, Trebuchet or Verdana.
• Keep the text short. This advice concerns lines of texts in particular and screens in general. Studies suggest that a line on a screen should not be over 45 characters for better comprehending. Also, it’s not advised to choose fonts smaller than twelve to fourteen point.
• Don’t overload the text style. Although letters tend to dance in the eyes of dyslexics, dressing them up in fancy italics and underlining will not make things better. To make the key points of the text clear for dyslexics, use bold. You can emphasize important blocks of text with boxes and larger font lower case letters as well.
• Incorporate readability tools. Give your users more ways to comprehend the texts in your product by enabling readability tools. Dyslexics and visually impaired users will benefit from a text-to-audio feature greatly. You can implement this feature in one of the two ways: use a third-party automated tool or include audio clips of someone reading the text areas to the product.
• Split functionality. When there are too many features in one screen, try to either decrease the number of features or split the screen in two. It’s better to have several extra clear app screens than several overloaded ones that may cause difficulties for users in adjusting to them.
• Prioritize flexibility. When designing for dyslexic users, make it your priority to create a flexible product. It wouldn’t harm to build several paths to get to the same destination for your users. Avoid creating blind corners that will make your users repeat long complex steps and type in lines of texts over again. Not a single user would be happy to do it.
• Allow customization. A designer can pick the best combination of colors, contrasts, fonts, and styles possible. However, for some of the users of your digital product, the predetermined choices might still be unfavorable. It wouldn’t harm to allow a reasonable level of design customization. Let the users choose fonts, text magnification, text and background colors.
• Empower text with graphics. Whenever possible, use icons to support the text, or use them instead of text for better understanding. Images and videos should assist texts and make the design clearer and improve its accessibility. Accompany videos with captions for visually impaired users.
• Use auto-fill, reminders, and tips. Don’t make your app users remember everything they ever typed in and searched for in your app. Enabling a Google-like search field with suggestions from a user’s history will be very helpful. When possible, give tips to your users.

• Incorporate auto-correct. It’s annoying when an app doesn’t understand you merely because you misspelled one letter. Services like Pinterest guess what the user means and give them options to choose from. Such a feature can be precious for dyslexic users. It will also be useful for the younger audience and non-native speakers.

  

• Simpler is better. Don’t overload your design with unnecessary elements that can potentially distract and puzzle your users. UX/UI design for dyslexia should decrease the cognitive load for the user. It should be as clear and distraction-free as possible.

Bad Practises for Dyslexia Design

There are some UX/UI practices that seem logical and useful to developers and regular users but are somewhat unfavorable for dyslexics. Here is a brief overview of bad practices you should avoid:

• Large blocks of heavy text. While they seem like a good option to squeeze as much text into one screen as possible, they are always a poor choice in terms of readability and user-friendliness.

• Overwhelming screens. Don’t squeeze everything in one screen. According to the recent mobile and web app development and design tendencies, minimalism is the new black. Take a look at the Instagram profile page. You don’t see all the app features on it. There are no distractions and visual noise.

  

• Double spacing at the end of the sentence. Some might think that double-spaces at the end of the sentences make the text clearer. However, it is not the case for users with dyslexia. Double-spacing makes the text blurry like a river in the eyes of a dyslexic.
• Use of vague buttons. When a button says “Click here”, its meaning is clear to the app developer and creator, but it might be not so obvious to dyslexic users. Make commands on the buttons as simple and unambiguous as possible.
• All information on one page. While it might be logical to put all the information about one thing in one place, it is not a good idea for dyslexic users. Give your users a chance to get to the same data using several different paths.

Final Thoughts

The Internet emerged as a technology, accessible to everyone. Developers and designers should keep digital technology non-discriminatory for all types of users, no matter how advanced and complex it gets.

The development of smartphone technology made millions of people transfer to mobile devices as a primary source of online communication, interaction, and entertainment. Creating web and mobile apps with accessibility in mind should come second nature to developers and designers.

The issue of accessibility for dyslexics has been studied for a while, and there are already some good practices you can use for your project. There is nothing overwhelmingly complex in making your digital product design accessible for users with dyslexia. Accessibility will not take away from the stylishness and sleekness of your product. As a bonus, it will make it more emphatic and humane. After all, information should be accessible to everyone, as it is an inseparable part of our lives.

Resources for Working with Dyslexia:

Below you will find a list of relevant up-to-date resources that can help you create better UX/UI designs for users with dyslexia:

1. 20 Design Resources to Facilitate Learning in Dyslexic Kids
2. British Dyslexia Association: Dyslexia Style Guide
3. UX Planet: Designing for Dyslexia
4. Dyslexia International i (non-profit information resource)
5. The Helen Arkell Dyslexia Centre (Charity and information resource)
6. International Dyslexia Association
7. Usabilla: How to Design for Dyslexia