In-page links(also referred to asanchor linksor跳跃链接)链接是指导用户内容的链接same web page, rather than to another page of the site. In the past, the user-experience recommendation has been to avoid these types of links. The use of in-page links has increased in the past few years of web design, making a deeper evaluation of the pros and cons of this design element worthwhile.

为什么页面链接令人困惑

As we have discussed in the past, the largest usability-related concern about in-page links is that theydo not meet users’mental model对于链接。通常,链接导致另一页。当没有满足期望时,用户可以获得迷失方向。

为什么符合页面链接有用

这种可用性问题可以通过内部链接的可用性相关的益处来平衡。常用于页面链接通常用于帮助用户浏览页面内容。Links that lead to information further down the page can:

  • 充当目录,帮助用户形成页面的心理模型
  • Provide直接访问对兴趣的内容
  • Increase discoverability of and engagement with content that requires a long scroll to discover

Common Uses of In-Page Links

There are three common uses of in-page links:

  • 内容表:页面内链接可以用作更长的内容的内容表,让用户直接访问感兴趣的内容。
  • 后退to Top:回到顶部链接将用户从页面的另一个部分引导到页面的顶部。虽然这些链接复制了滚动条的功能,但它们可以在长页上有用,单击单击将在多个滚动上节省时间。这样的链接往往不会伤害不使用它们的用户(除了他们涵盖内容,虽然即使它们也不会造成巨大的问题),并且援助用户。
  • Indexes and FAQs: Alphabetical or numeric indexes or lists of经常问的问题can benefit from in-page links. A list of links at the top of the page saves users the effort of scrolling through numerous items, or screens of items, that are of no use to them. The links are helpful when users are likely to need a specific piece of content, rather than benefit from browsing through all the options.
saks.com提供了一个字母索引,以允许用户直接导航到设计人员列表中的一封信。这里A-Z列表允许直接访问感兴趣的设计者。

The Impact of Screen Size

When we originally wrote about anchor links, we were all viewing the web on similar screen sizes. We were not designing for tiny mobile screens, midsized tablet screens, or large, high-resolution desktop monitors.

As we are designing for morediverse devices, each with its own screen size, thebenefit of using jump links increases as screen size decreases。Consider a page of content on your site: a few paragraphs of text may fill one screen-full on desktop, but extend across several scrolling pages on mobile. The same content, even when brief, expands greatly in length simply by appearing on a small screen.

在13英寸的笔记本电脑上查看MayocliniC.org artice显示4段文本和一个页面内的视频。在手机上查看的同一篇文章仅显示2段。

如何负责任地使用内页链接

那么,如果我们知道在页面链接可能会令人困惑,但我们也知道他们可以帮助用户找到信息,特别是在更长,滚动,移动页面,我们如何权衡使用它们的相对优势和缺点?我们需要在实施他们时需要牢记哪些细节以确保他们的好处超过他们的弱点?

Consider Content Length

For all uses, in-page links are only helpful if the content on a page is lengthy. Any lengthy content may benefit from adding them: the longer the page, the higher the value. However, we know that users不要在线仔细阅读。They skim content.So, before adding in-page links to make a longer piece of content more manageable, first consider if the content could be shortened, reorganized or rewritten. Thoughtful editing may pare down unnecessary details, shorten the content, and may make in-page links unnecessary.

还要考虑在单个页面上显示多少信息。在单页上呈现大量信息,最大限度地减少用户的努力,或interaction cost, but only if the user is likely to read the full content, in the exact order in which it is presented. However, if the page contains 4 or 5 related, yet distinct topics, it may be better to separate content into different pages, particularly if any given user is only likely to read a few of the topics.

A final consideration is the length of each individual content section. A page with many简要介绍不需要尽可能多的滚动努力。在这种情况下,可以不必要地添加页中的链接,甚至是有害的,因为这些链接本身在页面顶部时,添加到页面的长度并按下内容。

switch.coich.co.uk:如果内容部分是简短的,每个页面上有多个部分可见,则不需要符合页面链接。

Use Clear Links and Headings

长期内容受益于在多个部分中构建,具有清晰的标题,其充当signposts for the content discussedin each area of the page. Think of headings as the skeleton (or迷你IA.) of the page: A user can get an overview of content by scrolling through headings, if those headings are clear and descriptive of the text they label.

但是,用户可能会或可能不会滚动,特别是如果页面有许多内容部分。用户scroll when they have a reason: they assess if the page is likely to contain the content they need and scroll if they believe it might be there. Headings are only helpful if the user sees them.

页面链接有助于解决该问题。它们可以出现在页面顶部,作为页面的内容表。因为链接一起出现,并且通常用户不需要滚动以查看大多数,它们是比标题更有效at showing the contents of a page.

use.gov页面顶部的链接清楚地标识了页面包含的内容。

Label In-Page Links

In-page links need to bedifferentiated from other links在页面上,因此用户了解他们将领导的位置。这可以用视觉指示或标签如On this pageorIn this article

The in-page links at the top of this EPA.gov page are labeledOn This Pageto clarify how the links will function.

使用标签是优选的,用于清晰度和可访问性,仅依赖于放置或视觉治疗。屏幕阅读软件大声朗读向用户读取网页文本,通常在读取锚链路时添加“页面链接”字样,以使用户定向。但是,使用屏幕放大镜的人,缩放了站点的一个部分一次关注一个部分,没有此音频反馈。页面内链接列表可能与导致其他页面的链接列表相同。

使用屏幕读取器或屏幕放大镜时缺乏上下文类似于使用移动设备时的上下文类似。移动屏幕只能向用户展示一个小视口进入内容,因此小屏幕用户可以轻松丢失它们在页面上的上下文以及它们正在查看的类型。

Confirm the Jump

The in-page link’s text should match the page heading to which the link leads, toreassure usersthat they have been moved to the appropriate content on the page. The heading works as a signpost identifying the user’s location.

当用户单击IN-PAIN链接时,应将关联的内容滚动,靠近屏幕顶部,以便用户轻松读取这些部分。但是,通过在屏幕顶部显示前一篇文本或少量的白色空间,帮助用户对用户定位并理解它们仍然在同一网页上。如果所选标题太靠近页面顶部,则用户有时会忽略它。

If your page has sticky elements (e.g., navigation, links for social sharing, advertising) that stay in place at the top of the page, make sure that they do not cover the heading, forcing the user to scroll to locate the content of interest or disorienting the user.

In an article on WebMD, an in-page link toWhat Causes Infection with Norovirusesleads to the view in the top screenshot, where the heading and initial text are obscured by the sticky navigation. The second screenshot shows the page scrolled to see the appropriate content.

Pay attention to the last section of content on the page. If the last piece of content is short and there are few links or elements beneath it on the page, it is possible it will appear in the middle rather than at the top of the page. When possible, try to ensure that the content for that last section is long enough.

Consider Making In-Page Links Sticky

在移动屏幕上,页面内链接应始终显示在内容的顶部。但是,使用较大的屏幕,设计人员可以使用更多选项。

目录可能会显示在主要内容左侧或右侧的列中。这些链接放置在主要内容区域旁边,可能最初不太明显,因为用户专注于站点的中央内容区域。如果这些链接保持在内容旁边的位置,因为用户滚动,它们具有benefit of remaining visible给用户。虽然页面顶部的静态内容表最初可能对用户更加明显,但随着用户滚动该页面,它将快速退出用户视图。

The in-page links on the American Red Cross site follow the user down the page.

The advantage of a sticky set of links depends on implementation. If a page is visually clean, with little competing for the user’s attention, the links are more likely to be noticed and used than if the page is cluttered with many graphical elements such as images and advertisements.

用于内页链接的另一个常见模式显示通常用于导航的区域中的链接。例如,页面内链接可能在页面顶部显示为粘性导航。但是,我们建议进行此展示位置。对页面内链接的最大可用性关注是他们打破了链接将是什么的用户的心理模型。将链接放在一个用于导航的区域中使得这个问题更糟。用户希望导航导致新页面。

In-page links on the World Wildlife Fund page appear as sticky navigation as the user scrolls the page.

粘性的链接:显示用户的位置

If the list of in-page links will stay in place as users scrolls, it should show users’ current location. For example, in the WWF example above, the current section (WWF正在做什么)标记在粘性内导航栏中略浅灰色。

This type of indicator serves to orient users on the page and does, on a page-level scale, whatyou-are-here navigationdoes for the site as a whole.

关于后退按钮?

如果一个内容页内链接让用户在the same page, what should the browser Back button do? Take users to the previous position on the page, or to the previously viewed page? In other words, should Back undo the last action?

This depends on usage:

  • 对于目录,索引或常见问题解答,后退should act as undo and take the user to the previous location on the page. This behavior almost allows users to forget that there are two types of links (in-page and cross-page links) and to treat all of them in the same way.
  • For Back to Top links,后退should take users to the previous page in the browser history.后退to Top与链接更类似于命令。按下后,用户可能希望返回上一页,而不是当前页面的中间或结尾。

手风琴与页面链接?

手风琴还可用于实现内容,常见问题解答或索引的表。它们提供了页面的概述,并为用户提供直接控制哪些内容查看桌面and移动。这种设计模式允许用户展开或折叠内容部分。关闭内容部分时,它们充当页面的内容表。

在决定内部链接或手风琴时,请考虑how the page will be used。如果人们可能依次阅读所有内容(就像他们将与杂志文章或书籍章节一样),则反复开放手风琴将导致高互动成本。

使用内部链接,如果滚动,用户可以看到页面的完整内容,以及页面内链接充当enhancement: the user does not have to use them. On the other hand, accordions require user input to reveal content. This means the content behind an accordion is less discoverable and more likely to be ignored— out of sight is out of mind.

相比之下,基于手风琴的内容表具有比使用内页面链接实现的一些内容表更可见的优势。如果在页面顶部仅出现在页面,则用户必须返回页面顶部以导航到另一个部分。(尽管如此,这不是粘性内容的表格表。)通过手风琴设计,当用户滚动到暴露的内容的顶部或底部时,立即可见与其他内容区域的链接。

So, Good or Bad?

如果内部链接实现良好,并且如果在单个页面上具有冗长的内容是必要和有用的,则此类链接可以帮助用户直接导航到感兴趣的内容并提高用户体验。实施的细节对于衡量与用户体验的内部链接的利益至关重要。如果有疑问,请使用可用性测试来评估页面链接的有用或必要的。度量标准和A / B测试还可以帮助验证它们是否增加了页面内容的可用性。