Content must meet a user‘s expectations and provide the information they seek.
Web users scan pages in an F shaped pattern looking for keywords. Their focus starts top left, moving horizontally before moving down the left margin only scanning horizontally when there is something of interest. They will only stop to read when they find keywords of interest.
- Place the important content at the top.
Frontload headings and paragraphs.
Users start at the top of the page and will continue for as long as the content interests them. Therefore provide content in a similar manner to a newspaper article with the main points at the top and the more detailed stuff below.
Copy and text
On the average web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.
Provide copy that has been optimised for the web. Use a web copywriter if possible.
Web users don‘t read copy word for word as they would off line. They will scan to look for the relevant words or phrases. Web copywriters will be able to optimise the copy for web users.
Chunk copy into small relevant sections. Use sub headings if possible.
Long blocks of copy will put users off from even scanning the content. Breaking up the copy will encourage users to read it while the sub heading will help them pick out relevant key words.
Use simple language.
Everyone, including specialist users appreciate plain simple language which is easier and faster to read. Users have a much younger reading age when online (average 14 years) than they do offline. Only use jargon or specialist terms when you are certain that all of your users will understand it.
Use the correct size sans serif fonts.
Sans serif fonts should be used for all online content as they are more readable than serif fonts on a computer screen.
Enable users to change their font size by specifying fonts in ems not points.
Users have different needs when it comes to font size. Let the users have control if they need to change the size.
Ensure adequate contrast between text and background colours.
Lack of contrast causes readability difficulties.
- Overuse of promotional text. Users resent overselling, especially if pages repeat the same marketing message. Ensure any promotional messages are relevant.
- Avoid ALL CAPITALS for body text as this degrades readability and may be perceived as “shouting”.
- Use bold and italic text sparingly. Too much of either degrades readability and loses the emphasis that was intended. Less is more.
- Only use underlined text for links. Dashed underlined text may be used sparingly as links to overlays that contain helpful information relating to the word or phrase in question.
Images can liven up a website and help convey important information.
- Use the correct image format for the type of image. See the images page in the development section for more information.
Optimise images for the web by balancing the file size against the required level of quality. This will reduce page download times.
Keeping image file sizes low is crucial in optimising download times. Users will not wait long for pages to download.
Avoid over–using images.
Studies show that users ignore images that don‘t add any value to the content. Therefore, don‘t waste valuable page space by including images that won‘t be looked at. See for more information.
Use icons where it can help users recognise the content.
Icons can help to support information on a subject but should also be supported by text as well. Ensure the icon truly represents the theme and don‘t rely on the icon alone. If possible use icons that are web standard, Icons may also be clickable as well as the supporting links.
Use concise yet descriptive alternative text for images.
Including alternative text will help to convey the image‘s message for users who, for whatever reason, can‘t view the image.
Don‘t use images that contain text unless coded in such a manner that the message of the text is not lost on users that are unable to view the image.
Many users won‘t be able to view the images and therefore would lose the message with the text.
Colour alone should not used as the sole method of conveying content or distinguishing visual elements.
Ensures users with colour blindness have access to the information.
- Using images just for decoration that don‘t support the content. Users ignore irrelevant images and resent the time taken to download them.
- Pages containing images that are too large. Users won‘t wait for slow loading images.
- Using icons that aren‘t instantly recognisable.
- Making images that look like banners. Users ignore banners – “banner blindness”. See for more information.
Video and audio
Use video/audio only when it helps to convey, or is supportive of, the website‘s message or content.
Users will ignore or be irritated by irrelevant material especially if they have to wait for it to download.
Keep file size to a minimum.
Even in the age of broadband a vast majority of uses will have limited network speeds. This is still a significant issue for downloading content through mobile phone or restricted/antiquated work place networks.
Provide a text alternative or transcript (usually collapsed).
Users who can‘t view the material, either due to network speeds or technical limitations, will be frustrated that they are excluded from the content.
Ensure there are controls which enable the user to be in charge of the media.
User‘s need control over when they start, stop, replay etc.
- Playing the video/audio as soon as it‘s loaded.
- Opening content in a new window.
Animations are good for attracting attention but are also distracting and will impede a user‘s ability to concentrate on other content on the page. Only use if absolutely necessary.
No more than one animation on a page.
Multiple animations will compete with each other for attention. This causes distraction overload, preventing the user from concentrating.
Consider the time taken to play the full message. Will your users wait that long?
Users will spend less time hanging around than we think.
Limit the number of times an animation repeats.
Animations distract users. Convey the message then leave them to concentrate on their task in hand.
- Playing animation in a continuous loop.
- Playing multiple animations on a page.
- Using blinking text or scrolling marquees.
Use tables where it is appropriate to display information in a table format.
Users will appreciate information laid out in the simplest format.
Use table headings with clear, meaningful labels.
The use of meaningful headings will help users identify the data.
Use alternate row striping.
Row striping will help users read each row‘s related information.
For sortable tables use vertical arrows to indicate sortability.
Let the user know which columns are sortable and highlight the currently sorted column.
- For long tables use appropriate pagination methods.
- Avoid horizontal scrolling within table if possible, unless designing for a mobile device.
- Lack of white space around cells and table causes readability issues.
- Lack of contrast between text and background colours causes readability issues.
- Arrange lists in an order that best facilitates efficient and successful user performance.
Place the important items at the top.
Users will start scanning the top few items in the list before moving down.
Make lists easy to scan and understand.
The use of meaningful labels, effective background colours, borders, and white space allow users to identify a set of items as a discrete list.
Display a series of related items in a vertical list rather than as continuous text.
A well–organised list will facilitate rapid and accurate scanning. Users scan vertical lists far more rapidly than horizontal lists.
- Use bullet lists to present items of equal status or value, and numbered lists if a particular order to the items is warranted.
Use sentence case for lists
Correct use of sentence case will increase the readability of the list.
- Inappropriate grouping, or ordering of list items. Alphabetically ordered lists may not be appropriate.
A show and hide technique may be used for providing a progressive disclosure of extra information. (Such as FAQs)
- Ensure there is an obvious visual clue that indicates there is content to be expanded.
Make the textual label or wording clickable.
This technique by its very nature hides content. Ensure the user knows that there is more content available.
Use row striping if visual separation is required such as in the FAQs.
Helps users identify an individual item.
- Overuse of show and hide. Only hide the content if it really adds a benefit.
- Hiding too much content. If a lot of content needs hiding then consider creating content in separate pages under a properly designed information architecture.
Pop up screens and new windows/tabs
Pop up screens cause significant usability issues and should only be used when absolutely necessary.
Acceptable use for a pop up is when providing extra information that supports the underlying page or form.
This helps provide extra information while the user still needs access to the original page. eg Additional form field information.
Provide a tool tip and a new window icon.
Warns users that a new window will open.
An acceptable use is for documents, such as PDFs, which are not HTML.
In this case a different method should be used opening the document in a native application instead of the web browser, this is detailed in the accessibility guidelines. Opening it seperateley will allow the document to download in the background. It also prevents users from accidentally closing the browser window when they close the document.
- Opening new windows unnecessarily. This can cause disorientation especially if the new window behaves in an unpredictable way. It also breaks the back button.
May be used when it is appropriate to interrupt a task performed on a page.
- Ensure there is an obvious way to close the overlay.
Ensure the visual treatment enables the user to understand what is going on in relation to the original page.
The user needs to be aware of how to interact with the overlay.
- Inappropriate use of an overlay where a conventional web page should be used.
Non–modal overlays may be used when adding supplementary information but do not want to lose focus from the original page.
Useful for inline help or glossaries.
Keeps the user within the context of the page.