Text, Graphics and Photo Considerations

The Good and Bad of Text Links

Hyperlinks have suffered the most in the oscillation between high-tech and low-tech in web site design. In the beginning, just about every link you cared about was displayed as blue, underlined text. As people got more excited about graphics, they began using graphic images instead. Now that accessability and simplicity are hot topics, the wheel turns again toward text links.

The advocates of text links point out that a) text links improve accessability to the visually impaired, and b) text links define a concept more accurately than a graphic. There is certainly merit to the first argment. Even the second argument warrants some thought: although a picture can indeed speak a thousand words, it rarely describes a specific set of words.

Even so, I would argue that some graphics on a page are sensible, if used for a reasonable purpose: Visual Cues and Target Acquisition.

Visual Cues

If you are reading a page top to bottom, then you will encounter links in the flow of the text, and they will be surrounded by context. If you buy into hyperlinked text as a natural way for the brain to absorb information (see my thoughts on HTML and the Missing Narrative below), then those links make sense.

However, once you've already read a page through and are reviewing it, or visiting again later, then the concepts on the page are familiar, and a graphic will draw your eye more quickly. This is because of a function of the brain that can take in an overview of a scene and quickly pick out familiar shapes. This is how we find our socks in the drawer, and pick the beer out of the fridge. Imagine if everything in the fridge was similarly shaped and you had to read the labels of everything. You might be helped by spatial memory (visualizing where the beer is in the fridge), but there's nothing like a longneck to draw your attention.

One more example: Imagine a folder on your Mac or Windows machine where everything had text file names but no icon. Would this be a good user interface? They won't be sorted in any way, either.

Target Acquisition

Although there is plenty published on human-computer interface (HCI) design, much of it is ignored. Even Apple, which has historically been the Holy Grail of good UI design has faltered with its failed experiments with Quicktime Player and Sherlock2.

One of the central concepts in GUI environments like the Mac and Windows is that it should be easy to get the mouse pointer onto the thing you're aiming for. The bigger the target, the faster the acquisition. When you're spending a 45-minute session surfing the web and having to aquire small text-link targets over and over, your mousing hand, eyes, and mental focus all tire more quickly.

Conclusions

Now for a complete about-face: At mouratis.org, I've focused on making most of my links text-based. I did that because I expect that most of the visitors aren't going to use the site daily, and my link density is fairly low. But for most portal-type sites (home.netscape.com, www.excite.com and the like), you should be able to pick out the place to click for your town's weather easily. A graphic is best for that.

More

Bruce Tognazzini is considered by most to be at the forefront of Human-Computer Interface design. He wrote Apple's original Human Interface Guidelines as employee number 66, and was a Distinguished Engineer at Sun Microsystems. Lots of his writing appears at asktog.com, and he recently joined the Nielsen-Norman Group, which specialized in improved user experience.

Why are Graphics Bad but Photos Good?

Phil Greenspun is a net.personality who has one foot firmly in web publishing, one in collaborative technologies, and, er, one more in photography. Photography so permeates his consiousness that his photos appear peppered in every website he builds (philip.greenspun.com, arsdigita.com and photo.net), regardless of the topic of the text in which they appear. His Web Publishing book has uncaptioned photos on nearly every page, and the requisite paper quality turns the book into a five-poind monstrosity. My reaction to this was generally "Gee, this Philip fellow must think a lot of his own photos to insert them in everything he writes." As it turns out, Philip is something of a narcissist, but he's definately onto something.

What I came to realize is that photographs embedded in long texts are like the little grassy parks in big obnoxious cities: They provide the mental rest needed to absorb information. Perhaps someday we'll be able to jack straight into the computer and absorb information instantaneously á lá Keanu Reeves in The Matrix. Until then, we have to absorb at our own rate.

What's nice is that the process is more-or-less automatic. When you're reading along and deeply engrossed in the text, you'll blow right by the pictures. When you've just bitten off some huge concept and you're trying to get your brain around it, your eye naturally falls to the images, allowing your subconcious to file the new ideas away.

If you're a fast reader, and your brain works so well that you need no pauses, then you might complain that the photos are a waste of bandwidth. Even so, if the HTML is written correctly (i.e. with image size tags), then your browser will be able to render the text immediately and fill in the pictures later.