眼睛被绘制到链接

用户扫描网页寻找页面的线索以及下一个地方的线索。他们使用签名帖子,例如标题和粗体关键字,作为信息的快捷方式。超链接也吸引了用户的注意力,并且需要在视觉上和上下文中脱颖而出。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.

我们的眼镜研究之一的以下示例是人们如何在网上阅读的典型。参与者被问到一项广泛的任务:了解Genentech及其所做的事。在Genentech肿瘤页面上的前几个瞬间,用户扫描了前两个段落F-pattern,但随后切换到主要在链接上查看。该链接使用户可以轻松导航到有关主题的其他信息,但也充当每个段落的标题,通知用户每个部分是关于的。

参与者的eyetaching数据扫描Gegentech网站上的肿瘤页面
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

即使链接视觉上脱颖而出,他们也需要有意义地有用。它真的是为了吸引人们的目光而无法无关紧要的东西。链接应该有好的信息香味:即,他们必须清楚地解释他们将在哪里接受用户。

The links in the following example from Bloomberg.com are meaningless on their own. What do利润估计refer to?(这是一个技巧问题,他们都在彭博网上引用Control4公司配置文件,但在不阅读完整段落的情况下,您无法知道。)

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.

Article on Bloomberg.com about Google buying Nest, with vague links such as profit, estimates, street lights, 33 percent
用户必须阅读模糊链接周围的文本以确定其含义。

上面的网站将更加困难视力障碍的用户谁使用屏幕阅读器。他们无法用眼睛快速扫描页面,但可以通过页面上的链接来获取页面的概述。

以下示例来自Twitter.com FAQ页面。愿景较差的人可以让页面读取单词或链接。屏幕截图下面的列表显示了他使用屏幕阅读器的收听。脱离上下文的链接,例如如何发布推文,are good. However vague or duplicate links (such as这里在这种情况下)是无用的;为了下stand them, the user has to revert to having the whole page read to him word for word.

Twitter FAQ页面的裁剪屏幕截图
Twitter FAQ页面上的一些链接(如protect your Tweets要么如何发布推文) are understandable out of context. But there are also several vague and duplicate links (这里@reply) that hinder scanning the page or use of a screen reader.

List of links from the Twitter FAQ example:

  • 这里
  • protect your Tweets
  • 如何发布推文
  • Twitter widget
  • @reply
  • 这里
  • 直接留言
  • 这里

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 isUsability 101: Introduction to Usability。Other websites link to this article with various link text, such asUsability basics介绍可用性那和什么是可用性。搜索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.

良好的链接是描述性的,唯一的,并以关键字开头

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利润估计那I recommend hyperlinkingControl4.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预计将在2013年报告其第一个全年利润,以1.29亿美元的收入the anchor text.) In the second section, instead ofstreet lights,使链接文本更改为更具体扩展到街灯33 percent应该银春的股价下降了33%

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写作网络).

其次,当用户在同一页面上看到相同的链接时,它们假设它进入同一位置。出于这个原因,如果第二链接是指不同的页面,请确保文本是唯一的。记住这也可以帮助您编写更多描述性链接标签,并避免诸如此类的通用链接Read more, 要么点击这里。(An additional reason to avoid点击这里是触摸屏设备上没有点击次点击。)

我们建议against点击这里links as early as 1996和this is one of the80%的旧可用性指南仍然有效。

最后,最好的链接以最重要的单词开始。载入链接名称可帮助用户更轻松地扫描页面:我们从我们的眼压研究中了解到people mostly look at the first 2 words of a link。请记住,请记住,如果您想要使用相同的介绍性文本启动页面上的所有链接,例如阅读更多关于......

国际Baccalaureate(www.ibo.org)主页遵循我们的大部分链接写作指南;所有链接都是唯一的和描述性的。所有用户(包括带有屏幕阅读器)的用户都应该能够通过读取链接来获得页面上的主题的良好概述,并弄清楚下面的位置。

通过使截面标题可点击,IB.ORG可以更多地改进了这种设计,从而删除了每个部分下面的链接。它们还可以将链接升降并删除介绍性链接文本Read more...Visit...View more...

Cropped screenshot of the bottom half of the IB.org homepage
The IBO.org homepage links are unique and specific. Although many start withRead那the link text also includes information about the specific content referred by the link (e.g.,Read more aboutwho we are or阅读最新问题). The site could improve page scannability by dropping the wordRead并朝下链接描述。

美国糖尿病协会(www.diabetes.org)是另一个好例子。他们已经点击了章节标题。链接治疗和护理page, for example, function both as headings and navigation.

美国糖尿病相关治疗和护理页面
糖尿病的链接治疗和护理页面是独特的,描述性和简洁的。

Conclusion

使用易于引人注目和可理解的链接来改进页面扫描性。首先,不要让用户在页面上寻找页面,以寻找可点击的元素。其次,不要强迫用户阅读链接周围的文本以确定它引导的位置。这既耗时又令人沮丧。有用的链接在视觉上与身体文本不同,并且特定于他们所指的页面或文件。