Don't Make Me Think
melinda@hilemanholdings.com Melinda Hileman Owner of Hileman Holdings, LLC 1 Hi, my name is Melinda Hileman, the owner of Hileman Holdings, the parent company of Hileman Design and Grounding Stones Jewelry. Hileman Design provides graphic design, web design, desktop publishing and public relations services, and with Grounding Stones Jewelry, I make and sell wire-wrapped stone jewelry. 2 Steve is a usability consultant with more than 20 years of experience as a user advocate for companies like Apple, Netscape, AOL and others. He has become a highly sought-after speaker on usability design since the first version of this book came out. “What’s the most important thing I should do if I want to make sure my Web site is easy to use?” Nothing important should ever be more than two clicks away? Speak the user’s language? Be consistent? 3 Krug’s First Law of Usability DON’T MAKE ME THINK! Self-evident, obvious and self-explanatory The user should be able to “get it” 4 Krug’s First Law of Usability is Don’t Make Me Think. If you only have room in your head for one usability rule, make it this one! Your pages should be self-evident, obvious and self explanatory. The user should be able to “get it” - what your page is and how to use it - without expending any e!ort thinking about it. 5 In the first example, as the user visits the page, he has a lot of questions. But in the second example, there are no questions - the user is able to easily digest the page and find the content they’re looking for. So, when you’re creating a site, it’s your job to get rid of the question marks. Things That Make Us Think 6 A lot of things on a Web page can make users stop and think unnecessarily, like names of things, and links and buttons that aren’t obviously clickable. As a rule, people don’t like to puzzle over how to do things. The fact that the people who built the site didn’t care to make things obvious - and easy - can erode a user’s confidence in the site and its publishers. So you can see in this first example, simple wording can help users find what they are looking for quickly. In the second example, making links obviously clickable is also important. Ways to do this would be to use conventions such as buttons or blue underlined text. What shouldn’t visitors have to think about? 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? 7 The last thing you need is another checklist to add to your stack of Web design checklists. The most important thing you can do is to just understand the basic principle of eliminating question marks. If you do, you’ll begin to notice all the things that make you think while you’re using the Web, and eventually you’ll learn to recognize and avoid them in the pages you’re building. How we really use the Web Scanning, satisficing, and muddling through We create sites as though people are going to pore over each page and weigh their options before deciding which link to click What they actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text and click on the first link that catches their interest or vaguely resembles the thing they’re looking for 8 When we’re designing pages, we tend to assume that users will scan the page, consider all of the available options, and choose the best one. In reality though, most of the time users don’t choose the best option - they choose the first reasonable option, a strategy known as satisficing; a cross between satisfying and su"cing. As the children’s riddle goes; “Why are things always in the last place you look for them? Because you stop looking when you find them.” Fact of Life: We don’t read pages. We scan them. 9 When we design pages, we see the text as “great literature” (or at least “product brochure”), while the user’s reality is much closer to “billboard going by at 60 miles an hour.” Here’s a fact of life - users don’t read pages, they scan them. Mostly because they’re in a hurry, users know they don’t need to read everything, and frankly, they’re good at it. 10 The net e!ect is like this Far Side Cartoon with Ginger and her owner. What users see when they look at a Web page depends on what they have in mind, but it’s usually just a fraction of what’s on the page. Like Ginger, they tend to focus on words and phrases that seem to match (a) the task at hand or (b) their current or ongoing personal interests. And of course, (c) the trigger words that are hardwired into our nervous systems, like our name, “Free,” “Sale,” and “Sex.” The net e!ect is like this Far Side Cartoon with Ginger and her owner. What users see when they look at a Web page depends on what they have in mind, but it’s usually just a fraction of what’s on the page. Like Ginger, they tend to focus on words and phrases that seem to match (a) the task at hand or (b) their current or ongoing personal interests. And of course, (c) the trigger words that are hardwired into our nervous systems, like our name, “Free,” “Sale,” and “Sex.” [...]... leaving isn’t the only possible negative outcome; they may just not be as eager to use your site in the future, or worse, they may think less of your client’s organization The Reservoir of Goodwill It’s idiosyncratic It’s situational You can refill it Sometimes a single mistake can empty it I’m out of here! 18 1: Some people have a large reservoir, some small Some people are more suspicious by nature;... going to look for it on your own instead of asking someone where they are You start looking at the department names, high up on the walls Tools or Lawn and Garden? Given that Sears is so heavily tool-oriented, you head in the direction of Tools When you reach the Tools department, you start looking at the signs at the end of each aisle When you think you’ve got the right aisle, you start looking at... a story underneath it, and that text underneath a picture is a caption that tells me what it’s a picture of All conventions start as somebody’s bright idea For instance, enough people are now familiar with the convention of using a metaphorical shopping cart on e-commerce sites that it’s safe for designers to use a shopping cart icon without labeling it “shopping cart.” 3: Dividing the page into clearly... department, or ask someone for help Eventually, if you can’t find what you’re looking for, you’ll leave This is as true on a Web site as it is at Sears You’ll leave when you’re convinced they haven’t got it, or when you’re just too frustrated to keep looking The overlooked purpose of navigation and breadcrumbs Helps users find what they’re looking for Tell users where they are Gives users something... people who built it 16 At Sears, I really only need to see the name on my way in; once I’m inside, I know I’m still in Sears until I leave But on the Web - where my primary mode of travel is teleportation - I need to see it on every page By this “it,” I mean obvious navigation and breadcrumbs The Reservoir of Goodwill Imagine that every time a user enters a Web site, they start out with a reservoir of... saw a product on TV, and I want to order it from this site I glance around the Home page There are a lot of links, pictures, and Flash videos I am feeling overwhelmed I look at the navigation I can’t find a link to order products, just a link that lists the products I go to the product list page I see a button that tells me to click it to order their products I click the button They don’t sell my item,... they can safely ignore, which often includes, sadly, the advertisements, which are a big source of revenue Billboard Design 101 Design Pages for Scanning, Not Reading Make it obvious what’s clickable Minimize noise 14 4 Since a large part of what people are doing on the Web is looking for the next thing to click, it’s important to make it obvious what’s clickable and what’s not 5 There are two kinds... Twitter’s Fail Whale That’s all, folks Closing comments by Steve Krug “Building a good Web site is an enormous challenge, and anyone who gets it even half right has my admiration.” “Please don’t take anything I’ve said as being against breaking ‘the rules’ - or at least bending them I know there are even sites where you want the interface to make people think, to puzzle or challenge them Just be sure... lemons You may be thinking, “Why don’t I just get a job at the local 7-11? At least there my efforts might be appreciated.” If your audience is going to act like you’re designing billboards, then design great billboards 11 Billboard Design 101 Design Pages for Scanning, Not Reading 12 Faced with the fact that your users are whizzing by, there are five important things you can do to make sure they see... traits: the more important something is, the more prominent it is; Things that are related logically are also related visually; and Things are “nested” visually to show what’s part of what 2: When reading a newspaper, we know that a phrase in very large type is usually a headline that summarizes a story underneath it, and that text underneath a picture is a caption that tells me what it’s a picture of