jotsheet

I’ve struggled for a long time with how to best visually represent links on a Web page. (Yes, I know; I’m saddled with the weighty matters of the world.) Anyway, I’ve been turning it over in my mind for a while, and I finally put thought to action yesterday and implemented some hyperlinking best practices here on underscorebleach.net.

I figured I’d save you the trouble of contemplating the intracacies of hyperlinking usability and instead do a big write-up. So here’s a three-part series, with the next two parts soon-to-come.

1. Visual presentation of hyperlinks (this entry)
2. Distinguishing internal links from external, offsite links
3. “Branding” links to particular areas of your site (to be added later.. maybe)

The visual presentation of hyperlinks

Links are a really important part of the Web. Hyperlinking made the World Wide Web the “killer app” of the 1990s and accounts for its enduring popularity and usefulness. It’s thereforewhile worthwhile to devote some attention to making hyperlinking usable—even foolproof. Yet too many Web desigers do a terrible job: they make links difficult to distinguish from normal text, or they choose not to distinguish visited links from unvisited links—both big no-no’s.

A good place to start on this subject is an essay from the usability nazi himself, Jakob Nielsen. In probably his best Alertbox ever, Nielsen covers the usability of hyperlinking. Amazingly, I agree with just about everything he says here, except that I think it’s possible to be too ugly with hyperlinks, whereas science has been unable to determine that Jakob Nielsen has any sense of “too ugly”—or even any sense of design in general. No matter. Start with this article.

“Glanceability”; or, how I shouldn’t to mouseover everything to see if it’s a link

It is ridiculous that in 2004, Web designers haven’t yet learned the simple lesson of efficiency that the eye is faster than the hand: I can see whether text is a hyperlink faster than I can physically move the cursor over the text to “investigate.” Yet in site after site after site, I see tiny color differences of links from text. Perhaps the text is black (#000) and the link is very dark gray (#222). Well, that’s just great. Maybe all of these designers have $2000 Apple LCDs, but I have a $100 Samsung CRT purchased on Open Box buy from Best Buy. Suffice it to say that it’s not exactly revealing to me the wonders of Mother Nature’s color palette in the same way that Steve Jobs’ flat panels do. Designers: try being a little more explicit.

I’m a little more divided on the matter of underlining. Underlines can be ugly, but they do clearly distinguish hyperlinks from regular text. If designers aren’t going to use underlines, they should make an effort to be clear: italics vs. non-italicized text, bold vs. non-bold, or something similarly obvious. It shouldn’t take your full attention or your best day to get around the site. Try the 10 Beer Test if you’re not sure of your method. Chug 10 beers, wait 30 minutes, and navigate your website. If you have trouble, go in the bathroom, throw up, go to sleep, and redesign it in the morning.

In my case, I settled on the CSS border-bottom property over the text-decoration:underline. I like the “dotted” style, but for some unknown reason, Internet Explorer refuses to render this and shows dashes instead. (Every other browser digs the “dotted.”) I think the dotted underline is sufficiently clear yet more attractive than a normal underline. YMMV.

Visited links: I’m not going back there

The Web is three-dimensional: it exists in x, y, and t (time). If I went to a site a week ago and it sucked, I don’t want to go back. Please help me in avoiding that site by highlighting visited links on your site. Much of the same logic in the “glanceability” section above applies here. An ugly purple color is the default visited link color on the Web, and although some people think it’s a good idea to stick with this convention, it’s flat-out ugly. In my case, I decided to change the border-bottom-style for visited links from dotted to solid and to change the color of the link to another color that’s part of my page’s palette—not purple. This is indicated in “link legend” on my page. (UPDATE 1/29/05: I’ve removed this, but it might be useful on others’ sites. It was essentially a short list of dummy links giving the visual representation of unvisited and visited anchors [and anything else funky you do with links].)

Share This