Part of: Content design
Links
Last updated: 28 April, 2022
Following this helps people with:
time-pressures: meaningful links create faster user journeys
stress: links that take you where you expect will reassure
multi-tasking: if attention's divided you need a direct path
cognitive impairments: clear link copy takes less cognitive load
motor impairments: predictable destination content reduces clicks
visual impairments: meaningful links improve navigation for screen reader users
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 can slow down users who scan read, as they need to stop and read text on both sides of the embedded link. They may 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. It is more readable and scannable, evidence is on the capital letters wiki page.
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
‘Identifiers and their roles in networked information applications’, Lynch, C. , in ARL: A bimonthly newsletter of research library issues and actions, 194, Washington, DC: Association of Research Libraries, 1997
'Letting Go of the Words: Writing Web Content that Works', Redish, J., Boston: Morgan Kaufmann, 2nd edition, 2012
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:
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." Locked.
'Guidelines for authoring comprehensible web pages and evaluating their success', Jan Spyridakis, 2000, p 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. Locked
'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
'Web accessibility for older users: a literature review', Arch, A., W3C Working Draft 14 May 2008
‘Bridging the divide: older learners and new technologies’, Taylor, T. and Rose, J., 2005. Locked.