5

There are various existing conventions to give users clues about what will happen on clicking or touching a link when it is not a standard link to another page, for example:

  • Single chevrons pointing right or down for "accordion" links that open out a hidden section
  • File icons for downloadable files
  • "Play" icons for embedded media
  • Various icons which indicate that a link goes to an external site when this wouldn't be expected (usually some form of a box with an arrow coming out of it)

Is there any such established convention for indicating that a link points to a section (anchor) on the current page? (aka jump links, section links, scroll links).

I'm sure I've seen downward or upward pointing double chevrons used in this way, but I can't find any reference for this or any information on whether it or any alternative is widespread or performs well in testing.


This is for links outside of "On this page" nav blocks where copywriting or structural cues aren't an option (e.g. where you can't simply put jump links inside an "On this page" navigation block or prepend them with "Scroll to ").

Example cases could be, if a jump link needed to be within a paragraph (e.g. on a one-page site or in a long multi-section in-depth article), or in a table where other links in that column go to pages, etc etc.

For example, imagine a long academic article in sections where sentences include jump links like "...unlike the methodology for experiment 2, this has..." or "...as can be seen in figure 3.5, the...".

  • possible duplicate of How to style jump links to a named anchor in the same page? – msp Aug 26 '14 at 15:24
  • 2
    @msparer I saw that question, but it's talking about jump links within navigation blocks, and the answer only applies to navigation blocks. I'm asking about cases other than navigation blocks. – user568458 Aug 26 '14 at 15:25
  • I did not come across such the implementation of such a convention so far. But as an (experienced) user I identify such links by the URL that is revealed in the statusbar. If they contain <current url>#<anchor name>, they will probably jump on-page. Further, I as user, do not expect an on-page link (anchor) to tell me where it's pointing to (compared to download links, toggle links or control links where I'd expect a tooltip or label next to it). – try-catch-finally Dec 24 '14 at 19:31
1

I have seen "back to top" links being associated with an arrow to one side. Most people will associate the up arrow with the name.

e.g. enter image description here

There's also the notes and reference links coming from print for more formal or academic documents with * or dagger symbol to indicate a section note, foot notes where there's the implicit association that it'll take you to another part of the same page.

But I don't think I've ever seen any special symbol or styling to suggest whether it's a "same page" link or it'll take you to a different page for items where you've moving further down a page.

I'm taking a guess here, from my personal experience I think we as users have gotten use to the fact that information online might not necessarily be linear. We expect items to be crosslinked that knowing we'll be directed to the information we want is far more important to us as to where precisely the information is found in. Whether it's on the same page or not isn't important so long as the links are persistent such that we can get to what we need. Perhaps this is why we haven't establish conventions on this front.

1

Links that scroll to a different part of the page violate the mental model we have become accustom to.

The problem is clearly defined here -- http://www.nngroup.com/articles/avoid-within-page-links/

The solution is usually not to do it at all because of how conditioned we are to expect links to go somewhere else and work with the back / forward buttons of the browser.

Here are a few exceptions to the rule:

  1. Alphabetized lists
  2. Frequently Asked Questions (FAQs)
  3. Table of Contents

In any case it is a good idea to let the user know "Clicking links will scroll to a different part of this page" to set expectations up front.

One approach for scrolling links in a research paper could be to make them all numbers...

enter image description here

and then repeat the full list of links again at the bottom of the document as numbered footnotes...

enter image description here

The NY Times keeps anchor links in a list pinned to the left so the user doesn't lose context as the rest of the page scrolls...

enter image description here

0

The closest thing I can readily think of is how Wiki sites handle this. "Plain" text links are almost always going to take you to another page on that site; "contents" links in a table (?) are usually for jumping around the page you're on; and the sites with the external link icon at the end of the link... well, they are external links.

Links for stuff on the page are usually displayed like this...

Links to stuff on the page...

External links have this icon... External Links have this icon...

  • To actually answer your question, though, I prefer on-page links to just be a different color. Standard blue links will take me away from here, green (or whatever you choose) links will take me to the relevant place on this page. I can easily wrap my head around that in seconds, so long as the convention is consistent across your site/product. – CTgreen Aug 26 '14 at 16:51
  • 5
    Upon rereading the original question, I realize my answer is dumb. You specifically mentioned how the things I said weren't relevant or helpful to you... so then I said them anyway. :p Apologies. This is the sort of thing where I think you are best off making your own convention, and being consistent with it. – CTgreen Aug 26 '14 at 16:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.