Links - XWiki

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

)))

==

Guidance ==

(% 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]]

----

===

{{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.

Example:

"(% 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

(Link at the end of the sentence.)

Not

Learn more by reading the [[Readability Guidelines blog posts>>https://contentdesign.london/?s=readability]] about this project.

73

(Link in the middle of the sentence.)

74

75

76

=== {{id name="#3"/}}3. 'Front-load' your link text. ===

77

78

Put the most relevant, specific and unique content at the beginning of the link.

Example:

(% class="mark" %)"Buy yellow shoes"(%%) not "Footwear available here including colourful shoes"

83

84

85

=== {{id name="#4"/}}4. Make call to action (CTA) links and button text specific. ===

86

87

Not "more information" and never "click here".

88

89

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.

90

91

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:

* scanning

* with a small visual focus field

97

* using text to speech software

98

99

100

=== {{id name="#5"/}}5. Start CTA links and button text with a verb. ===

101

102

Calls to action should be direct and use active language. They are there to signpost or encourage the user to take the next step.

Example:

(% class="mark" %)"Book your ticket"(%%)

108

109

110

=== {{id name="#6"/}}6. Make CTA links and button text 2 to 4 words. ===

111

112

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.

Example:

(% class="mark" %)"Book your ticket"

118

119

(% class="mark" %)"Shop now"

120

121

122

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:

123

124

125

(% class="mark" %)"Apply for an older person's bus pass"

126

127

128

=== {{id name="#7"/}}7. Match the destination content. ===

129

130

Provide link text that reflects the title of the destination content.

131

132

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.

133

134

135

(% style="color:inherit; font-family:inherit" %)Example:

136

137

(% style="color:inherit; font-family:inherit" %)Link on page

138

139

(% class="mark" style="color:inherit; font-family:inherit" %)"Buy local apples now"(%%)

140

141

142

(% style="color:inherit; font-family:inherit" %)Destination page title

143

144

(% class="mark" style="color:inherit; font-family:inherit" %)"Fresh, local apples: buy yours today"

145

146

147

==== Intentionally misleading link text ====

148

149

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.

150

151

152

=== {{id name="#8"/}}8. Use sentence case. ===

153

154

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.

=== ===

Example:

(% class="mark" %)"Apply for a passport"(%%) – specific, active, sentence case

161

162

"Get Started" – not specific, passive, title case

163

164

165

(% class="mark" %)"Buy pink grapefruits"(%%) – specific, active, sentence case

166

167

"Grapefruits For Sale, Special Type Available." – not specific, passive, title case

----

== {{id name="#UEL"/}}Usability evidence ==

173

174

[['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: "Users, especially older ones, hesitated on links like 'Accounts', but less so with 'Go to accounts'."

175

176

[['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: "embedded definition links, that open a small window and don’t change the screen, are not disruptive"

177

178

[[Embedded Links and Online Reading Accessibility>>https://www.youtube.com/watch?v=EtHNDAoQLSQ]], Caroline Jarrett and Whitney Quesenbery in discussion, YouTube, 2010.

179

180

[['Imprudent linking weaves a tangled Web'>>https://ieeexplore.ieee.org/document/596641]] P.J. Lynch & S. Horton, 1997: Lynch, cited by Spyradakis, cautions against links embedded in the middle of a sentence, suggesting these distract and slow down the reader. Placing links at the end of a sentence will least disrupt the syntax.

181

182

[['Guidelines for authoring comprehensible web pages and evaluating their success'>>http://core.ecu.edu/engl/tpc/MennoMenno/ftp/spyridakis%202000.pdf]], Jan Spyridakis, 2000, especially pages 368 and 370: "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."

183

184

[['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

185

186

[['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

187

188

[[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

189

190

[['Write effective links'>>https://www.plainlanguage.gov/guidelines/web/write-effective-links/]] US Government website, 2010

191

192

[['Tips for writing great links'>>http://gerrymcgovern.com/tips-for-writing-great-links/]], Gerry McGovern, 2012

193

194

[[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

195

196

[[Hyperlinks>>https://accessibility.umn.edu/core-skills/hyperlinks]], University of Minnesota, 2016

197

198

[['Is the Underlined Link Hurting Readability?'>>https://www.uxbooth.com/articles/is-the-underlined-link-hurting-readability/]] Cassandra Naji, 2016

199

200

[[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

201

202

[['Design navigation for clarity and fidelity'>>http://gerrymcgovern.com/design-navigation-for-clarity-and-fidelity/]] Gerry McGovern, 2018

203

204

[['Fake metrics: Impressions are the new hits'>>http://gerrymcgovern.com/fake-metrics-impressions-are-the-new-hits/]], Gerry McGovern, 2018

205

206

[['Creating usable hyperlinks'>>https://docs.google.com/document/d/187CTj8vM8wqNWpepNitNaJP116cjSdWrqzMyM4Qdos8/edit]], Dan does content, 2018

207

208

209