Section 6.3. Designing Text Hyperlinks

6.3. Designing Text Hyperlinks

The best hyperlinks are like bad ties in that they leap off the background and burn themselves assiduously into the foreground. Therefore, the design of your hyperlinks isn't the place to demonstrate your subtlety and sensitive artistic nature. Your links have to catch the roving eyes of your visitor and entice the mouse to the all-important ritual of the click. They do this by standing out in sharp contrast from their surroundings. An old web designer trick is to stand about five feet from the monitor and squint hard. If all you see is the vague shape of your layout, the blur of your main navigation, and the hyperlinks buried in the running text of the main content area, then consider your job done.

6.3.1. Looking at Link States

Hyperlinks have three different appearances or states: the unvisited state, the visited state, and the active state. The unvisited state is the appearance of the link when the visitor hasn't yet been to the destination of the link, at least as far back as the browser remembers. Not surprisingly, the visited state is the appearance of the link when the visitor has already been to its destination. Finally, the active state is the appearance of the link when the visitor is actually clicking the link or, in the case of Internet Explorer, when the visitor passes focus to the link by pressing the Tab key.

TECHTALK

Text hyperlinks have three different appearances or states: the unvisited state, where the visitor hasn't yet been to the link's destination; the visited state, where the visitor has been to the link's destination; and the active state, where the visitor is actually clicking the link.

Traditionally, web designers have used different colors to distinguish the three link states. Blue is the standard color for unvisited links, while purple or magenta is standard for visited links, and red is standard for active links. While you can easily set the colors of the three states to be anything that you want, you should go out of your way to use the standard colors in your design. Most of your visitors already know what these colors mean, which makes your site that much easier to use. If you do deviate from the standards, make sure that you apply your color choices consistently, across all the pages of your site. It's no good using green for unvisited links on one page and yellow for unvisited links on another page. Make them all green or all yellow. Your visitors will thank you.

BEST BET

Stick to the standard colors for link states. Barring that, use custom link colors consistently.

6.3.2. Getting Rid of the Underline

Most links come with underlines. The underline, along with the link-state color, helps to call attention to the link when it sits in the middle of running text.

It used to be that the underline of a link was unchangeable. The browser automatically added the underline to all links, and that was that. But with the advent of Cascading Style Sheets, the omnipresent underline became fair game. You can now remove the underline with a simple instruction in your stylesheet.

The wisdom of this practice is debatable, though. The underline is synonymous with the hyperlink in the conceptual vocabulary of the Web, to the extent that visitors click on anything with an underline, even if it isn't a link. When you remove the underline from your links, your design can't benefit from this powerful, universal affordance, or visual cue.

TECHTALK

An affordance is a visual cue that suggests the purpose or function of an element.

If you insist upon removing the underline anyway, make sure that you replace it with something, and not just a different color. One of the guidelines of usability is that you don't identify something by color alone. When you remove the underline of your hyperlinks, your links might become invisible to people with color blindness and the users of the two or three black and white monitors still in service somewhere. Your links will certainly become less useful to the visitor who prints out your page on something other than a color printer. So if the underline has to go, replace it with boldface or italics or something that translates into a color-free medium, and use your new link affordance consistently so that the visitor gets the gist of it.

6.3.3. Adding Rollover Effects

Cascading Style Sheets provide for a fourth link state: the hover state, or the appearance of the link when the visitor rolls over it with the mouse pointer. When you add hover states to your stylesheet, your links can't get much more clickable. A link that changes appearance in response to the mouse reinforces the idea that it does something.

TECHTALK

The hover state is the appearance of a link when the visitor rolls over it with the mouse pointer.

How exactly the link changes is entirely up to you, but here are a few tips for your consideration:

Don't lose the underline

When the visitor rolls over an underlined link and the underline disappears, you send a mixed message. The link should look like it's powering up, not shutting off. If anything, add the underline when the visitor rolls over the linkbut make sure that something else besides color calls attention to the non-underlined version. (See "Getting Rid of the Underline" previously in this chapter.)

Changes in color are fine

For best results, choose a rollover color that looks like it's ready for action. Something bright and high-energy should do nicely.

Applying boldface and italics are generally all right

Rollover links can turn bold or italic if you'd like, but be careful about where and how you use this effect. Boldface and italic type styles usually take up a little extra space on the screen than the normal font. To make room, the browser redraws the line of type on which the link occurs, which may force a reflow of the surrounding lines. If this happens, the visitor might suddenly lose the link.

Avoid changes in type size

Small changes in size, like within a pixel or two, might be all right, depending upon your site. Anything larger than that forces reflow, and you get a lurching page. Talk about movable type.