Structuring your content

Nielsen Norman Group research shows that people ‘read’ a webpage in an ‘F’ shape pattern. They look across the top, then down the side of the page, reading further across when they find what they need.

Putting the most important information first and ‘front-loading’ subheadings, titles and bullet points with your key messages, will help your user to find what they need quickly.

Begin with the conclusion

• start your page with the conclusion, and then talk about the supporting information
• your first paragraph should act as a summary and give the reader the main point of the page

Example of a well-structured page

Put the most important information first and the detail later

Online readers will often scan and skim text at high speed to find the bits that interest them, you need to grab their attention immediately or they might not read your content.

Page length

• there is no ideal minimum or maximum page length
• make the main body of your page as focused as possible
• get to the point quickly to help your reader find the information they need

Page title 

The title is the first thing a user and a screen reader reads, so it should describe the topic or purpose of the page

• the page title should be short, active, and meaningful 
• if your page is transactional (has a call to action), include a verb in the title like ‘Pay for..’
• check page titles start with a capital letter and all following words are in lowercase unless they are a proper noun

Page title examples

• users often skim and scan pages, looking through page headings to find the information they need
• people who use screen readers will often navigate a website by having the screen reader read out the headings
• make sure that bold hasn’t been used for headings so that screen readers can identify them
• structure your content into bite-sized chunks and give those chunks a heading
• use the correct heading styles (H1, H2, H3, and so on) in descending order and do not skip any levels

Use headings and subheadings to group related information

You can make it easier for readers to follow your line of thought by grouping related ideas under descriptive headings and subheadings.

Try to structure them so they follow a natural sequence.

Example of headings and subheadings

Headings shouldn’t be written as questions

Start headings with significant words 

This lets readers skim down the page to get to what is relevant to them.

Apply headings in descending order

Check headings are in the right order, your first heading should use Heading 1, the subheading should be Heading 2, and so on. You should also make sure heading levels haven't been skipped.

• long walls of text can overwhelm readers and are likely to stop them from reading your content
• instead, break up the text into bite-sized chunks, which are easier to read and skim

Example of how bullet points help to break up text

• start important sentences with significant words
• check sentences with more than 25 words to see if you can replace them with several shorter sentences

• keep Paragraphs to around 4 or 5 sentences each
• put the main idea in the paragraph first and try to limit each paragraph to a single idea

Avoid images if possible

• do not add images for aesthetic reasons
• readers of transaction and information pages do not want decorative images that do not help them achieve their goals
• images also increase page load times and incur extra work to ensure they are accessible

In some situations, images can be used

• some groups, such as people with SEND, will find it easier to use and understand a page if it has meaningful images
• some information may need an image to convey additional meaning or information
• news stories and press releases are content types that can always use images
• it is also okay to use images for commercial or promotional reasons 

Avoid using text in images as the sole method of conveying information

• screen readers can’t access any text that is part of an image
• the text can also not be found by search engines
• if you need to use an image with text in it, repeat that text in the document or the image’s alt text
• find out more information about providing alt text for images

Provide alt text for images

• ensure images have alt text describing the image, where needed
• this text will be read out by screen readers to people who are unable to view the image
• follow the guidance for providing alt text for images

• do not use tables to lay out text
• use tables for data that is too detailed or complicated to be described adequately in text, and which lends itself to being presented in rows and columns
• make sure the table has a header row or screen readers will ignore it

Make link text meaningful

• people who use screen readers will often navigate a website by tabbing from link to link, without reading the surrounding text
• this means that the screen reader reads a list of links to them
• this is only useful if the individual links are meaningful, even when read without the surrounding text
• check that links work properly and the URL is correct
• link text should make sense when taken out of context, don't use 'click here' or 'more...'

More about descriptive links