Wiki source code of Headings and titles

Version 2.1 by Lizzie Bruce on 2019/05/21 20:21
Show last authors
1 (% class="box" %)
2 (((
3 Following this helps:
4
5 * **people in a hurry** – scannable content is easier to scan and absorb instantly
6 * **people who are stressed** – easy to spot, useful headings will help you find things
7 * **people who are multi-tasking** – if your attention's divided you'll need clear language
8 * **cognitive impairments** – easy to understand headings carry less cognitive load
9 * **visual impairments** – labelled headings enable screen reading software to navigate well
10 * **motor impairments** – clear and specific headings mean less scrolling up and down
11 )))
12
13
14 == Guidance ==
15
16 [[1. Use specific, meaningful headings.>>doc:||anchor="#1"]]
17
18 [[2. Front-load headings.>>doc:||anchor="#3"]]
19
20 [[3. Structure your page with headings.>>doc:||anchor="#4"]]
21
22 [[4. Use sentence case for headings and subheadings.>>doc:||anchor="#2"]]
23
24 [[5. Label your headings.>>doc:||anchor="#5"]]
25
26 [[Usability evidence>>doc:||anchor="UEHT"]]
27
28 ----
29
30 === {{id name="#1"/}}1. Use specific, descriptive headings. ===
31
32 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.
33
34
35 ==== Title of content: the H1 heading ====
36
37 This is what people will see in the search results.
38 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.
39 Be clear, concise and to the point. Action-orientated headings work well.
40
41
42 Example:
43
44 (% class="mark" %)"Apply for a railcard"
45
46 ====
47 Amusing headings ====
48
49 Headings can reflect a tone and can be engaging.
50 Play-on-words, idioms and colloquialisms can all be hard to decipher for those with English as a second language or reading challenges.
51
52
53 Example:
54
55 We could have called this page "The latest on heading up your headings".
56
57 We did not do that.
58
59 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.
60
61
62 === {{id name="#3"/}}2. Front-load headings. ===
63
64 Statements work better than questions in headings. They enable you to put the keyword first.
65
66 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.
67
68
69 Example:
70
71 "Should you front-load your headings?"
72
73 (% class="mark" %)"Front-load your headings."
74
75
76 You get to the essentials of the information much faster with the second heading.
77
78
79 === {{id name="#4"/}}3. Structure your page with headings. ===
80
81 Using headings gives your page structure and hierarchy.
82
83 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.
84
85
86 Example:
87
88 [Title]
89
90 (% class="mark" %)**Apply for a thing**
91
92 [Subheadings]
93
94 (% class="mark" %)Eligibility 
95 Application 
96 If something goes wrong 
97 Appeal
98
99
100 In the example above, you can see the whole process you need, or may need, to go through.
101
102
103 === {{id name="#2"/}}4. Use sentence case for headings and subheadings. ===
104
105 Sentence case is easier to read.
106
107 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.
108
109 Example
110
111 (% class="mark" %)"Buying vegan cheese – what to consider"(%%) not "Buying Vegan Cheese What To Consider"
112
113 Usability evidence around sentence case is in the wiki section on [[capital letters>>doc:Punctuation and abbreviating.Capitals.WebHome]].
114
115
116 === {{id name="#5"/}}5. Label your headings. ===
117
118 Make sure you apply heading style labels in your CMS or with using code if you're editing the HTML.
119
120 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.
121
122 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.
123
124
125 Example:
126
127 (% class="mark" %)[h1] **Apply for a thing**
128
129 (% class="mark" %)[h2] Eligibility
130
131 (% class="mark" %)[h2] Application
132
133 (% class="mark" %)[h3] Cost
134
135 (% class="mark" %)[h3] How to apply
136
137 (% class="mark" %)[h2] If something goes wrong
138
139 (% class="mark" %)[h2] Appeal
140
141 ----
142
143 == {{id name="UEHT"/}}Usability evidence ==
144
145 [['Writing killer web headings and links'>>url:http://gerrymcgovern.com/writing-killer-web-headings-and-links/]] Gerry McGovern, 2009
146
147 [['Headings are pick up lines: 5 tips for writing headings that convert'>>url:https://www.nngroup.com/articles/headings-pickup-lines/]] Neilson Norman Group
148
149 [['F-shaped pattern for reading web content discovered'>>url:https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/]] First F-shaped pattern study by Jakob Neilson, Neilson Norman Group, 2006
150
151 [['F-shaped plus different reading patterns'>>url:https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/]], updates to 2006 study by Jakob Neilson, Neilson Norman Group, 2017
152
153 [[‘Topic structure representation and text recall’>>https://www.researchgate.net/publication/279089058_Topic_Structure_Representation_and_Text_Recall]], Lorch, R. and E. Lorch, 1985
154
155 [['First 2 Words: A Signal for the Scanning Eye'>>url:https://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/]] Jakob Neilson, Neilson Norman Group, 2006
156
157 [[Luke Wroblewski twitter post>>url:https://twitter.com/lukew/status/629694224535957504]], 11% of people start scrolling in 4 seconds if the page has loaded. 9 seconds if it hasn't. Luke [[writes more about scrolling>>url:https://www.lukew.com/ff/entry.asp?1946]], and concludes with a quote from Josh Porter: "Scrolling is a continuation; clicking is a decision."
158
159 [['Scrolling and attention'>>url:https://www.nngroup.com/articles/scrolling-and-attention/]] Neilson Norman Group
160
161 [['How to use headings on your site'>>url:https://yoast.com/how-to-use-headings-on-your-site/]], Yoast
162
163 [['Create good titles and snippets in Search Results'>>url:https://support.google.com/webmasters/answer/35624?hl=en]], Google Webmasters
164
165 [['Web style guide'>>http://webstyleguide.com/wsg3/8 -typography/5-typographicemphasis.html ]], Lynch, P. and S. Horton,
166
167 [['Typography and language in everyday life: prescriptions and practices'>>https://books.google.co.uk/books/about/Typography_and_language_in_everyday_life.html?id=SjRUAAAAMAAJ]], Walker, S., Harlow: Pearson Education, 2001
168
169
170 (% class="box" %)
171 (((
172 See also:
173
174 * [[Capital letters>>doc:Punctuation and abbreviating.Capitals.WebHome]]
175 * [[Plain English>>doc:Plain English.Plain English, simple sentences.WebHome]]
176 * [[Links>>doc:User centred design.Links.WebHome]]
177 )))