PDF Summary:Don't Make Me Think, by Steve Krug

In our increasingly digital world, bad web design isn't just annoying for users—it can derail a company’s business strategy. In Don’t Make Me Think, user experience (UX) consultant Steve Krug breaks down how to design a digital experience that delivers everything users want and more. Above all else, users want the websites they visit to be intuitive—they want to be able to navigate quickly, without thinking hard. Designing your site with this goal in mind leads to sleek, efficient user interfaces that keep visitors happy and engaged.

In this guide, you’ll learn how to design webpages that naturally direct the eye toward important content and how to identify your site’s areas for improvement by conducting user tests. In our commentary, we’ll expand and update Krug’s advice with tips from other UX design experts. We’ll also consult business books like Dotcom Secrets and Building a StoryBrand to explain how to create a profitable website.

(continued)...

Tip #3: Use Breadcrumbs to Tell Users Where They Are

To keep users oriented throughout this multilevel structure, Krug suggests using “breadcrumbs.” Breadcrumbs are a visual depiction of the chain of pages the user has taken to get from the home page to the current page. This helps users understand at a glance their position in your website’s hierarchy and easily backtrack to previous pages. For instance, if a user is reading an article about a recent corporate merger, there might be breadcrumb text under the headline that reads “Business > Leadership > BlueCorp Acquires RedCorp.”

The term “breadcrumbs” references the fairy tale of Hansel and Gretel, in which the children venture into the woods and leave a trail of crumbs to find their way home.

(Shortform note: Although the vast majority of English-speaking designers refer to this navigational convention as “breadcrumbs,” French-speaking designers typically call it a fil d’Ariane, or Ariadne’s thread. This name references the Greek myth in which the hero Theseus uses a thread from the goddess Ariadne to navigate his way backward out of a labyrinth after he kills the Minotaur inside.)

Should You Include the Current Page in Your Breadcrumbs?

Experts note that in some cases, including the title of the current page in your breadcrumbs can be confusing. Since most breadcrumbs serve as links for backtracking to previous pages, users might click on the current page’s breadcrumb and fail to understand why it doesn’t take them anywhere.

To prevent this confusion, you might omit the last breadcrumb. For example, the previously mentioned news site might limit their breadcrumbs to “Business > Leadership” because the headline “BlueCorp Acquires RedCorp” clearly indicates the current page.

However, this solution sometimes creates further confusion: If the breadcrumbs are too far away from the heading, leaving out the current page might fool readers into thinking that the breadcrumb for the previous page is the page they’re on. Thus, only omit the final breadcrumb if the breadcrumbs are adjacent to the page title, so it’s obvious what the current page is.

How to Make Individual Pages Intuitive

Now that we’ve covered how to structure a website, let’s explore three tips for designing individual pages that are easy for users to navigate and understand.

Tip #1: Create Visual Hierarchies

Recall Krug’s assertion that users navigate web pages by quickly scanning them for whatever information and links that will help them accomplish their goals. If you want your web pages to be intuitive, make this scanning process as easy as possible. To do this, Krug recommends creating effective visual hierarchies: designs that determine the order in which users scan the page.

Typically, some elements on a web page are more eye-catching than others. Ideally, visual hierarchies draw the user’s eye to the most important elements on the page, or the elements that the user is most likely looking for. The most important content on the page is the most visually dominant, the next most important content is slightly less visually dominant, and so on. To attract attention, use visual cues like large size, striking colors, and cushions of negative space.

Additionally, in an ideal visual hierarchy, the composition of the page reflects the logical relationships between various elements. For example, on an online marketplace, all the information related to a given product might be tightly grouped directly under an image of the product. This helps users understand the page more quickly, which makes it easier to scan.

Krug notes that text headings should be major focal points in your visual hierarchy. If you use large headings at the beginning of every section of your site, readers can quickly skim them to find out which sections they need to read and which they can ignore. Using headings frequently also helps you split up massive text blocks into more easily digestible chunks. Generally, readers prefer reading shorter paragraphs.

(Shortform note: If you’re trying to convince users to read specific sections—for instance, if you’re selling something and want to pitch your product—it’s vital to make your headings as compelling as possible. For instance, write headings that tell users specifically how you can improve their life. Keeping the sections under your headings short, as Krug recommends, can also help persuade users to read them, given readers’ preference for short blocks of text.)

More Tools for Designing Visual Hierarchies

Size, color, and negative space aren’t the only tools you can use to design a visual hierarchy. One useful tool is the “F-pattern” and “Z-pattern.” Eye tracking studies have found that users typically scan a new page in one of two patterns: Their eyes trace an “F” across the page or a “Z.” By placing your most important elements along the F- or Z-pattern, you reinforce this natural flow of attention and help users instantly find what they’re looking for as they scan.

Another way you can draw attention to important elements is by placing them out of alignment with the rest of the page: Elements that stick out tend to draw the eye. Additionally, detailed textures (like a font that’s beveled or colored like wood grain) are more eye-catching than flat ones. You can also use tools like these to further reinforce the logical relationships between elements, making your pages easier to understand. For example, if you’re designing an online fast food menu, you could indent your vegetarian options to indicate that they’re different from the other options.

Tip #2: Give Users What They Expect

Krug asserts that you can make your web pages more intuitive by modeling them after standard website layouts. By placing your search bar, page titles, and other design elements in places where users expect to see them, you can increase the likelihood that users will instantly understand how to use your website.

Krug recommends prioritizing this kind of clear standardization over aesthetic or creative considerations. You may be tempted to show off your clever ideas by designing innovative, unusual web pages. However, if these idiosyncrasies make your website more difficult to instantly grasp, they can drive users away.

(Shortform note: You may be able to create designs that break from convention yet feel intuitive using biomimicry. Biomimicry is the practice of taking inspiration from nature to solve design challenges. For instance, the inventor of Velcro modeled his design after sticky burdock seeds. In web design, you could use this strategy to create designs that users have rarely seen on websites but have been proven to be intuitive in the real world. For example, you could model your website’s navigation after the behavior of ant colonies by writing a code that automatically makes users’ most common paths through your site more visually prominent (like ants laying down pheromones to mark a path for other ants to follow).)

Sometimes, however, your website will be unique enough that users won’t instantly know how to navigate it. In these cases, Krug recommends adding design elements to nudge users in the right direction. Make these nudges as short and unobtrusive as possible, and ensure that users see them at the exact moment they need them. For example, on an online marketplace with an unconventional layout, there could be a short tutorial that pops up the first time a user visits the site that forces them to click through its main product categories.

(Shortform note: It can be challenging to design nudges that are useful for all your users. If they’re too unobtrusive, new users might not be able to find them; but if they’re too prominent, they can distract and annoy experienced users who don’t need them. With this in mind, design your nudges to be clearly visible on screen, but subtle—for instance, use a slightly faded question mark symbol in the corner of the screen to trigger a brief tutorial. This way, confused novices can notice them and experts can ignore them as they blend into the background.)

Tip #3: Keep It Simple

Krug also recommends keeping your web design simple: On every page, include as little text and as few design elements as possible.

Krug argues that most web pages use too many words that users are unlikely to read, making each page seem more daunting and cluttered than necessary. Eliminating unnecessary words not only makes it easier for the user to skim everything on the page, but it also ensures that the remaining information is all useful to the user.

(Shortform note: In Building a StoryBrand, Donald Miller argues that the most common mistake that businesses make with their websites is including too much informational clutter. To avoid overwhelming users with too many words, he recommends replacing text with images. Pictures of happy people using your product are the most effective. Additionally, write in soundbites rather than full sentences. For example, instead of writing “Our spa offers a premium luxury experience including a wide variety of treatments,” write “Experience luxury.”)

One type of unnecessary text that Krug advocates cutting is friendly fluff: Many websites waste time welcoming users to the website or describing all the valuable content they’re about to discover. This kind of text is useless to the reader and is more often annoying than comforting.

(Shortform note: How do you make your website seem friendly without annoying users with friendly fluff? Mirror the way people naturally speak. Use simple, casual language. Additionally, use a lot of personal pronouns like "you" and "we." For example, the home page of an online study guide for students might say “We're the study buddy you've been waiting for.”)

More broadly, Krug suggests reducing the visual busyness of your web pages as much as possible. Ideally, the only elements the user should see are those that are directly and immediately useful to them. Anything else on the page—such as autoplaying videos or animated advertisements—will only make it harder for users to focus on what’s important.

(Shortform note: Although it seems like common sense that less visually busy websites are easier to use, it took time for designers to embrace the power of visual minimalism. In the early 2000s, the Nielsen Norman Group, a UX research and consulting firm, found that users “overwhelmingly” criticized popular online interfaces as “busy.” It took many years for visual minimalism to become the norm. Two major minimalist UX redesigns that contributed to this shift were Microsoft’s launch of Windows 8 in 2011 and Apple’s iOS7 update to their mobile devices in 2013.)

How to Design UX for Mobile

Next, let’s explain how to design UX for mobile devices. While the basic principles of UX design remain the same, the mobile format presents some unique problems. Here are a couple of the major differences between designing for mobile and desktop.

Difference #1: Much Smaller Screen

Krug contends that one of the primary challenges of designing for mobile is the limited screen size: Designers must find a way to keep their website fully functional when far fewer elements can fit on the screen at any given time. To do this, identify your website’s core functions that users need frequently, and make them quickly accessible from your mobile home page.

Other helpful functions may need to be pushed further away from your home page than they normally are. With a mobile-size screen, this is unavoidable. This isn’t an issue, as long as the path to these functions is clear. Contrary to popular belief, Krug contends that users don’t mind spending a little time tapping (or clicking) through multiple pages—as long as each new page makes it clear that they’re getting closer to their goal.

For example, on a restaurant's mobile website, the home page might prominently feature a button to "Order Takeout" and a search bar to find menu items, as these are likely the two most common tasks for mobile users. Other less essential functions like reservations or catering could be buried deeper in the site structure. However, a user making a reservation won’t be frustrated if they have to click “See More,” then “Dine In” and “Make a Reservation,” since each link is getting increasingly specific to their situation.

(Shortform note: The number of pages users are willing to navigate through in search of their goal depends on a wide variety of factors. For instance, if users are more familiar with your brand or the topic of your website, they’ll click through more pages because they’re more confident that they’ll quickly find what they’re looking for. By this logic, if your website’s content will be unfamiliar to many of your users—say, if your site breaks down the rules to a complex board game you invented—you may need to structure your site in a way that requires fewer clicks.)

How to Create Mobile Websites Users Can Find

Optimizing your website for mobile devices is more important than ever before. In 2023, Google finished transitioning to mobile-first indexing for almost all sites. This means that Google primarily judges the mobile version of websites to determine whether your site will appear after someone does a Google search. Google made this transition because mobile devices have become the most common way that people access the web. Because of this, creating the best possible mobile experience for users is necessary to drive traffic to your site.

To ensure that your site works on smaller screen sizes, Krug recommends making its core functions quickly accessible from your mobile home page. But be careful: In following this advice, you might redesign your desktop site for mobile devices by removing some less important features from your home page. If doing so causes the mobile and desktop versions of your website to be significantly different, Google will penalize your site by making it less prominent in searches.

Instead, Google recommends retaining all the same desktop content on your mobile site and hiding it with tools like accordions—headers you can click on to reveal more content—to retain a minimalist user experience.

Difference #2: Slower Load Times

According to Krug, designers for mobile also have to contend with the fact that mobile devices generally have slower load times, as they typically download your site from a mobile network rather than Wi-Fi. If your website is too slow on mobile, users may get annoyed and leave. Be careful not to overload your mobile site with unnecessary code or oversized images that hamper users’ ability to quickly get what they want from your site.

(Shortform note: To minimize the downsides of slow mobile load times, strategically design your pages to load the most important content (such as headings, text, and important images) first. This way, users can digest content on your new page while waiting for large interactive or decorative elements to load, creating a more seamless navigation experience.)

How to Improve Your Website’s UX

Krug believes that if you want to deliver the best possible user experience, it's crucial to continually test and optimize your website design. Let’s explain what these UX tests should look like, how to run them, and how to work them into your schedule.

What’s a UX Test?

In a UX test, you observe individual users attempting to accomplish typical tasks with your website to identify potential points of confusion or frustration. According to Krug, UX testing is an invaluable way to improve your website. Testing helps you identify specific design elements that do or don’t work.

How to Run a UX Test

Krug explains that you need very little to conduct a UX test—just a quiet room with a computer and internet access. One person facilitates the test by prodding the participant to explain their thought process as they accomplish a set of tasks while navigating your site. Getting inside your user’s head like this will help you diagnose issues with your website that may not be obvious to you or other team members who are too close to the problem.

The testing process itself is simple: Welcome the user and make them feel comfortable, have them open your home page and complete a few assigned tasks on your site, then ask them questions to clarify anything they did that you don’t fully understand. By the end, you should have a list of specific ways that your website is confusing or inefficient, giving you direction on how to improve it.

When Should You Run a UX Test?

Krug suggests starting to test as soon as possible and then continuing throughout the website-building process. The earlier you diagnose issues through testing, the easier it is to make major changes if necessary since your website is less set in stone.

Conduct UX tests once a month. According to Krug, this keeps the testing manageable enough to fit into your schedule yet frequent enough to regularly identify and fix issues over the course of the project. These monthly tests shouldn’t take longer than a single morning. After each test, meet with your team to prioritize the most critical issues to address before the next round of testing.

How to Run Unmoderated UX Tests

While Krug asserts that the best way to test users is to personally draw insights from them as they navigate your site, unmoderated UX tests are a popular alternative. In these tests, participants complete a set of tasks on your website by themselves while you record their actions and decisions, then they answer questions about their experience. Instead of walking participants through the process, you send it remotely and allow them to complete it on their own time.

Since unmoderated tests don’t require human intervention, you can conduct many at once, making them helpful if you need a large quantity of feedback or if you want to collect data on a wide range of demographics. That said, it may be more difficult to identify complicated issues with your website, since you won’t be there to ask specific questions and help users articulate which elements aren’t working well.

Unmoderated usability tests are valuable at any point in the development process, but they’re typically conducted later on. Since no one will be there to guide participants, unmoderated tests work best when you have a near-complete, usable product rather than an early prototype, which may require more explanation to navigate.