Designing for Dyslexic Users

Dyslexia_Mervin

Dyslexia is a learning disability which is often overlooked while designing accessible websites. However dyslexia is fairly common among young users and should be definitely considered while designing sites which might cater to children. Dyslexia also occurs among adults and hence designing for it should also be a factor while designing any site irrespective of whether it caters to children or adults.

So what exactly is Dyslexia?

The British Dyslexia Association defines dyslexia as:

“A combination of abilities and difficulties that affect the learning process in one or more of reading, spelling and writing.

Accompanying weaknesses may be identified in areas of speed of processing, short-term memory, sequencing and organization, auditory and/or visual perception, spoken language and motor skills. It is particularly related to mastering and using written language, which may include alphabetic, numeric and musical notation.”

As per the Dyslexia research institute, 15% of the US population is dyslexic while about while about 10% of the UK population suffers from dyslexia.

The challenges faced by dyslexics has been highlighted in a number of movies including Taare Zameen Par which was India’s official entry for the Best Foreign Film award in the 2009 Academy Awards.

designing-for-dyslexic-users-taare-zameen-par

 

So how do I design for dyslexic users?

When asked to design for accessibility, designers are overawed by the large number of requirements and expected levels of compliance which are needed to make a site accessible.

While it is of critical importance that your site should be accessible to provide a uniform experience to all users despite them being differently abled, designing for dyslexic users is relatively simpler provided some design principles are adhered to as elaborated below:

1. Avoid using justified text

Justified text was introduced while designing for print as the straight line of each margin can guide the eye across columns of text and the aligned columns help define the different areas of text creating a logical flow of words, thus enhancing readability.

That said, justified text in the web causes large uneven spaces between letters and words making it hard for people to read and even more harder for dyslexic users. When these words line up above one another, a distracting river of whitespace appears which causes dyslexic users to lose their bearing while reading content. This is called the river effect.

designing-for-dyslexic-users

2. Avoid double spacing after periods

While browsers eliminate redundant spaces, additional spaces present between the HTML content tags are retained. Hence double spacing after periods can confuse dyslexic users, as they can create “rivers” within text that make it difficult for users to find the end of sentences.

3. Avoid extremely high contrast between the text color and the background

While high contrast does enhance readability, extremely high contrast such as pure black text (#00000) on a white background (#FFFFFF) is hard for dyslexic users are they are sensitive to the brightness that high contrast colors cause resulting in the words to swirl around or blur for them.

How Dyslexic see

To avoid this, ensure the text color is a lighter shade of black like dark grey to ensure dyslexic users are not affected by the contrast.

This W3C article has good recommendations on the recommended contrast while designing for people with dyslexia.

4. Avoid using moving images

While moving images and flashy animations are distractions for everyone, they are even more severe for dyslexic users as they constantly distract them from their focus on the page and almost make the page unreadable for them. Hence while designing pages with animations, make sure they are very subtle and don’t distract the user from the content. However if possible avoid using animations at all.

5. Break your content down

While long lines are text are hard for users to read, it’s even harder for dyslexic users as they suffer from low concentration and can lose their place while reading long lines of text. Hence break down the text into smaller manageable pieces with a lot of white space and a suitable heading. To quote this research article on document design for dyslexic users

 

“Text should be chunked into groups according to subject matter. This breaks up long groups of text into more easily read sections. Chunked text should usually be grouped under a heading and spaced out, so the reader can easily tell apart each chunk. “

An excellent example is how apple does it

Apple_ Engineered to perfection

 

6. Choose your font correctly

While there are a number of font options available while designing for dyslexic users, If possible, use a sans-serif font. The decorative “hooks” on the main strokes of serif letters may create problems for dyslexic users.

This is because Serifs tend to obscure the shapes of letters, making the letters run together. But a sans-serif font would allow dyslexic users to see the shapes of letters clearer. This is because a lack of hooks increases the spacing between letters and makes them more distinguishable

Hence dyslexic users might see words with a washout effect as shown below:

Dyslexia User

 

Some good font choices while designing for dyslexic users are

  • Arial
  • Century Gothic
  • Verdana
  • Trebuchet
  • Lexia Readable ( free font designed specifically for dyslexic users)
  • Dyslexie (free font designed specifically for dyslexic users)
  • Sassoon (paid font designed for dyslexic children)
  • Sylexiad (paid font designed for dyslexic adults)

Designing for dyslexic users does not involve significant effort and if some preliminary efforts are taken during the design phase, you can make it so much easier for someone with dyslexia to view the site without frustration. It’s not easy to get information when you read with visual distortion. Everyone has the right to information, whether they’re dyslexic or not.

 

By: Mervin John Singh

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s