-
[email protected]
Melinda HilemanOwner 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.
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]
-
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 WebScanning, 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 101Design 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.
-
Create a clear visual hierarchy on each page
Take advantage of conventions
Break pages up into clearly defined areas
Billboard Design 101Design Pages for Scanning, Not Reading
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.
-
Make it obvious what’s clickable
Minimize noise
Billboard Design 101Design Pages for Scanning, Not Reading
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.
-
People won’t use your Web site if they can’t find their way
around it!
Street Signs
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.
-
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.
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.
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.
-
I’m out of here!Sometimes a single
mistake can empty it
You can refill it
It’s situational
The Reservoir of Goodwill
It’s idiosyncratic
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
Shucking and jiving them
Putting sizzle in their way
Your site looks amateurish
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
Put effort into it
Know what questions users are likely to have, and answer
them
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.
-
“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.”
That’s all, folksClosing comments by Steve Krug
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://usability.gov/guidelines/index.html
http://www.sensible.com
http://www.usabilityviews.com
http://www.useit.com
http://www.webword.com
21
http://psychology.wichita.edu/surlhttp://psychology.wichita.edu/surlhttp://usability.gov/guidelines/index.htmlhttp://usability.gov/guidelines/index.htmlhttp://www.sensible.comhttp://www.sensible.comhttp://www.usabilityviews.comhttp://www.usabilityviews.comhttp://www.useit.comhttp://www.useit.comhttp://www.useit.comhttp://www.useit.com
-
[email protected]
Melinda HilemanOwner of Hileman Holdings, LLC
22
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]