showing links
Hypertext designers have long wrestled with a difficult problem: how do we make links visible, without making them distracting?
On the web, links are colored text. That's probably a design error, but it's too late to fix it now. We can live with it -- we live with it every day. How can we make it better?
HISTORICAL NOTE
Early hypertext systems experimented with all sorts of solutions. Peter J. Brown's Guide displayed links in bold or italic type; this made links apparent, but also gave them special emphasis. After all, emphasis is the reason that we use bold and italic!
Intermedia avoided the emphasis problem by putting a small link symbol between lines of text. This worked well only if the text was set with lots of space between each line, which wasted screen space, or by varying line spacing as needed, which made pages ugly. Hypergate drew boxes around the link text, which avoided the emphasis problem only because the boxes looked so peculiar that readers didn't really know what to make of them.HyperCard and Storyspace draw links as boxes when the reader pressed magic keys, making links evident on request but keeping the text pristine the rest of the time. The Symbolics Document Examiner drew the link boxes when the mouse passed over the link. Letting readers ask to see links solved the emphasis problem, didn't clutter the page, and didn't confuse readers terribly because HyperCard was free and ubiquitous. After the Hypertext '87 demo sessions -- the first time hypertext designers could compare all the systems side-by-side -- this style of "show links on request" became the consensus solution.
Then came Mosaic, which ignored the consensus and went right back to colored links. This returns us to the beginning: links are emphatic. A link, even the most minor footnote, sticks out from its surrounding text almost as if it were blinking.
Nancy Kaplan's E-LITERACIES, a fascinatingly hypertextual essay in its own right, is undergoing a facelift that points the way. Kaplan's new color scheme chooses link colors very carefully indeed.
The base link color is a dim violet, against the white page background. Because there are lots of links in E-LITERACIES, the light violet links and the lightly toned headline text give the page a light and airy texture that quietly makes an ironic comment on the academic controversies into which Kaplan plunges.
The visited links are a dark, muddy violet. This maintains the overall color scheme of the page, while letting the used links fade back toward the black text.
Nancy Kaplan's colors are: bgcolor=#ffffff link=9900ff vlink=330066.
Notice how the visited link is roughly the same color as the unvisited link -- simply half as bright. This makes good sense: the visited links call less attention to themselves and are darker -- hence more legible.
Usability expert Jakob Nielsen, in his Top Ten Mistakes In Web Design, argues that changing link colors is always a bad idea:
Links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is key to teaching users what the link colors mean.
Nielsen has a point, of course -- if you use non-standard link colors you may confuse inexperienced readers. Presumably this also explains Nielsen's preference for grey backgrounds; the default behavior, even if it's wrong, is more familiar to new users.
The interests of novices and experienced readers often conflict; prudent designers must try to delight the readers that matter most while trying to please everybody.
