Boris Abazher

What’s the most important thing to make sure that a Web site is easy to use? The answer is simple. It’s... Don’t make me think! It is the first law of usability.

A Web page should be self-evident, obvious, and self-explanatory. Users are able to “get it” without expending any effort thinking about it.

When you’re creating a site, your job is to get rid of the question marks. Users look at a page that doesn’t make them think, thus there are the thought balloons over their head with positive signs. When they’re looking at a page that makes them think, all the thought balloons have question marks in them.

Needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. Users should never have to devote a millisecond of thought to whether things are clickable—or not.

People don’t like to puzzle over how to do things. If the people who built the site don’t care enough to make things obvious and easy, it can erode the confidence in the site and its publishers.

Visitors to a site shouldn’t spend their time thinking about, like: 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?

Your goal should be for each page to be self-evident, so that just by looking at it the average user3 will know what it is and how to use it.

If you’re doing something original or ground-breaking or something very complicated, you have to settle for self-explanatory where it takes a little thought to “get it”—but only a little.

If you can’t make a page self-evident, you at least need to make it self-explanatory.

On the Internet, the competition is always just one click away, so if you frustrate users they’ll head somewhere else.

Some people will tough it out at sites that frustrate them. Many people who encounter problems with a site tend to blame themselves and not the site.

Making pages self-evident is like having good lighting in a store: it just makes everything seem better. Using a site that doesn’t make us think about unimportant things feels effortless, whereas puzzling over things that don’t matter to us tends to sap our energy and enthusiasm—and time.

Why are things always in the last place you look for them? Because you stop looking when you find them.

There is a big difference between how we think people use Web sites and how they actually use them.

We create sites as people are going to pore and investigate over each page, while (if we’re lucky) they only 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.

If you want to design effective Web pages, remember users don’t read pages, they scan them because they’re usually in a hurry; they know they don’t need to read everything; they’ve been scanning newspapers, magazines, and books all their lives to find the parts they’re interested in, and they know that it works.

If you want to design effective Web pages, remember users don’t make optimal choices, they satisfice. As soon as they find a link that seems like it might lead to what they’re looking for, there’s a very good chance that they’ll click it.

Optimizing is hard, and it takes a long time. Satisficing is more efficient.

On poorly designed sites, putting effort into making the best choice doesn’t really help.

There are still users who weigh options before they click. It depends on things like their frame of mind, how pressed they are for time, and how much confidence they have in the site.

If you want to design effective Web pages, remember users don’t figure out how things work. They muddle through.

Faced with any sort of technology, very few people take the time to read instructions. Instead, we forge ahead and muddle through, making up our own vaguely plausible stories about what we’re doing and why it works.

It’s not important. For most of us, it doesn’t matter whether we understand how things work, as long as we can use them. It’s not for lack of intelligence, but for lack of caring.

Once we find something that works - no matter how badly - we tend not to look for a better way. We’ll use a better way if we stumble across one, but we seldom look for one.

If people manage to muddle through so much, does it really matter whether they “get it”? The answer is that it matters a great deal because while muddling through may work sometimes, it tends to be inefficient and error-prone.

If users “get it”, there’s a much better chance that they’ll find what they’re looking for, which is good for them and for you.

If users “get it”, there’s a much better chance that they’ll understand the full range of what your site has to offer—not just the parts that they stumble across.

If users “get it”, there’s a much better chance of steering them to the parts of your site that you want them to see.

If users “get it”, they’ll feel smarter and more in control when they’re using your site, which will bring them back. You can get away with a site that people muddle through only until someone builds one down the street that makes them feel smart.

If your audience is going to act like you’re designing billboards, then design great billboards.

Follow these to make sure they see and understand as much of your site as possible: create a clear visual hierarchy on each page; take advantage of conventions; break pages up into clearly defined areas; make it obvious what’s clickable; minimize noise.

One of the best ways to make a page easy to grasp in a hurry is to make sure that the appearance of the things on the page—all of the visual cues—clearly and accurately portray the relationships between the things on the page.

The more important something is, the more prominent it is. The most important headings are either larger, bolder, in a distinctive color, set off by more white space, or nearer the top of the page—or some combination of the above.

Things that are related logically are also related visually. You can show that things are similar by grouping them together under a heading, displaying them in a similar visual style, or putting them all in a clearly defined area.

Things are “nested” visually to show what’s part of what.

There’s nothing new about visual hierarchies. Every newspaper page uses prominence, grouping, and nesting to give us useful information about the contents of the page before we read a word.

A good visual hierarchy saves us work by pre-processing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.

At some point in our youth, without ever being taught, we all learned to read a newspaper. Not the words, but the conventions. When we know the various conventions of page layout and formatting, it is easier and faster to scan a newspaper and find the stories we are interested in.

Use Web conventions, they’re very useful. Conventions only become conventions if they work. Well applied conventions make it easier for users to go from site to site without expending a lot of effort figuring out how things work.

When you use conventions, don’t follow a great temptation to reinvent it. Sometimes time spent reinventing the wheel results in a revolutionary new rolling device. But sometimes it just amounts of time spent reinventing the wheel.

Innovate when you know you have a better idea and everyone you show it to says “Wow!”, but take advantage of conventions when you don’t.

Break up pages into clearly defined areas; it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore. Users decide very quickly which parts of the page have useful information and then almost never look at the other parts—almost as though they weren’t there.

The largest part people do on the Web is to look for the next thing to click, it’s important to make it obvious what’s clickable and what’s not. When you force users to think about something that should be mindless, you’re squandering the limited reservoir of patience and goodwill that each user brings to a new site.

One of the great enemies of easy-to-grasp pages is visual noise.

First noise is busy-ness. When everything on the page is clamoring for user’s attention the effect can be overwhelming: Lots of invitations to buy! Lots of exclamation points and bright colors! A lot of shouting going on!

Second noise is background noise. Some pages are like being at a 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 that wear us down.

Users have varying tolerances for complexity and distractions; some people have no problem with busy pages and background noise, but many do. When you’re designing Web pages, it’s probably a good idea to assume that everything is visual noise until proven otherwise.

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.

“Number of clicks to get anywhere” seems like a useful criteria. But over time you will see that what really counts is not the number of clicks it takes users to get to what they want but how hard each click is—the amount of thought required, and the amount of uncertainty about whether they’re making the right choice.

Users don’t mind a lot of clicks as long as each click is painless and they have continued confidence that they’re on the right track—following what Jared Spool calls “the scent of information.”

The rule of thumb might be something like “three mindless, unambiguous clicks equal one click that requires thought.”

Make it like a word game Twenty Questions—“Animal, vegetable, or mineral?” As long as you accept the premise that anything that’s not a plant or an animal falls under “mineral,” it requires no thought at all to answer the question correctly.

We face choices all the time on the Web and making the choices mindless is one of the main things that make a site easy to use.

Get rid of half the words on each page, then get rid of half of what’s left.

Omit needless words. Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

Removing half of the words is a realistic goal; you find you have no trouble getting rid of half the words on most Web pages without losing anything of value.

Getting rid of all the words that no one is going to read has several beneficial effects: it reduces the noise level of the page; it makes the useful content more prominent; it makes the pages shorter, allowing users to see more of each page at a glance without scrolling.

Happy talk is the introductory text that’s supposed to welcome us to the site and tell us how great it is, or to tell us what we’re about to see in the section we’ve just entered. But reading it, can you hear a tiny voice in the back of your head saying, “Blah blah blah blah blah….”

Happy talk must die. Happy talk is like small talk—content free, basically just a way to be sociable. But most Web users don’t have time for small talk; they want to get right to the beef. You can—and should—eliminate as much happy talk as possible.

The major source of needless words is instructions; no one is going to read them—at least not until after repeated attempts at “muddling through” have failed. And even then, if the instructions are wordy, the odds of users finding the information they need is pretty low.

Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to the bare minimum.

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

Looking for things on a Web site and in the “real” world have many similarities. The difference is that on a Web site there’s no one standing around who can tell you where things are. The Web equivalent of asking directions is searching—typing a description of what you’re looking for in a search box.

Some people will almost always look for a search box as soon as they enter a site, while others will almost always browse first, searching only when they’ve run out of likely links to click or when they have gotten sufficiently frustrated by the site.

The decision whether to start by browsing or searching depends on users’ current frame of mind, how much of a hurry they’re in, and whether the site appears to have decent browsable navigation.

Consider that there is no sense of scale. The practical result is that it’s very hard to know whether you’ve seen everything of interest in a site, which means it’s hard to know when to stop looking. Even the people who manage Web sites often have very little idea how big their sites really are.

One reason why it’s useful for links that we’ve already clicked on to display in a different color because it gives us some small sense of how much ground we’ve covered.

There is no sense of location. In physical spaces, as we move around we accumulate knowledge about the space. We develop a sense of where things are and can take shortcuts to get to them.

When we want to return to something on a Web site, instead of relying on a physical sense of where it is we have to remember where it is in the conceptual hierarchy and retrace our steps.

Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for, and to tell us where we are and. But equally important what’s here. Also it tells us how to use the site. It gives us confidence in the people who built it. We always think: “Do these guys know what they’re doing?”

When we walk we expect to find street signs at street corners, we expect to find them by looking up (not down), and we expect them to look like street signs (horizontal, not vertical). The same we expect with Web navigation conventions.

Can you imagine how frustrating it is when one of the conventions is broken (when magazines don’t put page numbers on advertising pages, for instance). Don’t make your users experience this feeling.

Web designers use the term persistent navigation (or global navigation) to describe navigation elements that appear on every page of a site. Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you’re still in the same site what is very important.

Persistent navigation should include the five elements you most need to have on hand at all times: site ID, a way home, a way to search, utilities, sections.

The Home page is not like the other pages—it has different burdens to bear, different promises to keep and sometimes it means that it makes sense not to use the persistent navigation there.

On pages where a form needs to be filled in, the persistent navigation can be a waste distraction. For instance, when you’re paying for your purchases on an e-commerce site you want only to finish filling in the forms. The same when you’re registering, giving feedback, or checking off personalization preferences.

The Site ID or logo is like the building name for a Web site. When users go next page they need to see the name on their way in, whether they are still here or different site.

In the same way that we expect to see the name of a building over the front entrance, we expect to see the Site ID at the top of the page—usually in (or at least near) the upper left corner. Readers of Arabic or Hebrew pages might expect the Site ID to be on the right.

The Site ID represents the whole site, which means it’s the highest thing in the logical hierarchy of the site.

Since you don’t want the ID to be the most prominent element on the page (except, perhaps, on the Home page), the best place for it—the place that is least likely to make me think—is at the top, where it frames the entire page.

The Site ID needs to look like a Site ID. This means it should have the attributes we would expect to see in a brand logo or the sign outside a store: a distinctive typeface, and a graphic that’s recognizable at any size from a button to a billboard.

The Sections—sometimes called the primary navigation—are the links to the main sections of the site: the top level of the site’s hierarchy. In most cases, the persistent navigation will also include space to display the secondary navigation: the list of subsections in the current section.

Utilities are the links to important elements of the site that aren’t really part of the content hierarchy. These are things that either can help me use the site (like Help, a Site Map, or a Shopping Cart) or can provide information about its publisher (like About Us and Contact Us).

Like the signs for the facilities in a store, the Utilities list should be slightly less prominent than the Sections.

Having a Home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a Reset button or using a “Get out of Jail free” card.

Given the potential power of searching and the number of people who prefer searching to browsing, unless a site is very small and very well organized, every page should have either a search box or a link to a search page. And unless there’s very little reason to search your site, it should be a search box.

Keep in mind that for a large percentage of users their first official act when they reach a new site will be to scan the page for something that matches a simple formula: a box, a button, and the word “Search.” Don’t make it hard for them—stick to the formula.

Avoid fancy words. They’ll be looking for the word “Search,” so use the word Search, not Find, Quick Find, Quick Search, or Keyword Search. (If you use “Search” as the label for the box, use the word “Go” as the button name.)

Avoid instructions. If you stick to the formula, anyone who has used the Web for more than a few days will know what to do. Adding “Type a keyword” is like saying, “Leave a message at the beep” on your answering machine message: There was a time when it was necessary, but now it just makes you sound clueless.

Avoid options. If there is any possibility of confusion about the scope of the search (what’s being searched: the site or the whole Web; by all means, spell it out. But think very carefully before giving options to limit the scope and providing options for how I specify what I’m searching for (author, or product name).

If you’re going to provide options, you need to make sure that they actually work.

It’s vital to have sample pages that show the navigation for all the potential levels of the site before you start arguing about the color scheme for the Home page.

Page names are the street signs of the Web. Just as with street signs, when thingsare going well users may not notice page names at all. But as soon as they start to sense that they may not be headed in the right direction, they need to be able to spot the page name effortlessly so they can get their bearings.

Every page needs a name. Just as every corner should have a street sign, every page should have a name.

The name needs to be in the right place. In the visual hierarchy of the page, the page name should appear to be framing the content that is unique to this page.

The name needs to be prominent. You want the combination of position, size, color, and typeface to make the name say “This is the heading for the entire page.” In most cases, it will be the largest text on the page.

The name needs to match what users click. Even though nobody ever mentions it, every site makes an implicit social contract with its visitors. In other words, if they click on a link or button that says “Hot mashed potatoes,” the site will take me to a page named “Hot mashed potatoes.”

Sometimes you have to compromise, usually because of space limitations. If the words users click on and the page name don’t match exactly, the important thing is that (a) they match as closely as possible, and (b) the reason for the difference is obvious.

If you’re a designer and you think a visual cue is sticking out like a sore thumb, it probably means you need to make it twice as prominent.

Like “You are here” indicators, Breadcrumbs show you where you are. Done right, Breadcrumbs are self-explanatory, they don’t take up much room, and they provide a convenient, consistent way to do two of the things you need to do most often: back up a level or go Home.