This guidance is provided as a general starting point for anyone designing online content, or working on digital projects that involve designing new content or reworking old content.
These pieces of research give an overview of how people read online:
Knowing how people scan information online means you can think about how you structure your page to make sure they find the most important information before they leave the page.
Most writing starts with an introduction, and builds to the conclusion. However this doesn’t work online because the way that people read online is different to the way they read books or papers.
In the online world you need to get straight to the point, because:
- people skim pages
- you can never assume people will read the whole page.
Put the most important information at the top of the page. Try to address the purpose of the page in 1-2 sentences. Answer key questions: who? what? when? where? why?
Add additional details to the ‘body’ of the page in descending order of importance. This is where you add details and supporting information.
Give people clear signposts — sub-headings — so they can skip to the detail they are looking for.
Finish off with related content, blogs and references.
Background information — such as legislative references, or governing committee details, or history that has led to a decision — should be included in the body, not the ‘lead’.
Headings and sub-headings
Large blocks of text put readers off because the content looks like ‘hard work’. Headings and subheadings organise and highlight content on a page.
They make it easier for readers to follow the document.
Page headings should describe what is on the page. Page headings are often reused as breadcrumbs and in navigation lists, so they should help people make navigation choices.
They also help break up the page into scannable chunks.
When writing headings, consider:
- consistent style, especially in relation to capitalisation — we recommend an initial capital only because too many capitals clutters pages
- length — aim for less than 30 characters
- active voice — the action is clearer, and sentences are shorter.
Use HTML tags to define your heading hierarchy. Using the CMS styles should take care of this for you.
This improves your page’s:
- search engine optimisation — it helps google make sense of the structure of your page
- accessibility — it helps all users make sense of your page.
We recommend that your:
- page heading is styled as an
- sub headings are
- nested sub headings are
You may find your CMS does not allow you to tag the page heading as
h1. If this is the case:
- confirm there is a
h1being generated — and that it describes the content on that page
- structure the page using the heading hierarchy that is available to you.
Do not pick the heading format you think looks best. Keep to the hierarchy. For example don’t use
h3 unless it is nested within a