The use of external link icons and other hyperlink cues

I currently use external link icons on my blog, by way of an external links plugin for WordPress. It wasn’t until I started including a lot of links to other websites in my Fashion Friday posts for the stores I bought my clothing from that I realised the link icons were getting a bit too much.

Visually, that is.

I initially installed the plugin after seeing the use of the link on Wikipedia and understanding its use as an indicator for a link external to the website. I also saw someone use it on their fansite and thought it was a smart idea. This was somewhere near five years ago, I’m sure.

After browsing the internet I found a plethora of articles related to styling your own external links with CSS (apparently, using JavaScript had been the more ancient option), but none about the whys or reasoning behind why these icons might be necessary.

The icons, commonly known as ‘hyperlink cues’ because of the purpose they serve, are also used to indicate file types like PDFs and Word documents.

Over time I have noticed that people use these icons less and less. It doesn’t seem to have anything to do with a lack of links to other websites, so why use them? Or why avoid them?

Why use hyperlink cues?

  • To give the user a clear indicator for a link to an external website, document or file.
  • To notify the user that they are downloading a file and not visiting a webpage.
  • To notify the user that they will be leaving your site and clicking out to an external website.
  • Although this is broad and is a point that can be argued, it can help increase the user’s trust in your website.

Why not use hyperlink cues?

  • Most people don’t understand the icon when they first see it, especially an external link icon.
  • It may not be a huge deal, but it is a few extra lines of CSS and potentially another image to load.
  • Visually, a lot of links with hyperlink cues are difficult to read because the icons or cues could be distracting.
  • Links’ anchor text should specify that the user will be reading ‘a review on Yelp’ or ‘Mary’s Facebook post’ and provide enough information to where the link will take them.

Other methods

The following paragraphs cover external link cues specifically.

A lot of websites now use a separate page to notify the user that they are leaving Facebook, Twitter, or some news website, and are visiting a website not hosted on their server. Some of these companies use advertisements and excessive loading banners on these pages, which isn’t exactly the most user-friendly option.

Some websites make use of the title attribute in the anchor element to add the anchor text followed by the text ‘(external link)’. Simple, accessible external links suggests adding this ‘(external link)’ text in a span element in the anchor element.

It was previously suggested that making links open in a new window could 1) break the user’s trust or 2) confuse users who were only familiar with their browser’s back button and not tabs or windows. It seems that external links are often opened in a new window so that the user does not leave the original website, but this could evolve into another discussion and does not necessarily differentiate external links from internal ones, especially without the use of an indicator.

Conclusion

From my research it isn’t clear whether cues are recommended for external links, but I would suggest them for various file types, where it is also useful to specify the file size (eg. 2KB, 5.5MB, 6.8GB). It’s nice to know when you are downloading a file and not just visiting another webpage.

What do you think facilitates the need for external link icons specifically? Is there something I have missed or an article that you would like to point out? I have considered removing these icons from my blog because I believe that effective link anchor text can get the right message across, and obviously because they can be visually distracting.

I would be keen to hear other thoughts on the topic.

Comments on this post

At first, I was confused at what the icons/cues were until I looked at the little icon next to your hyperlink (the morning feels). I think this is a great way to give a hint to the reader that the hyperlink leads to an external site (and opens a new tab). Usually, when I hover my site, I just look at the bottom bar with the “hint” of what the hyperlink leads to. Except it shows on Chrome/Firefox. On Safari, it doesn’t either because I haven’t configured it or it’s not an option. However, I think it’s good for everyone else who doesn’t want to bother hovering the hyperlink ;P.

At this point, I would think people should be used to using tabs by now. But maybe that’s just me. I think cues are great, but if there are 25+++ (some big number) in one post, I can see it being distracting. But a couple here and there doesn’t hurt.

I actually look at that bottom bar too, but for some reason I disabled it on Safari because it was taking up too much room. :P You should be able to turn it on. :)

Most people think that people are used to tabs, but you’d be surprised – it is more for people who are not necessarily in our generation but might actually not be familiar with how a browser works. I think that is why research has been conducted around opening links in the same window/tab versus a new window/tab. Just an interesting thought…

Tabs really confuse my grandmother. When I’m helping her with something on her computer, she gets upset and tells me I’m doing the wrong thing and need to close a tab that isn’t even the focus at that time. I try to explain it’s fine and not what page we’re on, but she wants me to “go back” and even got upset when the browser button didn’t work once…because it was a new tab, and she didn’t understand.

I guess I have just been so used to connecting with people from/in my generation that I expect(ed) people to know about tabs and be used to them now, know how they work, and actively use them… maybe me having all external links open in new tabs isn’t the best practice anymore.

It probably isn’t – which is why the old warning ‘external links will open in a new window/tab’ was sometimes used. It’s a shame your grandmother got so frustrated, but it’s a prime example why links opening in a new tab is like hijacking the user’s browser. I think it is still difficult for users of older generations to grasp the notion of ‘tabs’. People like you and I know perfectly well how to multitask and I think that they are perhaps focused on one thing at a time, so even links opening in new windows is confusing to them.

I remember when I first saw external link icons (probably on your blog actually) and I wondered what they were for. They’re not something I use on my site but I can certainly see the reason behind using them, especially if they are linking to downloads or affiliate links. Like Nancy, I just hover over a link before clicking to see where it will take me.

Haha well I guess I had that initial thought of ‘what are those?’ I feel like they may be a little redundant now as no one really needs to be ‘told’ that a link is going elsewhere. Most of us do indeed look at the location of a link and we also have the freedom and ability to Ctrl/Cmd + click and open in a new tab automatically, or secondary click + copy to copy the link URL. I might disable mine since they don’t serve as much of a cue anymore.

Personally I don’t use them but I can see how some users would get value from them. I think the design of the icon is really important, making sure the icon is super clear to its function and also compliments the general aesthetic of the website. If I were to use them I’d use SVG for the icon as part of an icon system—if the website warranted it. Something like this: https://css-tricks.com/svg-symbol-good-choice-icons/.

I’ve always avoided opening external links in a new window via `target=”_blank”`—well tabs nowadays—as I feel we shouldn’t hijack the users browser like that i.e. it’s up to the user if they want new tabs open not us. However they’re some exceptions like a link to T&C’s when completing a form—in this scenario the link should launch a new tab or if the user is in a particular workflow like a multi-step registration. I’ve found though throughout my career some UX’ers don’t buy into it being an issue.

Also I always add `rel=”external”` to my external link `a` elements, see: http://microformats.org/wiki/rel-external, not sure how much value it adds nowadays but I’m a massive nerd when it comes to semantics :).

I definitely need to update myself on SVGs and their best practices. It’s an area I am not very knowledgeable in. ;)

I agree RE avoiding opening links in new tabs/windows – when I first heard about it, it made a lot of sense to me from a UX perspective. Most users seem to be familiar with (and even prefer) opening links in new tabs themselves so that they can continue reading or browsing the page they are on.

I’ll probably add that to my links at some point – I geek out when it comes to semantics too. :D

I missed this entry. :s I am really enjoying your posts on web development, as I find them interesting, and should probably find a way to subscribe to this category. :p

I like the way external link icons look, but I’ve considered deleting my plugin and coding them in manually where necessary, if only because I think they look nice? But I do think they can add redundancy. However, the plugin allows me to have external links open in new windows or tabs without my having to do anything extra, and without the user/reader having to select for it to open in a new window/tab. I think it’s really just a personal preference between bloggers and users.

From another perspective, I added it to my cousin Charlise’s blog (Crunchy Family), because she doesn’t understand code or how to manually add rel="nofollow" to sponsor posts and has [somehow] broken her website by attempting to work in certain code before. In this case, the external link icons are not used, but all external links, save those manually marked rel="dofollow" by me, have rel="nofollow" and open in a new window. I am slowly manually adding this to all the entries needing it and will soon walk her through doing this herself, but in this case, the plugin is technically necessary.

All and all, though, I’m trying to focus more on writing and the things I enjoy more these days. I have come to the conclusion coding as a whole, no matter what it may be, adds too much stress to myself and is the problem of the majority of my, albeit autistic, meltdowns, which I’m trying to avoid…because they’re horrendous. But this post has definitely given me something to think about. :)