Created 4th October 2013
A guide to web design readability
So you’ve done your research. You’ve found out who your ideal customer is, and what they really want. You’ve worked on your offer, secured the perfect domain name and you’ve slaved over your copy. But will they read it?
Why readability is so important
In the race to include everything you need to convey to your customer, readability can be the first casualty. But allowing that to happen is a big mistake. Studies show that good design affects the customer’s perception of your business credibility. Put simply, bad design will cost you sales. And so will a lack of readability, because users will simply lose interest and never get to hear about your fantastic offer at all.
“Bad design will cost you sales.“
Start with readable copy
To start with, go through your copy again. Make sure your sentence lengths vary, but that the average number of words is no more than 16. Don’t be afraid of short sentences and juicy soundbites, even if they are sometimes ungrammatical. They’re attention grabbers. Get rid of complicated words. Your reader will be scanning, possibly while distracted, leaving them with a reading age of about eight.
Text that is full of long complicated words and sentences is deemed to have a high ‘fog index’. You can check yours with a free tool here. Try to aim for a score of less than 18. Break up lists into bullets and communicate complicated or statistical information via infographics to make it easier to absorb. Include strong but short sub-heads, which convey a complete message when placed end-to-end.
Decide on your design priorities
While it’s always been conventional wisdom that readers don’t scroll, studies from as early as 1997 and onwards have disproved this. That said, it is still a good idea to place your most important call-to-action prominently, and where possible, above the fold. Even more important than that is to work out what that call-to-action should be. It’s tempting to inform the customer of everything you offer on your homepage. But the impulse to do that is often an indicator that you haven’t yet clarified what your most important offering is.
An example of how using just a single offering to lead with can counter-intuitively boost your profits is the comparison between Google and Yahoo. Both are search engines, but the Yahoo homepage is filled with news, adverts, offers, video pics and a prominent menu. The Google homepage couldn’t be simpler, and yet Google consistently outranks Yahoo in both popularity and profits.
With the Google example in mind, think very carefully about what your priority message and call-to-action should be. Include no more than 10 elements, preferably less, rank them in terms of priority, and design around this list.
The 3 factors that influence readability
When it comes to designing websites, there are three major factors that affect readability – white space, line length and text formatting.
- White space doesn’t have to be white, but rather refers to the ‘negative’ space around text and images. The simple rule to remember is that white space underlines and prioritises whatever it surrounds. So if you use a lot of white space around an image or graphic, it’s akin to putting it on a pedestal or boosting its importance. Apple does this with its product images to great effect. Adding white space around ‘Add to basket’ or ‘Subscribe now’ buttons as well as highlighting them with colour can significantly increase conversion rates.
- White space also increases legibility and readability. That’s because readers don’t actually read. They scan for groups of word shapes. Adding white space above sub-heads, between lines and paragraphs, and in margins helps them to focus and increase comprehension by up to 20%. You can also use white space to group images which relate to a specific product or call-to-action in order to increase clarity.
- White space also adds to the aesthetic value of your design enhancing perceptions of your brand and customer satisfaction when viewing your site. Copious white space is associated with elegance, freshness and high-end products. Be careful not to ‘trap’ white space. It’s better to leave text columns ragged at the bottom than to leave an ‘air bubble’ at the top.
Readers will tend to read lines of 100 characters faster and most fluently. The reader is freshest at the start of a line, and their comprehension tails off towards the end of it, so anything longer than 100 characters is inadvisable. But it’s also worth remembering that the toughest challenge you face is getting the user to start reading at all. Short lines, i.e. 55 characters, invite the user to begin, and once they start, they’re more likely to continue. However, consistently short lines cause the reader’s eye to ‘jump’ too many times, leading to slowness, fatigue and confusion. Avoid text wrapping for the same reason. A good answer is to use a half column image at the start of your text to encourage reading, without compromising on line length further down.
Because readers are actually looking at word shape, you need to limit your use of capitals as these are much harder to recognise than upper and lower case together. Keep sub-heads short, and check text for widows and orphans as well as the breaking up of names over the ends of lines. Right and centre alignments are harder to read, unless used in small doses, and justified text can alter depending on the browser and so is probably best left for print. Build in good contrast by making sub-heads darker and/or larger so that the eye can scan for relevant content easily.
Designing a website that will drive conversion AND enhance your branding is no simple task. Oxygen’s award-winning designers are trusted by both local businesses and blue-chips to get it right. So give us a call today on 0845 2606 255.