This is a book about design and usability principles that even today, several years after its first edition (2000), is still current. Steve Krug introduces the way we human beings interact with systems and our common attitudes toward websites. This is a practical tool to build better experiences on the web.
Krug introduces his first law of usability: “Don’t make me think”. He says that if someone wants their website to be easy to use, before click count, language use, and consistency, the most important is not adding load to the cognitive workload of users.
According to this, a website should be self-explanatory and self-evident, meaning that users should understand what it is and how to use it without a major effort.
🔵The main goal when building a website should be for each page to be self-evident.
“Usability really just means making sure that something works well.”
“Visitors to a site shouldn’t spend their time thinking about, like: Where am I? Where should I begin? Where did they put _____? What are the most important things on this page? Why did they call it that?”
“If web pages are going to be effective, they have to work most of their magic at a glance.”
In this chapter, the author points out three major behavioral patterns related to the use of websites. These three patterns stem from the fact that “much of our web use is motivated by the desire to save time,” therefore we scan pages, we don’t make optimal choices and we don’t take enough time to figure out how things work.
🔵Fact of life #1: We don’t read pages, we scan them. As the author says, people tend to focus on words that match their tasks at the moment, personal interests, and trigger words.
🔵Fact of life #2: We don’t make optimal choices. We satisfice. Since we are usually in a hurry, we prefer to choose the first reasonable option instead of taking time to evaluate all the options.
🔵Fact of life #3: We don’t figure out how things work. It is a fact that people that like reading instructions are a minority, instead, people prefer to try things out and see if it works for them.
“Why do we scan? We’re usually in a hurry. Much of our web use is motivated by the desire to save time. As a result, web users tend to act like sharks: they have to keep moving, or they’ll die. We just don’t have the time to read any more than necessary.”
“What we see when we look at a web page depends on what we have in mind, but it’s usually just a fraction of what’s on the page.”
“Most of the time we don’t choose the best option, we choose the first reasonable option, a strategy known as satisficing. As soon as we find a link that seems like it might lead to what we’re looking for, there’s a very good chance that we’ll click it.”
Following up with the idea that people visit websites with specific objectives in mind in a hurry, Krug proposes five guidelines to “make sure they see -and understand- as much of your site as possible.”
🔵Pages with a clear visual hierarchy have three traits: (1) the most important headings are clearly recognizable; (2) Things that are logically related are also visually related; (3) Things are visually “nested” to show what’s part of what.
🔵Conventions allow users to navigate a website with low effort. They are widely recognized due to newspapers and printed communications.
🔵Defined areas and sections within websites help users achieve faster their objectives, when sections are clearly organized it is easier for users to know where to focus their attention.
🔵According to Krug, there are two kinds of noise in a website: (1) bussy-ness, when we don’t know where to focus our attention because everything seems to deserve it; and (2) background noise, almost always it is some visual details that don’t allow us to fully concentrate in what is important.
“We want editorial guidance in web sites, the same way we want it in other media. The publisher knows better than anyone which pieces of the site’s content are most important, valuable, or popular, so why not identify them for me and save me the trouble?”
“When you force users to think about something that should be mindless like what’s clickable, you’re squandering the limited reservoir of patience and goodwill that each user brings to a new site.”
In this chapter, the author points out why users like mindless choices. As per Krug’s second Law of usability “It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”
“The point is, we face choices all the time on the web and making the choices mindless is one of the main things that make a site easy to use.”
Krug starts this section with his third law of usability “Get rid of half of the words on each page, then get rid of half of what’s left.” Then, he points out some of the benefits of excluding unnecessary words:
🔵“Happy talk must die”, these introductory texts that welcome us to the site or tell us what we are going to see in the section
🔵“Instructions must die” according to Krug, the main thing about instructions is that “no one is going to read them”.
“[Happy talk] is as if a book publisher felt obligated to add a paragraph to the table of contents page saying, “This book contains many interesting chapters about _____, _____, and _____. We hope you enjoy them.”
A well crafted navigation system is critical for usability. As Krug says “navigation isn’t just a feature of a website; it is the website.”
Site ID: is like the building name for a web site.
Sections and subsections: sections are the primary navigation, the links to the main sections of the site, the top level of the site’s hierarchy.
Utilities: links to important elements of the site that provide help to use the site or can provide information about its publisher.
Breadcrumbs: show the path from the Home page to where you are.
Persistent navigation: is the set of navigation elements that appear on every page of a site, (except on home page and forms) this should include five main elements:
🔵The main four purposes of navigation are: (1) It gives us something to hold on to; (2) It tells us what’s here; (3) It tells us how to use the site; (4) It gives us confidence in the people who built it.
🔵On pages where a form needs to be filled in, the persistent navigation can sometimes be an unnecessary distraction.
🔵The name of the page where I arrive should match what I clicked to get there. This means: Comfort, trust, no thought required.
“Conventions have evolved over time like street signs, page numbers, and chapter titles. The conventions specify (loosely) the appearance and location of the navigation elements so we know what to look for and where to look when we need them.”
“Given the potential power of searching and the number of people who prefer searching to browsing, unless a site is very small and very well organized, every page should have either a search box or a link to a search page.”
“Page names are the street signs of the Web. Just as with street signs, when things are going well I may not notice page names at all. But as soon as I start to sense that I may not be headed in the right direction, I need to be able to spot the page name effortlessly so I can get my bearings.”
Designing the home page is a critical step within the web design process. Krug provides insightful advice about the content and structure of the main page of a website.
According to the author, the main “abstract objectives” of the home page are: (1) To show users what they are looking for; (2) To show users what they are not looking for; (3) To show users where to start; and finally (4) to establish credibility and trust.
According to the author, several pieces should be included in the home:
🔵The Home page should answer the four questions visitors have in their head when they enter a new site for the first time: What is this? What do they have here? What can I do here? Why should I be here and not somewhere?
“The one thing you can’t afford to lose in the shuffle— and the thing that most often gets lost— is conveying the big picture. (…) They haven’t made it clear enough what the site is.”
The subtitle of this chapter is “Why most web design team arguments about usability are a waste of time and how to avoid them”. Web teams are interdisciplinary, with diverse opinions and interests, so it is important to observe and listen to users and learn about their intentions, motivations, and thought processes in order to take this complexity into account during arguments.
🔵Testing with real users moves the team’s arguments into the realm of what really works or doesn’t work.
“All web users are unique, and all web use is basically idiosyncratic”
The complexity of usability testing shouldn’t prevent teams from conducting testing frequently enough, since this is critical to build a usable and useful user experience.
In a usability test, a website, a prototype, or some sketches of individual pages are shown to a user, then they should be asked to either (a) figure out what it is, or (b) try to use it to do a typical task.
Typical problems found thanks to usability tests:
🔵Focus groups are not usability tests, they should be conducted early in the design process to quickly get a sampling of users’ opinions and feelings.
🔵The point of testing is not to prove or disprove something. It’s to inform your judgment.
🔵In most cases, the ideal number of participants for each round of testing is three or four. It is necessary to conduct various rounds of testing.
🔵Test and debriefing on the same day is a recommended practice. It is useful to communicate testing findings in a meeting, and at the end get to agree on which problems to solve (triage) and the ways to fix them (problem-solving).
🔵Before even beginning the design process, you should be testing comparable sites from competitors or sites with comparable features, and perform two kinds of testing: “Get it” testing and key tasks.
🔵When people perform tasks that they have a hand in choosing there is an emotional investment and they can use their personal knowledge, so it is likely to obtain more revealing results.
“Testing reminds you that not everyone thinks the way you do, knows what you know, uses the web the way you do.”
“Testing only three users helps ensure that you will do another round soon. 3 Also, since you will have fixed the problems you uncovered in the first round, in the next round it’s likely that all three users will uncover a new set of problems”
“For most web teams their ability to find problems greatly exceeds the resources they have available to fix them, so it’s important to stay focused on the most serious problems.”
“Why should your website be a Mensch (a person of integrity and honor)”. For Krug, sites should “behave like a Mensch” in order to preserve the goodwill of users. In this chapter, things that diminish and increase the user’s goodwill are introduced.
(Sometimes it makes business sense not to do exactly what the customer wants)
“What are the three main things your users want to do on your site?”
“Frequently Asked Questions lists are enormously valuable, especially if they really are FAQs, not marketing pitches masquerading as FAQs (also known as Questions We Wish People Would Ask).”
There’s really only one reason why accessibility is important: It’s the right thing to do. Start making accessible websites may be easier than expected. According to Krug, there are five things anyone interested can do right now to build accessible experiences.
#1 Fix the usability problems that confuse everyone.
#3 Read a book: Building Accessible Websites by Joe Clark.
#4 Start using Cascading Style Sheets
#5 Go for the low-hanging fruit: Add appropriate alt text to every image. Make your forms work with screen readers. Create a “Skip to Main Content” link at the beginning of each page. Make all content accessible by keyboard. Use client-side (not server-side) image maps.
“You really can’t say your site is usable unless it’s accessible.”
“Screen-reader users scan with their ears listening to just enough to decide whether to listen further. Many set the voice to speak at an amazingly rapid rate.”