3: Billboard Design 101
Krug considers the design of billboards, which present a serious challenge: a driver cannot give a billboard more than a cursory glance because his attention is focused on the road. He considers some of the principles of billboard design, and how they might apply to the digital media.
Conventions
One of the best ways to make anything easy to understand at a glance is to leverage existing conventions with which the use is already familiar.
He mentions that red, octagonal stop signs are conventional in the US as well as abroad. Even if the word "stop" is replaced by the squiggles of an Asian language, just the shape and color of the sign is enough for a foreigner to know what it means.
And while he's plumbing the metaphor, he mentions how conventional automotive designs are. You can get into a rental car and start driving right away because things are more or less in the same place: the brake is on the left and the gas is on the right, the speedometer is right in front of you and the horn is in the center of the steering wheel. (EN: HE conveniently ignores things like the headlight controls and windshield wipers, which can be confounding because there is no single set of conventions.)
Web pages are the same way: though each site is different, there are some basic conventions that are followed. The logo is in the upper left and can be clicked to return to the home page. There are horizontal navigation bars along the top of the page. Links are a different color and underlined. Buttons are rectangular and beveled. And so on.
Even the layout of the page is similar among sites of the same genre: a search engine, a blog, or an online store follow certain patterns and conventions.
The conventions aren't random, but they evolved. Someone stumbled upon an idea that worked, and others copied it. Eventually, people got used to seeing things designed a certain way, to the point that they expect them to be positioned and deigned to the standard, and are a bit confounded if they look differently.
Sadly, designers undervalue conventions. They want their search widget to be special, unlike anything anyone else has ever done, perhaps secretly wishing to be the one to set a new standard others will follow. Sometimes, quite rarely, they do find a better way - most of the time, they simply confuse their users by violating the unwritten "rules" of design.
Innovation can be a good thing, but it's important to understand what you will be losing by deviating from expectations. Invent a new way to scroll down web pages on your site, and many users won't find it. They will be more annoyed than impressed when they discover the unique way of scrolling pages on your site - if they even bother.
And so, when violating conventions first consider what you gain by doing so - how your clever way is better than the existing way for the user. Consider how the user is going to figure it out. Test it. His recommendation, innovate when you are positive you have a better idea. Otherwise, stick to the tried and true methods.
He's also a big fan of consistency within a site. Buttons should all look the same, links should be the same color on every page, etc. But in some instances, consistency can be broken or at least bent - the principle here is that clarity trumps consistency. So if sticking to an existing convention would make the interaction awkward, then deviate.
Visual Hierarchies
A visual hierarchy shows the relationship among things that are shown together. The importance of a hierarchy is that it makes the page scannable. The user recognizes the major parts, then their components, then their elements.
The simples hierarchy is size: the most important thing is the biggest: the page title is the largest text on the page, a subhead is next, a sub-subhead next, and finally the content.
Things that are similar are given parallel design, like items in a list they are similar in a way that makes them perceived as a group. This can also be done by giving them identical font and stile.
Using visual containers like colored boxes helps define the things within it as belonging together.
Web pages began as analogous to printed pages, and follow many of the same conventions in terms of their layout: they use heads, columns, sections, and the like.
A functional hierarchy breaks a page into components. The user recognizes that the area at the top of the page is the brand elements that identify the site, the sidebar to the left contains links to major sections, and the stuff at the bottom is unimportant and usually there just to appease lawyers.
Make it Obvious what's Clickable
Web pages generally have a combination of content that is meant to be read or seen and elements with which they user can interact: links to click, text fields to type into, boxes to check, buttons to click.
Following conventions makes it obvious to users what they can interact with and what they cannot - break a convention, such as making links the same color as the rest of the text, and the user will not recognize them as something that can be clicked.
It's not necessary to be exactly the same as every other site, and Krug lampoons as "Paleozoic" the convention of using the default font, link styles, and button colors. However, being internally consistent within your site is worthwhile and following certain conventions, such as color for text links and beveling on a button, help the user to quickly learn how to identify clickable items on your site.
Minimize "Noise"
One of the greatest enemies of usability is noise - anything that distracts the user from finding what they came to find. Unfortunately, that make "noise" rather hard to define. If you make one thing prominent, it distracts from something else.
The problem is compounded by site operators that want to force the user to pay attention to things that the user doesn't care about. Consider the presence of advertising on web sites - the bright, big, flashing banners that want the user to come and buy something when he merely wants to read a news story.
- Shouting. When a page element is clamoring for attention, it distracts from everything else on the page. Consider the old-style web sites with a row of advertising banners, each attempting to be "louder" than the next to get attention.
- Disorganization. This occurs when there is no rhyme or reason to the layout of content on a page. The author doesn't have much to say, except that it's the result of poor design.
- Clutter. Some pages are simply a wreck, which happens very often as sites grow and more and more content is crammed into the space without redesigning the page to accommodate it.
Krug's suggestion is to strip down your web page to include only those things that are important - and preferably, they are important to support the user in accomplishing a task.
Accommodate Scanning
Most of the time, users are scanning for information they want on a web site. They do not want to spend time reading anything that is not related to their immediate interest, and want to skip past it.
Site owners may be chagrinned by this, as they want people to read every single word on their page. But making them do so will only serve to drive them away, to a site where it's easier to find what they need.
Krug's suggestions:
- Use plenty of headings to make it easy for the user to see the structure of the page and skip to the part they want.
- Structure headings according to the hierarchy of information - as described under "visual hierarchies" above
- Keep paragraphs short. Avid hitting the user with a "wall of words" that requires them to read several sentences to get to the part they care about.
- Use lists. Presenting items in a list makes it easy to scan to find the one that is wanted, rather than a paragraph of many "and"s.
- Highlight key terms. Use bold and italic text to make words and phrases that users are searching for easier to find.