To all the people—from all parts of the world—who have been so kind to this book for fourteen years. Finally, in 2006 I had a strong personal urge to update it.1 But as I reread it to see what I needed to change, I just kept thinking "This is still true."
2. The world has changed
It's no flying car (which, come to think of it, we were promised we'd have now), but it's pretty impressive. Now, thanks in large part to Steve Jobs (and Jonathan Ive), almost everyone understands that it's important, even if they're still not quite sure what it is.
Introduction: Read me first
I try to use what they send me and do the things their users need or want to do with it. I note the places where people are likely to get stuck and the things I think will confuse them (an 'expert usability review').
The bad news: You probably don’t have a usability professional
I wrote this book mainly for people who can't afford to hire (or rent) someone like me. But if you can't, I hope this book will enable you to do it yourself (in your abundant spare time).
The good news: It’s not rocket surgery™
And even if you have a professional on your team, that person can't possibly look at everything the team produces.
It’s a thin book
4 There's a good usability principle there: If something requires a large investment of time - or looks like it will - it's less likely to be used. I think there is much more leverage for most people in understanding these principles than in another laundry list of specific dos and don'ts.
Not present at time of photo
Watson is shocked to learn that Sherlock Holmes does not know that the earth moves around the sun. Because of this, you'll find that the examples I use tend to come from excellent products with minor flaws.
Now with Mobile!
One last thing, before we begin
If something is useful—whether it's a website, a remote control, or a revolving door—it means so. 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.
Guiding Principles
Don’t make me think!
It's not "Nothing important should ever be more than two clicks away" or "Speak the user's language" or "Be consistent."
Don’t make me think!”
But when I look at a page that makes me think, all the thought balloons above my head have question marks in them. When creating a page, your task is to get rid of question marks.
Things that make us think
The fact that the people who built the site didn't care enough to make things clear (and easy) can undermine our confidence in the site and the organization behind it. The most important thing you can do is understand the basic principle of question mark elimination.
You can’t make everything self-evident
Once you do this, you'll start noticing all the things that make you think on the websites and apps you use. And eventually you'll learn to recognize them and avoid them in the things you build.
Why is all of this so important?
But the last thing you need is another checklist to add to your stack of design checklists. You'd be surprised how long some people will go to lengths on sites that frustrate them, often blaming themselves and not the site.
So why, then?
How we really use the Web
It makes sense that we envision a more rational, attentive user when designing pages. On most pages, we're really only interested in a fraction of what's on the page.
Billboard Design 101
Conventions are your friends
If you want to innovate, you have to understand the value of what you're replacing (or as Dylan put it: "To live outside the law, you have to be honest"), and it's easy to underestimate how much value conventions provide . The rule of thumb is that you can—and should—be as creative and innovative as you want, adding as much aesthetic appeal as you can, as long as you make sure it's still usable.
Create effective visual hierarchies
For example, a site section name ("Computer Books") will appear above the titles of the individual books, reflecting the fact that the books are part of the section. This flawed visual hierarchy suggests that all the main sections of the site are part of the Computer Books subsection.
Break up pages into clearly defined areas
Make it obvious what’s clickable
However, it is currently resurfacing as a problem in mobile design, as you will see in Chapter 10. In general, you'll be fine if you just stick to one color for all text links or make sure their shape and location identify them as clickable.
Keep the noise down to a dull roar
Animal, Vegetable, or Mineral?
At first glance, "number of clicks to get anywhere" seems like a useful metric. But over time I've come to think that what really matters is not the number of clicks it takes to achieve what I want (although there are limits), but how hard each click is - the amount of thought required and the amount of uncertainty about whether I'm making the right choice.
Some assistance may be required
Omit words
- Omit needless words
Delete half the words on each page, then delete half of what's left. 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.
Happy talk must die
I'm not suggesting that the articles on WebMD.com or the stories on NYTimes.com should be shorter than they are.
Instructions must die
And now for something completely different
In these first few chapters, I've tried to convey some guiding principles that I think are good to keep in mind when building a website. Now we turn to two chapters that look at how these principles apply to two of the biggest and most important challenges in web design: navigation and the home page.
Things You Need to Get Right
Street signs and Breadcrumbs
And you can find yourself | in a beautiful house | with a beautiful wife And you can ask yourself | Well. If you go to a site and can't find what you're looking for or figure out how the site is organized, you probably won't stay long—or come back.
Scene from a mall
When you think you're in the right place, start looking at individual products. Basically, you use the store's navigational systems (signs and the organizational hierarchy that the signs embody) and your ability to scan shelves full of products to find what you're looking for.
Web Navigation 101
Typically, you look around the home page for a list of the site's major sections (such as the store's department boards) and click on the one that seems right. With any luck, after another click or two you'll get a list of the kinds of things you're looking for.
The unbearable lightness of browsing
3 This is one of the reasons why it is useful for links that we have already clicked to appear in a different color. On the plus side, the feeling of weightlessness can be exhilarating and partly explains why it's so easy to lose track of time online - just like when we're "lost" in a good book.
The overlooked purposes of navigation
Web navigation conventions
In a magazine, we know that there will be a table of contents somewhere in the first few pages and page numbers somewhere in the margin of each page - and that they will look like a table of contents and page numbers. Think how frustrating it is when one of these conventions is broken (when magazines, for example, don't put page numbers on ad pages).
Don’t look now, but I think it’s following us
And keeping it the same throughout the page means you (hopefully) only have to figure out how it works once.
In the same way that we expect to see the name of a building above the front entrance, we expect to see the site ID at the top of the page - usually in (or at least near) the top left corner.4. Because the site ID represents the entire site, meaning it is the highest thing in the site's logical hierarchy.
The Sections
And there are two ways to convey this primacy in the visual hierarchy of the page: make it the most prominent part of the page, or let it frame everything else. And in other cases, clicking will take you to the front page of the section, where you'll find the secondary navigation.
The Utilities
In some designs, the persistent navigation will also include space to display the secondary navigation: the list of subsections of the current section.
Just click your heels three times and say, “There’s no place like home”
A way to search
I think it's also a good idea to include Home with the main sections of the site. If you want to give me the option to broaden the search, give it to me when it's useful—when I go to the search results page and find that searching for everything came up too many times, so I have to limit the scope.
Secondary, tertiary, and whatever comes after tertiary
The problem is so common that it's actually hard to find good examples of third-level navigation. And unless you've worked out top-down navigation from the start, it's very difficult 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 it's one less element to work into the page layout, but it's not enough. Every time a site violates this, I'm forced to think, if only for milliseconds, "Why are those two things different?" And if there is a big difference between the link name and the page name or very minor differences, my confidence in the site - and the competence of the people who publish it - will be reduced.
You are here”
You want the combination of position, size, color, and typeface to make the name say "This is the title for the entire page." In most cases, it will be the largest text on the page. If the words I click on and the name of the page don't exactly match, the important thing is that (a) they match as closely as possible and (b) the reason for the difference is clear.
Breadcrumbs
The most common flaw of "You are here" indicators is that they are too subtle. They are called Breadcrumbs because they are reminiscent of the trail of crumbs that Hansel dropped in the forest so that he and Gretel could find their way back home.5.
Three reasons why I still love tabs
And because it's hard to confuse them with anything other than navigation, they create the kind of clear-at-a-glance division you want between navigation and content. For tabs to work fully, the graphics must create the visual illusion that the active tab is in front of the other tabs.
Try the trunk test
- Choose a page anywhere in the site at random, and print it
- Hold it at arm’s length or squint so you can’t really study it closely
- As quickly as possible, try to find and circle each of these items
- The Big Bang Theory of Web Design
Like the cover of a magazine, the website should entice me with hints of the "good stuff" inside. The website should make it obvious how to get to what I want - assuming it's somewhere on the site.
And you have to do it...blindfolded
The Venn diagram is not completely accurate: some university websites do not have the full name of the school on the homepage. Because the website is so important, it's the one page that everyone (even the CEO) has an opinion about.
The First Casualty of War
This is why it is so important that you get them off on the right foot and make sure they are clear in the big picture. The top four plausible excuses for not spelling out the big picture on the home page.
But...the Home page? Really?
If the page they went to was interesting, they want to see what else is on the site. The home page is still where it happens, and you need to do it well.
How to get the message across
Very often, however, the next thing they will do is visit the home page to get their ears. Most users will probably first try to guess what the website is from the overall content of the Home Page.
Nothing beats a good tagline!™
XYZCorp provides world class solutions in the emerging field of blah blah blah blah..” Nobody reads them. Jakob Nielsen suggested that a really good tagline is one that no one else in the world can use but you, and I think that's an excellent way to look at it.
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 entry points look like entry points (ie, make the search box look like a search box and the section list look like a section list ).
Why Golden Geese make such tempting targets
4 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). 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.
Making Sure You Got them Right
The Farmer and the Cowman Should Be Friends”
One man likes to push a plow The other likes to chase a cow But that's no reason why they can't be friends. Left to their own devices, web teams are not notoriously successful in making decisions on usability questions.
Everybody likes ________.”
Unfortunately, there are more forces at work in most web teams that make these debates almost inevitable. We know there are some people out there who hate the things we love - after all, some of them are on our own web team.
Farmers vs. cowmen
This modern high-tech version of the eternal battle between art and commerce (or perhaps farmers and cowmen vs. the railroad barons) adds another level of complexity to any discussion of usability issues—often in the form of seemingly arbitrary edicts issued from the hype side of the fence.3. 3 I once saw a particularly puzzling feature on the homepage of a prominent – and otherwise sensibly designed – website.
The myth of the Average User
Once the clash of personal and professional opinions results in an impasse, the conversation usually turns to finding a way (whether an outside expert's opinion, published research, a survey, or focus groups) to determine what the majority of users like or dislike. like—to understand what the average Web user is really like. And the worst thing about the myth of the Average User is that it reinforces the idea that good web design is primarily a matter of understanding what people like.
The antidote for religious debates
Usability testing on 10 cents a day
The launch was fast approaching and everyone was getting nervous, and finally someone said, "Maybe we should do better usability testing." Unfortunately, however, this is still how a lot of usability testing is done: too little, too late, and for all the wrong reasons.
Repeat after me: Focus groups are not usability tests
Focus groups are good for quickly getting a sample of users' feelings and opinions about things. But they are not good at learning if your website is working and how to improve it.
Several true things about usability testing
Part of the conventional wisdom about web development is that it's very easy to go in and make changes. The truth is, it's often not that easy to make changes - especially major changes - to a website once it's in use.
Do-it-yourself usability testing
A simple test early – while you still have time to use what you learn from it – is almost always more valuable than an extended test later. It's called Rocket Surgery Made Easy: The DIY Guide to Finding and Fixing Usability Problems.
How often should you test?
How many users do you need?
You will always find more problems than you have the resources to solve, so it is very important that you focus on fixing the most. And three users will most likely experience many of the main problems related to the tasks you are testing.
How do you choose the participants?
Do-it-yourself testing is a qualitative method that aims to improve what you build by identifying and fixing usability issues. And if you're just getting started with testing, your site probably has a number of usability flaws that will cause real problems for almost anyone you hire.
How do you find participants?
Where do you test?
Who should do the testing?
Who should observe?
You may never refer to it, but it's good to have if you want to check something or use some short clips as part of a presentation. For many people, this is a transformative experience that dramatically changes the way they think about users: they suddenly "get" that users are not all like them.
What do you test, and when do you test it?
How do you choose the tasks to test?
You can often get more revealing results if you let participants choose some details of the task. For example, it is much better to say, “Find a book you want to buy, or a book you recently purchased,” than “Find a cookbook for less than $14.” It increases their emotional investment and allows them to spend more of their personal knowledge of the content.
What happens during the test?
Don't ask them leading questions or give them any hints or help unless they are hopelessly stuck or very frustrated. Finally, thank them for their help, pay them, and escort them to the door.
A sample test session
With your permission, we will record what happens on the screen and what you say. While the participant is doing the tasks, I am careful not to ask leading questions because I don't want to bias her.
Typical problems
If you want to see a more complete test, you will find a twenty minute video on my website.
The debriefing: Deciding what to fix
Start at the top and write down a rough idea of how you will fix each one in the next month, who will do it and any resources it will require. When you feel like you've allocated all the time and resources you have available in the next month to fixing usability.
Alternative lifestyles
I find that if you ask them to describe how that feature will work - during the investigation time at the end of the test - it almost always turns out that by the time they finish describing it they say something like "But now that I think about it .that, I probably won't use it.” Participants are not designers. It's kind of like capsizing in a kayak; as long as the kayak rightes itself fast enough, it's all part of the so-called fun.
Try it, you’ll like it
Within an hour (on average) you can watch a video of someone doing your tasks while thinking out loud.5 You don't get to interact with the participant in real time, but it's relatively cheap and requires almost no effort (especially recruitment) on your side.
Larger Concerns and Outside Influences
Mobile: It’s not just a city in Alabama anymore
ROBIN WILLIAMS AS THE GENIE IN ALADDIN, WHO COMMENTS ON THE UP AND DOWN OF THE GENIE LIFESTYLE. There's not much to deny that mobile devices are the wave of the future, except for things where you need massive horsepower (professional video editing for example, at least for now) or a large playing surface (Photoshop or CAD).
What’s the difference?
And consider the fact that for most people in emerging markets, just as they have bypassed landlines and gone straight to mobile phones, the smartphone is their first – and only – computer. It will take a few more years for things to settle down, probably just in time for innovations that will force the whole cycle to start over.
It’s all about tradeoffs
2 ..if he actually ever said, "You can fool some people all the time and all the people some of the time, but you can't fool all the people all the time." One of the things I've learned from the internet is that when it comes to memorable words attributed to famous people, 92% of the time they were never said. Most of the challenges in creating good mobile usability boil down to making good compromises.
The tyranny of the itty-bitty living space
Everything else may be a few taps away, but there should be an obvious way to get to them. In some cases, the lack of space on each screen means that mobile sites become much deeper than their full-size cousins, so you may have to tap down three, four or five "levels" to get to some features or content.
Breeding chameleons
You tap a link in an email or on a social media site, and instead of taking you to the article in question, it redirects you to the mobile home page, so you search for the thing yourself. Always provide a link to the "full" site. If your mobile site is beautiful and perfect, you need to give users the option to view the non-mobile version, especially if it contains features and information that are not available in your mobile version.
Don’t hide your affordances under a bushel
In order for benefits to work, they need to be noticeable, and some features of mobile devices have made them less noticeable or, worse, invisible. They just need to be visible enough for people to notice those who need them to do their jobs.
No cursor = no hover = no clue
This is not to say that all benefits should hit you in the face. As a designer, you need to be aware that these elements don't exist for mobile users and try to find ways to replace them.
Flat design: Friend or foe?
You actually can be too rich or too thin
We are all used to very fast connections these days, but we must remember that mobile download speeds are unreliable. If people are at home or sitting at Starbucks, download speeds are probably fine, but once they leave the comfort of Wi-Fi and return to 4G or 3G or worse, performance can vary greatly.
Mobile apps, usability attributes of
Delightful is the new black
Instead of dozens of tools with thousands of options, you get five tools with no options. Just doing something well isn't good enough to create a hit; you must be doing something incredibly well.
Apps need to be learnable
Even though it's shown in the slideshow on the way in, people don't seem to do it. That's not to say that no one in the real world learns how to use it.
Apps need to be memorable, too
But by the next time I went to use it, I forgot what the trick was again. But if you have to go through the same effort next time, it's unlikely to feel like a satisfying experience.
Usability testing on mobile devices
When you purchase one, you're usually prepared to immediately spend some time figuring out how to use it. Unless you're very impressed with what it does, chances are you'll abandon it – which is the fate of most apps.
The logistics of mobile testing
My recommendations
In others, the participant can hold the device, but they are told to keep it within an area marked with tape. If you attach the camera to the device, the participant can move it freely and the screen will remain in view and in focus.
Proof of concept: My Brundleyfly7 camera
