Remember when I asked you to look at magazines, billboards, and even product labels and think about design in general? Well I wasn't just being goofy: We can learn a lot about document design that is applicable to the Web just by looking at mass media, especially principles of information hierarchy and prominence. These principles are invaluable when we consider how we are going to layout information on individual Web pages.
When I say hierarchy, I refer to how content or information on a page is recognized as superior (more importanat) or inferior (less important) than other content or information. We can appropriately indicate hierarchy to users by making some content/information elements more prominent than others. Effective communication of hierarchy communicates to our users what is important on a page, and reminds them where they are and what they are doing. In short, it helps assign identity to the Web page and it's purpose as part of the Web site.
Let's look at a couple billboard examples first:
First, let me ask, what is most prominent to you?
Oh, you want to know my opinion? I'd say most prominent are the words "Natural Beauty" and the woman's face. Why the words "Natural Beauty"? Because (1) they are larger than any of the other words, and (2) they are a bold red color, standing out from the other colors on the billboard. The woman's face is prominent because, well, she's attractive, and epitomizes the message of (artificial?) beauty.
What strikes you as being the next most prominent feature? I'm going to say it's a tie between the telephone number and the doctor's name. The telephone number is larger, but the doctor's name is also a bold red. And this is appropriate, as the advertiser certainly wants you to remember one or the other. Clinique of Plastic Surgury .com is important, but apparently less important than the doctor's name or the phone number--probably because the target audience may or may not be Web users.
Notice that there is more info on the page but it is appropriately sublimated to the main action. This stuff--address and the service description--is probably nice to have for people stuck in a traffic jam, but it's unlikely anyone will find that memorable.
OK, how about another billboard example? Here's one that screams "less is more":
What human with a pulse doesn't recognize immediately what this is and what it's communicating? The only text on the billboard are the words, "Opens Dec 15". Ah, simplicity. It doesn't tell us exactly what opens on that date, but we could guess, based on the image of a real person and the word "opens" that it's a movie. The rest of the billboard is dominated by the image of Clark Kent revealing that he is Superman, in a classic pose that manages to capture the excitement of Kent's dual identity. By the way, this billboard was for the original Superman film with Christopher Reeves.
So sometimes a picture is worth at least a dozen, if not a thousand, words. One other thing this advert does well is to set the only important text in high-contrast (white) to its background (black). (This is something else the first billboard example also does appropriately to add prominence.) The Superman billboard also puts the text on the left-hand side, which is the starting point for normal Western readers. The text is at the bottom, indicating that, hierarchically, this text is of secondary importance to the image.
Here's a product front label, which is really similar to billboards in a lot of ways:
Consider how the text is placed on the round label in terms of left-to-right, top-to-bottom Western hierarchy, and how about how color and size are used to further reveal prominence.
Here's another simple, but effective example:
Again, high-contrast and bold colors are used to suggest prominence. But font size is more important to draw reader's eyes to the word "Caution". In addition, this label uses a common icon to support the textual information.
Let's look at one more. This is the back label of a bottle of Elmer's glue:
The text is a little hard to read at this size, but the meaning of the words doesn't matter right now. Notice, rather, how text size is used to show hierarchy and importance of information. "School Glue" is the biggest phrase, and is near the top of the label, right next to the Elmer's cow (by the way, do you know why Elmer's uses a cow for it's logo? Because glue used to be made from animal by-products. I used to work in a rare book bindery, and let me tell you, you've never smelled stink until you've smelled rehydrated animal glue...)
Notice also how Elmer's italicizes and uses bullets to off-set the product's features from the other text. Usability research suggests that users more readily read small pieces of text that are bulleted--especially on the Web.
Beneath the product features--and notice that this section is distinguised from the previous sections by the use of lines and borders--you find some product information and instructions. Notice that each section is introduced by larger, bold text. This draws users' attention to these "starting points" and identifies each section.Based on these examples I identify the following ideas that can be applied to Web design:
We'll continue to talk about layout design throughout the course, but these are some good tools for our toolbox as we begin framing our house, so to speak. As you work through the rest of this lesson, you'll look at a bunch of examples of different Web pages. Try to apply these principles to those sites and see how well or poorly they utilize these principles to organize information hierarchy and identify content.