Wiki source code of Headings and titles

Version 2.1 by Lizzie Bruce on 2019/05/21 20:21

version	line-number	content
1.5	1	(% class="box" %)
	2	(((
	3	Following this helps:
1.11	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
1.15	10	* motor impairments – clear and specific headings mean less scrolling up and down
1.5	11	)))
	12
	13
	14	== Guidance ==
	15
1.7	16	[[1. Use specific, meaningful headings.>>doc:\|\|anchor="#1"]]
1.5	17
1.12	18	[[2. Front-load headings.>>doc:\|\|anchor="#3"]]
1.6	19
1.12	20	[[3. Structure your page with headings.>>doc:\|\|anchor="#4"]]
1.6	21
1.12	22	[[4. Use sentence case for headings and subheadings.>>doc:\|\|anchor="#2"]]
1.6	23
1.10	24	[[5. Label your headings.>>doc:\|\|anchor="#5"]]
1.8	25
1.7	26	[[Usability evidence>>doc:\|\|anchor="UEHT"]]
1.6	27
1.5	28	----
	29
1.8	30	=== {{id name="#1"/}}1. Use specific, descriptive headings. ===
1.5	31
1.8	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
1.5	34
1.10	35	==== Title of content: the H1 heading ====
1.5	36
1.8	37	This is what people will see in the search results.
1.5	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.
1.13	40
1.5	41
1.13	42	Example:
	43
	44	(% class="mark" %)"Apply for a railcard"
	45
1.6	46	====
	47	Amusing headings ====
1.5	48
1.6	49	Headings can reflect a tone and can be engaging.
1.8	50	Play-on-words, idioms and colloquialisms can all be hard to decipher for those with English as a second language or reading challenges.
1.6	51
1.11	52
1.13	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
1.8	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.
1.6	60
1.8	61
1.12	62	=== {{id name="#3"/}}2. Front-load headings. ===
1.6	63
1.8	64	Statements work better than questions in headings. They enable you to put the keyword first.
1.5	65
1.8	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
1.5	69	Example:
	70
	71	"Should you front-load your headings?"
	72
1.8	73	(% class="mark" %)"Front-load your headings."
1.5	74
1.8	75
1.5	76	You get to the essentials of the information much faster with the second heading.
	77
	78
1.12	79	=== {{id name="#4"/}}3. Structure your page with headings. ===
	80
1.8	81	Using headings gives your page structure and hierarchy.
1.5	82
1.8	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
1.5	86	Example:
	87
1.8	88	[Title]
1.5	89
1.8	90	(% class="mark" %)Apply for a thing
1.5	91
1.8	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
1.12	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
1.8	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
1.9	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.
1.8	121
1.9	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.
1.8	123
	124
1.9	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
1.6	141	----
1.5	142
1.7	143	== {{id name="UEHT"/}}Usability evidence ==
1.5	144
2.1	145	[['Writing killer web headings and links'>>url:http://gerrymcgovern.com/writing-killer-web-headings-and-links/]] Gerry McGovern, 2009
1.16	146
2.1	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
1.16	148
2.1	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
1.8	150
2.1	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
1.16	152
2.1	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
1.5	154
2.1	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
1.5	156
2.1	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
1.5	159	[['Scrolling and attention'>>url:https://www.nngroup.com/articles/scrolling-and-attention/]] Neilson Norman Group
1.16	160
2.1	161	[['How to use headings on your site'>>url:https://yoast.com/how-to-use-headings-on-your-site/]], Yoast
1.16	162
2.1	163	[['Create good titles and snippets in Search Results'>>url:https://support.google.com/webmasters/answer/35624?hl=en]], Google Webmasters
1.5	164
1.16	165	[['Web style guide'>>http://webstyleguide.com/wsg3/8 -typography/5-typographicemphasis.html ]], Lynch, P. and S. Horton,
1.5	166
1.16	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
1.5	170	(% class="box" %)
	171	(((
	172	See also:
1.7	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]]
1.5	177	)))

Wiki source code of Headings and titles

Navigation