Merchandising Usability: Better Ways to Display Product Recommendations

Have you noticed that, when showing cross-sells and upsells, many ecommerce sites hijack you off the page you're looking at to view the suggested item, often with no way back to the other page without hitting "back?" Surely this is not the most usable way to suggest products and improve merchandising conversion rate.

Surely cross-sell usability is a factor in their effectiveness. But how can you show customers information about cross-sells without forcing them to abandon the page they're viewing?

AJAX Hover

My favorite way to show cross-sells/upsells is to expose as much relevant product information pre-click. This can be achieved with an AJAX "hover" box. At the very least, you want to show the item's title, price and stock availability. You could also show a brief description, delivery options, average customer rating or sales rank, or available colors. Barnes and Noble even allows a quick Add to Cart button:

But there's potential to shove a lot more information into a hover box, like TheFind's UpFront feature which even has tabs:

Quick View

Foot Locker gives customers the option of a "Quick View" preview:

You can select your product size, color etc and even add to cart without leaving the initial product page. The only tricky part is if you don't click the right area of the thumbnail, you'll get the full product page loading. This is a usability beef I have with Quick Look and Quick View features. However, if you do accidentally load the page, Foot Locker provides a recently viewed sidebar for quick return:

Comparison Matrix

When the suggested items are "upsells" (suggesting more expensive version of product from same product line) or "alternative products" (from the same category and similarly priced), it would be helpful to provide a checkbox comparison feature that whips up a product comparison matrix for the customer. I have yet to see this implemented in practice, but here's a mockup of what it could look like:

This doesn't make sense if you're showing "cross-sells" of related products that you hope the customer will buy in addition to the product being viewed. You shouldn't compare apples to watermelon to donuts.

Add Bundle to Cart

Amazon and Sears allow customers to add cross-sells to the cart as a bundle, with the option to remove suggested items they don't want:

These are a few ways you can improve the usability of your cross-sells and upsells, and hopefully push their conversion North too.

Victoria's Secret has a nice layout for cross-sells with the ability to add them to cart from the product page.

The problem is, unless you make all your selections before you hit any of the 3 "Add to Bag" buttons, you will be taken to the cart page without a link back to where you were. There are no clear instructions on how to make it work if you're not sure.

Martin and Osa's shop by outfit bundle configurator allows you to make your selections one by one without leaving the page, when you're ready you click "Add to Bag."

Carry Suggestions to Cart

Some customers will be conditioned to not click on related items for fear of losing their place on the page they're viewing. Arden B shows the same cross-sells in the cart summary page:

Walmart shows the following recommendations at the bottom of the product details when viewing a baby stroller:

After you add the product to cart, your cart updates with an AJAX box (top right), and you stay on the product page, but "Customers Who Bought This Item Also Bought" moves to the top, and the product details move below. Smart.

Sears also does something similar, taking the customer to a landing page showing "bought this, bought that" items and category top sellers after an item is added to the cart: