Part of: Content design
Headings and titles
Last updated: 20 December, 2019
Following this helps people with:
time pressures: scannable content is easier absorb instantly
stress: noticeable, useful headings help you find things
multi-tasking: if attention's divided you need clear language
cognitive impairments: clear headings take less cognitive load
motor impairments: clear, specific headings mean less scrolling
visual impairments: labelled headings enable screen readers to navigate
Guidelines
Use clear, concise, front-loaded headings to make your web content easier for all users to navigate.
1. Use specific, meaningful headings.
3. Structure your page with headings.
4. Use sentence case for headings and subheadings.
1. Use specific, descriptive headings.
Headings need to be meaningful not generic. When people scan your page they'll look at headings first. They decide if they are on the right page or not by your headings. The 'right page' is whether they are going to get their answer or not.
Title of content: the H1 heading
This is what people will see in the search results.
It is the first interaction you will have with your audience and will determine if they are going to give you more than 3 seconds of their time. Use it wisely.
Be clear, concise and to the point. Action-orientated headings work well.
Example:
"Apply for a railcard"
Amusing headings
Headings can reflect a tone and can be engaging.
Play-on-words, idioms and colloquialisms can all be hard to decipher for those with English as a second language or reading challenges.
Example:
We could have called this page "The latest on heading up your headings".
We did not do that.
Think about the value of your content, the channel it's on and the audience you're trying to reach when choosing what type of heading to use.
2. Front-load headings.
Statements work better than questions in headings. They enable you to put the keyword first.
If people are scanning down a page it's faster if you put the word people are looking for at the front of the sentence. If you lead with a question, you can't front-load, you have to start with who, what, when, where, why. This takes time for your audience to read.
Example:
"Should you front-load your headings?"
"Front-load your headings."
You get to the essentials of the information much faster with the second heading.
3. Structure your page with headings.
Using headings gives your page structure and hierarchy.
If you take all the user needs for a journey, work out the channel, format and page, you can structure those needs into headings on the page to indicate importance or process.
Example:
[Title]
Apply for a thing
[Subheadings]
Eligibility
Application
If something goes wrong
Appeal
In the example above, you can see the whole process you need, or may need, to go through.
4. Use sentence case for headings and subheadings.
Sentence case is easier to read.
People want to find out things quickly from your page, including whether they are on the right page. So headings need to be easy to scan and absorb.
Example
"Buying vegan cheese: what to consider" not "Buying Vegan Cheese What To Consider"
Usability evidence around sentence case is on the capital letters wiki page.
5. Label your headings.
Make sure you apply heading style labels in your CMS or with using code if you're editing the HTML.
These labels are what screen reading software uses to navigate your page. They also ensure heading size is consistent with heading hierarchy, which helps people understand how important a subsection is when they scan.
In our example the title would be labelled H1 and the subheads would be H2s. There might be subsections in a section. For example, Application may have Cost, How to apply. These would be H3s, as they are subsections of a subsection.
Example:
[h1] Apply for a thing
[h2] Eligibility
[h2] Application
[h3] Cost
[h3] How to apply
[h2] If something goes wrong
[h2] Appeal
Usability evidence
'Writing killer web headings and links' Gerry McGovern, 2009
'Headings are pick up lines: 5 tips for writing headings that convert' Neilson Norman Group
'F-shaped pattern for reading web content discovered' First F-shaped pattern study by Jakob Neilson, Neilson Norman Group, 2006
'F-shaped plus different reading patterns', updates to 2006 study by Jakob Neilson, Neilson Norman Group, 2017
‘Topic structure representation and text recall’, Lorch, R. and E. Lorch, 1985
'First 2 Words: A Signal for the Scanning Eye' Jakob Neilson, Neilson Norman Group, 2006
Luke Wroblewski twitter post, 11% of people start scrolling in 4 seconds if the page has loaded. 9 seconds if it hasn't. Luke writes more about scrolling, and concludes with a quote from Josh Porter: "Scrolling is a continuation; clicking is a decision."
'Scrolling and attention' Neilson Norman Group
'How to use headings on your site', Yoast
'Create good titles and snippets in Search Results', Google Webmasters
'Web style guide', particularly chapters 5. Site Structure and 9. Typography, Lynch, P. and S. Horton, 4th edition, 2016
'Typography and language in everyday life: prescriptions and practices', Walker, S., Harlow: Pearson Education, 2001