Billboard Design 101

Today's Best Tech Deals

Picked by PCWorld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

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.

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:

Very important, A little less important, Nowhere near as important
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.

Nested visually.
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.

The headline spanning these three columns [left] makes it obvious that they're all part of the same story. The size of this [right] headline makes it clear at a glance that this is the most important story.

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?

This flawed visual hierarchy suggests that all of the sections of the site are part of the Computer Books section.
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.

1 2 3 4 Page 1
Page 1 of 4
  
Shop Tech Products at Amazon