Hyperlinks are what make the Internet its own. The concept of being able to connect documents with the click of a mouse was a major selling point of the Web and it is that basic functionality which makes the Internet so great. I’d like to take a quick minute to talk about the usability of anchors in your design. There are a few guidelines and tips that you can take into consideration that will help your users find their way around your site by effectively identifying which elements are links, and which are not. There are (at least) two very different scenarios in which anchors can appear: navigation and content. I’d like to talk briefly about each.
Links in your Content
It is usually appropriate for the content of a document to provide links to external sources either as a reference point, a path to more detailed information, or otherwise. It can help to give your document strong support and worth if the sources to which you link are valuable.
Click Here to do This! Click Here for That!
Although this technique is becoming less common, as I browse the Web I constantly find myself coming across links that have the phrase ‘Click Here’ in the anchor. Reading Jakob Nielsen’s Top Ten Web Design Mistakes of 2005 helped to clue me into where sites were using non-descriptive text in links.
Not only are you giving your reader the assumption they don’t know what to do when faced with a hyperlink, you’re hurting yourself when it comes to SEO. Unless the reader viewing your site is seeing your content for their first Internet experience, they will recognize a hyperlink and know that if they wish to follow it, they should click it. The text of your links should be contextual in nature and with that have a guiding light shed on their target. The user should have a general idea where the link leads based on the surrounding content and the words that are part of the anchor.
Links which Open New Browser Windows
Many developers believe that if links to external sites are opened in a new window using
target="_BLANK", it will have a strong effect on whether or not the user continues to browse their site. It is assumed by some that if a link is opened in a new window, the user will read the content from the new site, close that browser window, and resume where they left off. In fact, this is the opposite. The opening of new browser windows in fact confuses a user in that their back button all of a sudden stops working. The feeling of an unwanted popup window also comes into play when new browser windows are opened. Many modern users will open the link in a new window or tab if it is what they would like to do. They will read their desired content and resume where they left off on your site. If you continue to desire to use new browser windows for external links, be sure to let the user know that the link they are about to click will be opening a new browser window.
A very large pet peeve of mine is when links are not obviously links. It should stand out from first glance as to what is a link and what is not. I think that Jakob Nielsen’s expertise on this subject is most valuable in his Alertbox for May 10, 2004: Guidelines for Visualizing Links. He raises some excellent points regarding the usability of anchors.
In that article a great point is raised regarding visited links. Many developers do not properly distinguish between which links have been visited and which haven’t. There are many times where the same link is used using different text and I find myself with multiple tabs displaying the same exact article. It is important to differentiate which links have been visited and which have not.
Way beyond my peeve regarding link visibility is my annoyance with misrepresented
mailto: links. It is extremely frustrating to click a contact link and the next thing you’re faced with is an Email composition window from your default Email application. Links stating ‘Contact Me’ or ‘Send Me an Email’ are assumed to bring the user to a contact information page. Some ways to avoid this is an outright statement that clicking the link will open your default application, and a more subtle way to notify your user is by making the email address the anchor text. This usually gives the user the idea that the link will connect with the email address (and therefore open your default email application) as opposed to linking to an online contact form.
Site Navigation Links
Your site navigation is perhaps the most integral element of your design. It should be functional, aesthetic and obvious. A user should be able to find it almost instantly and it should be well organized. There was a design trend some years ago that still carries until today and that is of Mystery Meat Navigation. Mystery Meat is in reference to navigational elements that serve absolutely no visual purpose at first glance, and only sometimes become usable upon hovering or interacting with them. This is something that should be avoided at all cost so ensure the usability of your navigation.
In closing, I would like to touch upon link ‘effects’. By effects I am referring to what happens when you interact with the anchor element. The color it changes to, or any other characteristic that changes about the link when a user tries to follow it. What really sticks out at first is when developers use effects that actually distort the position of the text and possibly the surrounding elements. Making text bold or having it change position can be very confusing and annoying to your users in some cases.
Of course there are certain circumstances in which a change like this is welcomed, but it must be done in the smartest way possible. If interaction with your links is effecting other elements of your design, perhaps a new plan is in order.
For a long time I was using links with the ‘click-here’ for more information attitude. Mostly because I was not creative enough to come up with text for the links. Recently I have been replacing my ‘click-here’s with more relevant text. Thank you for giving me some background information or rather a reason for my change that I had no been previously aware of.
Many times I get handed a design with ‘click here’ which makes me cringe. However, I’ve learnt to embrace it by using ‘Click here[span] to view name of product[/span]’.
Usually there is a strong design which will clearly link the ‘click here’ text to the information. But without styles, the link is explained in full.
Thank you for so useful article.
I request your permission to translate it to brazilian portuguese.
What I enjoy so much about your not afraid to talk about basic techniques. I am still learning HTML and web design and by visiting your site on a regular basis I learn in depth about basic techniques and things that are crutial to good web design. Often people will talk of something simple and basic and try to over analyze it and just blow the beginning user out of the water.
Thanks again for an excellent write up!
Excellent article. I wrote about similar frustrations awhile back:
@trovster: Thank you for bringing up the point that there is indeed a proper way to implement opening a new window if it is absolutely necessaray (also known as you’re being paid to do it). I also neglected to include any mention of using inline icon-style images to designate what type of link it is. Thanks for including the links.
@Mauricio: Absolutely! Just be sure to comment again with the link so others are able to find it.
@Paul: I’m glad you find the articles useful. Truth be told it is hard to classify things as ‘beginner’ or not, but moreso what is proper use and what is not.
@Nathan: I’m glad to see you’ve found time to stop by again, and thanks for linking your article — it helps to get as much opinion on each topic as possible. Your article brings up the same frustration with linking to PDFs — something I forgot to mention in this article.
Thanks for the permission.
The brazilian portuguese translated article is alive at:
Interesting read as always. I’m looking forward to the day when we will never have another ‘click here’ link on the internet…
Great article Jon.
I find myself thinking about ways to overcome the click here links quite often. If I can’t avoid links like that, I’ve been simply giving a more detailed explanation via the alt attribute. I like the idea from Trovster above though, using a span with display none I’m assuming. Seems like a better approach.
In regards to popups I would probably refuse to use them in any of my sites. Especially with all the new versions of lightbox that are coming out allowing basically anything you could want in popups. I do wonder though, how long it will take before the lightbox implementations are the new ‘hated popups’.
Mailto links are absolutely terrible!
You mentioned the link effects that can cause shifts, which I agree is not often wanted, if ever. To add though, hover effects on many other things can cause jumps as well. Your hover rule for your comment list items for example, causes the text to shift and reflow with the right border. To overcome this you just need to apply the same border for the regular li, and color it white.
I’m really liking how this site’s working out. You’re doing a great job Jon! I’ve been following all the articles, just short on time to reply. I’ll have to read through them again and make a few comments I think.
Oh forgot to link an article I found:
You’re spot on with links opening in new browser windows. I used to set all my links to open in a new window thinking that would keep visitors on my blog, until I myself got irritated with it. As a general rule of thumb, I never ever use target=_blank now. Besides, it doesn’t validate.
[…] am across a very interesting article the other day Monday By Noon’s “Click Here to Read this Article” it provides a very good explanation of why you should pick your anchor text correctly. While it is […]
[…] http://www.alistapart.com/articles/practicalcss/ http://www.glish.com/css/ https://jonchristopher.us/2006/04/24/click-here-to-read-this-article/ […]
[…] Want even more linkage etiquette? Monday by Noon has a nice article more focused on the design theory behind links. Check it out here. […]
[…] but the two do have common ground. I’ve written before on the (still common) tendency to use “click here” as link text and the issues that rise as a result. The phrase “click here” while strikingly […]