Designing Billboards! Book Club: Don't Make me Think - Chapter 2 and 3

Andrew Nolan

2023-03-15

To most users, looking at a website is like glancing at a billboard while going 60 mph on the highway. Unless the website is a blog, or news, or meant to be fully consumed most users are on your site for a specific interactive goal and they will tunnel vision towards that objective. If they cannot figure out how to do it quickly, they will move on.

Like all things in design if it's best to implement these principles, it depends. But working with the assumption that users need to figure out how to parse your website fast is a great heuristic for getting started. In Chapters 2 and 3 of Don't make me Think we take a look at that idea.

Krug provides three assumptions we can use as heuristics for how a typical user may view our website.

Rule 1: People scan pages

Unless the page is a document, like an article or blog post (I sure hope you are reading this!), users tend to scan for keywords or things that catch their eye. They are on a mission. And like sharks, if they don't keep moving they die. We have all been using the internet for years, some of us for our entire lives. We know that when we are online we don't need to read everything to find what we want. We're good at scanning and we have trained this skill from a young age. We can assume our users are scanning now too.

Rule 2: People don't make optimal choices. They satisfice.

Satisficing means to pick what satisfies and suffices. When users scan the page, as we mentioned, they are on a mission. Thus, they are likely to choose the first reasonable option they come across on the page. As soon as we find a link we're on our way to the next place.

Optimizing is hard and, again, we're in a hurry. Nothing bad happens if we make a wrong choice on a typical website. Weighing options might not improve the outcome and it will take more time. If something seems right and it solves the problem that's what people will go with.

Rule 3: People don't figure out how things work. They muddle through

People don't often read instructions. If you are a software developer you are probably guilty of this too. I know we love to code, but reading through documentation can often be a chore.

People are inclined to use what works and muddle through until it does. What sounds more fun, reading documentation until you find what you need or bashing a few things until one works? Once we find something that works we often stick with it.

Process improvement is a big skill and important job. But a lot of people ignore it. We don't often try to improve existing processes. We work to make new exciting things. Our users are like this too. So we need to design our websites to guide them to what they don't yet know they need.

If users are just going to "make it work" with any design, why do we need to bother with good design?

Well, if the design is good, there is a better chance our users succeed! They will feel more confident with the tool and want to use it more. And your design can steer them to where you want them to be.

(I should mention, as with everything in design these are guidelines and the true answer to how users will actually behave is it depends).

These are important rules we can use for our designs. You, dear reader, may be one of the people who pays close attention to details and reads the entirety of sites. But, it is important to remember this is not always the case. Many people will fly through the content.

As an aside, this leads to an interesting observation about software engineering design reviews. Many engineers will ultra focus on UI design and nitpick small changes. This is great, but may overlook some of the larger usability issues that are there when someone who is not paying close attention actually tries to use the app. That is the value of usability studies and actual user feedback.

If users are going to try to use our websites and tools quickly like a billboard, how can we ensure they find what they need and want easily? The answer is simple, we design a good billboard.

Designing a Good Billboard

There are five key points in chapter 3 about designing your site.

1. Take advantage of conventions
2. Create effective hierarchies
3. Make it obvious what is clickable
4. Reduce visual noise
5. Format content to support scanning

Conventions are your friends

There is a reason some design patterns are widely used. People just expect them. A lot of developers and designers have hot takes about these patterns. It is ok if you don't like them. If you can improve them great! But keep in mind they are what your users are expecting. And this ease of use and consistency may help our design.

Things like a logo in the upper left or right corner (depending on language). Search and nav on the top or left. Well known icons: social networks, shopping carts, video play buttons, search magnifying glasses. These icons are often more metaphorical representations of their digital web counterparts, but we know what they mean. All of these are patterns we just expect to work on websites.

Take a look at a website in a language you don't speak. How much can you do without reading? Probably a lot! That's the key to consistency.

The biggest benefit of conventions are that users do not need to constantly relearn different websites. As we learned in the chapter 1 blog. Our goal with design is to not make me think! If we can reduce the cognitive load on our users, we did a good job.

This said, we always come back to our classic design aphorism, "it depends." Consistency is good, but clarity is better. While your creative energies may often be better focused in other places, reinventing the design wheel in a way that improves clarity is always great. In design review meetings people often default to calling out inconsistency as a hallmark of bad design. If the design is more clear this way, inconsistency can be thrown away!

Create effective visual hierarchies

More important things should be more prominent!

Bold, color, offsets, placing things near the top. All of these are techniques to make important content stand out.

Spatial relations matter. If something is logically related, it should be physically related on the page too.

Nesting can indicate when topics are within each other.

These are all very powerful tools to make scanning easier on the user. If everything looked the same users would have to read and parse it all themselves. Our design can preparse the page for them.

These tips are important outside of the web too. Newspapers have been doing this for longer than any of us have been alive. Hierarchies are great for scanning.

Make it obvious what is clickable

Not much more to say on this one. CSS exists, don't be scared to use it. You can make things look nice and make sense.

Reduce visual noise

Again CSS can help. Align things. Grid and Flex layouts are super powerful (maybe I should do a blog on them someday). Keeping everything in an easy to parse layout is an amazing thing to do.

DON'T SHOUT! WHICH SENTENCE IN THIS PARAGRAPH IS MOST IMPORTANT? IF I BOLDED OR EMPHASIZED IT, IT WOULD BE CLEAR. BUT HAVING EVERYTHING LOUD AND BIG MAKES IT IMPOSSIBLE TO TELL. USE YOUR VISUALIZE HIERARCHIES, HEADERS, ITALICS, AND BOLD APPROPRIATELY.

Reduce clutter. If you have too much on a page, people will not know what to do. If it doesn't add to a user's goal, remove it from the page.

And always remember, whitespace is not a bad thing.

Format text to support scanning

This final point is a culmination and collaboration of the other four.

Like we saw with hierarchies. Headings are good. They can distinguish levels and make it clear where content belongs and what it will be.

Use lists! They are great for scanning.

Keep paragraphs short. A wall of text is a turn off.

Even single sentences as a paragraph are a-ok!

Highlight key terms. Peoples' eyes are drawn to bold.

Using hierarchies, highlighting, and list are all great tools for improving the scanning of a webpage.

These guidelines for a good billboard may seem like common sense. But as you are perusing the web, pay attention. You will start to notice how often these things are overlooked. Incorporating these ideas into your designs will help improve your websites and make them easier for users to scan.

Enjoyed this article? Subscribe to the RSS Feed!