【译者：耿人杰 原文：107 Add to Cart Buttons of the Top Online Retailers

作者：Jason Billingsley】

引文：曾经有文提到google的一个按钮值3亿美金。同样，对于电子商务网站来说，“加入购物车”按钮也同样至关重要。说它关乎电子商务网站的生死也不为过。

———————————— 全文的分割线 —————————————

“加入购物车”按钮非常小，但每个在线购物网站都离不开它。按钮上的文字通常直接呈现在长方形的按钮控件上，有时五彩缤纷的可点击元素会将产品和购物车相联系起来，并有延伸品牌的功效。因此在购物车按钮的设计中，很重要的一点就是将你的一些想法代入到你所设计的产品中。

我们自2006起，从各个顶级在线零售网站已经收集了超过100个“加入购物车”按钮，这些按钮会带给你一些设计的灵感。此外，我们也总结了一些针对“加入购物车”设计的可用性指南共设计者参考。好吧，实际上是111个按钮，其中的107的看上去更酷。

（译者注：这里省略了这些按钮的图片，原文是里并不是一张整图，帖过来工作量太大，不帖也不影响对文章含义的理解，有兴趣的读者可去原文查看。）

以下是一些统计，百分比看上去更直观

按钮文字：

加入购物车                          58.0%

加入背包                              9.8%

加入到购物袋                           9.8%

加入到购物篮                           6.3%

加入到消费购物车                      4.5%

购买                                   2.7%

现在购买                              1.8%

将商品加入到购物车                 1.8%

将商品加入到背包                    0.9%

加入我的背包                         0.9%

加入我的便当                         0.9%

加入我的消费购物车                 0.9%

现在预订                              0.9%

按钮图片

没有                                  48.2%

箭头                                  17.9%

购物车                               14.3%

消费背包                              7.1%

加入符号                              5.4%

组合                                   4.5%

独特的设计                           1.8%

“加入购物车”按钮如何增强你的品牌

首先，“加入购物车”按钮看似是一个小细节，但它包含用户和品牌之间潜在的情感联系。你所选择的按钮样式、色彩和按钮文字都会影响这一情感联系的结果。

Urban Outfitters的手写字体按钮与其前卫和街头的风格相匹配（这有可能有损于按钮的可寻性，因为这无助于使按钮在屏幕上脱颖而出）。Northerntool的加入符号（plus sign）型图标酷似螺丝刀头。Petsmart的红色小圆球有趣且活泼，能即刻被认出。Bloomingdale的“big brown bag”图标阐述了它品牌的威望。而Polo永恒的深色海军蓝色按钮给线上和线下的品牌标识都带来了和谐的一致。

按钮文字也非常重要。“加入到购物袋”相对“加入购物车”听上去似乎更适合高端百货店，而后者可能更适合WalMart或Target。“现在预订”一致很适合目录推广品牌，但现在也适合用于在线订购。在英国，“加入购物篮”是更为普遍的术语。

按钮设计与可用性

按钮文字

网站文案强调高可看性（scannabliity），网站文案的黄金准则是：用尽量少的文字（don’t use 5 words when three will do）。这条准则如何应用到这样一个小按钮中呢？尽管如此，我们发现15%的按钮文字比较长。Harry and David的“加入我的消费购物车”，更个人化和口语化。

“现在购买”相比“加入购物车”表达方式更有力，但可能更多的是建议用户完成购物或作出一个购买的承诺，而不是再去检查一下订单。“加入购物车”的美感在于没有强制并假设用户还要继续随便看看。如果你是一个很好的电子商务销售人员，那么你正在展示推荐购买的商品和一个“欢迎继续购物”的链接（或者你正在使用一个以Ajax实现的内嵌购物车）。

文字样式

一般的网页可用性设计指南推荐使用有高色彩对比度的sans-serif字体（高对比度的白字黑底或白字暗蓝底，而不是像Chadwick低对比度的蓝字蓝底）。

全大写字体在网站文案中基本不被推荐。大小写混合更有利于阅读，全小写也具有同样的可读性。我们发现45%的“加入购物车”按钮使用全大写。Walgreen的白色全大写文字，包含在含有一个带有小图标的弧度按钮上，这种设计可以吸引部分用户的视线。

按钮的放置布局

如果在你的产品页面提供一些有用的功能，如：收藏夹（wishlists）、放大图片、色彩转换、其他可选产品预览、发送给好友、查看购物车或结帐按钮等等，请确认“加入购物车”按钮保持醒目、明亮和对比显著。次要功能按钮在色彩上需弱化或文字上简化。

文字叠加（译者注：文字分两行显示）

文字叠加对链接和导航按钮设计来说并不是一个好主意。同样，也不适合“加入购物车”按钮。用户期望看到某种形式的矩形按钮，这样可以快速扫视文字页面。文字叠加需要花费用户更多的时间来辨认按钮，甚至可能造成用户的困惑。我们没有必要去重新发明轮子，坚持简单便捷的方式就好。

如何使用按钮模板？

即使不为购物车功能设计定制一个“加入购物车”按钮，你也需要选择一个符合网站主题的按钮（并不意味着必须是完全相同的颜色）。请确认选择一个设计后持续使用它。电子商务的蓬勃发展由信用驱动的，不停的变化按钮会损害用户对你的信任。

【译者：耿人杰 原文：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 page）并在顶部显示“买了这个，也买了那个”：