Legibility 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
Leonie Wharton Senior Designer
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
Thanks for some other informative site. The place else may just I get that type of info written in such an ideal approach? I’ve a mission that I’m simply now operating on, and I’ve been on the look out for such information.
Hey Leonie,
How you doing?
Randomly, I found your article here through Google. I know you wrote this back in 2009… but as a UX designer who’s read Krug and was once described as “severely” dyslexic, I just had to comment.
Overall, your solution was great. It’s just the title, “Usability VERSUS Dyslexia”, is a mix of sensationalist and misleading, so a tad irresponsible. Let me explain.
First of all, I can assure everyone here: Nothing in conventional usability, nor 99.9% of what Krug says, does anything but help dyslexics. I spend my days PRAYING that more designers would read the book!
It seems this mostly came down to the interpretation of the feedback from the BDA.
1: “underlining is a dyslexic nightmare because it jumbles up letters and makes words considerably harder to read.” Yes but this is only the case if the line interferes with the letter forms themselves, which as you then go on to rightly say in your comments, it shouldn’t be doing anyway. (Admittedly, even then, very long links might still cause a readability issue but these too are a no-no for “regular” usability. )
2: “cream backgrounds with black copy work well together by softening the glare and improving legibility.” Very true but not confined to cream! A light grey or blue has a similar softening effect but is more pleasing. To be honest, this has likely come from physical cream paper; the most common off-white option.
3 “In the words of Steve Krug ‘keeping noise down to a dull roar’; for a dyslexia website you should aim for a quiet whisper.” Well said, love it. However, rather than challenge Krug you’re supporting him. What set of users wouldn’t benefit from this??
Hopefully you wont take this as an attack but a friendly riposte and hopefully I’ll see you soon to discuss this further over a beer!
Luke
Hi Luke,
I’m good thanks. Nice that you stumbled across this article that I wrote so long ago, I am sure I have learnt many more usability tips in the last 3 years!
I do agree the title is a little overzealous, I suppose I was just trying to grab peoples attention.
Other people who have commented have also mentioned that underlining is only an issue when it interferes with the copy, I always prefer underlining that is a little lower than the baseline of the type, yes
Yes the cream origins I am sure come from paper formats. Anything that makes the contrast less dramatic I suppose / softens it a little. The Distilled site you will see is in a pale grey, with dark grey text not black.
Whens this beer then, your buying…
Leonie