Wiki source code of Links

Version 10.1 by Lizzie Bruce on 2019/05/21 21:29

Show last authors
1 (% class="box" %)
2 (((
3 Following this helps:
4
5 * **people in a hurry** – meaningful links create faster user journeys
6 * **people who are stressed** – links that take you where you expect are always better
7 * **people who are multi-tasking** – if your attention's divided you need an easy path
8 * **cognitive impairments** – easy to understand link text carries less cognitive load
9 * **visual impairments** – meaningful links enable navigation with screen reading software
10 * **motor impairments** – clear links to predictable destination content make navigation easier and quicker
11 )))
12
13 ==
14 Guidance ==
15
16 (% class="wikigeneratedid" id="H" %)
17 Links are very special components of your content. Treat them with respect and they will support your goals and your users. Spend time thinking about link wording, and how it would be understood out of context.
18
19
20 [[1. Make link text meaningful.>>#\#1]]
21
22 [[2. Avoid mid-sentence links.>>#\#2]]
23
24 [[3. 'Front-load' your link text.>>#\#3]]
25
26 [[4. Make call to action (CTA) links and button text specific.>>#\#4]]
27
28 [[5. Start CTA links and button text with a verb.>>#\#5]]
29
30 [[6. Make CTA links and button text 2 to 4 words.>>#\#6]]
31
32 [[7. Match the destination content.>>#\#7]]
33
34 [[8. Use sentence case.>>#\#8]]
35
36 [[Usability evidence>>#\#UEL]]
37
38
39 ----
40
41 ===
42 {{id name="#1"/}}1. Make link text meaningful. ===
43
44 Not "more information" and never "click here".
45
46 People scan the page for links to find out where to click next to get to the thing they want. If your page is just part of their journey, not the final destination, they are very unlikely to read every word on it.
47
48 Making link text meaningful is useful for people who use screen reading software.
49 You can set it to read out all links on a page to decide which next destination is most relevant for you. 
50 If all the links say "more information" that tells you nothing. You might leave the website, rather than choose to listen to the whole page.
51
52
53 Example:
54
55 "(% class="mark" %)[[Equalities Act 2010>>https://www.legislation.gov.uk/ukpga/2010/15/contents]](%%)" not "more information"
56
57 "(% class="mark" %)[[W3C content readability guideline>>https://www.w3.org/TR/WCAG21/#readable]](%%)" not "click here"
58
59 "(% class="mark" %)[[WEBaim contrast checker>>https://webaim.org/resources/contrastchecker/]](%%)" not "find out more"
60
61
62 === {{id name="#2"/}}2. Avoid mid-sentence links. ===
63
64 They can be distracting. They may slow down users who scan as they need to stop and read text on both sides of the embedded link. They can cause readability challenges for autistic users. 
65 \\Example:
66 Learn more about this project by reading the (% class="mark" %)[[Readability Guidelines blog posts>>https://contentdesign.london/?s=readability]].
67
68 Not
69
70 Learn more by reading the [[Readability Guidelines blog posts>>https://contentdesign.london/?s=readability]] about this project.
71
72
73 === {{id name="#3"/}}3. 'Front-load' your link text. ===
74
75 Put the most relevant, specific and unique content at the beginning of the link.
76
77 Example:
78
79 (% class="mark" %)"Buy yellow shoes"(%%) not "Footwear available here including colourful shoes"
80
81
82 === {{id name="#4"/}}4. Make call to action (CTA) links and button text specific. ===
83
84 Not "more information" and never "click here".
85
86 People need to know where the thing they click on is going to take them. Providing specific link text helps them know what to expect.
87
88 Aim for link text to make sense in isolation without reading words around it, especially calls to action and button text. Users may be reading or hearing the link without its context. For example people:
89
90 * scanning
91 * with a small visual focus field
92 * using text to speech software
93
94
95 === {{id name="#5"/}}5. Start CTA links and button text with a verb. ===
96
97 Calls to action should be direct and use active language. They are there to signpost or encourage the user to take the next step.
98
99
100 Example:
101
102 (% class="mark" %)"Book your ticket"(%%)
103
104
105 === {{id name="#6"/}}6. Make CTA links and button text 2 to 4 words. ===
106
107 This is so that they are quick to absorb. Concise CTA text allows users to make an instant decision on whether or not to click. They are also shorter for screen reading software to read.
108
109
110 Example:
111
112 (% class="mark" %)"Book your ticket"
113
114 (% class="mark" %)"Shop now"
115
116
117 Sometimes you may need to make them a little longer so that you can include all the words of the thing someone is applying for:
118
119
120 (% class="mark" %)"Apply for an older person's bus pass"
121
122
123 === {{id name="#7"/}}7. Match the destination content. ===
124
125 Provide link text that reflects the title of the destination content.
126
127 If someone clicks on a link saying "Buy apples" and it takes them to a page titled "Pears" they will be confused at best, frustrated at worst. Even minor differences can puzzle your user.  
128
129
130 (% style="color:inherit; font-family:inherit" %)Example:
131
132 (% style="color:inherit; font-family:inherit" %)Link on page
133
134 (% class="mark" style="color:inherit; font-family:inherit" %)"Buy local apples now"(%%)
135
136
137 (% style="color:inherit; font-family:inherit" %)Destination page title
138
139 (% class="mark" style="color:inherit; font-family:inherit" %)"Fresh, local apples: buy yours today"
140
141
142 ==== Intentionally misleading link text ====
143
144 Click bait link titles should be avoided completely. You will only lose your users' trust and annoy them. They may complain about your misleading link text on social media. That can affect your organisation's reputation even more.
145
146
147 === {{id name="#8"/}}8. Use sentence case. ===
148
149 As with headings and titles, use sentence case for inline links, calls to action and button links. These are more readable. [[Capital letters>>Punctuation and abbreviating.Capitals.WebHome]] are less scannable.
150
151 === ===
152
153 Example:
154
155 (% class="mark" %)"Apply for a passport"(%%) – specific, active, sentence case
156
157 "Get Started" – not specific, passive, title case
158
159
160 (% class="mark" %)"Buy pink grapefruits"(%%) – specific, active, sentence case
161
162 "Grapefruits For Sale, Special Type Available." – not specific, passive, title case
163
164
165 ----
166
167 == {{id name="#UEL"/}}Usability evidence ==
168
169 [['Web Usability and Age: How Design Changes Can Improve Performance'>>https://www.researchgate.net/publication/228954613_Web_usability_and_age_how_design_changes_an_improve_performance]], Chadwick-Dias, A., McNulty, M., Tullis, T., Conference on Universal Usability, 2003
170
171 [[‘Identifiers and their roles in networked information applications’>>https://www.educause.edu/ir/library/html/cem/cem97/cem9743.html]], Lynch, C. , in ARL: A bimonthly newsletter of research library issues and actions, 194, Washington, DC: Association of Research Libraries, 1997
172
173 [['Letting Go of the Words: Writing web content that words'>>https://books.google.co.uk/books/about/Letting_Go_of_the_Words.html?id=GHwSP_3khccC&redir_esc=y]] Janice Redish, 2007
174
175 [[Embedded Links and Online Reading Accessibility>>https://www.youtube.com/watch?v=EtHNDAoQLSQ]], Caroline Jarrett and Whitney Quesenbery in discussion, YouTube, 2010.
176
177 [['Imprudent linking weaves a tangled Web'>>https://ieeexplore.ieee.org/document/596641]] P.J. Lynch & S. Horton, 1997:
178 Embedded in the middle of a sentence distract and slow down the reader. "Placing links at the end of a sentence will least disrupt the syntax."
179
180 [['Guidelines for authoring comprehensible web pages and evaluating their success'>>http://core.ecu.edu/engl/tpc/MennoMenno/ftp/spyridakis%202000.pdf]], Jan Spyridakis, 2000, p 368 and 370: 
181 "If readers choose to follow a link, they should have an accurate idea concerning where they are going." "Embedded links should be concrete enough that readers can grasp their meaning without having to read surrounding text."
182
183 [['Explicitness of local navigational links: comprehension, perceptions of use, and browsing behavior'>>https://journals.sagepub.com/doi/abs/10.1177/0165551506068144]], Kathryn A. Mobrand, Jan H. Spyridakis, SAGE Journals, 2007
184
185 [['First 2 Words: A Signal for the Scanning Eye'>>https://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/]], Nielson Norman Group, 2009
186
187 [[GOV.UK A to Z style guide>>https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style]] UK Government website, 2013
188
189 [['Write effective links'>>https://www.plainlanguage.gov/guidelines/web/write-effective-links/]] US Government website, 2010
190
191 [['Tips for writing great links'>>http://gerrymcgovern.com/tips-for-writing-great-links/]], Gerry McGovern, 2012
192
193 [[GOV.UK content principles: conventions and research background>>https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/206088/GOV.UK_content_principles.pdf]], UK Government website, 2013
194
195 [[Hyperlinks>>https://accessibility.umn.edu/core-skills/hyperlinks]], University of Minnesota, 2016
196
197 [['Is the Underlined Link Hurting Readability?'>>https://www.uxbooth.com/articles/is-the-underlined-link-hurting-readability/]] Cassandra Naji, 2016
198
199 [[NZ Government Style Guide: Links>>https://www.govt.nz/about/about-this-website/style-and-design/the-govt-nz-style-guide/#links]], NZ Government website, 2016
200
201 [['Design navigation for clarity and fidelity'>>http://gerrymcgovern.com/design-navigation-for-clarity-and-fidelity/]] Gerry McGovern, 2018
202
203 [['Fake metrics: Impressions are the new hits'>>http://gerrymcgovern.com/fake-metrics-impressions-are-the-new-hits/]], Gerry McGovern, 2018
204
205 [['Creating usable hyperlinks'>>https://docs.google.com/document/d/187CTj8vM8wqNWpepNitNaJP116cjSdWrqzMyM4Qdos8/edit]], Dan does content, 2018
206
207 [['Web accessibility for older users: a literature review'>>http://www.w3.org/TR/wai-age-literature/]], Arch, A., W3C Working Draft 14 May 2008
208
209 [[‘Bridging the divide: older learners and new technologies’>>https://www.researchgate.net/publication/242224118_Bridging_the_divide_older_learners_and_new_technologies_ICT_and_older_learners_strategies_and_case_studies]], Taylor, T. and Rose, J., 2005. Locked.
210
211
212 (% class="box" %)
213 (((
214 See also:
215
216 * [[Headings and titles>>User centred design.Page titles and headings.WebHome]]
217 * [[Plain English>>Plain English.Plain English, simple sentences.WebHome]]
218 * [[Capital letters>>Punctuation and abbreviating.Capitals.WebHome]]
219 * [[How people read>>User centred design.How people read.WebHome]]
220 )))