Anchors are links on websites that when clicked will take the user to another part of a screen. We know that buttons and link indicators take users to other pages or makes certain actions happen. But what would be the most suitable visual indicator to tell the user that this is an anchor?

  • 1
    The noun project search for anchor, link, connection, shortcut and bookmark should give you enough ideas. – joojaa Sep 25 '17 at 10:19
  • 1
    I would not assume users will know what 'anchor' means anyway, so I'd avoid any imagery that evokes a literal anchor. You said it takes you to another area of the screen, I would use something that represents where you're going as my visual indicator (like a little directional arrow) – Vicki Sep 25 '17 at 22:50

A couple of ideas (first 3) and use the fourth for external links.

enter image description here

  • I'm not sure any of them work particularly well. Remember; users arent coders (mostly) so don't expect them to understand that its called an Anchor. – Digital Lightcraft Sep 25 '17 at 10:16
  • I know what you mean, but, many apps today are using a number of cryptic icons. Its not always easy to represent an idea into an icon to regular users. But somehow people get used to these once they try them right? And many times app developers and ux designers will turn to these more techny icons lacking any other options or to avoid more complicated solutions. Or they will add captions or overlays next to the icons to make it super clear. I would actually use the chain icon (second) one as it seems quite close for the purpose. – Lucian Sep 25 '17 at 10:19
  • I have to agree with Digital Lightcraft on this one, Lucian. I think most of those icons have pretty well defined meanings to the average user (hashtag, link, "anchor", external link / new window). Trying to redefine a common icon's meaning is not great for usability. I think the anchor is the only one I don't see used regularly, but even still that would require the user to understand (or even worse...LEARN) what you mean by "anchor". – Vicki Sep 25 '17 at 22:54
  • Feel free to contribute guys as these were just suggestions. They could or they could not work for the purpose. By the way the HTML anchor for links on the same page has been around loooong before hashtags even existed - rapidtables.com/web/html/link/html-anchor-link.htm – Lucian Sep 26 '17 at 6:44

Consider using a smooth scrolling animation for anchor links, rather than a graphical element as an indicator that the link is connected to something on the same page.

Smooth scrolling maintains the understanding the user is staying on the page (See this Smashing Magazine article on smart transitions).

While an arrow pointing to the upper right in a box has become standard for "new window" or "new site", a downward pointing arrow has become standard for "download", so a visual icon/element similar to that may create confusion. Additionally, any anchor or chain link type iconography might not be distinct enough for your users to understand their meaning.

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.