How do users read your website?
Commenting on how users read the web, usability expert Jakob Nielsen believes that actually, "They don't."
Flawless spelling, eye catching pictures and bright colours on a website are all very well but research suggests that visitors will most often scan a page before delving into detailed reading.
Usability has become a popular buzz word in web design but in the past, usability guidelines relied on common sense or basic user testing with websites. However, in the past few years, accurate eye tracking technology has enabled researchers to pinpoint exactly how websites are read, revealing the common 'hotspots' which attract users.
Many findings from eye tracking studies adhere to well known usability rules and also go hand in hand with good accessibility practice. But there are some more surprising results which show that focusing on the more basic layout issues could boost the usability of your organisation's website.
Eye tracking research
Using technology which records minute eye movements, a number of researchers have carried out studies into web usability and accessibility
Experts including Jakob Nielsen and the Poynter Institute are amongst those who lead the way in this field. These key findings might help your organisation to improve the design of your website, in turn ensuring its accessibility and usability:
- Nielsen has found that only 16 per cent of users read a page word by word - most users will scan, letting their eyes flit over areas of interest before going back and reading areas of interest in more detail.
- So, a thoughtlessly designed page, with distracting pictures or links within the text is like an obstacle course, leading visitors off the course of the page they have visited.
- Web pages are often read in an F or E pattern, with users more likely to read longer sentences at the top of a page and less as they scroll down.
- Users are excellent at blocking out what they don't want to view - this includes some pictures and banner advertising where they don't want to see it.
- Pictures are not always eye catching - they can often be ignored. Good images should provide useful information which links into the text. Users respond best to real people rather than models, and subjects who look directly into the camera.
- The top left of a web page is a 'hotspot', which attracts most viewing from visitors. The far right columns and bottom section are the least viewed areas.
- To grab users' attention, you should use relevant snappy headers and blurbs, and use half the amount of text which you would in non-web writing. Longer paragraphs seem to discourage viewing - even one sentence paragraphs are fine.
- One column layouts perform better in viewing tests - users seem to be more used to this standard and simple format.
Good practice
Many websites, public and private sector fall down on usability tests, but there are examples of good practice out there which can be taken as inspiration.
RNIB
This charity site uses small but relevant thumbnail style pictures to add colour and interest. These are attractive but do not drag the eye away from reading the text around them.
Short and to the point descriptors are also used which summarise sub-pages, and these are placed strategically in the top-centre hotspot.
Charities Commission
Colourful pictures are used sparingly - there is only one on the homepage and the rest of the design interest comes from the bright colour scheme.
The most important information is boxed off in the top left of the page - priority viewing for users.
The menu on the right is highlighted in orange to attract users' attention - research has found that right-justified menus can be attention grabbing as they appear on the opposite side to what users are used to.
Directgov
This sub page contains relatively little information on the face of it - the text is sparse but punchy and headers in particular are to the point.
Hyperlinks direct users to the information that they need and fast. This makes for a very effective public service website.
There is a clear menu to the left, but also a clear, differently coloured menu of related links to the right which directs users' gazes to the right.
Oxfam
Large pictures are used on the Oxfam site, but again, they match the text's subject well and are not posed, model shots.
Headers are simple and straightforward and the text is limited to a few sentences which link to drop down menus, an interactive map and other sub pages which contain more in depth information.
Bright blue, banner-ad style links connect the page to Oxfam's charity campaigns and encourage donations - these are placed on the right of the page, which has been found to be an effective area for ads, despite being out of the main F-area.
Sharpen up your website
Every organisation is different, but reaching the widest possible target audience should be a target for every website. If eye tracking studies are anything to go by, many non profits could benefit by taking into account these findings and investing in some thoughtful web design.
