Don’t Make Me Think
So jam-packed with “obvious” wisdom that I could barely put down my notes app. Many notes for such a short book shows its value for anyone who is designing things with user interaction involved.
Context determines the best options
There is no one “right” answer to most usability questions. Design is a complicated process and the real answer to most design decisions is “It depends.”
- Usability definition—“A person of average ability and experience should be able to figure out how to use the thing to accomplish something, without it being more trouble than it’s worth.”
- Krugers first law of usability—Don’t make me think! When looking at a web page it should be self-explanatory.
- As a user I should never have to devote a millisecond of thought to whether things are clickable—or not.
- Every question mark in our heads adds to our cognitive workload. Our job as designers is to eliminate the question marks.
A user should never have to think about:
- Where am I?
- What are the most important things in this page?
- Why did they call it that?
If you can’t make something self-evident, you at least need to make it self-explanatory.
We aren’t reading web pages, we scan them
- People are usually on a mission. Web use involves trying to get something done. So we act like sharks, only looking for what we’re after.
- We don’t have time to read more than necessary. Scanning is how we find the relevant bits. What we see when we look at a page depends on what we have in mind.
We don’t make optimal choices, we satisfice
- We don’t choose the best option—we choose the first reasonable option, a strategy known as satisficing.
- We’re usually in a hurry and there’s not much of a penalty for guessing wrong. The back button is the most used button in web browsers.
- Guessing is more fun and less work than weighing options in your mind, and it introduces an element of chance—the pleasant possibility to run into something good and surprising.
We don’t figure out how things work, we muddle through
Faced with any sort of technology, very few people take the time to read instructions. We forge ahead and making up our own vaguely plausible stories about what we’re doing and why it works.
For most of us, it doesn’t matter to us whether we understand how things work, as long as we can use them.
“If your audience is going to act like you’re designing billboards, then design great billboards.”
Design for scanning, not reading
- Create effective visual hierarchies
- Break pages up into clearly defined areas.
- Make it obvious what’s clickable.
- Eliminate distractions
- Format content to support scanning
- Follow existing conventions
- Designers are often reluctant to take advantages of convention. There’s a great temptation to reinvent the wheel.
- Whenever a designer decides to create scrollbars from scratch—they oversee the thousands of hours of fine tuning that went into the evolution of standard operating system scrollbars.
- Innovate when you know you have a better idea, but take advantage of conventions when you don’t.
- Add as much aesthetic appeal as you can, as long as you make sure it’s still usable.
Clarity trumps consistency
If you can make something significantly clearer by making it slightly inconsistent, choose in favor of clarity.
- Good visual hierarchy saves us work by preprocessing the page for us, prioritizing its contents in a way that we can grasp almost instantly.
- The only time we’re consciously aware of visual hierarchies is when they’re missing—when the absence of the visual cues forces us to think.
- A large part of what people are doing on the Web is looking for the next thing to click. Make it obvious what’s clickable.
- We’re constantly scanning our environment for clues about how things behave and how can expect to interact with them.
Different kinds of noise
- Shouting—when everything is clamoring for for your attention. Lots of exclamation points, different typefaces, and bright colors! Everything can’t be important.
- Disorganization—when things are strewn everywhere. A sure sign that the designer doesn’t understand the the importance of alignment.
- Clutter—when there simply is too much stuff. It’s hard to find focus on what you actually care about. The noise obscures the useful things.
Format text to support scanning
- Use plenty of headings—you’ll want to use more headings than you would think and put more time into writing them. Don’t let your headings float. Make sure they’re closed to the section they introduce than to the section they follow.
- Keep paragraphs short—long paragraphs confront the reader with a “wall of words.” It makes it hard to scan. Keep them short.
- Use bulleted lists. Almost anything that can be a bulleted list probably should be.
- Highlight key terms. Page scanning consists mostly of looking for key words and phrases. Format important ones in bold where they first appear in the text to make them easier to find. But don’t overdo it, or the technique will lose its effectiveness.
- “It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”
- What really counts is not the number of clicks it takes me to get to what I want, but rather how hard each click is.
- Links that clearly identify their target give off a strong “scent” that assures the user they’re on the correct path to what they’re looking for.
Instructions must die
The main thing to know about instructions is that no one is going to read them—at least not until after several attempts of “muddling through” have failed.
Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible.
Real world similarities with the web
Looking for things on a web site and looking for things in the “real” world have a lot of similarities. Searching is similar to asking a clerk in a store. And browsing a site’s structure is similar to go through the departments at the hardware store.
But a web site doesn’t have a sense of scale. You don’t know if it consists of 50 or 1000 pages, compared to a magazine or a museum where you always have at least a rough sense of the seen/unseen ratio. Which means it’s hard to know when to stop looking.
We’re inherently lost when we’re on the web, and we can’t peek over the aisles to see where we are.
- Usability—making sure things are designed in a way that enables people to use them successfully.
- Information Architecture—making sure the content is organized in a way that allows people to find what they need.
Purposes of navigation
- Help us find what we’re looking for.
- It tell us where we are.
- It gives an index of what the site contains.
- Navigation reveals content.
Keep the home button in sight
Having a Home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over.
The importance of search
Keep in mind that for a large percentage of users their first official act when they reach a new site will be to scan the page for the search box.
Four things to know about page names
- Every page needs a name.
- The name needs to be in the right place. In the visual hierarchy of the page, the name should frame the content belonging to it.
- The name needs to be prominent.
- The name needs to match what I clicked.
The four questions the home page needs to answer
- What is this?
- What can I do here?
- What do they have here?
- Why should I be here — and not somewhere else?
The first few seconds you spend on a new web site or web page are critical.
Elements that aids the user to get a sense of a website
- The Site ID—usually the logo of the company for the website.
- Tagline—visually connected to the Site ID.
- The Welcome blurb—displayed prominently on the Home page, is a terse description of the site.
The myth of the average web user
All web use is basically idiosyncratic. There is no “average” web user. The problem is that there are no simple “right” answers for most web design questions.
Focus groups are not usability tests
- A focus group consists of a small group of people who sits around a table discussing their opinions about products and their past experiences with them.
- Usability tests are about watching one person at a time time try to use something (a prototype, a web site, sketches of a new design.)
- The main difference is that in usability tests, you watch people actually use things, instead of just listening to them talk about it.
- It’s usually not a good idea to design a site so that only your target audience can use it.
Resist the impulse to add things
When it’s obvious in testing that users aren’t getting something, the team’s first reaction is usually to add something, like an explanation or instructions. More often than not a better solution would be to take something away which is obscuring the meaning.
- Whenever you’re designing, you’re dealing with constraints.
- Most of the challenges in creating good mobile usability boil down to making good trade offs.
Affordances are visual clues in an object’s design that suggest how we can use it. Affordances are the meat and potatoes of a visual user interface. Some people also call them signifiers.
The reservoir of goodwill
Every time we enter a web site, we start out with a reservoir of goodwill. Each problem we encounter on the site lowers the level of that reservoir.
The Site ID or logo is like the building name for a Web site. At Sears, I really only need to see the name on my way in; once I’m inside, I know I’m still in Sears until I leave. But on the Web—where my primary mode of travel is teleportation—I need to see it on every page.
When you’re designing pages, it’s tempting to think that people will reach them by starting at the Home page and following the nice, neat paths you’ve laid out. But the reality is that we’re often dropped down in the middle of a site with no idea where we are because we’ve followed a link from a search engine, a social networking site, or email from a friend, and we’ve never seen this site’s navigation scheme before.
Having something pinned down can have a focusing effect, where a blank canvas with its unlimited options—while it sounds liberating—can have a paralyzing effect.