Navigating the Winding Roads of Hyperlink Usability

May 26th, 2006

Hyperlinks are like most things in life - there’s a right way to use them and a wrong way. The choices we make in their visual treatment, content, user experience, and accessibility affect the success of your overall site.

Think about it another way. You’re driving down the road a little too slowly (especially to the people behind you) trying to find Main Street, a very common road. What subtle changes would help or hinder your success?

Here are some of the common good and bad practices of hyperlink usability.

GOOD: Make your links one consistent color and underline them.
Singing a very poor rendition of Garth Brooks, you drive happily along searching for the elusive Main Street. As you move along, your eye gravitates towards the green rectangular signs because you inherently know that those are street signs. Like these signs, a specific color and underline quickly signifies to the user that this is a link.
Source: Jakob Nielsen

BAD: Show text that is not a link underlined or with the same link color.
What if the Stop, School Crossing, and Falling Rock signs were also green rectangles? Not so easy to navigate anymore, especially during the “I’ve got friends in low places…” reprise. How would you know which is a street? The same goes for hyperlinks. Text that are not links should not be treated as such and vice versa. Blue should also be avoided since it’s the default hyperlink color and perceived to have the greatest clickability.

GOOD: Use different colors for visited and unvisited links.
What happens if there are three Main Streets in the area? What about ten? Instead of getting lost, wouldn’t it be nice if a road sign changed from bright green to a duller green to let you know that you already went down that street? Like these roads, different link colors help reduce navigational confusion for the user as long as they are different shades or variants of the same color.
Source: Jakob Nielsen

BAD: Keep all link states the same.
Would you know when to stop if the traffic light had three green lights? One out of three is pretty good odds. A long-standing usability guideline for navigation is to “help users understand where they’ve been, where they are, and where they can go (past, present, and future).” If this is not followed, users could revisit the same pages, get lost more easily, misinterpret links, and give up faster.

GOOD: Avoid changing links when the cursor hovers over them.
Imagine that every street sign you pass changes color, shape or font size. Kind of like driving in Vegas, isn’t it? And like Vegas, your site will appear more cluttered as the mouse moves around the screen. If you like hover states, I would probably go with a subtle color change from the unvisited state. It’s just enough to stand out but not enough annoy the user. Link titles (like ALT tags) that tell the user where they are going are also good practice.

BAD: Use bold and/or italic as a hovering effect.
This is not recommended because changing the text in this way increases the width of the font and may cause the text to realign.

GOOD: Do not use “Click Here”.
Try to avoid non-descriptive text. A link is supposed to “Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and search engine optimization (SEO).”
Source: Jakob Nielsen

GOOD: Open new windows only for a specific reason.
Opening a new window disables the back button as well as annoys the user and clogs their toolbar. In most cases, only open a new window for a PDF or other non-web document, such as a large image. And make sure to give the user adequate warning by including a link title, secondary text, or a graphic icon (usually a double-window or a single-window with an outward arrow).
Source: Jakob Nielsen | SitePoint

ONE FINAL GOOD: Test your links.
You’ve driven through heavy traffic and traveled up and down many, many streets called Main, but you finally found the right address. Congratulations. So where’s the house? Why does that sign in the ground say, “404 Error: House Not Found”? After working so hard to follow best practices for your links, make sure they actually go somewhere. Smiley Cat offers some good advice on link checking software for the financially set and the financially strapped.
Source: Smiley Cat

Remember that these are guidelines, not absolutes. If your site utilizes different styles and techniques to reach your target audience and they work, then more power to you. But in most cases, some or all of these standards will aide in your on-line success.

0 Comments  |   1,198 Views  |   Usability

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post