The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

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.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: