Our company deals with web and mobile app design for entrepreneurs and startups every day. We have created various concepts for different types of applications (travel, delivery, e-commerce, etc.), but the one we are going to tell you about turned out to be a very interesting and quite challenging project.

Earlier this year, our team received a nontrivial order to develop a custom ERM platform (SaaS) adapted for dyslexic people. As this subject is not studied enough, we have decided to make our own contribution to the development of this direction and share our experience. 

In this article, we are going to talk about the peculiarities of UI/UX design for users with dyslexia. We will also give you some valuable advice based on our own findings in the process of work and share with you dyslexia web design guidelines that we followed.

What is Dyslexia?

Dyslexia is known as an impaired ability to read. It does not affect intelligence and thus does not prevent from learning things and acquiring new knowledge. This disorder can cause some difficulties such as incorrect word spelling and writing, reading retardation, improper word pronouncing while reading and deviant reading comprehension. It is usually diagnosed at school but has nothing to do with wrong teaching methods that can influence reading abilities too.

Dyslexia GIF
Dyslexia GIF

Users with Dyslexia in Numbers

Due to the dynamic development of technologies, the number of devices used by people is growing. Today, an average modern user has not only a smartphone (iPhone or Android phone mostly) and a desktop PC, but also a tablet, smartwatch, and fitness tracker.

When building an interface for an ordinary user, designers remember about the interaction with an app on each device, model all possible behavior scenarios, improve the mechanics. Creating high-quality applications they should also take into account the peculiarities of design for users with disabilities.

The worldwide statistics estimates the number of people with dyslexia from 10% to 17% according to various sources. The U.S. Department of Health reports about 15% of the population to be dyslexic. Thus, the share of mobile users having this condition, even if not so high, requires attention. The need to attend to app design for dyslexia and to hire professionals with the required skills and knowledge becomes more and more urgent. 

Project Start 

So, we received the order. The client shared his vision of the product with us, described the target users, and the innovations he wanted to implement. In addition to the detailed explanation of all tasks, the customer paid particular attention to the adaptation of the product for people with dyslexia.

The concept included a large set of features for business needs and was more than highly loaded. In addition to the standard set of tools for ERM systems, it was planned to use several new, more efficient solutions.

Before the project start, we defined two major objectives:

  1. to create a useful and successful product
  2. to maximally adapt it for dyslexic people

Process

The team started the work. Apart from the analysis of potential competitor platforms, and the analysis of efficient and inefficient solutions, we also studied available materials on dyslexia. We tried to gather as much information about dyslexic people as possible to understand the difficulties they face daily using various applications better. Great attention was paid to the research on dyslexia app UI/UX design by Andrew Zusman. It helped us to improve the process of creating the appropriate kind of interfaces.

Layout, typography, and fonts

Choosing typography and special fonts was the next step. Since the main problem for people with dyslexia is the perception of texts, individual words and letters, this matter was of the highest importance. 

At present, the existing fonts that are tested and well understood by dyslexic users can be divided into two groups. The first one comprises some well-known examples, such as Arial, Century Gothic, Calibri, Verdana, Myriad Pro. 

The second group includes fonts designed specially for dyslexics: 

Some fonts from the second group, though well perceived by dyslexic people, are not so familiar to ordinary users. For example, Open Dyslexic looks quite unusual and so, could not be used in our project as the main font. 

We chose a few fonts from the first and second groups and carried out internal rapid perception testing among ordinary users. According to the results, Delicious from the second group was selected as the main font for our project.

In the course of work, we made up a list of rules and guidelines to adhere while designing for dyslexia:

  1. Use the shortest words possible. Whenever appropriate, replace them with apprehensible icons.
  2. There should be a minimum number of visual elements on one screen, without compromising functionality. Avoid visual noise.
  3. Use short sentences and phrases in tips, without loss of informational content.
  4. Font size should be at least 12 - 14 pt.
  5. Dark text on a light background is more understandable than light text on a dark background.
  6. Avoid italics - they are difficult to read.
  7. Text should be left-to-right oriented.
  8. Do not use compact, "newspaper" text blocks.
  9. More space. Sufficient distance between basic lines of the text.
  10. Use numbered and bulleted lists.

These are dyslexia design guidelines that we followed strictly.

The UX stage

By the beginning of the UX stage, we received full project specifications and started drawing the wireframes. The document described the mechanics, the main features, transitions and interaction scenarios in detail. 

We began with simple sketches on paper and then moved on to drawing vector. To make the process more efficient, we divided the screens of the future interface into several groups. Working on each group of the screens, we referred to our list of rules to check how intuitively understandable the elements were, whether the screen was not overloaded with too much textual and visual information, checked how the text was perceived, and so on. 

Despite the fairly high-paced work environment and the deadlines, we managed to run internal usability testing. Unfortunately, we didn’t involve dyslexics in the wireframe testing, so the tests were carried out within the team and among our colleagues. Their primary purpose was to find out how much UX design for dyslexic users was understandable to ordinary people. Based on the results, we made adjustments to the wireframes, received feedback from the customer, and continued creating the future interface for the ERM platform.

UX Wireframes for Dyslexics
UX Wireframes for Dyslexics

We also created several interactive prototypes and a map screen in the process of design. Using prototypes, we tested the logic of the most highly loaded screens, the usability of the major and minor elements, and the transitions between the screens. In some cases, we split the functionality into two or more screens not to overload the interface. It was quite a controversial decision, but we tried to adhere to the above recommendations. It was necessary to make the platform interface more intuitive for dyslexic users, but with no negative impact on its interaction with the core audience. With the help of the map screen, we visualized the entire platform interface architecture. It showed all transitions and mechanics. A comment accompanied each screen.

When the work on UX was completed, the navigation tested, and all screens approved we started the UI stage. 

The UI stage

Style choice is extremely important in development. Good design should prepossess a user, evoke positive emotions and help solve tasks. An ERM platform is primarily a business tool that should provide sufficient planning, management and control services. 

According to our design process, we started creating three style options. The first one was done based on the customer's wishes. The second version was more balanced and reflected the point of view of the team. The third option was the most conceptual and insane. After the customer’s feedback, having analyzed our work and collected the most effective design solutions, the final version of the style was created. 

As well as at the UX stage, we constantly checked our styles for compliance with the rules that helped us to tailor the interface design for dyslexic users. The selection of colors was based on the use of dark fonts only, so the color scheme consisted only of light shades. Choosing color tones, we wanted to distinguish the product from the competition and attract the attention of users. We replaced the words with understandable icons where it was possible. Using metaphors to create icons, we tried to make them simple and clear, not overloaded with unnecessary graphic elements. Not to create sharp contrasts on a light background, we used font Delicious, applying two types and quite a large type size.

UI Dashboard for Dyslexics
UI Dashboard for Dyslexics

Despite numerous challenges faced, we were very pleased with the result of our work when UX/UI development was finished. Working on the project, we were constantly receiving feedback from the customer with the minimum recommendations and only slight changes from his side. It proved to be a very good indicator - the team was fully involved and in most cases the customer deferred to our opinion.
  

Our Findings



Creating the interface adapted for people with dyslexia, we encountered some challenges. On one hand we designed a highly loaded business tool, with a lot of features, which was not a simple task. We tried to make the interface intuitive, emotional, and helpful in performing specific tasks of ordinary users. On the other hand, we tried to adapt the interface for dyslexic people at each stage, and sometimes this caused controversy.

  • The recommendation to use the smallest number of visual elements, in some cases, made us split functionality into two screens and apply additional navigation, although everything could be implemented on one screen. 
  • The second peculiarity was the rule to use a dark font on a white or light background. This enabled text perception by dyslexic users but made it difficult to create a visual hierarchy and focus on important elements. In some cases, we ignored this recommendation. 
  • As for the special font Delicious, there were no issues here. According to the results of the internal testing, it was well readable for "ordinary" users and could be used as a primary one. There are fonts designed for dyslexic users that, nevertheless, sometimes look very specific.

All in all, our team has gained rich experience and will use it in the future. Knowing how to design for dyslexia, we are now equipped to continue working on and experimenting with web, iOS and Android solutions in this direction. 

Do you have ideas about making your web or mobile app disability-friendly?

We are ready to research it and help you create a useful and valuable product. It will definitely cost some time and efforts but this price paid will prove its value.

Contact us