Don't Make Me Think - Meetup

25 downloads 126 Views 1MB Size Report
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 ...

Melinda Hileman Owner of Hileman Holdings, LLC

mel in [email protected] ilem a nh oldi ngs .c om

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 effort 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 sufficing. 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 effect 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 effect 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.”

If life gives you 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 - and understand - as much of your site as possible. The net effect 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.

Billboard Design 101 Design Pages for Scanning, Not Reading

Create a clear visual hierarchy on each page Take advantage of conventions Break pages up into clearly defined areas

13

1: Pages with a clear visual hierarchy have three 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. 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 defined areas is important because it allows users to decide quickly which areas of the page to focus on and which areas 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 of noise; busy-ness, where many things are clamoring for a user’s attention and they have to figure out what to focus on; and background noise, where it’s like being at a social cocktail party; no one source of noise is loud enough to be distracting by itself, but there are a lot of tiny bits of visual noise to wear us down. Some people have no problem with busy pages and background noise, but many do.

Street Signs

People won’t use your Web site if they can’t find their way around it!

15

People won’t use your site if they can’t find their way around it. Let’s say you’re headed to the mall to buy a chainsaw. As you walk into Sears, you think “Hmm. Where do they keep chainsaws?” As soon as you’re inside, you decide that you are 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 the individual products. If it turns out you guessed wrong, you try another aisle, may back up and start over again in the Lawn and Garden 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 to hold on to Tells users what’s here Tells users how to use the site Gives users confidence in the 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 goodwill. Each problem they encounter on the site lowers the level of that reservoir.

I enter the site. My goodwill is high because I 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, even though the TV ad said they did. I leave.

17

The reservoir is limited, and if you treat users badly enough and exhaust it there’s a good chance that they’ll leave. But 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; others are inherently more patient. The point is, you can’t count on a very large reserve. 2: If a user is in a hurry or have just come from a bad experience on another site, their expendable goodwill may already be low when they enter your site, even if they naturally have a large reserve. 3: Even if you’ve made mistakes that have diminished the user’s goodwill, you can replenish it by doing things that make them feel like you’re looking out for their best interests. 4: For instance, just opening up a registration form with tons of fields may be enough to cause some people’s reserve to plunge instantly to zero.

The Reservoir of Goodwill Things that diminish goodwill Things that replenish goodwill Hiding information that users want Punishing users for not doing things your way Asking users for information you don’t really need

Know the main things that people want to do on your site and make them obvious and easy Tell users what they want to know Save them steps wherever you can

Shucking and jiving them

Put effort into it

Putting sizzle in their way

Know what questions users are likely to have, and answer them

Your site looks amateurish

Provide them with creature comforts like printer-friendly pages Make it easy to recover from errors When in doubt, apologize

19

There are a lot of things that can diminish, or replenish a reservoir of goodwill. Some things that diminish goodwill are hiding information that users want, asking users for information you don’t really need - which can scare users who are concerned with their security, putting too much sizzle in their way, like multiple Flash videos, or making your site amateurish - remember the days when we all used animated gifs of a little guy waving or the “blink” tag?! But, there are a lot of things that can replenish goodwill, like knowing the main things that people want to do on your site, and making them obvious and easy, saving them steps wherever you can, making it easy to recover from errors and when in doubt, apologize - like 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 you know which rules you’re bending, and that you at least think you have a good reason for bending them.”

20

There is still a large part of the book that I didn’t cover, so be sure to pick up a copy. He wrote the book in a such a way that the reader could read it on an airplane.

Want to know more?

http://psychology.wichita.edu/surl

http://www.usabilityviews.com

http://usability.gov/guidelines/index.html

http://www.useit.com

http://www.sensible.com

http://www.webword.com

21

Melinda Hileman Owner of Hileman Holdings, LLC

mel in [email protected] ilem a nh oldi ngs .c om

22