March 05, 2021

Don't Make Me Think by Steve Krug - Book Notes, Summary, Review

Reading Time: 15 mins

Don’t Make Me Think was a transformative reading experience for me. It boils down a lot of complex and indepth usability research and best practices into easy to understand advice with examples.

Read This Book On Amazon

---

Who Should Read This Book?

I would recommend this book to anyone interested or working in Usability design, Web design, and Web development.

There are lots of great insights and guidelines for creating websites, apps, and designs that are highly usable.

Even though this book is quite old now by technological standards, it still offers timeless advice and helpful examples.

I imagine a lot of designers would consider this book a staple to read to become a good designer. I’ve certainly seen and heard this book being recommended in lots of places.

---

How This Book Changed Me

There were a lot of things I already knew before reading this book.

With that said, I found that from reading this book I have new ways to explain these concepts. New mental models if you will.

The best example is the idea of the reservoir of good will.

I generally knew that if you annoy users enough with bad design choices that they’ll leave your site and never come back.

However, the way the author described this really clicked with me. A reservoir that can be emptied over time but can also be replenished.

This is something that I’ll consider from now on whenever I’m designing something new or performing a UI review.

Reading this book further highlighted the importance of frequent testing.

I certainly understand the need for testing and am a strong advocate for the process but it’s hard to find ways to make a case for it in a world where testing and usability aren’t considered important.

This book has given me renewed motivation to be a testing advocate and to test my own work early and often.

---

My Top 3 Quotes That Resonated With Me

“Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible.” p61

“This is what I call the Big Bang Theory of Web Design. Like the Big Bang Theory, it’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical.” p93

“Testing reminds you that not everyone thinks the way you do” p112

---

Book Notes

Chapter 1 - Don’t Make Me Think

• Something is classed as usable if a person of average ability can figure out how it works without too much difficulty.
• Steve Krug’s first law of usability is “Don’t Make Me Think!”
  • This should be in the back of your mind as you create designs and evaluate if they are usable or not.

“When you’re creating a site, your job is to get rid of the question marks.” p25

• Usability isn’t just black and white. There’s almost always a reason, however misguided, behind a usability issue.
• A user should never have to think about whether something is clickable or not.
• Every question a user has, adds to their cognitive load.
  • This can distract the user from carrying out their intended task.

Chapter 2 - How We Really Use The Web

• The majority of users are simply scanning through a web page to find what they’re looking for.
  • Users typically have a goal in mind and want to achieve it quickly.
  • As a result, there is a lot that the user doesn’t even pay attention to when scrolling.
  • You need to think of this scenario like a “billboard going by at 60 miles an hour”.
  • You can only perceive a very small amount of information in a short window of time.
• Most users will satisfice. This means they choose the option that is good enough rather than the best option.
  • Herbert Simon, an economist coined the term satisficing (a cross between satisfying and sufficing) in the 50s.
• Users never read the manual. Instead, they work through something to try and get it to work. Even though reading the manual would provide a clear path forward. This is the paradox of the active user.
  • All types of people are guilty of this, not just tech beginners
  • If we find a good enough method of working on something we tend to stick to that method because we know it works.

Chapter 3 - Billboard Design 101

• Design conventions are your friends - follow conventions or standard design patterns and don’t reinvent the wheel with each thing you design.
• Users have developed mental models as to how certain components of a web page should work:
  • We expect to see a logo on the top left of the screen and the primary navigation to be across the top or down the side of the screen.
  • We expect a shopping cart system to work in a specific way i.e. select your product, add a payment method, etc.
  • We expect to see standardized elements like icons for search, social media sharing etc.
• If you’re not planning on using an existing design pattern ensure either:
  • It’s so clear and obvious that there’s no learning curve
  • it adds so much value that it’s worth a small learning curve

“Innovate when you know you have a better idea, but take advantage of conventions when you don’t.” p41

• Clarity is more important than consistency
  • If you need to make something less consistent in order to make it a lot clearer, you can do this.
• Establish a clear visual hierarchy
  • This can be done with size, grouping, whitespace etc.
  • A clear visual hierarchy will clearly convey the structure of a page. This adds less cognitive load to the user.
• Don’t use the same font color for links and non-clickable headings.
• On a web page there are 3 different kinds of noise:
  1. Shouting
     • When everything is important, nothing is.
     • A lack of visual hierarchy can lead to everything seeming equally important
  2. Disorganization
     • When things aren’t grouped or placed logically on the page this can create a feeling of clutter.
     • Make use of a grid or similar design system to overcome this disorganization.
  3. Clutter
     • Pages with too much content on them look cluttered. It’s hard to find what you’re looking for among all of the content.
     • Make important decisions to remove any unnecessary content from pages to allow the most important stuff to stand out.
• Make content easy to scan
  • Use headings, a table of contents, visual separation of different sections, short paragraphs, bulleted lists.
  • Highlight key terms so they stand out to the reader.

Chapter 4 - Animal, Vegetable, Or Mineral?

“what really counts is not the number of clicks it takes me to get to what I want (although there are limits), but rather how hard each click is—the amount of thought required and the amount of uncertainty about whether I’m making the right choice.” p54

• Providing helpful information to the user should be (what’s this links or tooltips) :
  • Brief - the smallest amount of info that will help
  • Timely - is located in the right place for when it’s needed
  • Unavoidable - is designed in a way that makes it noticeable

Chapter 5 - Omit Needless Words

• The benefits of removing needless words:
  • It reduces the visual noise
  • It allows users to find content easily by making the page smaller

“Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible.” p61

Chapter 6 - Street Signs And Breadcrumbs

• Search-dominant users (term coined by Jakob Nielsen) will look for a search box as soon as they land on a web page.
• Link-dominant users will browse first and will only turn to search when they’ve exhausted all other options.
• The experience of browsing a website is missing some of the cues we rely on in the physical world to negotiate space:
  • There’s no sense of scale. You can’t look at a website and immediately discern how many pages it has.
  • There’s no real sense of direction. There’s no left, right, up, down. You could be anywhere on a website and not really know where you are.
• The home button is the guiding star for users navigating a website. It allows them to return home and start from scratch if they get lost.
• Clear and well thought out navigation is essential for users interacting with sites.
  • Done well, it creates a positive and lasting impression on the user.
  • Done poorly, users will leave and never return.
• Persistent navigation (navigation that appears on every page of a site) should have these elements:
  • Site ID
    • It represents the whole site. Often is a link to the homepage.
  • Sections
    • aka primary navigation - the top level links to the main sections of the website
  • Utilities
    • links to important elements outside of the content hierarchy
    • e.g. sign in, contact, shopping cart etc.
  • Search
    • Every page should have a search box or at the very least at link to a search page.
    • Use the word “Search” and don’t try and come up with a fancy word.
    • Use the word “Go” as the action button.
  • Less frequently used items should be placed in the footer of each page.
• You don’t need persistent navigation for filling in complex forms, registering, subscribing etc. For these pages, consider a minimal navigation menu.

“Breadcrumbs show you the path from the Home page to where you are and make it easy to move back up to higher levels in the hierarchy of a site.” p84

• They are like the trail of crumbs Hansel and Gretel used to find their way back home.
• Guidelines for using breadcrumbs:
  • They should be at the top of the page so they can easily be seen
  • Use > between levels to suggest forward motion down through the levels
  • Ensure the last item is Bold and isn’t a link - this is the page you’re currently on.
• Guidelines for using tabs:
  • Tabs have to be designed to create the illusion that the active tab is in front of the other tabs
  • The active tab needs to be a different color and has to physically connect with the space below it.
• The Trunk Test
  • This test is used to determine the effectiveness of a website’s navigation.
  • A user is dumped onto a random page on the website and needs to establish:
    • What the site is (Site ID)
    • What page they’re on (Page Name)
    • What are the major sections of the site (Sections)
    • How can I search?

Chapter 7 - The Big Bang Theory Of Web Design

“This is what I call the Big Bang Theory of Web Design. Like the Big Bang Theory, it’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical.” p93

• You have less than a second to make a good first impression on users or they’ll leave your site.
• Not all users will first access your website via the home page. With this in mind, it’s important to ensure your navigation can orient them properly and immediately.

Chapter 8 - The Farmer And The Cowman Should Be Friends

• A common pitfall is to think that most users are like us
• The myth of the average user - there is no average user
• All users are unique and use the web in their own way

“it’s not productive to ask questions like “Do most people like pull-down menus?” The right kind of question to ask is “Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?” And there’s really only one way to answer that kind of question: testing.” p108

Chapter 9 - Usability Testing On 10 Cents A Day

“People often test to decide which color drapes are best, only to learn that they forgot to put windows in the room.” p110

• Focus groups are not usability tests
  • Usability tests require you to observe people actually interacting with a web page instead of just talking to them.

“Testing reminds you that not everyone thinks the way you do,”p112

• A very simple test upfront is more valuable than a comprehensive test done later.

Chapter 10 - Mobile - It’s Not Just A City In Alabama Anymore

• Design is made up of constraints (things you have to or shouldn’t do) and tradeoffs (choices you must make that aren’t ideal)
• Constraints can be a positive. They can allow you to work in a more focused way.
• Mobile design is about making good tradeoffs.
• The Mobile First approach to design is where you design the mobile version of a site and then expand it into the desktop version.
  • This approach allows you to make the hard decisions upfront in terms of what’s essential and what’s not.
• Affordances are visual cues that offer guidance as to how we might use it. - This concept is referenced in the book The Design Of Everyday Things by Don Norman
  • An example of an affordance the way a button is designed. A button can be styled in such a way as to indicate it can be clicked on. Things like drop-shadows, hover effects etc. add to this.
• It’s important to remember that there is no hovering on mobile.
  • Things like button hovers, tooltips etc. won’t provide the same affordances to users who are on mobile devices.

Chapter 11 - Usability As Common Courtesy

• The reservoir of goodwill is a concept to describe the amount of enthusiasm or motivation or good will a user has for interacting with your site.
• As a user runs into issues with a website, their reservoir of good will reduces.
• Once the reservoir of good will runs out, the user leaves and never returns!
• It is possible to refill the reservoir with positive design choices etc.
• On the other hand it is possible for a single negative thing to empty the reservoir.
• Things that lower the reservoir of good will
  • Hiding information the user is looking for e.g. phone numbers, prices
  • Punishing the user for not working the way you think they should. e.g. filling in credit card numbers, phone numbers.
  • Asking for unnecessary information
  • An amateur looking site
• Things that increase the reservoir of good will
  • Make information easy to find
  • Save steps wherever you can
  • Make information easy to understand
  • Answer any questions that a user may have (with FAQs perhaps)
  • Make it easy to recover from errors - see Usability Heuristics

Chapter 12 - Accessibility And You

• The best way to ensure website accessibility is to test and test often. This will allow you to find any issues or things that need to be improved.
• Add an alt text description to every image
• Use headings correctly to convey hierarchy

Chapter 13 - Guide For The Perplexed

• Don’t put labels inside of form fields where placeholders are.
  • These will disappear when you start typing into them so if you forget what the field is you have to clear out the text in order to see the label.
  • Preserve the distinction between visited and unvisited links.

---

Book-Notes