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.
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:
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 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