Optimizing Ecommerce Usability – Product Comparison Matrix

The product comparison matrix improves estore usability by allowing shoppers to compare a shortlist of products side-by-side and eliminating the need to “pogostick” back and forth between product pages. It also provides users with a better system than using the shopping cart as a holding tank for product comparison, which should improve your shopping cart abandonment rate.

A product comparison table may not be necessary for every type of product. For example, electronics or computer equipment that have a variety of brands, models and product features to compare, the comparison table makes sense. CDs and DVDs are identical among sellers with exception of price and shipping costs/return policies. Comparison of these items between stores in shopping engines makes sense, but not for an individual retailer. Clothing typically doesn’t need to be narrowed down to a single choice (well, maybe for a wedding dress). A better use of programming for apparel would be to provide better photo/color switching functionality and close-ups.

I’ve put together a few examples of the top electronics retailers that are doing product comparison effectively:

Best Buy

Typically with product comparison, you can check off the items you want to compare:

best-buy-compare.gif

And then you’ll get a pop-up like this:

best-buy-matrix.gif

The advantage of the popup is that you don’t navigate away from the product page itself, and can return or even keep both open at the same time. Notice the ability to eliminate products by clicking “Remove Item.” You can also print the matrix to keep offline, very handy.

Unfortunately Best Buy does not enable you to sort other than to remove products. But you can compare price, availability and other specs (not all shown in the screenshot). The clear “Out of Stock” and “In Stock” information is very valuable.

Radio Shack

Radio Shack’s matrix loads in your browser like so:

radio-shack-matrix1.gif

The comparison matrix for the iPod actually shows much more information than the screenshot shows (click here to see what I mean), including customer ratings and a more detailed list of features. Radio Shack also gives you a Print option. This matrix could be more usable by adding an “Add to Cart” button. Great idea to warn the customer that the product is available in-store only in the matrix rather than at check out.

TigerDirect

tiger-direct-matrix.gif

Tiger Direct has a similar layout to the others, but is missing the Print feature and customer ratings (but does have an “Add to Cart” button). Though minor, it would reduce visual clutter and improve scannability to reduce the length of the clunky “remove” text from “Remove from Comparison” to “Remove” or “Remove Item.”

The Takeaway

Everyone loves a checklist, so here are some points to consider when developing or redesigning your own comparison matrices.

1. Make it easy to print
2. Include as much product info as you can
3. Always show prices (as long as this makes sense for your business)
4. Make sure you provide an “Add to Cart” button
5. Allow users to remove items from comparison
6. If possible, show if an item is in stock, qualifies for free shipping or is only available in-store
7. If you have customer ratings available, include them in the matrix
8. As much as you can help the user refine the results before comparing, do it (by price, brand, storage, type etc)
9. If you can show actual or estimated shipping costs, this is a bonus
10. For some industries, it makes sense to include an “email this product” link (for instance, a customizable promotional product distributor showing a shortlist of products to a client from a wholesaler’s catalog)

And if you really want to be Web 2.0, add a “bookmark with {insert social wishlisting site here}” chicklet, and allow your visitor to evangelize your product to their network.

Next week I’ll post a usability review of a top electronics retailer that doesn’t provide product comparison. So stay tuned for Part 2.

Related Articles

2 Responses to “Optimizing Ecommerce Usability – Product Comparison Matrix”

  1. Good article Linda, and a subject very much in tune with my experiences. I’ve previously worked at Littlewoods Shop Direct Group (one of the UK’s largest home shopping and online retailers) and when you have a product range such as some of these brands (10,000 plus in some cases) providing users with intuitive and productive ways to compare their potential purchases can be key way to keep their browsing and shopping momentum moving.
    This is even more crucial with the continued rise of comparison sites which are built around this functionality.

    One key recommendation I would add to your list for comparison pages is to actually make the design user centred, with the appropriate use of white space and the removal of clutter where possible. For instance the Tiger Direct version can appear overwhelming due to a lack of focus on providing the user with a clean and uncluttered feel to what is an information rich page.

  2. [...] reviewing the helpful product comparison features of RadioShack, BestBuy and TigerDirect, my recent visit to the Sharper Image has left a few things [...]

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS