Comparing Compare: How online retailers can get it right.

James Breeze & Joanna Lewis recently had their article published in UX Magazine. Here is a shortened version of their article.

Comparing-compare-small

Comparing is a natural part of the purchase journey, especially when buying something that can be configured, or that has complex specifications. So how do online retailers help consumers compare products as part of a smooth and natural interaction in the purchasing journey?

Using the scenario of looking for a 3D TV as an example, we looked at how sites accommodate the desire to compare. We found three common approaches to comparing complex products.

 

Approach 1: Select and Compare

The traditional way is a two-part process:

  1. Select two or more items to compare, and
  2. Click the compare button

Dick Smith, for example, uses the ‘select and compare’ approach. Having found the right page for a 3D TV, it takes a truly dedicated shopper to scan the product list and find the compare checkbox in the product listing. The checkbox appears to be the only item in the larger box not given a design treatment. Further complicating matters, once the compare checkbox has been found, it is impossible to find the compare button. 

Screen_shot_2012-11-15_at_1

Approach 2: Filter and Compare Product Listing

A second way to accommodate the desire to compare is to build it into the design of the product category pages themselves. While not strictly a compare feature, with careful design of the product list or grid view, you can compare on a category page without the clunky two-part process. This is easier when you are comparing apples with apples, and there is no excuse for messing it up.

Kogan, for example, has features highlighted and colour coded for quick scanning. If you know nothing about 3D TVs, this tells you the important aspects to compare. However, those looking for more specs to compare may be disappointed. 

Screen_shot_2012-11-15_at_1

Approach 3: Having a Ready-Made Comparison Page

A third way to compare is the ready-made comparison page. This approach also works best when comparing apples with apples, so, not surprisingly, this is a feature of product manufacturer and comparison sites—such as in the Apple example below. It’s not often employed on retail sites, where product descriptions are provided by an array of manufacturers, making comparison less straight-forward.

On the Apple site, the ready-made comparison page ‘Which Mac is right for you?’ uses layout to make specs comparable, although the addition of rows to distinguish between data would make it clearer.

Screen_shot_2012-11-15_at_1

 

What Works Best

To summarize:

  • Standardize data using dot points in the product list as much as possible.
  • Color code similar data to improve scanability of the list.
  • Don’t crowd the product list with too much content.
  • Provide feedback when shoppers select products to compare.
  • Make the compare button obvious.
  • Learn from the manufacturers—if possible, provide a ready-made comparison page to assist decision-making.

You really need to design carefully for compare to satisfy savvy shoppers, especially when the products are complex. Online retailers that haven’t done so already need to shape up and provide easy-to-use comparison tools and tables to support shoppers in their decision-making process. Surely, retailers would rather keep shoppers on their site to compare and buy than have them leave to compare elsewhere.

By: James Breeze, Joanna Lewis

Full article in UX Magazine: http://uxmag.com/articles/comparing-compare

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s