Don’t Make Me Think
Steve Krug’s book “Don’t Make Me Think” is considered a classic amongst UX Designers. This book is highly readable, and is an essential read if you’re in the field of designing products. In this summary, we’ll go through the least you can do today to make your website a lot more usable.
What does usability mean in web design?
If something is usable — whether it’s a web site, an app, a physical object, or a revolving door — it means that
A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth.
Krug’s first law of usability: Don’t make me think
As a rule, people don’t like to puzzle over how to do things. As far as humanly possible, your product should be self-evident, obvious and self-explanatory. Think of it this way: every question that your product raises adds to your user’s cognitive load, and makes it a little unlikely for them to be able to accomplish what they came for.
How we really use the web: by scanning, satisficing and muddling through
Much of our web use is motivated by the desire to save time. We scan pages instead of reading them for things that match the task at hand, personal interests, or hardwired trigger words (like Free!) We don’t choose the best option, we choose the first reasonable option (This is also known as satisficing). Nor do we take time to figure how things work — we just forge ahead and muddle through. While muddling through works, is efficient and error-prone, users will still leave for a better designed site.
Billboard Design 101, or, how to design for scanning, not reading
Now that we have a better idea of how people use the web, we can look into how to design for users that are whizzing by:
- Create a clear visual hierarchy that relies on prominence, grouping, and nesting of elements to provide cues.
- Stick to conventions unless you know you have a better idea and everyone you show it to agrees.
- Make obvious what is clickable on a page, and break up pages into clearly defined areas.
Krug’s second law of usability: Users like mindless choices
It doesn’t matter how many times we have to click, as long as each click is an easy choice. So be wary of arbitrary rules like “Everything should be two clicks away”.
Krug’s third law of usability: Omit needless words
This is how you can go about this: get rid of half the words on each page, then get rid of half of what’s left. Most of these needless words come in the form of happy talk — which is usually introductory text that is sociable but content-free. Another common culprit is instructions — eliminate them by making everything self-explanatory. Remember, users muddle through anyway.
How do people navigate web sites?
If you wanted to buy a chainsaw from a hardware store, imagine how you would go about doing this — you can either look through the store: there are aisles with department names on top, and within a department, there are signs at the end of each aisle; or you can find the nearest clerk and just ask them where they keep their chainsaws. It could be a mixture of the two as well — you may try to navigate a bit to see how easy it is, and if you don’t find what you’re looking for, you may ask a clerk. This has very strong parallels with how people use web sites: which brings us to two most important components: the Navigation, and the Search.
Why do we need Navigation?
Unlike our hardware store example, a website is not a physical space. This presents a few problems that make having good navigation necessary:
- Websites have no sense of scale
- Websites have no sense of direction
- Websites have no sense of location
Hence, when we want to return to something on a Website, instead of relying on a physical sense of where it is, we have to remember where it is in the conceptual hierarchy and then retrace our steps. This makes the home page, and a link to home page on navigation on every page extremely important — it’s the fixed north star that the users can return to if they get lost. In addition, navigation can tell us what’s in the website and how to use the site.
How to design Navigation?
Persistent navigation is the set of navigation elements that appear on every page, except maybe the home page and forms. They follow certain conventions, and unless we have a very strong reason not to, we should stick to them. Conventionally, a web page has the following:
- Site ID on top left: which site are you on?
- Utilities like “My Account”, “Track Your Order”, “Stores” etc.. Don’t put more than five of these — the rest should go in footer navigation.
- Sections on top: Actual way to get around various sections of the site, with an indication which section you are on achieved by highlighting the appropriate thing.
- Breadcrumbs: This is another set of “You are here” indicators, like highlighted section. Make breadcrumbs small and at the very top of a page, where they don’t interfere with the primary navigation. Best way to go about it: Use > between levels, and boldface the last item (the item you’re currently on, and since you’re on it, it’s not a link)
- A page name: Which page are you on? Every web page needs a name that matches the words clicked to get there. Also, it needs to be prominent, and in the right place: in the visual hierarchy of the page, it should appear to be framing the content that is unique to this page.
- Local navigation on left sidebar: Things at current level
- Footer Navigation: all other utilities.
- Tabs (optional): Tabs, when done right, are self-evident, hard to miss, and slick. An active tab should be a different color and physically connect with the space below it so it “pops” to the front.
Remember, one of the most crucial elements of navigation is a link to Homepage. This is usually served by the Site ID (logo). Make sure it’s not clickable on the Home itself, since it’s never a good idea to link to the same page.
How to design Search?
Very simply, make the search box a simple box with no options, but allow limiting the scope of the search on the page of results. Also, if scoping a search, add the word “for” so it reads like a sentence: “Search ___ for ___.”
How to know if you did a good job with the navigation: The trunk test
If you’ve been blindfolded and locked in the trunk of a car, and then dumped on a page somewhere deep in your website, are you able to answer these questions without hesitation:
- What site is this? (Site ID)
- What page am I on?
- What are the major sections of this site?
- What are my options at this level?
- Where am I in the scheme of things?
- How can I search?
What does your Home page need to do?
As quickly and clearly as possible, your Home page has to answer the five questions every user has in their head when they enter the 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 else?
- Where do I start if I want to search? if I want to browse? if I want to sample their best stuff?
How to get the message across?
There are three important places on the page where we expect to find explicit statements about the site:
The Tagline: Good taglines are clear and informative and explain exactly what your site or organization does. They are just long enough, but not too long, and convey differentiation and don’t sound generic. It helps if they are personable, lively, and sometimes clever.
The Welcome blurb: Make sure it’s not your company’s mission statement, but something that actually conveys what the site does.
The “Learn More”: Innovative products tend to require a fair amount of explanation. People have become accustomed to watching short videos on their computers and mobile devices, and are often willing to watch one on the Home page.
The book also has a pretty good section on Usability Testing, but we’ll cover that in the review of Steve’s other book Rocket Surgery Made Easy — which is all about Usability Testing.
Originally published at www.commonlounge.com.
This is #12 in a series of book reviews published weekly on this site.
