Should Arrows be Placed Before Link Text or After?
Sometimes we’d like to use an arrow character or icon together with the link text to make it look nicer and attract users’ attention. These are little arrows we see often by links such as “Read more…” at the end of blog post summaries or “Learn more” for products and services. The two variations look something like this:
Now, the question is, should these arrows go before the link text, or after? Let’s examine each one:
Arrow before link text
When the arrow is placed before the link text, it’s pointing to the link — it’s saying “hey, click this link”. It is advertising the link by drawing our attention to it as the arrow essentially focuses our eyes on the link. I think this is a pretty good idea because of the focus it gives, so using it on important links could be useful. These arrows can also be used to show current page in the navigation menu.
Arrow after link text
When the arrow is placed after the link text, it’s pointing away — it’s pointing somewhere else. This is saying “hey, click this to go there”. This is similar to a street sign pointing the direction to the nearest city. The thing I don’t like very much about it is that the arrow points to nowhere — it points to an empty space, away from the link. Unlike an arrow placed before the link which will focus our eyes on the link, the arrow placed after the link moves our focus away from it.
What should you use?
I think the best thing to do would be to look at the context. If the link is something to do with going to a full article page, or the next page of some content, then the arrow should probably go after the link. This is like a sign pointing the direction of the content — if you click the link you will go there.
Sometimes you have a list of links, so you can use the arrow before the link in the same manner you’d use a bullet point. You can also use the arrow before the link to indicate the current page the user is at in the navigation menu.
I’ve been using the arrow before the continue to article link here at Usability Post, but now I’m not so certain that this is the right way to go. I haven’t seen any research on this so I’ll be very interested to hear your thoughts and discuss it further — please do post your ideas in the comments below.
28 Oct, 2008
I think the best way is to have to arrow after the text. Here’s why:
I believe that user interface (in general, but mostly on the web) should reflect reality. For example, buttons have different states for different actions: hover, click. Imagine a button in real life. When you push it, it’s pressed down, it’s not the same as before; and when you release it, it will either stay pressed down or return to the previous state. Well it’s pretty much the same on the web.
Another example is links. Links usually have two to four different states: normal, hovered, clicked and visited. It’s like that because it looks normal, because in real life you get that sort of feedback (well, maybe not visited, but you get the idea).
So, to answer your question, I think that arrows should be placed after the text. Why? Look at the bottom of the main page of any blog. There are the Previous/Next articles links. In real life, this would be just like a book: turn the page to see more. The focus is not on the link, it’s on the action. It’s this way or that way, not click here to do this or to do that.
I also think that arrows shouldn’t be used for things other than a sort of “motion.” Turning a page requires movement, so an arrow is justified. But the “Play video” link in the screenshot above shouldn’t have an arrow simply because there is no motion involved.
28 Oct, 2008
I think arrows shouldn’t be used as a visual cue(aka bullet) for every link, as Perceval suggested. It has to make sense within the context.
@Perceval, speaking of arrows for prev/next links, I respectfully disagree. This is a case where the contextual meanings of the text suggest directional, therefore arrows should be used before and after.
for example:
Previous « | Next »
The above doesn’t look aesthetically pleasing or logical.
I use the following convention on my site
« Previous | Next »
Just my $0.02 and soon to be $0.01
28 Oct, 2008
I think it is irrelevant. Good usability is going to tell you that a link should be indicated with an underline and some sort of color separating it from the content around it.
Also, odds are you are going to create that arrow as a background element or a replacement to a bullet, in which case the arrow “disappears” when browsing without CSS.
So that places the arrow firmly in the category of decoration, at which point the placement should be whatever makes sense with the rest of the aesthetics of the site design.
One notable exception is in the case of Back/Next links. And if you notice, these arrows point in the “direction” that you are “going” in a site. In fact, they mirror the back/forward arrows of a browser, primarily because they are mimicking that behavior to a certain extent.
28 Oct, 2008
I agree with Sean. In my experience arrows are consistently poor at indicating hyperlinks. They are just decoration.
28 Oct, 2008
I’d be inclined to go with the arrow after the link, too. Mostly because before the link tends to be interpreted quite often as a bullet point, but definately context can play a part in that. You might ask Luke Wroblewski informally, I’d be surprised he didn’t have research on this one. I’m wondering if placement on the page is another factor, too (left or right or inside an article such as play video - which probably shouldn’t have an arrow as it affords something a little different).
But it seems something very close to the sort of thing Luke hits on. It may be worth an informal email or a search over on his site.
28 Oct, 2008
I think Jin points out the context part very well with his previous and next example. Generalised, I’d say after the link. Context appropriate situations before the link. Weigh up the need for the icon / arrow in that mix - is it just decoration or does it truely afford a page turn? If it’s just decoration - is it contributing to the design and affordances of the page or is it just noise? If it’s noise then remove it.
I’d also use arrows with some restraint. The pointing at nothing statement is kind of interesting because although we know there’s a virtual something out there (to the right?) does this mean everyone would understand that paradigm? Maybe not. To some degree it may be a convention we’re dealing with that affects interpretation of the arrow - how does culture affect it? Colour? Arrow design?
But in generalisation, after the link… apologies for thinking out aloud.
28 Oct, 2008
[...] is asking what you think works better and why - arrows before a link or after a link? My take is context but I’d like to see any studies done on this one. While we’re [...]
28 Oct, 2008
The arrow always must be put in the direction where its pointing at.
So the correct way of doing it is by text → and not the other way around.
This is visually the best way to increase readability and the arrows strenghten the text and make it more clickable.
28 Oct, 2008
I would definately always put it in front of the link. After feels too uncomfortable to me.
29 Oct, 2008
Definatly depends on context, if its in a list then put it in front of the link if it is in the page or as a graphic put it after the text
agreed with @Sander
29 Oct, 2008
Anyone willing to conduct a usability test?
The question is valid, the opinions offered up, are only that: opinions.
There is only one way to get to the bottom of this: a good usability study.
29 Oct, 2008
Great post, about two days ago I was thinking about this while working on my blog.
I place the arrow after the link if it’s pointing right and if the link goes to another page of my site and place it before the link if the arrow is pointing left and the link goes to the ‘past’ or to another site. I’m with Sander.
29 Oct, 2008
I do not think the arrow is a very valuable addition to the link. If it must be there, I would first make sure nothing is unclear without the thing there and then put it after the link (depending on text direction, so probably on the right).
The ‘play button’ arrow to me is also used for fold-out; then clicking on it would rotate it 90 degrees clockwise and display more info. It may even have a different action than the link next to it; fold-out for more info about the link, click to use the link. So that one is a definite ‘no’ to me, at least as an arrow.
29 Oct, 2008
Strangepants: Actually, you’re right :) Talking about it isn’t as valuable as actually testing it out — though I think it’s still interesting to read people’s opinions and reasoning.
Maybe it doesn’t really matter all that much, but I feel the arrow acts as a focus for the link. We can have blue underlined links in the body of the content of the article summary, and then if you have the same style continue link at the end it will just look very similar. If you add an arrow, it will differentiate that link a little from the rest, letting people know instantly that this is the continue to article link because they’ll notice the little arrow icon. They won’t even need to read the text to know what it is.
29 Oct, 2008
It depends! for example left arrow before link means PAST and right arrow after link means FUTURE (like occidental way of reading), but it also depends by the layout of the site…
Too many variables: each project need it’s own design!
[sorry for my poor english ;) ]
29 Oct, 2008
There is one angle which isn’t discussed in the post - when should an arrow be used for a link at all? In what cases are these arrows useful?
Most links don’t require using an arrow, such as links within a body of text, in a top navigation bar, in a site map, etc. In such cases arrows just add clutter to the screen and aren’t necessary at all.
If you want to grab attention to a link there are many other ways to do it rather than an arrow - make it bold, in bigger font, use an image, place it on a line by itself, indent it, and whatnot. Not sure if using arrows is necessarily the best way.
The cases where these arrows are useful are for an ongoing piece, for example the continuation of an article, the next step in the registration process, etc. In these cases I believe that having the arrow after the link makes more sense.
As you said, this (instinctively) reminds you of a street sign. True, these arrows do point to a blank space right next to them as street signs with an arrow point to ‘empty’ space right next to them. However, you do realize without even thinking that eventually the arrow in the street sign does point to where you need to go.
I think the same analogy applies for the virtual arrow, except that the distance is not physical. Maybe it is measured by mouse clicks rather than miles.
As people said more or less, it would be interesting to do an a/b test on this. Show half the people the arrow before the link, half the people the arrow after the link, of course in various contexts and see who wins.
29 Oct, 2008
[...] Usability Post: Should Arrows be Placed Before Link Text or After? [...]
29 Oct, 2008
Strangepants I’ve seen this dozens of times in usability tests. So it’s my opinion backed up by observation.
Basically every site on the net has deeper worries than the position of a link arrow.
29 Oct, 2008
[...] Оригинал: Should Arrows be Placed Before Link Text or After? [...]
29 Oct, 2008
Nice comparisons. Another thoughtful look at the details that pull a well-designed website together.
I personally like the arrow AFTER the link (generally speaking), because it gives you a sense of exploration into the unknown (OK, that’s a little dramatic). IMO, That’s more along the lines of what using the web is all about.
29 Oct, 2008
[...] блоге Usability Post, появилась небольшая заметка по теме и интересное [...]
29 Oct, 2008
I am 100% shure that main thing to think about is how to avoid using arrows in general. Just because it’s not only annoying to see a lot of unwanted graphical stuff in text, but also disturbing, i.e. - when you use anything as a bullet in the big list of links. Doesn’t next line already indicate something?
30 Oct, 2008
Here’s another argument for putting the icon in front of the link. For accessibility reasons ist good to “warn” the (screen)reader about outgoing links. You can use the alt text of the link icon (if you use images instead of background images) to identify outgoing links, emaillinks, downloads,…
So it must be set in front of the link.
30 Oct, 2008
Great point Kai
30 Oct, 2008
Kai that’s not actually the case. Like everyone else, screen reader users like their links front loaded. You also don’t need to tell them they are going to another website in this way.
If however you were to use the image to warn of a new window opening (when it’s actually necessary to do so) you would still put the image at the back.
You just place the image within the tags and the alt text will be read out with the link.
30 Oct, 2008
Ah I seem to have messed that up by using an anchor tag. Let me try again.
Kai that’s not actually the case. Like everyone else, screen reader users like their links front loaded. You also don’t need to tell them they are going to another website in this way.
If however you were to use the image to warn of a new window opening (when it’s actually necessary to do so) you would still put the image at the back.
You just place the image within the anchor tags and the alt text will be read out with the link.
30 Oct, 2008
I would say the image should be placed after the bullet, and the reason for that would be as follows:
Placing the image before the link is similar to the visual formatting of bulleted text, where the image is always placed before the text. Placing the image after the link is however, fine, since it doesn’t interfere with the visual formatting of any conventionally styled element in typography.
Now one might say that it doesn’t matter to the user, but it does. Especially, if one is aiming at upping consistency across the website/ application and decreasing cognitive load (which one should aim at), where the user knows that bullets will be used where they should be used and not either for bulleted text or links as well.
30 Oct, 2008
I’d suggest testing it on various arrows with the arrows before and after text to see which version gets the highest conversion rate (which would be page loads on the target page divided by impressions on the landing page).
In this way, you are providing what your users want, and not what our own biases prefer.
It’d be very simple to do a multi-variant test with Google Website Optimizer to gather the data and statistics to prove which is the best option for your audience.
31 Oct, 2008
[...] ссылками (русский перевод от Антона Вакуненко) Should Arrows be Placed Before Link Text or After? (оригинальный текст [...]
31 Oct, 2008
Lot’s of opinions — I’ll add mine.
If you want to emphasize the word, then place the right-pointing-arrow to the left of the word. If you want the user to continue to another page, then place the right-pointing-arrow to the right of the word. Of course, the opposite is true if the arrow is pointing to the left.
And yes, it does make a difference — at least with English speaking people. Other languages may have other preconceptions.
Cheers,
tedd
31 Oct, 2008
[...] Design & Product Experience… http://www.usabilitypost.com/2.....-or-after/ Discussing the dilemma of "Should arrows be placed before link text or [...]
31 Oct, 2008
Dmitry, I love the conversation that you spawned on this topic. I am recommending my readers take a look at this for their Weekend Reading…
http://tpgblog.com/2008/10/31/.....r-31-2008/
Jeremy Horn
The Product Guy
http://tpgblog.com
31 Oct, 2008
Thanks Jeremy :)
1 Nov, 2008
Hi Tedd, thanks for you opinion.
You said “And yes, it does make a difference”
Can you explain a little further?
1 Nov, 2008
It seems better before the link… to the mind it instructs like an arrow… like a finger pointing to where we are heading… while arrow after link is suitable for links like “next” or “exit” etc.
1 Nov, 2008
I doesn’t matter the “point” of the arrow should just be pointing towards the content and not off into space. So in your examples the arrows before would be best.
7 Nov, 2008
I agree that the arrows should go after the text. If you are going to be pointing out to another page, viewers of your website are going to be scanning the page from left to right. If they see the arrows after the text, they will be more likely to click on the link. Otherwise they may be confused or simply think you have nice little bullets for your text. Just my $0.02.
30 Nov, 2008
I don’t think arrows are an important contextual element when relating to links (other than the previous/next example) and are, as others have said, purely decorative. More important is information about the link, for example is it external to the current site and/or will it open in a new window. Is it a link to a PDF, movie, or RSS feed?
I would rather have a small icon that conveys useful information beside the link as opposed to one which is not.