Links
Following this helps:
- people in a hurry – meaningful links create faster user journeys
- people who are stressed – links that take you where you expect are always better
- people who are multi-tasking – if your attention's divided you need an easy path
- cognitive impairments – easy to understand link text carries less cognitive load
- visual impairments – meaningful links enable navigation with screen reading software
- motor impairments – clear links to predictable destination content make navigation easier and quicker
Guidance
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.
3. 'Front-load' your link text.
4. Make call to action (CTA) links and button text specific.
5. Start CTA links and button text with a verb.
6. Make CTA links and button text 2 to 4 words.
7. Match the destination content.
1. Make link text meaningful.
Not "more information" and never "click here".
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.
Making link text meaningful is useful for people who use screen reading software.
You can set it to read out all links on a page to decide which next destination is most relevant for you.
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:
"Equalities Act 2010" not "more information"
"W3C content readability guideline" not "click here"
"WEBaim contrast checker" not "find out more"
2. Avoid mid-sentence links.
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.
Example:
Learn more about this project by reading the Readability Guidelines blog posts.
Not
Learn more by reading the Readability Guidelines blog posts about this project.
3. 'Front-load' your link text.
Put the most relevant, specific and unique content at the beginning of the link.
Example:
"Buy yellow shoes" not "Footwear available here including colourful shoes"
4. Make call to action (CTA) links and button text specific.
Not "more information" and never "click here".
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.
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
- using text to speech software
5. Start CTA links and button text with a verb.
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:
"Book your ticket"
6. Make CTA links and button text 2 to 4 words.
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:
"Book your ticket"
"Shop now"
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:
"Apply for an older person's bus pass"
7. Match the destination content.
Provide link text that reflects the title of the destination content.
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.
Example:
Link on page
"Buy local apples now"
Destination page title
"Fresh, local apples: buy yours today"
Intentionally misleading link text
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.
8. Use sentence case.
As with headings and titles, use sentence case for inline links, calls to action and button links. These are more readable. Capital letters are less scannable.
Example:
"Apply for a passport" – specific, active, sentence case
"Get Started" – not specific, passive, title case
"Buy pink grapefruits" – specific, active, sentence case
"Grapefruits For Sale, Special Type Available." – not specific, passive, title case
Usability evidence
'Web Usability and Age: How Design Changes Can 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'."
'Letting Go of the Words: Writing web content that words' Janice Redish, 2007: "embedded definition links, that open a small window and don’t change the screen, are not disruptive"
Embedded Links and Online Reading Accessibility, Caroline Jarrett and Whitney Quesenbery in discussion, YouTube, 2010.
'Imprudent linking weaves a tangled Web' 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.
'Guidelines for authoring comprehensible web pages and evaluating their success', 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."
'Explicitness of local navigational links: comprehension, perceptions of use, and browsing behavior', Kathryn A. Mobrand, Jan H. Spyridakis, SAGE Journals, 2007
'First 2 Words: A Signal for the Scanning Eye', Nielson Norman Group, 2009
GOV.UK A to Z style guide UK Government website, 2013
'Write effective links' US Government website, 2010
'Tips for writing great links', Gerry McGovern, 2012
GOV.UK content principles: conventions and research background, UK Government website, 2013
Hyperlinks, University of Minnesota, 2016
'Is the Underlined Link Hurting Readability?' Cassandra Naji, 2016
NZ Government Style Guide: Links, NZ Government website, 2016
'Design navigation for clarity and fidelity' Gerry McGovern, 2018
'Fake metrics: Impressions are the new hits', Gerry McGovern, 2018
'Creating usable hyperlinks', Dan does content, 2018