Channels ▼
RSS

Building Web Sites With Depth (Web Techniques, Feb 2001)


Building Web Sites With Depth (Web Techniques, Feb 2001)

Building Web Sites With Depth

By Jakob Nielsen and Marie Tahir

Is the Web really the ultimate customer-empowering environment? The Web as a whole is empowering, because users have the option to click over to the competition at the slightest whim. So why do sites so often leave users feeling powerless? The Web increases accessibility and defies geographical barriers. But e-commerce sites often decrease accessibility and erect more barriers than you'd walk past in a store.

The Web is all about choice; the range of places available for users to transact business is astounding, the options almost endless. Individual Web sites, on the other hand, often don't give customers the flexibility that a physical store provides. Customers in physical stores have more power than customers on e-commerce Web sites. Customers in physical stores can approach an expert—either a salesperson or a fellow shopper—and ask questions, explain their problems, and get recommendations. If the customer wants to compare similar items that the store offers, the customer can view the items side-by-side (size permitting).

One of the oldest guidelines for usable interaction design is to increase the user's sense of control and freedom. It feels good to be in control. It feels bad to be dominated by a machine. There are exceptions to this rule, such as operations that you need to perform only once and where it may be better to abandon responsibility and let the system take over. The wizard used to install Microsoft Office is an example of an oppressive interface that's probably acceptable to most customers.

Viewed overall, the Web encourages unparalleled user freedom with millions of sites to choose from. In recent user studies, we've found that people sometimes browse multiple sites in parallel for ultimate control over where to shop and when to leave a site that's too difficult to use. At the same time, users are often powerless to choose the details of their destiny on individual sites. They can leave any time, but if they stay, they're locked into the site's way of doing things.

The contrast to physical stores is great: Stores empower users by letting them change tactics if something isn't working for them. If you get a lousy salesperson in a large store, you can look for a different one. Or, if the store map doesn't help you find the department you need, you can ask a salesperson or a fellow customer for help. If the item you need isn't available, good salespeople will help you locate items at other stores or in other departments, and have the items sent to you directly. Good stores know that it's not enough for the store to look nice—it must act nice as well, and support the total customer experience, including location, staffing, returns, payments, sales, and so on. E-commerce sites focus far too often on superficial niceties, without investing in their customers' underlying needs.

Web sites that provide better user experiences empower their consumers to reap the benefits of the Web, but don't let them lose the power and flexibility they'd have in a physical store. In other words, when customers have the options they want, customers have power. Unfortunately, most Web sites don't provide a user experience that feels like shopping—instead it feels like searching, which isn't the users' goal. Users want to shop or find information in a way that seems natural to them, not search or struggle using "Web tools and features" that offer inflexible ways to do and find things. Worse, these tools are often built without any regard for how real users think, group things, name things, or approach their problems.

Physical stores aren't perfect—far from it. Frustration abounds in physical stores, from parking, crowds, annoying salespeople, seeing the same thing for a better price in the next store, and products being out of stock. Shopping in the real world leaves people fairly powerless in the bigger picture. Sure, you can walk out of one store and drive to another, but it's a hassle to do so. And what are the chances that the next store will be any better, and that you won't have to drive to the neighboring town if you're still not satisfied? Thus, people have a great incentive to shop at the first place they visit.

Whether at a Web store or a real store, when users don't get what they want, they leave. But they leave more readily on the Web. In our recent e-commerce study (see "E-Commerce User Experience"), the most common factor that stopped users from buying on a site was that they couldn't find the item they were looking for. This accounted for 27 percent of all lost sales in our study. And when they used a site's search function to try to find items, the failure rate was even higher—a full 36 percent of users couldn't find what they wanted.

So is there hope for e-commerce sites that compete with physical stores? Certainly. Our research showed what did work for e-commerce site users, as well as what didn't work. From this research, we've developed specific user experience design guidelines that often focus on what we know works well in physical stores: options, flexibility, and guidance.

Search

Here's an area of e-commerce design that could exceed the capabilities of real people in physical stores, in terms of speed, accessibility, and comprehensiveness. In reality, search is one of the most common, and one of the least successful ways that users look for things on the Web. Search is often as bad as the worst salesperson or customer service representative. And unlike dealing with a real person, customers can't ask to speak to search's manager, although we've often seen users go to outside search engines such as Google when they have no success using a site's own search engine. From previous experience, users know that Google will find good answers, so they waste no time struggling with an internal search engine that returns junk hits. Of course, as soon as users leave for Google, they may also decide to take their shopping elsewhere. [Editor's Note: Jakob Nielsen serves on Google's advisory board.]

Search for customer needs, not just your product line. Make sure your search engine addresses customers' nonproduct needs, such as customer service. In physical stores, good customer service representatives and salespeople can easily help people find out where and how to check the gift registry, return items, or make payments. In contrast, none of the Web sites we tested appeared to support nonproduct searches for items like "payment," "price protection," and "returns." This was more than an annoyance; the user who entered "payment" had selected an item and couldn't get past the product page to check out. The search engine returned a "No products found" message. It's hard to imagine how bad a brick-and-mortar store would have to be to tell a customer looking for the checkout counter, "Sorry, we don't carry those..."

Tell customers what you don't have. A salesperson in a brick-and-mortar store generally tells you if the store doesn't carry what you're looking for. Search engines, on the other hand, often tell you nothing in this situation. When a search returns no hits, users struggle to understand what it means. Does the site not have the item? Is it called something else? Did you misspell the name? Think of the horror of a salesperson staring dumbly as you repeatedly ask for an item using different names, vocal inflections, anything to get your point across.

We didn't see any Web sites in our study that told users when they didn't carry an item. Instead, we saw users struggle to interpret empty search results. On CustomDisc.com, one user searched on "elvis" and got a hit on "Melvis/The Megatones." The user typed "presley" and got a hit on a band named Presley. The user typed "elvis presley" and did not get any hits. At this point, the user gave up. What the user didn't know—and search didn't explain—was that copyright restrictions prevented the site from selling Elvis Presley songs. CustomDisc explained these restrictions in its help section (see Figure 1), but it would have been better to do so in the search results.

Side-by-Side Comparison

People like to comparison shop. Nothing empowers a shopper more than getting the best deal. In both B2B and B2C studies, we've seen users again and again ask for ways to compare items side by side. Without comparison tools on Web sites, users must drill down to get information on a product, grasp the most important details, and either remember them or print them out, back up, find another item, and start the process again. Often users can't remember key features of one product once they've gotten to another, so they're forced to compare only based on what they do remember.

Advanced Web users create their own solutions. They would open multiple browser windows and tile them so they can see more than one product at once. This Web jockeying wasn't enjoyable for the users, however. They resented having to come up with a makeshift kludge, and would have much preferred the site to support what they wanted to do. The most successful sites we've seen provide tools to compare products.

Design comparison tables to highlight differences. Comparison tables work best when they offer a snapshot view to clearly show what's different about the products being compared. "Snapshot" implies that you can see the maximum amount of information at once, without a great deal of scrolling. Figure 2 shows a comparison table that users for the most part liked at www.hermanmiller.com. There are a couple of problems with this table: In several of the rows, every chair has the feature marked "yes." Seeing that all Herman Miller chairs have this same feature doesn't help users assess what's different about the chairs, and thus choose between them.

Users liked that they could see all the chairs in one place, but disliked having to scroll horizontally to do so, because they could no longer see the row headings. In general, users have difficulty with horizontal scrolling, so it's best to design to avoid it at 800 X 600 screen resolution. The type and format of the feature information in a comparison table must be uniform or it's meaningless to compare. We found that users must see explicitly whether a feature listed in one product exists in another—otherwise they're left wondering whether it doesn't exist, or just wasn't mentioned in the feature list.

Winnowing

While abundant selection ultimately empowers Web users, filtering through the good and the bad can overwhelm them if they don't get any help from the Web site. In physical stores, good salespeople listen to what a customer is looking for, and then point the customer to a selection of stock that meets the criteria. Similarly, when you have a large number of products or a lot of content on your Web site, you need to provide ways for your customers to narrow down the choices. We saw an interesting behavior in our study: No matter how Web sites displayed their product listings—with small, big, or no graphics, or with short, long, or no descriptions—users stopped looking at product listings after two or three pages. This means that if you have a large number of products, you need to help your customers narrow down the list to fit on two or three pages. We use the term "winnowing," originally meant as separating the wheat from the chaff, to refer to this process.

Describe the most useful differentiating factors for the product. In order for winnowing tools to work, you must understand how your users want to see subsets of your product. For example, many people in our study who had to buy toys for children wanted to search by age. Tools that narrowed toys down by grade or groupings like "infant" or "youth" were perplexing for people who didn't know what those terms meant. Toys by age and clothing by size (showing only what's in stock for your size, since you wouldn't change sizes to get an in-stock item) are examples of the most useful differentiating factors for winnowing.

Pick winnowing criteria your customers understand. For example, Peets.com, a coffee and tea site, offers a winnowing tool that asks users five questions, then recommends a coffee for them (see Figure 3). Unfortunately, users didn't understand what some of the questions meant—for example, they couldn't understand the flavors question. If preferred flavors are indeed highly relevant to coffee preference, Peet's should focus on explaining the questions and answers in more detail, or giving examples of foods with those flavors.

Empower Users to Close the Sale

We've only discussed a few of our 222 design guidelines here, so let's close with the most important of them all: If you increase users' sense of control while they're visiting your site, you'll achieve the best of both worlds. Users will feel good about your site and they'll enjoy their visits.

Design guidelines will take you only part of the way. To truly empower users requires a deep understanding of their needs and behavior, which will differ from industry to industry. Even so, we've found a surprising amount of overlap among different types of users, whether business professionals shopping for highly complex B2B products or "regular" consumers shopping for mass-market B2C products. Of course, it's often the same person who is a "B" from 9 to 5 and a "C" in the evening.


Jakob is a principal of Nielsen Norman Group and author of Designing Web Usability: The Practice of Simplicity. Marie is a senior user experience specialist in Nielsen Norman Group; she previously managed Intuit's human factors department.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video