Having users compare, contrast, and choose something from a set of options is one of the highest-value activities performed on the Internet. If people choose correctly, a sale or other desired action may follow. Wrong choice, and you’ll either fail to close the deal or have a dissatisfied customer.
In e-commerce, product choices are typically offered on category pages, sometimes using special comparison tools or overview tables. A classic design mistake is to give overviews that list all product attributes as an undifferentiated mess, even if most values are the same for all or most items.
Rather than treating all features the same, you can help users make the right choices by following two key guidelines:
If options differ on only a few attributes, highlight those features in a comparison table or move them to the top of the list. Sometimes, you can achieve additional clarity by merging cells across columns for attributes that are the same for all products.
If there are many differences but only a few are truly important, highlight these key differences to focus users' attention on the things that matter. You can also use progressive disclosure to give details on minor issues to the people who need them — and avoid overloading everyone else with extraneous details.
Implicit Differences Are Dangerous
Even if options have only a few simple differences, users might overlook or misunderstand their choices if the exact differences are left to the imagination.
For example, to prepare for a new course on the usability of university websites, we recently tested different ways of explaining tuition rates for students attending university. At many state universities, tuition differs depending on whether the student lived in the state before applying. Now, let’s say that you live in California but are interested in going to the University of Colorado. Assuming you correctly navigated to the following page on the school’s website, how would you determine your tuition and costs?
University of Colorado Boulder: Step 1 in determining tuition/costs.
In this design, the difference between "resident" and "nonresident" students is implied, but not explained.
Most likely, you would click the link for "Nonresident Undergraduate Estimated Costs/Tuition," right? Good for you — but many high school seniors would make a mistake here, as we know from testing. (User testing is better than guessing based on your own reactions to a design.) Compared to those prospective students, you have three advantages:
Maybe most important, you're not a teenager, so you have better research skills (some of which you probably acquired at university, but our test participants were not here yet). Testing university sites with high school seniors strikingly confirmed the findings from our previous usability research with teenage users: teens are impatient, superficial, and have extremely poor research skills.
In addition, I just primed you to pay special attention to the issue of different tuition rates for people depending on where they lived. (Priming is covered in greater detail in the course on The Human Mind and Usability. Basically, once something has been brought to your attention, it remains salient in your brain for some time.)
I further primed you about your own state of residence. Usually, even if people live in, say, California, they don't keep that fact at the front of their minds at all times.
So, in the early stages of researching college tuition, many users would click on the first link in the above screenshot, even if they didn’t live in Colorado. They would then be shown this screen:
University of Colorado Boulder: Step 2 in determining tuition/costs.
Although this page does say that it is "for Colorado residents," we know that users usually skip over blah-blah text. This is particularly true when the page features positively magnetic calls to action, like this screen does: users' eyes go straight to the clickable list of four different fields of study, and they spend their time on this page trying to match their desired field with the names of the colleges. (In our research, this step was extremely difficult for most applicants, because it assumes that high schoolers know how a university is structured. As always, bad IA bites hard. The more users have to ponder the middle of the page, the less they'll attend to the intro paragraph.)
I don't want to pick on the University of Colorado, because many other universities made the same design mistake, and users had trouble with tuition rates on many sites. However, compare the above with this design from the University of Idaho:
University of Idaho: The tuition comparison table makes the differences between residents and non-residents explicit.
Nobody made a mistake with this design (nor with similar designs at several other state schools).
The huge difference between the two designs is that the University of Idaho makes the distinction between the two classes of students explicit by including the name "Idaho" in the headings. When making a choice between the two columns, thinking about whether or not you actually live in Idaho is unavoidable.
Be Explicit, Confirm Choices
I’ve seen the following scenario play out repeatedly in more user testing sessions than I care to remember:
The user — let’s say, Alice — is presented with various options (here, A and B).
Alice really wants or needs B, but selects A because the difference between the choices is not made explicit. (Although it’s more common for users to select the first option by mistake, they also occasionally select later options by mistake.)
Alice spends a long time browsing pages about A.
As is often the case, Alice might never realize that such pages are wrong. Sometimes, users even buy or choose the wrong option, with potentially high-cost consequences down the road (such as a returned purchase).
In this case, Alice eventually realizes the error and has to suffer the interaction cost of changing back to option B. Even this best-case outcome casts a negative Halo Effect over the site by causing substantial frustration and lost time, making users less likely to ultimately convert and much less likely to return to the site at a later date.
I've seen this scenario play out many times each year throughout the 20 years I've conducted website usability research. It's not a new problem; because it's persisted for two decades, I safely predict that it will be with us for many more years to come.
A second scenario is also far too common:
Again, a user — let’s say, Bob — needs B, and the site has both A and B.
To find the product Bob employs search — whether an external search engine such as Google or Bing, or the site's own search.
For some reason, the page about A ranks high on the SERP, whereas the page about B is ranked much lower, as is the category page describing both A and B. (Such misleading rankings are one of the many reasons SEO is important for usability.)
We know that users look only at the top few SERP hits, and sure enough, Bob clicks the link for A, not knowing any better.
Bob is now in the area for A, without even the slight benefit of having seen that the site also offers B.
Because the A pages don't make the A vs. B distinction clear, Bob never realizes the mistake.
The search-driven scenario is harder to correct, because you don't want to spend much space on the A pages talking about B. The main fix is to make the distinguishing characteristics explicit in both areas. This will maximize the probability that users will eventually notice that they're in the wrong area. In our university example, if the "resident tuition" pages mention something like "tuition for Idaho residents," Californian students are more likely to recognize that the page is not for them and start looking for a page for non-residents.
The distinction between implicit and explicit differentiating criteria is one of the key usability determinants for any system that offers multiple options. Unfortunately, it's a design issue that's easily overlooked by people who know too much about the system — that is, anybody on the design team.
Likewise, in our tuition example, anyone who works in a university admissions department probably thinks that "resident tuition" is a highly explicit description of that option. Such distinctions are obvious to people with well-formed mental models of the domain. However, new users approach your design with a fuzzy (or even malformed) mental model of your domain.
So, anytime you hear design meeting participants say "X is obvious," remember that it might not be so obvious to people outside your organization.
The clearer and more explicit you can be — especially about distinctions — the more successful your site will be.