Skip to main content

Scannable pages

Make your web pages easy to scan so your audience can locate key information quickly. You can do this by breaking up sections of text with headings, lists and logical groups of related content – and starting your page with a summary paragraph in a box style (like this one).

You're familiar with scanning a newspaper. You can quickly locate the most important headline and which image belongs to which story. Newspapers are easy to scan because they create a visual hierarchy. You should aim to do the same in your website so that it's easy to scan.

Headings make pages scannable

Use headings to highlight important items and sections within a page. You can also use headings to show the hierarchy of information in a section. The heading above is formatted with the heading 2 style.

Headings to highlight information

This is a sub-section of the "Headings make pages scannable" section and therefore I formatted the heading with the heading 3 style.

Headings to group similar content

You can use headings to group blocks of related content, such as links or navigational items like this:

Manage your course

Register your modules
Submit coursework
Key dates

Using lists is another technique to group related content. Lists also make pages scannable by breaking up chunks of continuous text:

  • Facts in lists are easier to comprehend or memorise
  • The whitespace created by an indented list helps the reader pause when scanning a page
  • Lists are good for expressing instructions, such as how to submit a document

Headings denote importance

Larger headings denote the information is important. This is a useful technique to quickly structure your page content.

Judicious use of highlighting

Be sparing in your use of headings and visual highlights.

If you format all the text on your page as headings or box styles, you will achieve an effect opposite to the one you intend – visually, all the information will have the same importance and nothing will be highlighted. Your users won't know where to look first.

Consider the visual weight of an item. For example, a large coloured button carries more visual weight (is more noticeable) than a few words of text. So, use visual elements carefully and only use them to highlight important content. This is particularly important for homepages.