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

Not

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

72

73

74

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

75

76

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"

81

82

83

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

84

85

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

86

87

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.

88

89

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:

90

91

* scanning

92

* with a small visual focus field

93

* using text to speech software

94

95

96

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

97

98

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

104

105

106

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

107

108

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"

114

115

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

116

117

118

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:

119

120

121

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

122

123

124

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

125

126

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

127

128

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.

129

130

131

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

132

133

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

134

135

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

136

137

138

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

139

140

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

141

142

143

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

144

145

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.

146

147

148

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

149

150

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

157

158

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

159

160

161

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

162

163

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

----

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

169

170

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

171

172

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

173

174

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

175

176

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

177

178

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

179

180

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

181

182

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

183

184

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

185

186

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

187

188

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

189

190

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

191

192

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

193

194

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

195

196

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

197

198

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

199

200

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

201

202

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

203

204

205