"Don't Make Me Think" by Steve Krug Flashcards
This deck reviews the basics of web usability. Steve Krug is an expert in web usability. He wrote "Don't Make Me Think." The second edition was published in 2006. This deck is based on his book.
You should try, but often you can’t make every web page…
self-evident. Sometimes you have to settle for self-explanatory.
Using a site that doesn’t make us think about unimportant things feels…
effortless.
The main reason not to force people to think when using your site is that people aren’t going to spend a lot of time…
looking at the site.
If web pages are going to be effective they must work most of their magic at a…
glance.
We don’t make optimal choices. We…
satisfice, which is a cross between “satisfying” and “sufficing.”
We don’t read pages. We scan them. Why do we scan?
1) We are in a hurry.
2) We know we don’t need to read everything.
3) We are pretty good at it.
Why do web user “satisfice?” Why don’t they look for the best choices?
1) They are usually in a hurry.
2) There is not much of a penalty for guessing wrong.
3) Weighing options may not improve chances of success.
4) Guessing is more fun.
We don’t figure out how things work. We…
muddle through.
Muddling through is
1) Inefficient
2) Error-prone
One of the advantages of the users “getting it” is that there is a much better chance that they will …
find what they are looking for.
If your audience is going to act like they are reading a billboard, then design great…
billboards.
We muddle through because…
1) it is not important to us and
2) if we find something that works, then we stick with it.
Each page should have a
clear visual hierarchy.
Clear visual hierarchy: The more important something is, the more…
prominent it is.
Clear visual hierarchy: Things that are related logically are also related…
visually.
Conventions are your …
friends.
There are two important things to know about web conventions…
1) They’re very useful.
2) Designers are often reluctant to take advantage of them.
Break up pages into clearly defined…
areas.
Make it obvious what’s…
clickable.
Convention calls for the»_space; to be pointing…
towards the clickable text.
When you are designing web pages…assume everything is…
visual noise.
Users like…
mindless choices.
It is not the number of clicks that is important, but rather how much …
thought is required to make the decision to click.
Web Navigation 101 is four step process.
1) You are trying to find something.
2) You decide to ask first or to browse first.
3) If you browse, then you make your way through the hierarchy using a series of signs,e.g., buttons, links.
4) If you can’t find what you want, then you leave.
Jakob Nielsen calls people who immediately go to the search bar to find what they want…
search-dominant.
Jakob Nielsen calls those who will browse the site using its links…
link-dominant.
The web experience is different from a store experience because…
on the web there is no sense of:
• scale
• direction
• location
Website navigation is about…
- getting from one place to another and
- finding out where you are.
- giving you a sense of “knowing your way around.”
- letting you know what’s here
- tells you how to use the site
- gives you some confidence in the people who designed the site
On the Mac keyboard Option and 8 will create a
bullet point.
Persistent navigation should include five elements…
1) Site ID
2) a way home
3) a way to search
4) utilities
5) sections
Every web page needs a …
name.
“You are here” indicators are important. The most common failing of “You are here” indicators is that they are too…
subtle.
Breadcrumbs have shortcomings, but are
• self-explanatory • they don't take up much room • they provide a convenient and consistent way to do two things: 1) back up a level 2) go Home
Breadcrumb “best practices” include:
- Put them at the top
- Use > between levels
- Use tiny type
- Use the words “You are here”
- Boldface the last item
- Don’t use them instead of the page name
Although Amazon, which was known for it use of tabs, abandoned them in 2007, tabs are still an excellent navigation choice for large sites because…
- They are self-evident.
- They are hard to miss.
- They are slick.
- They suggest physical space.
Tabs should have these three attributes…
1) create the visual illusion that the active tab is in front of other tabs.
2) color coded to stand out
3) a tab should be selected when you enter the site, e.g., academics, which would also show the subsections.
Take the “Trunk Test.” Metaphorically, you have been blindfolded and locked in the trunk of a car, then driven around and dumped on a web page. You should be able to answer these questions…
- What site is this?
- What page am I on? (Page name)
- What are the major sections of this site (Sections)
- What are my options at this level? (Local navigation)
- Where am I in the scheme of things? (“You are here” indicators)
- How can I search?
The first step to recovery is admitting that the home page is …
beyond your control.
The home page is the …
waterfront property of the web.
The comparatively small amount of space “above the fold” on the home page is …
“choice” waterfront property.
Regardless of what compromises are reached in the end the home page must …
convey the big picture.
The home page needs to answer these five questions:
1) What is this?
2) What do they have here?
3) What can I do here?
4) Why should I be here and not somewhere else?
5) Where do I start?
On a web site, the tagline appears right below, above, or next to the …
site ID.
A tagline conveys a …
value proposition.
Pulldowns suffer from several problems …
1) You have to seek them out.
2) They are hard to scan.
3) They are twitchy, i.e., the list comes and goes too quickly.
All web use is basically idiosyncratic. There is no …
average user.
Developers and designers are as alike …
farmers and cattlemen. Farmers love fences. Cattlemen love the open range.
Most usability testing gets done …
too little, too late, and for the wrong reasons.
Repeat after me: focus groups are not
usability tests.
Focus groups won’t be able to tell you if people actually can …
use your site.
The only way to find out if a site really works is to …
test it.
The best kept secret of usability testing is that …
it doesn’t matter who you test.
Before you even begin designing your site, you should be …
testing comparable sites. Maybe even actual competitors.
Asking the user to do something and then watching how well they do it, is called …
key task testing.
Asking the user if they understand the purpose of the site, the value proposition, how it is organized, how it works is called …
“get it” testing.
On every web page, the name needs to be in the …
right place and prominent.
On every web page, the name needs to match what is …
clicked.
Three mindless clicks are equivalent to one …
“I have to think about it” click.
Another advantage of users “getting it” is that there is a much better chance that they will …
understand the full range of what is on the site.
Another advantage of users “getting it” is that there is a much better chance of …
steering them to the parts you want them to see.
Another advantage of users “getting it” is that they feel smarter and more in control and that …
might bring them back to the site.
Things that diminish goodwill. Hiding information that …
the user wants, e.g., customer support phone numbers and prices.
Things that diminish goodwill. Punishing me for doing things …
your way, e.g., dashes in a telephone number.
Things that diminish goodwill. Asking someone for information that
you really don’t need.
Things that diminish goodwill. Shucking and
jiving me, e.g., fake sincerity.
Things that diminish goodwill. Putting sizzle in
my way, e.g., long Flash intro, pages of feel good marketing photos.
Things that diminish goodwill. The web site looks …
amateurish, e.g., sloppy and unorganized.
Things that increase goodwill. Know the three main things that people want to do on your site …
and make them obvious, e.g., how to apply.
Things that increase goodwill. Tell me what …
I want to know, e.g., how much does it cost.
Things that increase goodwill. Save me steps whenever …
you can, e.g., autofill information that you have provided to the user.
Things that increase goodwill. Put effort …
into it, e.g., provide helpful information.
Things that increase goodwill. Know what questions I have and …
answer them, e.g., use FAQs.
Things that increase goodwill. Provide me with creature comforts like …
printer friendly pages. People like to print things out.
Things that increase goodwill. Make it easy for people to recover from …
errors.
Things that increase goodwill. When in doubt …
apologize. Sometimes you don’t have the resources to do everything that needs to be done.
508 refers to Section 508 of the 1988 Amendments to the Rehabilitation Act, which specifies
accessibility standards for information technology that must be met by any vendor that wants to do business with the federal government.