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?
-
1The noun project search for anchor, link, connection, shortcut and bookmark should give you enough ideas.– joojaaSep 25, 2017 at 10:19
-
1I 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)– VickiSep 25, 2017 at 22:50
2 Answers
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.
-
1I'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. Sep 25, 2017 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.– LucianSep 25, 2017 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".– VickiSep 25, 2017 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– LucianSep 26, 2017 at 6:44