Better Ways to Display Product Recommendations
Jul 8th, 2009 by admin
Have you noticed that, when showing cross-sells and upsells, many ecommerce sites hijack you off the page youre 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.
Picture of Merchandising Usability: Better Ways to Display Product Recommendations [source:getelastic.com]
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 theyre viewing?
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 items 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 theres potential to shove a lot more information into a hover box, like TheFinds UpFront feature which even has tabs:
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 dont click the right area of the thumbnail, youll 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:
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 heres a mockup of what it could look like:
This doesnt make sense if youre showing cross-sells of related products that you hope the customer will buy in addition to the product being viewed. You shouldnt compare apples to watermelon to donuts.
Amazon and Sears allow customers to add cross-sells to the cart as a bundle, with the option to remove suggested items they dont want:
These are a few ways you can improve the usability of your cross-sells and upsells, and hopefully push their conversion North too.
Victorias 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 youre not sure.
Martin and Osas shop by outfit bundle configurator allows you to make your selections one by one without leaving the page, when youre ready you click Add to Bag.
Some customers will be conditioned to not click on related items for fear of losing their place on the page theyre 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:[source:getelastic.com]
Related posts: