DESIGNING PAGES FOR SCANNING, NOT READING
If you / Don’t know / Whose signs / These are
You can’t have / Driven very far / Burma-Shave
—SEQUENCE OF BILLBOARDS PROMOTING SHAVING CREAM, CIRCA 1935
FACED WITH THE FACT THAT YOUR USERS ARE WHIZZING BY, there are five important things you can do to make sure they see—and understand—as much of your site as possible:
> Create a clear visual hierarchy on each page
> Take advantage of conventions
> Break pages up into clearly defined areas
> Make it obvious what’s clickable
> Minimize noise.
One of the best ways to make a page easy to grasp in a hurry is to make sure that the appearance of the things on the page—all of the visual cues—clearly and accurately portray the relationships between the things on the page: which things are related, and which things are part of other things. In other words, each page should have a clear visual hierarchy.
Pages with a clear visual hierarchy have three traits:
> The more important something is, the more prominent it is. For instance, the most important headings are either larger, bolder, in a distinctive color, set off by more white space, or nearer the top of the page—or some combination of the above.
> Things that are related logically are also related visually. For instance, you can show that things are similar by grouping them together under a heading, displaying them in a similar visual style, or putting them all in a clearly defined area.
> Things are “nested” visually to show what’s part of what. For instance, a section heading (“Computer Books”) would appear above the title of a particular book, visually encompassing the whole content area of the page, because the book is part of the section. And the title in turn would span the elements that describe the book.
There’s nothing new about visual hierarchies. Every newspaper page, for instance, uses prominence, grouping, and nesting to give us useful information about the contents of the page before we read a word. This picture goes with this story because they’re both spanned by this headline. This story is the most important because it has the biggest headline, the widest column, and a prominent position on the page.
We all parse visual hierarchies—online and on paper—every day, but it happens so quickly that the only time we’re even vaguely aware that we’re doing it is when we can’t do it—when the visual cues (or absence of them) force us to think.
A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.
But when a page doesn’t have a clear visual hierarchy—if everything looks equally important, for instance—we’re reduced to the much slower process of scanning the page for revealing words and phrases, and then trying to form our own sense of what’s important and how things are organized. It’s a lot more work.
Besides, we want editorial guidance in Web sites, the same way we want it in other media. The publisher knows better than anyone which pieces of the site’s content are most important, valuable, or popular, so why not identify them for me and save me the trouble?
Parsing a page with a visual hierarchy that’s even slightly flawed—where a heading spans things that aren’t part of it, for instance—is like reading a carelessly constructed sentence (“Bill put the cat on the table for a minute because it was a little wobbly.”).
Even though we can usually figure out what the sentence is supposed to mean, it still throws us momentarily and forces us to think when we shouldn’t have to.
This flawed visual hierarchy suggests that all of the sections of the site are part of the Computer Books section.
At some point in our youth, without ever being taught, we all learned to read a newspaper. Not the words, but the conventions.
We learned, for instance, that a phrase in very large type is usually a headline that summarizes the story underneath it, and that text underneath a picture is either a caption that tells me what it’s a picture of, or—if it’s in very small type—a photo credit that tells me who took the picture.
We learned that knowing the various conventions of page layout and formatting made it easier and faster to scan a newspaper and find the stories we were interested in. And when we started traveling to other cities, we learned that all newspapers used the same conventions (with slight variations), so knowing the conventions made it easy to read any newspaper.
Every publishing medium develops conventions and continues to refine them and develop new ones over time.1 The Web already has a lot of them, mostly derived from newspaper and magazine conventions, and new ones will continue to appear.
1 Consider the small semitransparent logos that began appearing in the corner of your TV screen a few years ago to tell you which network you’re watching. They’re everywhere now, but TV had been around for 50 years before they appeared at all.
All conventions start life as somebody’s bright idea. If the idea works well enough, other sites imitate it and eventually enough people have seen it in enough places that it needs no explanation. This adoption process takes time, but it happens pretty quickly on the Internet, like everything else. For instance, enough people are now familiar with the convention of using a metaphorical shopping cart on e-commerce sites that it’s safe for designers to use a shopping cart icon without labeling it “Shopping cart.”
There are two important things to know about Web conventions:
> They’re very useful. As a rule, conventions only become conventions if they work. Well-applied conventions make it easier for users to go from site to site without expending a lot of effort figuring out how things work.
There’s a reassuring sense of familiarity, for instance, in seeing a list of links to the sections of a site on a colored background down the left side of the page, even if it’s sometimes accompanied by a tedious sense of déjà vu.
Conventions enable users to figure out a lot about a Web page, even if they can’t understand a word of it.
> Designers are often reluctant to take advantage of them. Faced with the prospect of using a convention, there’s a great temptation for designers to reinvent the wheel instead, largely because they feel (not incorrectly) that they’ve been hired to do something new and different, and not the same old thing. (Not to mention the fact that praise from peers, awards, and high-profile job offers are rarely based on criteria like “best use of conventions.”)
Sometimes time spent reinventing the wheel results in a revolutionary new rolling device. But sometimes it just amounts to time spent reinventing the wheel.
If you’re not going to use an existing Web convention, you need to be sure that what you’re replacing it with either (a) is so clear and self-explanatory that there’s no learning curve—so it’s as good as a convention, or (b) adds so much value that it’s worth a small learning curve. If you’re going to innovate, you have to understand the value of what you’re replacing, and many designers tend to underestimate just how much value conventions provide.
My recommendation: Innovate when you know you have a better idea (and everyone you show it to says “Wow!”), but take advantage of conventions when you don’t.
Ideally, users should be able to play a version of Dick Clark’s old game show $25,000 Pyramid with any well-designed Web page.2 Glancing around, they should be able to point at the different areas of the page and say, “Things I can do on this site!” “Links to today’s top stories!” “Products this company sells!” “Things they’re eager to sell me!” “Navigation to get to the rest of the site!”
2 Given a category like “Things a plumber uses,” contestants would have to get their partners to guess the category by giving examples (“a wrench, a pipe cutter, pants that won’t stay up…”).
Dividing the page into clearly defined areas is important because it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore. Several of the initial eye-tracking studies of Web page scanning suggest that users decide very quickly which parts of the page are likely to have useful information and then almost never look at the other parts—almost as though they weren’t there.
Since a large part of what people are doing on the Web is looking for the next thing to click, it’s important to make it obvious what’s clickable and what’s not.
For example, on Senator Orrin Hatch’s Home page3 during his unsuccessful 2000 presidential bid, it wasn’t clear whether everything was click-able, or nothing was. There were 18 links on the page, but only two of them invited you to click by their appearance: a large button labeled “Click here to contribute!” and an underlined text link (“FULL STORY”).
3 Orrin Hatch deserves at least a footnote in usability history, since he was—to the best of my knowledge—the first presidential candidate to make Web usability a campaign issue. In the first televised Republican candidates’ debate of the 2000 campaign, he told George W. Bush, “I have to say, Governor, in contrast to [your Web site], it’s easy to find everything on mine. [Chuckles.] It’s pretty tough to use yours! Yours is not user-friendly.” (His site was easier to use.)
The rest of the links were colored text. But the problem was that all of the text on the page was in color, so there was no way to distinguish the links at a glance.
It’s not a disastrous flaw. I’m sure it didn’t take most users long to just start clicking on things. But when you force users to think about something that should be mindless like what’s clickable, you’re squandering the limited reservoir of patience and goodwill that each user brings to a new site.
One of my other favorite examples is the search box at drkoop.com (C. Everett Koop’s health site).
Every time I use it, it makes me think, because the button that executes the search just doesn’t look like a button—in spite of the fact that it has two terrific visual cues: It contains the word “SEARCH,” which is one of the two perfect labels for a search box button,4 and it’s the only thing near the search box.
4 “Go” is the other one, but only if you also use the word “Search” as a label for the box.
It even has a little triangular arrow graphic, which is one of the Web’s conventional “Click here” indicators. But the arrow is pointing away from the text, as though it’s pointing at something else, while the convention calls for it to be pointing toward the clickable text.
Moving the arrow to the left would be enough to get rid of the question mark over my head.
One of the great enemies of easy-to-grasp pages is visual noise. There are really two kinds of noise:
> Busy-ness. Some Web pages give me the same feeling I get when I’m wading through my letter from Publisher’s Clearing House trying to figure out which sticker I have to attach to the form to enter without accidentally subscribing to any magazines.
When everything on the page is clamoring for my attention the effect can be overwhelming: Lots of invitations to buy! Lots of exclamation points and bright colors! A lot of shouting going on!
> Background noise. Some pages are like being at a cocktail party; no one source of noise is loud enough to be distracting by itself, but there are a lot of tiny bits of visual noise that wear us down.
For instance, MSNBC’s menus are a powerful and slick navigation device that let users get to any story in the site quickly. But the lines between items add a lot of noise. Graying the lines would make the menus much easier to scan.
Users have varying tolerances for complexity and distractions; some people have no problem with busy pages and background noise, but many do. When you’re designing Web pages, it’s probably a good idea to assume that everything is visual noise until proven otherwise.
