In-page links (also referred to as anchor links or jump links) are links that lead users to content on the 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.
Why In-Page Links Are Confusing
As we have discussed in the past, the largest usability-related concern about in-page links is that they do not meet users’ mental model for a link. Normally, links lead to another page. When that expectation is not met, users can get disoriented.
Why In-Page Links Are Helpful
This usability concern may be balanced by the usability-related benefits of in-page links. In-page links are often used to help users navigate through page content. Links that lead to information further down the page can:
- Act as a table of contents, helping users form a mental model of the page
- Provide direct access to content of interest
- 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:
- Tables of Content: In-page links can be used as a table of contents for longer pieces of content, giving users direct access to the content of interest.
- Back to Top: Back-to-top links lead the user to the top of the page from another part of the page. While these links duplicate the functionality of the scroll bar, they can be useful on long pages where a single click will save time over multiple scrolls. Such links tend not to harm users who do not use them (except if they cover content, though even then they do not cause huge problems), and aid users who do.
- Indexes and FAQs: Alphabetical or numeric indexes or lists of frequently asked questions 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.
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 more diverse devices, each with its own screen size, the benefit 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.
How to Use In-Page Links Responsibly
So, if we know that in-page links can be confusing, but we also know that they can help users find information, particularly on longer, scrolling, mobile pages, how do we weigh the relative benefits and downsides to using them? What details do we need to keep in mind when implementing them to make sure that their benefits outweigh their weaknesses?
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 don’t read carefully online. 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.
Also consider how much information is to be displayed on a single page. Presenting a large amount of information on a single page minimizes the user’s effort, or 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 brief sections does not require as much scrolling effort. In this case, adding in-page links may be unnecessary and even detrimental, as these links themselves, when presented at the top of the page, add to the length of the page and push content down.
Use Clear Links and Headings
Long content benefits from being structured in multiple sections with clear titles, which act as signposts for the content discussed in each area of the page. Think of headings as the skeleton (or mini-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.
But, users may or may not scroll, particularly if a page has many sections of content. Users 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.
In-page links help address that issue. They can appear at the top of page, acting as a table of contents to the page. Because the links appear together and often the user does not need to scroll to see most of them, they are more effective than headings at showing the contents of a page.
Label In-Page Links
In-page links need to be differentiated from other links on the page so users understand where they will lead. This can be done with a visual indication or a label such as On this page or In this article.
Using a label is preferable, both for clarity and accessibility, to relying solely on placement or a visual treatment. Screen-reading software, which reads webpage text aloud to users, often adds the word “in-page link” when reading an anchor link, to keep users oriented. But people using a screen magnifier, which zooms the site to focus on one section at a time, do not have this audio feedback. A list of in-page links may appear identical to a list of links that lead to other pages.
The lack of context when using a screen reader or a screen magnifier is similar to the lack of context when using a mobile device. A mobile screen can only show users a small viewport into content, so small-screen users can easily lose the context of where they are on a page and what type of links they are viewing.
Confirm the Jump
The in-page link’s text should match the page heading to which the link leads, to reassure users that they have been moved to the appropriate content on the page. The heading works as a signpost identifying the user’s location.
When users click an in-page link, the associated content should be scrolled close to the top of the screen, to make it easy for users to read as much as possible of the section. However, help users orient themselves and understand that they are still on the same web page, by showing a little bit of the preceding text or a small amount of white space at the very top of the screen. If the selected heading is too close to the top of the page, users sometimes overlook it.
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.
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
On mobile screens, in-page links should always appear at the top of content. But with larger screens, more options are available to designers.
A table of contents may appear in a column to the left or to the right of the main content. These links, placed beside the main content area, may initially be less noticeable because users are focused on the central content area of the site. If these links stay in place next to the content as the user scrolls, they have the benefit of remaining visible to the user. While a static table of contents at the top of the page may initially be more noticeable to a user, it will quickly be out of the user’s view as the user scrolls 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.
Another common pattern for in-page links displays the links in an area normally used for navigation. For instance, in-page links may appear as sticky navigation at the top of a page. However, we recommend against this placement. The biggest usability concern about in-page links is that they break the user’s mental model of what a link will do. Putting links in an area commonly used for navigation makes this problem worse. Users expect navigation to lead to new pages.
Sticky Links: Show the User's Location
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 (What WWF Is Doing) is marked by a slightly lighter gray in the sticky in-page navigation bar.
This type of indicator serves to orient users on the page and does, on a page-level scale, what you-are-here navigation does for the site as a whole.
What About the Back Button?
If an in-page link leads users to content within 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:
- For a table of contents, an index or an FAQ, Back 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, Back should take users to the previous page in the browser history. Back to Top is more similar to a command than to a link. After pressing it, users are likely to want to return to the previous page, not to the middle or end of the current page.
Accordions vs. In-Page Links?
Accordions can also be used to implement tables of content, FAQs or indexes. They provide an overview of the page and give users direct control over which content to view both on desktop and mobile. This design pattern allows users to expand or collapse sections of content. When content sections are closed, they act as a table of contents for the page.
When deciding on in-page links or accordions, consider how the page will be used. If people are likely to read all the content sequentially (like they would do with a magazine article or a book chapter), repeatedly opening accordions will lead to a high interaction cost.
With in-page links, users are able to see the full content of the page if they scroll, and the in-page links act as an 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.
By contrast, an accordion-based table of contents has the advantage of being more visible to users than some tables of content implemented with in-page links. If in-page links only appear at the top of a page, users must return to the top of the page to navigate to another section. (This is not the case with sticky in-page tables of content, though.) With an accordion design, when the user scrolls to the top or bottom of an exposed piece of content, links to other content areas are immediately visible.
So, Good or Bad?
If in-page links are well-implemented, and if it is necessary and useful to have lengthy content on a single page, such links can help users navigate directly to content of interest and improve the user experience. The details of implementation are essential in gauging the benefit of in-page links to the user’s experience. If in doubt, use usability testing to assess how helpful or necessary in-page links are. Metrics and A/B testing can also help validate whether they increase the usability of page content.
