This resource is an archived version of the Readability Guidelines.
New wiki is at: readabilityguidelines.myxwiki.org
Go to the Links page.
Recommendations
1. Link text should be meaningful, not "click here" or "more information".
2. Call to action links should start with a verb.
3. Avoid mid-sentence links as they can be distracting. They may slow down users who scan as they need to stop and read text surrounding the embedded link. They can cause readability challenges for autistic users.
4. 'Front-load' your link text, by putting the most relevant content at the beginning of the link.
5. Make links active and specific.
Example:
"Buy pink grapefruits" not "Grapefruits for sale, pink ones only."
Usability evidence
Spyridakis recommends meaningful hyperlinks:
"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."
Chadwick-Dias, McNulty and Tullis found that users, especially older ones, hesitated on links like 'Accounts', but less so with 'Go to accounts'.
Research by Lynch in 1997 cited by Spyradakis cautions 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. Redish notes that embedded definition links, that open a small window and don’t change the screen, are not disruptive.
'Web Usability and Age: How Design Changes Can Improve Performance', Chadwick-Dias, A., McNulty, M., Tullis, T., Conference on Universal Usability, 2003
'Letting Go of the Words: Writing web content that words' Janice Redish, 2007
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
'Guidelines for authoring comprehensible web pages and evaluating their success', Jan Spyridakis, 2000, especially pages 368 and 370
'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
I came across this page from my university about hyperlinks and accessibility: https://accessibility.umn.edu/core-skills/hyperlinks
It has recordings of screen readers that you can listen to and compare two different sets of links in text. It suggests making hyperlinked text as descriptive as possible, "making them clear, concise, and meaningful out of context" (I like the "out of context part") and to "never make [users] have to click a link just to find out where it goes!"
However, I found it didn't address the readability of the whole text in relation to the hyperlink, like how readable the text is with the insertion of the hyperlink, say if the user wants to keep reading and not click. I'm thinking of the visual elements - link color, font weight, underlined or no, hover color or no, and the disruption to reading/comprehension. UX Booth has a bit about this (http://www.uxbooth.com/articles/is-the-underlined-link-hurting-readability/). I like that it points out "Don’t underline text that isn’t a link." I do see that at times… underlining text AND underlining links. Undermines the whole thing.
NNG has a study about links in microcontent, like lists, table of content, that kind of thing. "Users typically see about 2 words for most list items; they'll see a little more if the lead words are short, and only the first word if they're long." The study showed links were unclear that were "Bland, generic words, made-up words or terms, starting with blah-blah and deferring the information-carrying text to the end."
https://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/
And for additional evidence from Plain Language peeps: "Eyetracking studies show that links written in plain language are the most effective."
https://www.plainlanguage.gov/guidelines/web/write-effective-links/
Gerry McGovern has had a few things to say on links and I'm interested in how these ideas fit into our "evidence needed" hopes and dreams. I haven't had time to dip into these myself, but I found them and bookmarked them to come back to. Just thought I'd drop these in if anyone is around.
"Design navigation for clarity and fidelity" - http://gerrymcgovern.com/design-navigation-for-clarity-and-fidelity/
"Tips for writing great links" - http://gerrymcgovern.com/tips-for-writing-great-links/
"Collaborating with the enemy" - http://gerrymcgovern.com/author/gerry/
Here are the key snippets pertaining to links best practice from the Neilsen Norman Group research report, How People Read on the Web.
They broadly categorise links as one of the "magnetic" elements of a page, ie likely to draw attention from a reader who is scanning. The number of links on a page has an impact, the researchers say: "If there are only a few headings, bolded words, or links on a page of text, it is almost guaranteed that the eye will be drawn to these elements… The F-pattern of reading is more common on longer article pages that have few headings, little sectioning, or few inline links. Bolding and underlining attract the eye, but when a user must process a full page of text, the F-pattern scanning defense mechanism powerfully kicks in."
I think Government Digital Service use the phrase "dirty magnets" for links which draw users away from the intended path through the content. And that's a beautiful phrase. How many dirty magnets are out there? I shudder to think.
Anyway, here are the NNG recommendations:
- Typically, the easiest text links to discriminate are blue and underlined, and sometimes bold (with the normal text being black, non-bold and not underlined.) Links should look different from typical body text, and a consistent look should be used for all text links on the site (except headings). Not recommended: substituting good visuals with a repetitive term such as “Click here.”
- When a sentence can be written in such a way that the important words are the actual link, all the better. This tactic eliminates the need for bolding call-out words separately, because the link treatment is already the visual differentiator.
- Present links consistently and differently from callout words. Consider underlining links but not callout words. People will be able to tell the difference between a clickable link and just an important word or phrase if this is done well
- Use the information-bearing word, phrase, or heading as the link rather than adding an additional word or button as the link. This tactic prevents gratuitous page clutter as well as needless fixations, and it is better for accessibility.
- Abhor: “More,” “Click Here,” and “Go.”
- Well-established design rules of proximity and placement still ring true on the web today: Place commands where users need them
- Use information-bearing words for links, not generic terms such as 'Go' or 'More' or 'Click here'
Another tidbit: If presenting long lists of bullet pointed lists that start with the same words, a bypassing effect occurs: "Bypassing is an atypical gaze pattern during which the user deliberately skips the first words of a line because these same words are repeated on several lines. People return their gaze strongly left as they do in the F-pattern, but they intentionally don’t go as far as the very beginning of the line."
Beware of formatting text so it looks like a link: "Underlined (blue) text: People assumed these were links and looked at them". This creates a conundrum when organisations want to "call out" an important word: "Leaving a very important word as normal text means the user in all likelihood will overlook the word, but making it bold can make people believe it’s a link. Which is worse? Attracting the eye to important words at the expense of drawing clicks to things that are not links, or not drawing attention to an important word?"
And here's a detailed section from the NNG report on the content of links
INFORMATION-BEARING WORDS AS LINKS
After scanning just the links on a page, a user might be able to eliminate any further scanning or reading, or she may decide to follow a link.
Using information-bearing words as links provides many benefits because it creates less clutter and better accessibility, and it saves user fixations, decreases user effort, and prevents mistakes.
Links serve a dual purpose: they suggest topics and act as callouts for words and phrases. Sometimes, though, the purposes of calling out important words and suggesting links to topics on other pages are at odds with each other. Often, the real reason for the link is to say, “Hey you! We don’t explore this particular topic much on this page but it is thoroughly discussed on this linked page.”
A byproduct of making links look different is that the eye is attracted to them, so people can use them as if they were headings for the paragraph in which they appear, even though they were meant only to be hyperlinks.
Links are not helpful during scanning if the link text is generic. Adding generic links instead of using the information-bearing words creates unnecessary noise. We know that it’s hard for the eye to circumvent design anarchy to pick out salient information, and sometimes people abandon pages that are cluttered. Preventable, generic links add unnecessarily to visual clutter, but they also break the proximity rule of design, which states that related and similar things should be kept together.
Be efficient and make use of the work that has already been done—from both the designer’s and user’s perspective. Use words you already have written and edited, and words the user has already read, for the links. For example, imagine the written phrase is, “Dog can speak English,” and the user reads it. To describe a hyperlinked page with the complete information about the talking dog, make Dog can speak English look like a link and be a link. Do not instead write Dog can speak English then add the word “Go” as a link or button next to this perfectly good text. If there are page section headings for items, let’s say bags in vinyl, leather, and burlap, make those words the headings AND the links: Vinyl Bags, Leather Bags, and Burlap Bags. Don’t show the headings and then a See More button. If the words already there look like headings, the user has probably already scanned them. Why make everyone work harder?
In my digging, I was particularly interested in trying to find evidence that explored whether or not the presence of a link affected readability. However, it was quite hard to find much evidence along these lines. There are lots of articles around writing descriptive link text and all the stuff that we should already know. However, finding evidence purely about the readability effects of links was tough!
Caroline Jarrett and Whitney Quesenbery discuss how mid-sentence hyperlinks affect readability.
Fantastic report from 2000 that is still very valid today. Features several sections where hyperlinks are discussed (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."
This document also reference several other interesting papers and studies, unfortunately a number of them are behind paywalls…
It would be great to read these studies if at all possible.
One of the best style guide articles on writing and presenting links. Also covered several topics that I've been interested in and haven't seen covered elsewhere eg how to handle email addresses and the placement of links on pages.
I have tried to take elements of what we found and use them to update some best-practice guidelines I wrote a few years ago. Maybe we could flesh these out as needed for the Wiki?