If you’re offering 2 or more similar products or services, people should be able to compare them easily.

It’s the vendor’s job to help people pick the product that suits their needs best. That’s what people expect, offline as well as online.

We’ve written about this before in ‘4 product comparison best practices’.

Don’ts

Hide the differences

A typical problem in product comparisons is that differences between products aren’t immediately apparent.

First Choice Power is a good example of a site that doesn’t tell people what the difference is between products but makes them look for it.

What’s the difference between Simply Better Price Plan 24 and Simply Better Price Plan? The description is pretty much identical.

On closer inspection I can tell the first one’s a 24 month plan and the other one’s a 12 month plan. They both promise a ‘guaranteed low price’. Is it the same price for the 24 month plan as for the 12 month plan? I have no idea.

Inconsistent order

Comparing products is only handy when the comparable characteristics are nicely lined up.

Nuon obviously thinks that would be making it too easy. That’s why they put “(Up to) £ 100 annual Direct Debit discount” respectively 1st, 2^nd and 2^nd. So you can look for it, instead of just see it.

No prices

You’ve probably noticed in the previous examples that companies like talking about price without actually telling customers what their product costs.

While that’s pretty creative, it’s not what people want. People want to know how much something costs. So tell them. Price plays an important in a customer’s decision making process. The more open you are about price, the easier it is to convince people to buy your product.

Fluffy copywriting

Web writers should not be paid by the word. Good web writing is brief and concise.

Describing your products in long, flowery sentences is not a good way to go.

Vertical

Keep scrolling to a a minimum to make comparing easy. Put similar products next to one another instead of underneath one another.

Belgacom lines up its products vertically. The comparable characteristics of the various products are never visible at the same time, which makes it harder to compare.

AGL makes it even more difficult. Not only do they list their products vertically, they only show the product details of one product at a time, at mouse-over. Not the greatest strategy if you want to make comparing your products easy.

Good examples

Tables

A table with 1 line per characteristic is the easiest way to compare products. If you can do this for your products, do it. Surfers love it. It’s clear, it’s easy. Combell understands.

Visual emphasis

The more expensive the product, the more room it gets at Combell. The expensive products also have a higher star rating. Visual tricks like that really work. Or are you intuitively attracted to the sad little one-star product? I didn’t think so.

Highlight the popular product

If you want to play into people’s herd instincts, it’s a good idea to highlight the ‘most popular’ product. The example below is from Shopify.

More explanation in a tooltip

At Basecamp they take it one step further. Not only do they highlight the most popular solution, there’s a tooltip with extra information on the various features. (Pity they only have a tooltip with extra info for the most popular solution.)

Most expensive product first

A/B-tests show that putting the most expensive product first does wonders for your revenue. Basecamp gets it right in that respect as well.

Blocks

If a table isn’t ideal for your products or if you think it’s too boring (trust me, it isn’t) you can always go for product blocks.

Telenet shows a fairly good example of these product blocks. The important product characteristics (price, speed, volume) stand out and are easy to compare. Still, a table would be even better.

And now for a totally unbiased example from a company that offers usability services. Product blocks with the characteristics in the same order in each block, to make comparing easy.

Everybody who shops on the web compares. They don’t just compare products from different vendors, but also different products from the same vendor.

This comparison behaviour goes for visitors of both b2c and b2b websites.

Allow users to compare

Comparing is a top task so make sure it’s easy to do on your website.

If you make it hard to compare your products, there’s a good chance your website visitors will not become customers.

What do your visitors expect?

• Main characteristics of the product or service on the product page, pereferably as a bulleted list.
• An overview of the similarities and differences of comparable products on 1 page. It’s really annoying if you have to get out pen and paper to write down product characteristics and then look for the differences between the products.

What do you need in order to compare?

• Clearly differentiated products or services. If you’re not sure what the difference is between product A and B, how is your customer supposed to know?
• If you want to compare products in a meaningful way, you need to know what the deciding factors are for your customers. Seems easy, right? Wrong. In about half of the projects we do, the company doesn’t know what their customers deciding criteria are.

What if you don’t meet these criteria?

• Make sure you do!

The choice is simple: adapt or lose customers.

Less than 10 products or services to compare?

Basic principle: all on 1 page

A search feature or wizard is not needed here. Your users probably aren’t rocket scientists but they aren’t idiots either.

Option 1: table

• Users love this. If it’s in any way possible, try this.
• Recent tests show that putting the most expensive products first is the most effective.

Top row: good examples by Shopify en Combell, lowest to highest price. Basecamp (bottom row) does slightly better: from highest to lowest price and with extra information on mouse-over.

Option 2: separate blocks

• Clear heading.
• Main characteristics in bullets, preferably in such a way that it’s easy to compare the different products or services (a.o. by the same order and approach).
• Price.
• Each block should be clickable in its entirety.
• Line up blocks horizontally whenever possible. That creates a better overview.

The blocks on the Telenet website offer a pretty good overview.

More than 10 products or services?

Facets

All products on 1 page with faceted search on the left.

2 good examples of refining results by faceted search: Bol.com (left) en Booking.com (right)

7 things to keep in mind about faceted search

1. Put the faceted search on the left. You can put it on the right, but less people will notice it. You can put it at the top of the page as well, but that will push the actual results down and that’s not ideal.
2. Limit facets to the main product characteristics. Don’t cram every detail in there.
3. Take your customers’ view on what the product’s main characteristics are. Remember: what you think, doesn’t matter. It’s all about your customers.
4. Make selecting and deselecting the facets easy.
5. It should be impossible for users to make a selection that delivers zero results.
6. In many cases, it’s helpful if the user can order the results list (alphabetically, by price, by size, …).
7. If there are more than 20 products in your list, it’s best to go for numbered results pages (cfr. Google).

Detailed comparison

A more detailed comparison, that sums up all characteristics of comparable products in a table can be very handy for certain products.

More on product comparison

• Trends in pricing tables
• 50 examples of pricing tables
• Best practices for faceted product search
• The basics of information architecture

Other options?

Have you seen other good examples? Maybe you came up with one yourself? Feel free to leave a link to it in the reactions or send us an email.

Want to know more about how to make good home pages, overview pages and detail pages?
Join us at one of our usability workshops.