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:

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

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:

The comparison matrix for the iPod actually shows much more information than the screenshot shows, 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 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.