Product overview: do’s and don’ts

Product comparison: a must-have

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.

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

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.