Become a fan of Distilled
Follow @DistilledLegibility guidelines for dyslexia often conflict with usability conventions for websites. My challenge was to find a way of designing a website that adhered to both sets of rules.
Background:
Just before embarking on the new website design for the British Dyslexia Association I read Steve Krug’s book ‘Don’t make me think’ on usability. I was excited about putting my new found knowledge into practice.
I entered the design kick off meeting with my usability hat firmly on, but unfortunately left with it slightly askew.
The problem was whilst gibbering on about usability I found many of my ideas got knocked down as they contradicted dyslexia conventions.
The final home page design:
For example:
In my naivety I suggested underlining links to highlight what was click-able. However, underlining is a dyslexic nightmare because it jumbles up letters and makes words considerably harder to read. I also queried the client’s reasoning behind the cream background (thinking to myself that it looked quite dated) only to find that cream backgrounds with black copy work well together by softening the glare and improving legibility.
Designing for dyslexia means making things really clear and simple, removing all the frills and pretty little elements that are often used. In the words of Steve Krug ‘keeping noise down to a dull roar’; for a dyslexia website you should aim for a quiet whisper.
It was clear that I was going to have to go back to square one with my attitude towards this website design and take dyslexia into consideration.
An Inner Page Design
Dyslexia:
Dyslexia is a specific learning difficulty which mainly affects the development of literacy and language related skills. This means that the typography and layout of the design needed due care and consideration.
Leaving dyslexia conventions to one side for a moment it was still important to step back and ask myself – Who is this website for?
Well… the website is for dyslexic people obviously, but also parents, teachers, professors, employers and other people researching on the behalf of dyslexic people; the website had to ensure that it met all of these peoples needs too.
As designing for dyslexia generally means designing simply and obviously this should mean that people without dyslexia can also use the website easily… so long as usability is not impaired in the process.
The solution was to consider these points when designing:
Imagery – Imagery helps to break up content from a usability perspective but also can describe what something is without the need for so much reading.
Columns – We suggested the use of columns was a bad idea. If they’re long this means scrolling down and then up again to access the rest of the article. Unlike a newspaper, websites can only show a certain amount of copy at once; screen size and scrolling means articles are chopped into sections as you read. So from a usability perspective columns were a bad idea but from a dyslexia perspective a blessing, because shorter line lengths of 70 – 80 characters are easier to follow. We over came this issue by having columns but keeping them short eliminating lengthy scrolling.
Paragraphs – Keeping paragraphs short and to a minimum helps with both dyslexia and usability.
Leading – Having dyslexia means that things can get jumbled more easily. Increasing the leading (width of white space between lines) will help to separate each line from the next, making finding your way from the end of one line and to the beginning of the next much easier.
Typography – Minimum text size is even more important here, sticking to 12pt or even perhaps 13pt is a must.
Links – try to emphasise these without underlining them – one way to do this is by having arrows leading towards click-able items.
Colour – we used colour strongly throughout the design as a means of clearly dividing up the sections and also keeping cohesion when linking through to inner pages.
Less is more – no fancy backgrounds or additional elements that are not absolutely necessary.
A combination of all these elements helped us to generate a clear and successful design that the client and hopefully the users will love.
View the website at BDA Dyslexia
Great post. This illustrates that even if you have all the knowledge, skill and drive to create a cutting-edge design (in terms of look, feel and usability) it still always comes back to context.
It’s a good lesson, because context is everything. I’d imagine creating a site for an association of color blind people would present similar challenges.
But it isn’t always this extreme. Sometimes it’ll happen in the most mundane of situations. You may go in to a client meeting with a full-blown social media plan that has every staff member contributing to during the workday to personalize the brand, only to learn that their CEO has issued a ban on non-work internet use at the office (hey, it happens!)
I guess the best advice (prior to making suggestions) is learning the context in which the business you are meeting with operates. What’s obvious and logical to you may be gibberish in their mental framework.
And I’ll say it again, great post.
Hmm, usability just got a bit more complicated.
Not just one methodology.
The question needs to be asked “usable for whom?”
This web business is a continuing moving target.
Interesting stuff. I see this occasionally when I talk to general accessibility practicioners; while designing a site that’s good for usability often helps accessibility, there are exceptions. It makes a certain amount of sense with dyslexia – a lot of usability best practices are based on cognitive and information processing research, and dyslexics don’t process some information in a typical way, so some of those findings naturally need to be adjusted.
I think the underlined link problem actually has some bearing on everyday visitors as well – in many cases, underlining probably hurts readability a bit. On the other hand, it also calls out the text, drawing attention to the link, and it’s what people are used to on the web. I’d be curious to see some onsite test results for dyslexics. What you might find is that, while not underlining links helps readability, it still reduces clickability. There are some great opportunities for testing on this site.
Hi Dr Pete,
Thanks for your comment, you raise some good issues.
With regards to the underlining point, I think that if the underlining line allowed for a slightly larger gap between the line and the type this would stop the letters jumbling up so much.
Our developer here mentions:
“Instead of using an underline, you can add a bottom border and give some padding between the bottom border and the word to create this idea.”
Although you are right, obviously removing underlining and having no substitute differentiation method would hurt clickability. Perhaps making links bold or in a contrasting colour to the rest of the body copy would be enough.
In this case especially it’s a fine balance between using conventions that work for the majority of people whilst still being aware of differences that the sites audience may have.
Leonie,
I was pleased to come across your article. It seems that as we become more entrenched in the digital world, we sometimes stop focusing on individual needs while holding onto universals about usability.
Your example perfectly illustrates that site optimization is a delicate, often complicated process. Sometimes our target audience is diverse in its needs, and each one must be carefully considered for the site’s success. You have shown that we must truly take our users into consideration in order to be successful, and that may require starting from scratch again.
Thanks for the info!
Ronnie @ iGoMogul
@ Andrew – Thank you for your comments, I love your social media plan example, highlighting another important point; it is about knowing your clients set up well, as well as the target audience.
@ g1smd and Ronnie – Thanks for your comments, its just goes to show that your target audience isn’t something you can just skim over, catering for dyslexia certainly involved more specific knowledge.
Hi Leone,
love the phrases you use “silent whisper”
I think simple and abstract are the keys to a great converting website. Specially with the way browsing becomes faster and visitors need to find what they are looking for in an instance (regardless if they have the whole day to find it) specially tiles on the home page is a nice idea, its quiet effective and easily direct visitors to where they want to go, rather than having to skim through paragraphs of text to find an interesting link.
Pingback: Designing web content for dyslexia – AccessAble Life