A Classic for UX Best Practices

A Review of Don’t Make Me Think Revisited: A Common Sense Approach to Web and Mobile Usability by Steve Krug, with a Compiled List of Do’s and Don’ts Tips

Usability Consultant Steve Krug revisited his classic Don’t Make Me Think in the advent of mobile. Krug found that his basic principles still held true in 2014 even if the landscape had changed because usability is not about technology, but rather about people and how they understand and use things.

More specifically, Krug assigned three attributes to usability: it is learnable, it is effective and it is efficient. For a website or app to be usable, a person of average to below average ability and experience can figure out how to use it (learnable) to accomplish something (effective) without expending more time and effort than it’s worth (efficient.)


USE EXISTING WEB CONVENTIONS

For a design to work it has to be self-evident. One of your jobs as a designer and/or content creator is to answer all potential questions for the user. Questions add to a user’s cognitive workload and only serve to frustrate and distract from a given task. Krug recommends the use of standard web conventions to satisfy user expectations on: where things are located on a page, how things will work and how things should look.

Content creators should question their decisions to add clever marketing speak or company-specific terms when they need to orient and direct the user. Designers should question their decisions to “reinvent the wheel” for the sake of offering something new and different. If you are going to innovate, Krug cautions, it’s best to understand the value of what you’re replacing.   

Valuable Conventions

  • Persistent navigation on every page that contains the logo in the top left corner that links back to the homepage, a main menu section that indicates current location, utilities and a search function
  • Visual cues for interactivity like buttons, tabs, menus and text formatted with a bright color or an underline
  • Universal icons

 

NAVIGATION

Krug splits users into the borrowed categories of “search-dominant” vs. “link-dominant”. Search-dominant users immediately look for a search function after entering a site. Krug maintains that access to a search function belongs on every page, given the power of searching and the number of users who fall into the search-dominant category.

Link-dominant users tend to browse first. These users need to immediately understand three things from a page’s navigation: their current location in the sitemap, how they can use the site and how they can quickly find what they’re looking for. All pages need prominent names that closely match what the user just clicked to enter the site. These page names should also speak to the page’s function.


MAKE WEB PAGES WORK AT A GLANCE

Users don’t read, they scan. Even exceptions to this rule, such as news reports and product information, often have the user alternating between scanning and reading. Krug states that this behavior is one of few well-documented facts about web usability—so it is imperative that web teams design for high-speed intake.

Users that enter a site via the homepage need to see the “big picture” right away. A company’s identity and mission need to be conveyed so users know what the site is and what it’s for. Krug suggests a tagline as an efficient way to state a purpose as opposed to a wordy mission statement that no one will take the time to read.


CREATE A CLEAR VISUAL HIERARCHY & FORMAT FOR QUICK READABILITY

Brevity is better! Krug encourages writers to omit needless words and keep paragraphs short. Once content is honed, it should be broken up into clearly defined areas that form a hierarchy. The more important something is, the more prominent it should be. Related information should be either styled similarly or grouped together and nested.

Use headlines that are assigned css styles from <H1> down to <H6> so that they show an information outline for the user at a glance—also best practices for SEO. Visually break up sections of paragraph copy with highlighted key terms, bulleted lists and callouts. All hyperlinks need to be obvious to the user.


TESTING

Krug highly encourages web teams to conduct usability testing at least once a month. He even devotes a chapter to step-by-step instructions for cost-effective user testing with three participants and site stakeholders.

Usability testing can uncover typical problems, such as:

  • Users don’t understand what a site is or what to do with it
  • The words they are looking for aren’t there
  • There is too much going on, content needs to be paired back and/or visual hierarchy needs to be better enforced

Frequent usability testing can put an end to the frustrating debate over what the “Average User” likes and dislikes. In Krug’s many years of direct observation, he found that all users are unique and their web use is idiosyncratic; the Average User is a myth. Usability testing shows, beyond subjectivity, what works and what doesn’t.

Don’t Make Me Think Revisited is a straight-forward approach to basic UX principles that follow common sense and best practice. While it is a must read for beginners, today’s veteran web teams may find the advice either dated or too obvious. Still, the book is a timeless reminder for what was proven to work — and why that needs to be the measure of success.

 

A Compiled List of Do’s and Don’ts Tips


CONTENT STRATEGISTS

Do create wireframes that make use of standard web conventions

Do omit needless words and keep paragraphs short

Do give every page a name that matches its menu equivalent

Do use headlines and bulleted lists to enable scanning

Don’t diminish the good will of users inadvertently by:

  • asking for any personal information that isn’t necessary
  • hiding information like customer support numbers, shipping rates and prices
  • hiding checkboxes that are selected by default

If you have to make these sorts of moves, at least be informed of the full impact. Not only will users potentially leave your site, but they may also think less of your company brand.

 

DESIGNERS

Do create strong visual hierarchies

Do make links and buttons immediately recognizable

Do provide a branded experience with the proper stylistic tone

When using flat design, Do compensate for the dimension that is lost

Don’t use small, low-contrast type

Don’t use labels inside form fields

Don’t float headers between paragraphs

 

DEVELOPERS

Do preserve the distinction between visited and unvisited text links

Do provide printer-friendly pages that include images like photos and illustrations but not advertisements

When it comes to accessibility, Do grab low-hanging fruit at the very least:

  • Add appropriate alt text to every image
  • Tag headlines correctly
  • Make your forms work with screenreaders
  • Put Skip to Main Content links
  • Make all content accessible by keyboard

Don’t punish the user for formatting (dashes on social security numbers, parenthesis on phone numbers, spaces on credit card numbers.)