5

When using an icon to represent a link I believe the standard convention is [icon] [Link].

A colleague has raised the point that for links that open in a new window, the icon should appear after the link ([link] [icon]). Wikipedia's reference section was given as an example. I realise there are usability, and accessibility implications; the aim is to reserve it for PDF and other non-web documents. One factor to consider if whether the link is being listed with other links, and they do not open in a new window. The icon space should be reserved to maintain a straight left edge for readability.

My thoughts are that the icon should always come before the link. It ensures the expectation is set (assuming the icon is sufficiently communicates its purpose), which fits with Nielsen's finding of "users often read only the link text's first few words"; putting it at the end of the link reduces the probability the user will see it.

I cannot seem to find any research about this. What does everyone else think the standard should be? Are there any exceptions?

Improve this question

2 Answers 2

Reset to default
2

The quote from the article you linked also continues:

In fact, users often read only the link text's first few words, so it's important to start with a word (typically a verb) that indicates the action that results if they click the link.

While users might only scan the first words of a link, that does not mean they would disregard or not notice icons identifiying the link type at the end of a link. Putting an icon at the beginning of the link disrupts the readability of the link quite massively.

You noted quite rightly: The user has to understand what is the expected outcome of clicking a link. - But only if they click the link, which is when they are likely to read the whole link before clicking it, as compared to just scanning a page, when they more likely to pay notice only to link beginnings.

That means the user would read text with icons at the beginning of the link in a way that users has to be bothered with the implications of how to "consume" the link before they even know what is linked (as they would first read and process the icon, and only then the actual link text).

In my view, the convention of putting type identiers after the actual link text is quite justified. It mimics the reading direction and the icon on the right of the text underlines that this icon refers to the forward action that follows clicking the link.

Improve this answer
2
  • Thanks for your comments. With regards to disrupting the reading of the link, this would only be true when it is in the middle of a passage of text? A list of links might be different (assuming space is reserved for those icons)?
    – user11634
    Dec 13, 2012 at 13:55
  • I think a list of links with icons on the left might be more readable, as the user perceives the icons as category markers or list-dashes or sorts. However, the problem of processing the information of what follows before actually understanding what is linked remains.
    – kontur
    Dec 13, 2012 at 13:58
2

We've dealt with the issue of "How do I know what will happen when I click this link?" by adding icons for when a link opens in a new window (panel or window, e.g. the user won't lose the page they're on), or when the link opens a menu. All other links are navigational links that take the user away from a page.

As kontur points out, this information (how the link reacts to a lick) is fairly secondary to the goal of the link: to engage the user in an action they may want to take. As such, we currently put our icons at the end of the link.

Hover, we're currently considering only having these icons show up onHover (it's a web app). The benefit here is that it declutters the page from many noisy icons which really only matter when the user is ready to engage. In this example, the "Learn more" link also wouuld have a "pop-up" class.

enter image description here

Improve this answer
2
  • A little bit off topic, but Nielsen recommends using the title attribute for such situations: - name of the site the link will lead to (if different from the current site) - name of the subsite the link will lead to (if staying within the current site but moving to a different part of the site) - details about the kind of information found on the destination page - warnings about possible problems at the other end of the link (subscription required) useit.com/alertbox/980111.html
    – user11634
    Dec 14, 2012 at 13:25
  • That makes a lot of sense, particular if you're talking about a site which links off to many different resources. In the case above it's a self-contained application. Nonetheless, we used to put "(opens in a new window)" as our title text but found that it was difficult to get engineers to remember to add it and users didn't always see it since title text takes ~1 second to show up. We did being using a tooltip add-on, but got feedback that an icon was sufficient. Nonetheless, all good tradeoffs to think about for your own situation and users.
    – Renee Grebe
    Dec 17, 2012 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.