Surprisingly many people still believe ADHD and dyslexia are made-up:
“Oh, we’re all a little ADHD and dyslexic sometimes. We all have a little difficulty focusing and reading some texts.”
To believe that theory – that learning and attention disorders don’t exist – requires you to ignore scientific evidence and the experience of countless people who have lived with them.
But the reason why this belief caught on, is because at face value, it is true that we all have trouble focusing or reading sometimes. And spending time on the Internet is making it even harder.
We believe that every UX designer should learn how dyslexic and ADHD mind works, especially if they design products for young people or meant for teaching. Because ADHD and dyslexia come with a number of difficulties that most users experience, to a much smaller extent. Those problems make them lose motivation to use your website or app. Good design needs to overcome problems like:
- difficulty in focusing, decision-making and taking action
- difficulty in engaging with content
- difficulty in processing information
- memory problems
- tendency to make errors
And especially if your product is meant for education, the user experience should be effortless, so the user can put all their energy into learning. There is no downside to designing with learning disability in mind. We learned that from one of our first clients, Explain Everything – a collaborative whiteboard recommended by the International Dyslexia Association. The app is widely used by students, teachers, as well as professionals who appreciate how easy it is to use, despite its advanced and powerful features.
So let us give a very quick and very simplified summary of what it’s like to suffer from dyslexia or ADHD. After that, we’ll give a research-based and actionable list of how design guidelines for those disorders will make your product’s UX better for the general audience as well.
A regular human brain processes text in two steps, in its left hemisphere:
- The part that processes spoken language reads written words “out loud.”
- The part that is responsible for visual processing recognizes and remembers words. Words are attached to their meanings here. When words become familiar to us, step 1 is skipped and we can understand written words without sounding them out in our heads.
In a dyslexic brain both of those areas are under-activated. The visual processing goes wrong, similar-looking words get confused (like act and cat), letters get confused (like p and q) and transposed (like in dog and god). Words on paper or screen stop making sense. See this NPR article for a more detailed and illustrated explanation.
As a result, dyslexic people have a lot of trouble processing unfamiliar text. Because of that, they make mistakes in reading and in writing. A secondary symptom is that it’s difficult to remember directions and navigation. Dyslexic people get lost in a complex interface, just like they would in an unfamiliar neighborhood or in a map.
What’s interesting – they process language differently than “normal” brains, and a lot of the time, their thought process would not be considered “intuitive” to us. So designing for and testing with dyslexic users teaches us to stick to the most recognizable design patterns – those that everyone is used to and will understand with no effort.
And effort is the enemy of conversion. Predictable and simple websites just convert better
To simplify ADHD into one sentence: It’s attention problems, dysregulated activity levels, and poor impulse control – in varied degrees and combinations. ADHD has three variants: Inattentive type, Hyperactive-Impulsive type, and Combined type.
Mental activity levels in ADHD people fluctuate between under- and over-stimulation. Over-stimulation makes them unable to sit still.
With an inability to maintain focus, many ADDers require intensely stimulating situations to maintain alertness and attentiveness. Without this stimulation, attention wanders, and many of us are told we’re unmotivated.
– Kate Kelly, You Mean I’m Not Lazy, Stupid or Crazy?!
So maintaining an ADHD person’s attention is often a delicate balance between under- and over-stimulation.
A healthy person can easily distinguish important information from noise and focus on the right thing. With ADHD, especially in the Inattentive type, the information filter does not work properly. Everything may seem equally important, at the same time. That’s why one of the lesser known symptoms of this disorder is having a really hard time making decisions.
Sustaining attention takes a lot of effort, because all the unfiltered stimuli are competing for it. Same goes for shifting attention to another task – it takes an effort for a healthy person, but with ADHD it’s much more frustrating, because of how much energy it took to focus on the first thing.
How can all this improve UX design?
At the very basic level, designing for ADHD and dyslexia means maximising text readibility and being very disciplined at directing the user’s focus towards the right action while removing distractions and decorations. On a higher level, making content accessible for them requires some dedicated learning assistance – like implementing text-to-speech, adding illustrations whenever a new concept is introduced.
Using the basic guidelines leads towards universal design – one that’s easy to use for every user, including those with mild cognitive difficulties. The list below will focus on the basic guidelines.
1. Don’t count on the user’s attention capacity
The Internet, it turns out, incentivizes the exact types of behaviors and thought processes that characterize ADHD
Caitlin Dewey, Washington Post
Even for regular users, attention is drained by everything they do online, so they learn to be stingy with it.
- If you write long-form content, attach a short summary at the beginning.
- Use clear formatting and logical structure of information.
- Use visualisations for key information – it attracts attention and explains complex text.
- Use visual hierarchy to guide users to the most important information. Make the relative importance of elements obvious, don’t rely on descriptions to guide the user.
- Remove everything that could distract them. Gray out everything except the focus element if needed. Too much sensory stimulation may cause ADHD and dyslexic users to just quit and it’s unnecessarily draining even for normal users
2. Don’t rely on the user’s memory
Even typical users don’t have the time or energy to learn or memorize a new interface or look at a multi-page form.
- If your app requires multi-step procedures, divide them into separate screens and attach clear descriptions to navigation. E.g.: Back: Browse shoes; Next: Choose payment method
3. Handle errors and mistakes better
Everyone makes mistakes. People who make more of them are scared of complex and potentially costly actions, like online shopping or organizing their HDD.
- Warn the user if their action is going to cause serious consequences – like charging money, changing functionality or deleting data.
- Error messages should contain a clear explanation and a call to action – don’t make the user speculate what happened and how to proceed.
- Don’t make typing mistakes irreversible – let users review and update submitted information or cancel an order.
- A lot of dyslexic people are anxious about mistakes, which makes them avoid online payments in general. Reassure and confirm that they are following the instructions correctly and unclutter navigation.
- Offer spelling suggestions in search forms and empty search results.
There are some reliable guidelines on how to make text easier to read.
- Use a common font. Research shows that when you put your message in a fancy font, readers find the information harder to follow and the calls to action are less effective – they postpone decision more often than if you write in a font they know
- The most optimal text style is:
font-family: sans-serif, Verdana, Arial, Helvetica;
- Avoid italics and underline, they slow down dyslexic readers
5. Engaging content
Content made up of nothing but text is bound to bore at least half of your audience. Make it sound complicated with obscure words – and it becomes unusable.
- Illustrate text with graphics, videos and charts, or at least storytelling. Use more than one medium to make it more engaging
- Provide key information in audio or video
- Use storytelling and interaction – dyslexics and most people retain the most information through hands-on experience. Storytelling makes content relatable
- Be as literal as possible in key communication points
Make your website/app customisable. There is no 100% sure guide for display style preferred by everyone. But a font whose contrast is too low or too high, or the wrong font face or size, can make your users give up.
- Design more than one way to achieve key goals in the product – user paths, categories and assumptions obvious to you, are not obvious to people with different experiences or cultural backgrounds or cognitive dysfunctions.
- Include a functioning search option and implement auto-complete for key functionalities
- Include a site map
7. Minimize decision-making
Having too many choices makes us avoid decision and leads to lower conversion rates. ADHD makes decision-making even more difficult and exhausting
Good design is universal design
Working on an award-winning educational app taught us that simplicity and engaging interfaces usually result from a lot of research and understanding the needs of the most demanding users. Learning how dyslexia and ADHD affect the way people think and read information, made us realize how many design decisions which seem unimportant, may actually alienate a lot of potential users.