Some people will point out that some of the sites in the examples didn't even exist anymore. But the fact is that many of the pages in the book were already gone when it hit the bookstores.
Five pounds of crackers in a four-pound box
If you would like to visit any of the URLs mentioned in the book, you will also find current links on my site. While many of the principles are the same as those for websites, it's actually a topic for a completely different book, and I'm not the person to write it.2.
It’s not rocket surgery ™
And most people don't have the budget to hire a usability consultant to review their work, let alone have one there all the time. I'm writing this book for people who can't afford to hire (or hire) someone like me.
Yes, it’s a thin book
Not present at time of photo
As a result, you'll find that the sites I use as examples tend to be great sites with minor flaws. Including illustrations from all different genres would have resulted in a much larger and less useful book.
Who’s on first?
Is this trip really necessary?
It's not "Nothing important should ever be more than two clicks away," or "Speak the user's language," or even "Be consistent".
Don’t make me think!”
What is the most important thing I need to do if I want to make sure my website is easy to use?”. When I look at a page that doesn't make me think, all the thought balloons above my head say things like “OK, there's the.
NOT THINKING
But when I look at a page that makes me think, all the thought balloons above my head have question marks. When you create a website, your job is to get rid of the question marks.
THINKING
Things that make us think
You might be thinking, “Well, it doesn't take much effort to figure out if something is clickable. The distractions may be small, but they pile up, and sometimes it doesn't take much to test us.
Results
The fact that the people who built the site don't care enough to make things clear (and easy) can erode our trust in the site and its publishers.
Another example: On most bookstore sites, before I search for a book, I first have to think about how I want to search.2. And even worse, why should I think about how the site's search engine wants me to phrase the question as if it were some evil troll guarding a bridge.
You can’t make everything self-evident
Why is this so important?
The fact is, your site may not have been that easy to find in the first place, and visitors may not know of an alternative.
So why, then?
What they actually do most of the time (if we're lucky) is glance at each new page, scan a piece of text, and click on the first link that interests them or vaguely resembles it. what they are looking for. We're thinking "great literature" (or at least "product brochure"), while the user's reality is much closer to "billboard going by at 60 miles an hour."
WHAT WE DESIGN FOR… THE REALITY…
When we build websites, we act as if people will study each page, read our carefully crafted text, see how we've organized things, and weigh their options before deciding which link to click. It's only natural to assume that everyone uses the web in the same way that we do, and - like everyone else - we tend to think that our behavior is much more orderly and reasonable than it really is.
We don’t read pages. We scan them
But from the dog's point of view, all he says is "blah blah INGGER blah blah blah blah INGGER blah blah blah.". What we see when we look at a web page depends on what we have in mind, but it is usually only a fraction of what is on the page.
WHAT DESIGNERS BUILD… WHAT USERS SEE…
The net effect is much like Gary Larson's classic Far Side cartoon about the difference between what we say to dogs and what they hear. In the cartoon, the dog (named Ginger) appears to be listening intently as her owner gives her a stern talking to to stay out of the garbage.
We don’t make optimal choices. We satisfice
So why aren't web users looking for the best choice. gt; We are usually in a hurry. And as Klein points out, “Optimizing is hard, and it takes a long time. gt; There isn't much of a penalty for guessing wrong. Unlike firefighting, the penalty for guessing wrong on a website is usually just a click or two of the back button, making satisfaction an effective strategy.
We don’t figure out how things work
We muddle through
Most web designers would be shocked to know how many people type URLs into Yahoo's search box. gt; It is not important to us. And it's a good question: if people manage to mess up this much, does it really matter if they "get it".
If life gives you lemons…
You can get away with a site that people just muddle through until someone down the street builds one that makes them feel smart.
Create a clear visual hierarchy
Very important
The heading spanning these three columns makes it clear that they are all part of the same story. Clap blab blab blab blab blab blab blab blab blab blab blab blab blab blab.
Conventions are your friends
If you're not going to use an existing web convention, you need to be sure that what you replace it with is either (a) so clear and self-explanatory that there's no learning curve - so it's as good as a convention, or (b ) add so much value that it is If you're going to innovate, you need to understand the value of what you're replacing, and many designers tend to underestimate how much value conventions provide.
Break up pages into clearly defined areas
My recommendation: Innovate when you know you have a better idea (and everyone you show it to says "Wow!"), but exploit conventions when you don't.
WHEEL
Several initial eye-tracking studies of web page scans show that users decide very quickly which parts of a page are likely to contain useful information, and then almost never look at other parts—almost as if they weren't there.
Make it obvious what’s clickable
It even has a little triangular arrow graphic, which is one of the conventional "Click here" indicators of the Web. Moving the arrow to the left would be enough to get rid of the question mark above my head.
Keep the noise down to a dull roar
Omit needless words
Removing half the words is actually a realistic goal; I find that I have no trouble getting rid of half the words on most web pages without losing anything of value. Delete half the words on each page, then delete half of what's left.
Happy talk must die
Instructions must die
The following questionnaire is designed to provide us with information that will help us improve the site and make it more relevant to your needs. If you leave your name and number, you may be contacted in the future to participate in a survey to help us improve this site.
BEFORE: 103 WORDS
At the bottom of this form you can choose to leave your name, address and phone number. I know what a survey is for; all I need are the words "help us" to show me that they understand that I'm doing them a favor by filling it out.
AFTER: 41 WORDS
Most users don't need to be told how to fill out a web form, and those who do don't know what a "drop-down menu" is and a . Unfortunately, however, they don't bother to tell me how to contact customer service - or even better, give me a link so I can do it right from here.
And now for something completely different
And you may find yourself, in a beautiful house, with a beautiful wife and you may wonder, Well.. How did I get here. If you go to a site and can't find what you're looking for or understand how the site is organized, you're unlikely to stay long—or come back.
Scene from a mall
When you think you've got the right one, you start looking at the individual products. Basically, you use the store's navigation systems (the signs and the organizing hierarchy that the signs hold) and your ability to scan shelves full of products to find what you're looking for.
Web Navigation 101
Then you can click on the individual links to examine them in detail, the same way you take products off the shelf and read the labels. You'll leave when you're convinced they don't have it, or when you're just too frustrated to keep looking.
The unbearable lightness of browsing
We may find chainsaws by following signs the first time, but next time we're just as likely to think,. Click "Power Tools" and you're suddenly teleported to the power tool aisle without crossing the room, without looking at things along the way.
FIRST TIME SUBSEQUENT VISITS
I think we are talking about web navigation because "finding out where you are" is a much more extensive problem on the web than in physical spaces. We're inherently lost when we're online, and we can't look across the aisles to see where we are.
The overlooked purposes of navigation
On the downside, I think it explains why we use the term "web browsing". although we never talk about "navigation in the department" or "navigation in the library". If you search for navigation in a dictionary, it involves doing two things:. going from place to place and figuring out where you are.
Web navigation conventions
Clear and well-thought-out navigation is one of the best opportunities a site has to make a good impression. Think how frustrating it is when one of these conventions is broken (for example, when magazines don't put page numbers on their advertising pages).
Don’t look now, but I think it’s following us
In the same way that we expect to see the name of a building above the main entrance, we expect to see the site ID at the top of the page - usually in (or at least near) the top left corner.7. Because the site ID represents the entire site, meaning it is the highest thing in the site's logical hierarchy.
The Sections
The Utilities
Just click your heels three times and say, There’s no place like home.”
A way to search
I think one of the main reasons for Amazon's success is the power of its search. For example, when I went to look up the "Stinking Sinkings" quote from the Treasure of the Sierra Madreon page on the Internet Movie Database, my search for.
Secondary, tertiary, and
Partly because designers usually don't even have enough time to figure out the first two levels. And unless you've worked out top-to-bottom navigation from the beginning, it's very hard to graft it on later and come up with something consistent.
Page names, or Why I love to drive in L.A
It's a tempting idea because it can save space and is one less element to include in the page layout, but it's not enough. After all, that's what it's called - not navigation or ads, which are just infrastructure.).
Covington Road
Designers sometimes think, “Well, we highlighted the page name in the navigation.9 That's good enough.”. In the visual hierarchy of the page, the page name should appear to frame content that is unique to this page.
You are here”
For example, at Gap.com if I click on the buttons labeled "Gifts for Him" and "Gifts for Her" I get pages called "gifts for men". The most common flaw of "You are here" indicators is that they are too subtle.
Breadcrumbs
They are not a good substitute for showing at least the top two layers of the hierarchy because they do not reveal enough. Breadcrumbs seem to work best when they are at the top of the page, above everything else.
Four reasons why I love tabs
And because they're hard to confuse with anything other than navigation, they create the kind of clear, at-a-glance separation between navigation and content that you want. 800.com Amazon.com Beyond.com bn.com Borders.com Buy.com CDNOW eToys.com Fatbrain.com Fidelity.com LandsEnd.com Pets.com Quicken.com Schwab.com Snap.com ToysRUs.com www.catalogcity. com.
If you love Amazon so
It's a cheap trick, but effective, probably because it's based on a visual cue that we're very good at detecting ("things in front of other things"). Somehow, the result is a stronger than usual sense that the site is divided into sections and that you are in one of the sections.
To create this illusion, the active tab should be a different color or contrasting shade and should physically connect to the space below it. And since the inactive tabs were a neutral beige color, there was a lot of contrast between them and the active tab – something even color-blind users can detect.
Try the trunk test
As quickly as possible, try to find and circle each item in the list below.
CIRCLE
WHAT’S WRONG WITH THIS PICTURE?
It looks too much like the internal promo next to it, and because the site ID is not in the top left corner, it ends up looking like an ad. The heading DVD is located above the link Audio/Video Main, but it is lower in the hierarchy.
The home page should make it clear how to get to anything I want - assuming it's somewhere on the site. For some visitors, the home page will be the only chance your website has to make a good impression.
And you have to do it…blindfolded
The First Casualty of War
If it's not clear to me what I'm looking at in the first few seconds, it's harder to interpret everything else on the page, and I'm more likely to misinterpret something and get frustrated. When testing websites, it's not at all uncommon for people to say, “Oh, that's what it is.
THE TOP FIVE PLAUSIBLE EXCUSES FOR
It's tempting to think that the people who don't "get" your site right away are probably not your real audience, but that's simply not true. But it's no substitute for putting the big picture in plain sight, as most people won't click on it until they've already tried (and failed) to try it out for themselves.
NOT SPELLING OUT THE BIG PICTURE ON THE HOME PAGE
They were replaced by] calm spots in which comedian Martin Mull explains to consumers exactly what Outpost.com sells (computers, technology and electronics). When you're involved in building a website, it's so obvious to you what you're offering and why it's crazy awesome that it's hard to remember that it's not obvious to everyone.
How to get the message across
Because of their new proposition (choose your widget providers), Essential.com has a lot of work to do, so they wisely use a lot of space on the home page to do it. Most websites don't need to use a lot of space to convey a basic pitch, and messages that take up the entire home page are usually too much for people to bother with.
Nothing beats a good tagline! ™
Don't feel obligated to mention every great feature, just the most important ones (maximum four). Mottos are lofty and reassuring, but if I don't know what the thing is, a motto isn't going to tell me.
Tagline? We don’t need no stinking tagline
The fifth question
Unfortunately, the need to promote everything (or at least everything that supports this week's business model) sometimes obscures these entry points. The best way to prevent this from happening is to make the entry points look like entry points (that is, make the search box look like a search box, and the list of sections look like a list of sections).
Home page navigation can be unique
The homepage navigation and the permanent navigation should have enough in common that users can immediately recognize that they are just two different versions of the same thing. And even the slight variations in the section names (such as For Carriers/Carrier and The Company/Company) are okay, because it's clear that they are the same.
The trouble with pulldowns
Unfortunately, since the main benefit of pulldowns is saving space, designers are most tempted to use them when they have a long list to display.
Why Golden Geese make such tempting targets, or “Funny, it tastes like chicken…”
For each animal a herdsman adds to the common pasture, he receives all proceeds from the sale of the animal - a positive benefit of +1. 9 The concept, originated by the nineteenth-century amateur mathematician William Forster Lloyd, was popularized in a classic essay on overpopulation by biologist Garrett Hardin (“The Tragedy of the Commons,” Science, December 1968).
You be the judge
WHAT’S THE POINT OF THIS SITE?
DO YOU KNOW WHERE TO START?
MY VERSION
MY VERSION #2
MY VERSION #3
THEIR REDESIGN
WHAT’S THE POINT OF THIS SITE?
DO YOU KNOW WHERE TO START?
THEIR REVISED VERSION
As individuals, we love Flash animations because they're cool; or we hate them because they are long-lasting. And given the power of these beliefs—and human nature—there's a natural tendency to project those likes and dislikes onto online users in general: to think that most online users like the same things we like.
Farmers vs. cowmen
We know there are some people out there who hate the things we love—after all, there are some of them on our web team, too.
PIZZAZZ!
As the advertising culture (top management, marketing, and business development) focuses on making whatever promises are necessary to attract venture capital, users, strategic partners, and revenue-generating deals to the site, the burden of delivering on those promises falls. . on the shoulders of artisans of craft culture such as designers and programmers. This online version of the perpetual war between art and commerce (or perhaps farmers and cowmen versus railroad barons) adds another level of complexity to any discussion of usability issues—often in the form of seemingly arbitrary decrees handed down by the of fence noise.4.
The myth of the Average User
That's not to say that there aren't certain things you should never do, and some things you should rarely do.
The antidote for religious debates
As soon as I hear "launch in two weeks" (or even "two months") and "usability testing" in the same sentence, I start to get that old fireman-head-into-the-burning-chemical-plant feeling , because I have a pretty good idea of what's going on. If it's two months, then odds are what they want is to settle some ongoing internal debate - usually about something very specific like color schemes.
Repeat after me
And while usability testing will sometimes resolve these arguments, the main thing they usually end up doing is finding out that the things they were arguing about aren't that important. Sadly, this is how most usability testing is done: too little, too late, and for all the wrong reasons.
Focus groups are not usability tests
Focus groups are good for quickly getting a sample of users' opinions and feelings about things. Focus groups can be good at determining what your audience wants, needs and likes – in the abstract.
Several true things about testing
Part of the conventional wisdom about web development is that it is very easy to make changes. The truth is that making changes to a site once it is up and running doesn't seem to be that easy.
Lost our lease, going-out-of-business- sale usability testing
It's true that most web development schedules seem to be based on a cue from a Dilbert cartoon. One of the great things about usability testing is that the important lessons are usually obvious to anyone watching.
THE TOP FIVE PLAUSIBLE EXCUSES FOR NOT TESTING WEB SITES
But in 1989, Jakob Nielsen wrote a paper entitled "Usability Engineering for a discount"1 and pointed out that it didn't have to be that way. Done right, it saves time because you don't have to (a) argue endlessly and (b) redo things in the end.
TRADITIONAL TESTING LOST-OUR-LEASE TESTING
Decide what to show Continuously run small tests throughout the development process.
How many users should you test?
Recruit loosely and grade on a curve
ONE TEST WITH 8 USERS TOTAL PROBLEMS FOUND: 5
TOTAL PROBLEMS FOUND: 9
TWO TESTS WITH 3 USERS
I support this approach for three reasons: gt; We are all beginners under the skin. Look for an expert and you'll often find someone in a hurry - just at a higher level. gt; It's usually not a good idea to design a website so that only your target audience can use it. And in most cases you have to turn to beginners and experts anyway, and if your grandma can use it, an expert can. gt;.
Where do you test?
LOST-OUR-LEASE USABILITY “LAB”
In the past few years, however, three things have changed: PCs have gotten much faster, disk drives have gotten much larger, and screen recording software has improved dramatically. Screen recorders such as Camtasia4 run in the background on the test PC and record everything that happens on the screen and everything the user and the facilitator say in a video file that you can play on the PC.
Who should do the testing?
It turns out that these files are very valuable because they are much easier to review quickly than video tapes, and they are very easy to share over a network.
Who should observe?
Tell them you're going to do some usability testing and that it would be good for the morale of the web team if they could poke their heads into it for a few minutes. In my experience, executives often become fascinated and stay longer than they planned because it's the first time they're seeing their site in action and it's often not nearly as nice as they imagined.
What do you test, and when do you test it?
It's much better, for example, to say “Find a book you want to buy, or a book you've bought. As you begin designing your site, it's never too early to start showing users your design ideas, starting with your first rough sketches.
A sample test session
Because it is not a polished design, users are also not distracted by details of the implementation and can focus on the essence and wording. We're testing a website we're working on so we can see what it's like for real people to use.
INTRODUCTION
I want to make it clear right away that we test the site, not you. With your permission, we are going to record the computer screen and what you have to say.
BACKGROUND QUESTIONS
On a typical day, for example, tell me what you do at work and at home. 150] First, I just want you to look at this page and tell me what you think it is, what strikes you about it, and what you think you would click on first.
REACTIONS TO THE HOME PAGE
Can you think of something you might want to post as a project if you were to use this site. So if you were to post the deck as a project, what would you do first?
TESTING A TASK
I can't click on Home Improvement, so it looks like I have to click on either RFP or Fixed Price. But I don't know what. Fixed price (in this case) means services available for a fixed hourly rate, while an RFP (or Request for Proposal) is actually the selection that will draw quotes.
Review the results right away
Typical problems
In this case, you need to (a) reduce the overall noise on the page, or (b) increase the volume of the things they need to see so that they "pop" out of the visual hierarchy more.
Some triage guidelines
If you dig deeper, it often turns out that they already have a perfectly good resource for xand would not likely pass; they are just showing you what they like. And finally, there's one last tip for "making changes" that deserves its own section:.
Don’t throw the baby out with the dishes
Very often the right solution is to remove something (or things) that obscures the meaning, rather than adding another distraction.
One morning a month: that’s all we ask
As it happened, the date of my flight also turned out to be a collective bargaining deadline between the airline I was booked with and one of its unions. Concerned, I did what anyone would do: (a) started checking Google News hourly to see if a deal had been reached, and (b) went to the airline's website to see what they had to say about it.
The Reservoir of Goodwill
Much of this book is about building clarity into web pages: making sure users can understand what they're seeing—and how to use it—without unnecessary effort. Some people are more suspicious by nature, or more conceited; others are inherently more patient, trusting, or optimistic.
Things that diminish goodwill
You can lose goodwill if your website looks sloppy, disorganized or unprofessional, like you made it without effort. However, if your statistics show that you can get 10 percent more revenue by using pop-ups and you think it's worth bothering your users, then you can do it.
Things that increase goodwill
If you can't do what they want, at least let them know you know you're bothering them. Unless you want to make a blanket decision that people with disabilities are not part of your audience, you really can't say your site is usable unless it's accessible.
What developers and designers hear
And not just the right thing; it's profoundly the right thing to do, because the one argument for accessibility that isn't presented often enough is how tremendously better it makes some people's lives. What opportunities we have to dramatically improve people's lives just by doing our jobs a little better.
What designers and developers fear
But something about the way it caught the light made me look, and when I did, I realized that it was ingenious. The sign is covered with a thin piece of Plexiglas, and the message is embossed in Braille on the Plexiglas.
The real solution—as usual—is a few years away
And the truth is, making a website accessible is a lot harder than it should be. Screen readers and other adaptive technologies need to get smarter, the tools for construction sites (like Macromedia Dreamweaver) need to make it easier to code correctly for accessibility, and the guidelines need to improve.
The five things you can do right now
1. Fix the usability problems that confuse everyone
CELL PHONES AND PDAS
And it is very likely that they will have a harder time recovering from their confusion. If your site isn't clear from the get-go, being Bobby-compliant is like [insert your favorite lipstick-pig metaphor here].
2. Read an article
If something confuses most people who use your site, it's almost certain that it also confuses users with accessibility issues. They don't suddenly become noticeably smarter because they have a disability.) And it's very likely that they will have a harder time recovering from their confusion. The best thing you can do to improve the accessibility of your site is to test it often and continually iron out the parts that confuse everyone.
3. Read a book
Screen reader users scan with their ears. Most blind users are just as impatient as most sighted users. Where a sighted user can find a keyword by scanning the entire page, a blind user may not hear the keyword unless it is at the beginning of a link or line of text.
4. Start using Cascading Style Sheets
A few years later, CSS Zen Garden9 (a single HTML page that looked completely different depending on which of the many designer-contributed style sheets) showed that you could create beautiful, sophisticated designs with CSS. Probably the fastest way to learn CSS is to get someone who specializes in it to do a "markover" - to recode some of your site's page templates to use CSS - for you.
5. Go for the low-hanging fruit
If you're up for it, there are also some good books on CSS, especially those by Eric Meyer. I've reached the point where when people ask me one of these questions, I often – half-jokingly – say that if it helps, I'd like to write their boss an email (from a usability expert) with a book, no less) that explains why this is a very bad idea.
The perils of asking for too much personal data
On the other hand, if you only ask for the information you need, you've built a relationship with them and can get more input later in subsequent exchanges. Tell me exactly what I'll get by signing up, show me a sample newsletter, etc.
Adding “sizzle” to your Web site
By the way, based on the brief opportunity I had to chat with [your name], [he|she] seems to be an excellent [designer|developer|manager]. Most of the time on the Web, people don't want to engage; they just want to do something, and attempts to engage those who interfere with their actual mission are perceived as annoying, ignorant, and the worst kind of hucksterism.
Never say never
That’s all, folks
