Eyes Are Drawn to Links
Users scan web pages looking for clues as to what the page is about and where to go next. They use sign posts, such as headings and bolded keywords, as shortcuts to information. Hyperlinks also attract users’ attention and need to stand out, both visually and contextually. Underlined blue text is still the most obvious visual indicator of a link. Easy-to-understand links make the page more scannable because they provide both information about what is on the page and an idea of where to go next.
The following example from one of our eyetracking studies is typical of how people read on the web. The participant was asked a broad task: Find out about Genentech and what it does. In the first few moments on the Genentech Oncology page, the user scanned the first two paragraphs following an F-pattern, but then switched to looking primarily at the links. The links made it easy for the user to navigate to additional information about a topic, but also acted as headings for each paragraph, informing the user what each section is about.
Web readers typically focus on hyperlinks when they scan a page, as seen in this gaze plot from an eytracking study on the Genentech Oncology page.
Poor Link Text Hurts Usability, Accessibility, and SEO
Even when the links visually stand out, they need to be meaningful to be helpful. It really backfires to draw people’s eyes to something irrelevant. Links should have good information scent: that is, they must clearly explain where they will take users.
The links in the following example from Bloomberg.com are meaningless on their own. What do profit and estimates refer to? (It’s a trick question, they both refer to the Control4 Company profile on Bloomberg.com, but you couldn’t have known that without reading the full paragraph.)
In order for these links to make sense, users have to read the surrounding text to put the link into context. This process of finding the associated information requires more effort, both in terms of eye movements and mental processing.
Users have to read the text around the vague links to determine their meaning.
The website above would be even more difficult for visually impaired users who use a screen reader. They can’t scan the page quickly with their eyes, but can get an overview of a page by tabbing through links on a page.
The example below is from the Twitter.com FAQ page. Someone with poor vision could have the page read word for word or by links. The list below the screenshot shows what he would hear using a screen reader. The links that are understandable out of context, such as how to post a Tweet, are good. However vague or duplicate links (such as here) are useless in this situation; in order to understand them, the user has to revert to having the whole page read to him word for word.
Some of the links on the Twitter FAQ page (like protect your Tweets or how to post a Tweet) are understandable out of context. But there are also several vague and duplicate links (here, @reply) that hinder scanning the page or use of a screen reader.
List of links from the Twitter FAQ example:
- protect your Tweets
- how to post a Tweet
- Twitter widget
- Direct message
Additionally, poor link labels hurt your search-engine ranking. Search engines use the anchor text as an additional cue to what the page or document is about. For example, one of our most linked to articles is Usability 101: Introduction to Usability. Other websites link to this article with various link text, such as Usability basics, Intro to Usability, and What is usability. Search engines use the anchor text from other sites to determine what queries to return this page for. This is why you don’t need to search for “Usability 101” to find this article.
Good Links Are Descriptive, Unique, and Start with Keywords
First, the most helpful link text describes the page that’s being linked to. When writing links ask yourself, “What will the user get when they click this link?” Mention that the link opens a PDF if that is the case. (Media format warnings don’t have to be part of the anchor text itself, but can be appended — for example in parentheses or as an icon.)
In the Bloomberg.com example above instead of linking profit and estimates, I recommend hyperlinking Control4 since it leads to the company profile. (If it referred to an article specifically about Conrol4’s profit for 2013 I would suggest making Control4 is projected to report its first full-year profit for 2013, on $129 million of revenue the anchor text.) In the second section, instead of street lights, make the link text more specific by changing it to expanding into street lights. 33 percent should be Silver Spring’s shares are down 33 percent.
As you can see in my rewrites, link length is less important than a good link description. Use as many words as you need to accurately describe the page (or document) being referenced, while still being concise (as is a generally good practice when writing for the web).
Second, when users see the same link twice on the same page they assume that it goes to the same place. For this reason, if the second link refers to a different page make sure that the text is unique. Remembering this will also help you write more descriptive link labels and avoid generic links such as Read more, or Click here. (An additional reason to avoid Click here is that there are no clicks on touch-screen devices.)
We advised against Click here links as early as 1996 and this is one of the 80% of old usability guidelines that is still valid.
Finally, the best links start with the most important words. Frontloading the link name helps users scan the page more easily: we’ve learned from our eyetracking research that people mostly look at the first 2 words of a link. Keep this finding in mind if you’re tempted to start all the links on the page with the same introductory text, such as Read more about….
The International Baccalaureate (www.ibo.org) homepage follows most of our link-writing guidelines; all links are unique and descriptive. All users, including those with screen readers, should be able to get a good overview of the topics on the page and figure out where to navigate next just by reading the links.
IB.org could have improved this design even more by making the section headings clickable, thereby removing the need for links below each section. They could also frontload the links and remove the introductory link text Read more..., Visit..., View more....
The IBO.org homepage links are unique and specific. Although many start with Read, the link text also includes information about the specific content referred by the link (e.g., Read more about who we are or Read the latest issue). The site could improve page scannability by dropping the word Read and frontloading the link description.
The American Diabetes Association (www.diabetes.org) is another good example. They have made the section headings clickable. The links on the Treatment & Care page, for example, function both as headings and navigation.
Links on the diabetes.org Treatment & Care page are unique, descriptive, and concise.
Improve page scannability by using links that are easily noticeable and understandable. First, don’t make users hunt around the page in search for clickable elements. Second, don’t force users to read the text surrounding a link to determine where it leads. This is both time consuming and frustrating. Helpful links are visually distinct from the body text and specific to the page or document that they refer to.
Share this article: Twitter | LinkedIn | Google+ | Email