The previous two parts of the Usability for newbie designers tutorial can be found here:

• Part I: Introduction and general tips
• Part II: Proper use of breadcrumbs

In this article I will talk about how to design links wisely and in such a manner that your visitors don’t get confused.

Stay with the trend

Don’t be overly innovative with your link stylesheet properties. Links should be blue (unless the color hurts your overall scheme) and underlining is a must. A very common practice is to have them do something (change color or get underlined) when you hover them. All these will help your visitors easily identify links and treat them as such. On the flip side, don’t stylize your non-linking text in such a way that it may be confused for a link. Underlined key phrases are a major no-no. Sidebar links should be clearly identifiable. Here is an example of a good practice on a recent CNN.com article:

You can easily spot the in-text link and the sidebar, right? Thought it could be improved by underlining the links.

Spacing

Make sure you use generous spacing between your links so that your visitors don’t accidentally click on the wrong one. Here’s a sample from eBay.com with plenty of space between the page numbers:

New tab or same window?

There are arguments for both alternatives. As a rule, always open external links in new tabs, unless you specifically want your users to leave your site completely (which might be the case for a squeeze or landing page meant only to capture a lead then forward to the final URL). PDF’s are best shown in new tabs (use PDF files with diligence though, Dave has a good take on this)

Indicate what you are linking to

I don’t advocate preview thumbnails, I find them extremely annoying as they clog up the browser on slower computers. If you are linking directly to resource-consuming content like non-embedded videos, MP3’s or PDF’s you should indicate it clearly with an icon placed before the link. Simply mentioning click here to download the report in PDF format won’t do, as some of your visitors might simply scan through the text rather than read the whole paragraph and simply miss the part where you mentioned the format.

URL shortening services

Stay away from such services, unless you have a truly valid reason to use them. A lot of people (myself included) would first hover a link to see where it points to. If you think that the remote URL is too long and it would be “nicer” if you used a 10-character one just don’t do it. I don’t like surprises, I want to know where I’m clicking to. Keep URL shortening for Twitter and services where space is limited.

Non-http links

Don’t use mailto:, ftp: or other protocols (anyone still using gopher?) inside links. Having my email client pop up when I click on a link is definitely something I don’t expect. Implement a contact form and link to it if you want to provide your visitors with means of emailing you directly.