Click Here to Read This Article

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.

Link Visibility

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.

Links and mailto:

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.

Other Notes

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.

References

• Top Ten Web Design Mistakes of 2005
• Guidelines for Visualizing Links
• Jakob Nielsen’s Alertbox: Top Ten Mistakes in Web Design