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.