BCFO: Don’t Make Me Think Revisited by Steve Krug

Chapter Three: Billboard Design 101

Chapter 2 introduced the idea that a webpage is a billboard. It covered the importance of designing a webpage in such a way that critical information can be easily obtained by scanning.

In this chapter of Don’t Make Me Think Revisited, Krug discusses the idea of conventions and how to design for scanning.

Krug breaks down designing for scanning into six main rules. They are as follows:

• Utilize conventions
• Create effective visual hierarchies
• Break pages up into clearly defined areas
• Make it obvious what’s clickable
• Eliminate distractions
• Format content to support scanning

We’ll go more in depth with what each of these points entail as we move through the chapter.

Conventions are your friends

Krug defines conventions as anything that follows a widely used or standardized pattern. Conventions are useful because they are comprised of components that users are already used to seeing/interacting with. So when they stumble onto site, there is a basic understanding of how to use it based on their previous experiences.

One example of a convention is the stop sign. While there are subtle variations across the world, they all have a few key elements in common:

• They are all shaped in an octagon
• The background color is red
• The font color is white

These common elements ensure that whenever drivers or pedestrians are traveling outside of their home country, there is no confusion on how to navigate the streets safely.

Conventions for webpages

In this section, Krug breaks down the conventions we are most familiar with for webpages.

Those conventions include:

• As users, we expect to see the logo for a company in the upper-left corner of a webpage.
• When it comes to how sites work, we are all used to the idea of the shopping cart for when we purchase items from a site.
• There is a standardized appearance for certain aspects of a page. For example, the search bar icon and social media links.

While conventions are incredibly useful, he also points out that designers are often reluctant to follow them.

The main issue that designers have with conventions is that they are typically not hired to follow the same pattern. Companies usually want to try to do something new and exciting.

Krug argues that while reinventing the wheel can be fun, it isn’t always worth the time. Very rarely do people stumble upon something that is truly revolutionary and changes the game.

He says that if you are going to try to reinvent the wheel, make sure you understand the value of what you’re attempting to replace. Designers often underestimate the value of what conventions provide.

An example he uses is the classic scroll bar. Many designers try to make this navigation tool prettier. However, they often fall short and don’t realize the amount of hours it took to master the basic one that we’ve all come to know and love.

If you do want to change an existing convention, make sure it was with something that is clear and self-explanatory OR it adds so much value that having a small learning curve is worth it.

His rule of thumb is that you can and should be as creative and innovative as you want to be, but only as long as your design is still usable.

One final point he touched on in this section is the phrase “Clarity Trumps Consistency”. Apparently consistency is often cited in design arguments.

Designers are told they can’t do something if it isn’t consistent. Krug argues that consistency is important and something that is worth striving for. But there are times where things will be clearer if you make them slightly inconsistent. Always strive for clarity. Even when it isn’t consistent.

Create effective visual hierarchies

Visual hierarchies are the visual cues that show the relationship between things on a page. As humans, we interact and parse visual hierarchies everyday. Some examples of visual hierarchies we see include newspapers and restaurant menus.

Pages with clear visual hierarchies demonstrate these three traits:

• The more important something is, the more prominent it is. The most important elements are either larger, bolder, in a distinctive color, set off by more white space, or closer to the top of the page. Or a combination of all of these.
• Things that are related logically are related visually. You can show that things are similar by grouping them together under the same heading, displaying them in the same visual style, or putting them in a clearly defined area.
• Things are “nested” visually to show what’s part of what. An example of nested information would be a site that has a section entitled Computer Books. Any books that fall under this category would be listed or “nested” under this heading.

If good visual hierarchies aren’t implemented, it takes us longer to scan the information. It is a lot more work for the user to make sense of what is going on.

Break up pages into clearly defined areas

Breaking up a page into clearly defined areas enables users to quickly decide what areas are most relevant to them. Eye-tracking studies of web scanning have found that users quickly decide in their initial glances what parts are useful and then dismiss the parts they don’t think will be.

Make it obvious what’s clickable

Since users are always looking for the next click to take them to the next portion of the site, it’s important for that click to be obvious.

Krug states that some of the visual cues we look for in clickable items includes using buttons, tabs, location (in a menu bar for example), and formatting (color and underlining).

The best way to ensure users know what is clickable is to stick to a singular color for text links or make sure that their shape and location identify them as clickable.

Keep the noise down to a dull roar

In this section, Krug outlines that users have varying tolerances for complexity and distractions on a webpage. Distractions can include ads, animations, or chat windows.

When it comes to noise, he says there are three major types. They are:

• Shouting. This occurs when a page has multiple things that are competing for your attention. Examples include invitations to buy things, pop-up ads, different typefaces, and bright colors. There are many more, but this outlines a few.
• Disorganization. A page that is disorganized can often look like a room that has been ransacked. This happens when the designer doesn’t grasp the importance using grids on a page to align the elements.
• Clutter. Krug says the we typically see clutter on home pages. Having too much stuff on a page often means the important stuff gets buried. His helpful hint to avoid clutter is to treat everything you want to include as visual noise. This helps you sort through anything that is not making a real contribution.

Format text to support scanning

Formatting text to support scanning is one of the most important things a designer can do to aid users in their quest for knowledge.

Here are Krug’s pro tips for formatting text:

• Use plenty of headings. Using headings serves as an outline for the content and helps guide users to the information they’re looking for. He advises that you’ll generally want to use more headings than you think are necessary.
• Keep paragraphs shorts. No user wants to parse a wall of text. Keeping paragraphs short enables to users to more easily scan for content.
• Use bulleted lists. If you ever find yourself questioning if something can be a bulleted list, odds are, you should make it a list. Using lists helps break up content and avoids walls of text.
• Highlight key terms. Highlight key words to help users find what they’re after. However, use it sparingly as to avoid making a page too noisy.

Wrapping it up

Whoo this chapter was a bit of a long one. Thanks for hanging in there if you’ve gotten this far in the post. We’re finally getting to the meat and potatoes of the book. As I’ve mentioned in the first post for this, so far a lot of it seems like common sense.

There are a lot of paragraphs that I read and think “Well yeah, of course you’d do it that way.” I think part of that comes from my education. As it turns out, I’ve thought about some of this stuff more than I thought.

The other part is an understanding that good design doesn’t make you think about things. Most of us take it for granted. All of these different conventions and principles exists for a reason. We just don’t actively think about it. So reading this book and learning more about the why is enlightening.

Thanks again for reading.

Catch ya next week for chapter 4!