Create a clear visual hierarchy
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. (Figure 1)
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. (Figure 2)
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. (Figure 3)
){kind=link}
){kind=link}
){kind=link}
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. (Figure 4)
){kind=link}
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."). (Figure 5)
){kind=link}
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.