原文：Merchandising Usability:Better Ways to Display Product Recommerndations
作者：Linda-Bustos
译者：耿人杰

———————————— 全文的分割线 —————————————
引言：09年，越来越多的电子商务网🍬站出现在人们的生活中。交叉销售和向上销售被更经常地加入到网站规划和具体设计中。人们希望这些对购物的转换率有所提升。这篇网站正适合当前的背景，为我们很好的总结了推荐商品的展示方式的设计问题。

你注意到了吗，当展示交叉销售和向上销售（cross-sells and upsells）时（译者注：向上销售含义），许多电子商务网站会将用户从正🧸在浏览的网页劫持到他们想推荐的商品网页，🦩并且经常没有提供“返回”的链接。显然，这不是最有效的产品推销方式，有提升商品购买转换率的可能。

很明🅺显，交叉销售可用性是能否达成效力提升的关键因素。但如何做到在不打断用户浏览流程的前提下更好的给用户展示商品信息呢？

AJAX 浮层效果

我最推崇的展示交叉销售/向上销售的方式是通过鼠标悬浮（pre-click）来显示相关产品信息。这能以AJAX “hover” 效果来实现。至少，你能展示商品的标题、价格和库存情况。也可以展示下大致的商品信息、物流选项、顾客平均评分/销售评分、可💎选颜色等。Barnes and Noble甚至还能允许用户快速将该商品加入到购物车♋：

但这里有一个潜在的问题，太多的信息会充斥🌺在一个小的悬浮窗口中，像TheFind的前端功能竟然还包含标签：

快速预览

Foot Locker给消费者“快速预览”的选项：

你能选择产品尺寸、颜色等，甚至添加进购物车且不需要离开初始产品页面。唯一有些棘手的是，如果你不点击右侧的预览🐓小图就会直接读取产品全尺寸大图页面。这就是一些针对快速查看和快速预览功能的可用性总结。然后，🙈如果你偶然读取页面，Foot Locker会在副栏提供一个最近查看过的商品列表。

对比阵列

当建议的是“向上销售”（建议购买属于同一系列的更多更贵版本的产品）或“可选产品”（同一品类且价格相似的产品）的商品时，如꧒果提供一个复选框（check box）来提供功能比较矩阵来对比各个产品功能将会非常有用。我已经看到一些实现的案例，下方是一个有点类似的原型：

这种功能对“交叉销售”没有意义，因为将苹果、习惯和甜甜圈做功能上的对比没有意义。

将几种商品打包加入购物车

Amazon和Sears允许用户将多种商品打包加入收藏夹，并提供选项来删除那些你不需要的建议商品：

有几种方法可以让你改善交叉销售和向上销售的可用性.

Victoria’s Secret针对交叉销售有良好的页面布局，允许将多个商品加到购物车里。

这个设计的问题是，除非你点击3次“加入购物车”进行所有选择后，否则你将在进入购物车页面且无法回到刚才的商品页面。꧒如果用户不确定如何操作，页面上也没有清晰💮的指导。

Martin和Osa’s shop的装备捆绑配置允许用户一个接一个的做出购物选择而不用离开页面，🅰当你全部完成后点击一次“加入购物车”即𒅌可。

将建议带到购物车

一些顾客会担心如果点击了相关🐲的商品将不能回到他们正在看的商品页面。Arden B在购꧙物车汇总页面显示相同的交叉销售商品：

Walmart在商品细节的底部展示推荐商品，下图是浏览婴儿车的商品推荐：

在你将商品加到购物车后，你的购物车将铜鼓AJAX即时更新（右上角），用户仍然在产品界𒊎面，但“买了此商品的顾客还买了XX♚”移到了顶部，商品细节部分移到了下方。非常聪明的做法。

Sears也采用了类似的做法，当某商品被加到购物车后，将顾客﷽带到登入页（landing pag🐽e）并在顶部显示“买了这个，也买了那个”：