菜单 关闭

将一个条目添加到购物车:提供清晰、持久的反馈

通过 页面Laubheimer2018年6月17日

简介:确认一个项目添加到购物车,显示徽章和一个确认窗或页面,和变化的标签添加到购物车按钮,同时保留项目的能力增加的倍数。


在电子商务站点,购买产品的第一步是将它添加到购物车清晰的反馈这一步是成功完成了用户的控制,并允许他们自信地继续购物或者进行检验(这也符合的两个10个可用性启发式- - - - - -系统状态的可视性和预防错误,因为它可以让人,他们还没有滑了一跤并添加了错误的项目)。

然而,我们的电子商务站点可用性测试表明,很多网站不能很好证实当一个产品已经添加到购物车具体地说,这两个问题经常出现:

  • 目前尚不清楚该网站加入购物车的操作处理。
  • 如果处理行动,没有迹象表明是否正确的产品(包括具体选项,如大小,颜色,或数量)被添加到购物车中。

When these problems are encountered, users often feel compelled to double check and make sure that the add-to-cart action was completed successfully.  This behavior suggests that they have had poor prior experiences with adding products to carts.

这是一个相对旧电子商务网站可用性问题,我们报道了在前一轮电子商务用户研究,和我们公开警告manbetx官方网站手机版缺陷的前三糟糕的新电子商务manbetx官方网站手机在2014年版的趋势我想我们警告徒然,因为同样的问题更糟糕的是现在,随着电子商务的新一轮测试证明我们刚刚完成。

徽章的购物车图标

A noticeable badge superimposed on the cart icon clearly indicates the number of items in the cart and can indirectly assure users that a product has been successfully added to cart.  The badge will stand out clearly if its color contrasts with the cart icon.

如果可能的话,包括购物车图标附近的小计小计可以在几个方面:

  • Users can infer to some degree if a major mistake (such as adding more than one of an item) was made.
  • 小计的变化可以吸引眼睛(特别是伴随着运动或动画)。
  • 购物车的大小增加,代表鼠标或一个更大的目标手指,利用费茨定律
Buddiboxes的手机网站显示购物车中的小计运行图标
的手机网站Buddhiboxes.com显示购物车图标,购物车中商品的数量,和小计,证明显示所有这些细节可能甚至在小屏幕上Users were provided with useful, easily recognizable information; the larger shopping-cart target area was easy to tap without accidentally hitting other UI elements.

确认添加商品到购物车

然而,仅仅改变购物车图标反映购物车中商品的数量是不够的In addition to this numeric badge on the cart icon, use a secondary, more noticeable indicator to confirm that a product has been added to cart典型的例子包括一个巧妙地动画弹出窗口或一个单独的页面显示的产品添加到购物车包括产品的图片,在这些确认相应的选项的列表然而,不要过度使用动画:少量的运动可以引起注意,但很多运动都是分散和烦人。

远离消失覆盖迅速淡出视图瞬态特性的弹窗可以防止用户容易复习什么特别的ended up in the cart — were the size and the color right? Viewing the feedback popover becomes a race against time and can create stress, as well as uncertainty about how to access this information again.

在我们的新一轮的可用性测试中,参与者购物车购物在Burberry.com上添加了一个外套,注意到叠加显示产品已经添加到购物车,和她开始移动鼠标到覆盖doublecheck项是她想要的大小However, before she could read the overlay, it disappeared. “Where did my bag go? I guess it’s really sensitive to the movement of my mouse.”

巴宝莉瞬态叠加加入购物车
在Burberry.com上叠加显示一个项目被添加到购物袋,但很快就消失了参与我们的研究试图评估反馈,以确保他们增添了正确的项目包,但不能这样做,因为瞬态叠加。

这是推荐购物车中显示反馈的方法:

  • 一个覆盖或弹出窗口不妨碍关键信息在产品页面,不会自行消失,或
  • 的横幅出现在页面的顶部的产品页面,或
  • 一个新的间隙页面显示产品X已经添加到购物车中消息,查看购物车, 结账,继续 购物按钮
萨克斯第五大道非模态叠加显示反馈,一个项目添加到购物车
萨克斯第五大道了nonmodal覆盖,没有消失在自己的用户的产品添加到购物车虽然覆盖了一些页面的内容(我们不推荐),它仍然保留了主要产品信息清晰可见此外,nonmodal叠加的性质允许用户选择链接外覆盖没有解散最后,覆盖的类型不像newsletter-signup弹出窗口,用户在我们的研究中常常把没有阅读

 

博登显示了一个横幅显示物品已添加到购物车,但也包括交叉销售促销
BodenUSA显示横幅上面产品表明它已经被添加到购物车中这个横幅适当显示产品形象,所选择的选项,结帐过程有明显的联系然而,它还包括增销促销活动(我们看到这些,想到你 ),有两个缺点:(1)用户可以假定促销物品的车,想知道为什么他们不同于实际的产品添加到购物车,和(2)他们也可能引起横幅失明和忽略。

 

梅西的iOS应用程序显示一个新的间隙页面确认一个项目已添加到购物车
梅西的iOS应用程序用户一个新的间隙页面显示一个条目被添加到购物车中This pattern is useful when users are likely to order only a few items during a session; otherwise, it can be disruptive for the users’ flow.

这些变化是适合您的manbetx官方网站手机版取决于用户的购物行为吗在大多数情况下,覆盖或横幅显示已成功添加到购物车是最有用的,尤其是在网站,用户倾向于购买或几项进行比较然而,对于网站的数量有限的选项(比如定制家具店),或与用户只购买1 - 2项在一个会话(例如,重复用户如Amazon Prime购物者不费心去巩固多个项目在一个单一的顺序),一个间隙页面让用户专注于结帐过程,从而加快。

无论你选择哪个模式为你的网站,显示:

  • 一个良好的大小的产品形象能够正确反映用户选择的颜色或其他选项
  • 产品的名称
  • 物品的价格
  • 增加了数量
  • 附加的文本选择任意选项清单(尺寸,颜色,等等)

更改添加 按钮

在我们的可用性研究中,许多参与者不小心多次相同的项目添加到购物车,然后在结帐时发现复制感到惊讶原因有很多人可能将一个条目添加到购物车几次:

  • 他们可能忘记他们已经把产品放进购物车,由于干扰或因为他们的购买是跨越更长一段时间(例如,几小时甚至几天)。
  • 当从事比较购物不同类似的物品,人们可能保存候选产品在购物车(外部存储器的一种形式)。
  • As they reach the same item in multiple ways (e.g., from a搜索结果页面and from a相关的 产品在产品页面),每次他们可能将它添加到购物车,没有意识到他们以前就保存。
  • 网站可以提供不良反馈项目添加到购物车,用户可以按下添加到购物车按钮多次。

How can manbetx官方网站手机版ers remind users that an item was already added to cart? Here are some options:

  • 添加一个消息表明该商品已经在购物车这个信息必须在视觉上突出,放在旁边添加到购物车按钮此外,应改为按钮的标签添加另一个(或相似的)虽然不是每个用户会注意到这些变化,一些人会。
  • 灰色的了添加到购物车按钮或改变它查看购物车,购物车,或者选中标记显示购物车中的项目。我们不推荐这个选项,因为它阻止人们添加更多相同的商品到购物车为了避免这个问题,很多网站采用这个解决方案进行标签更改瞬态和恢复按钮回到标准添加到购物车几秒钟后这意味着,一些用户可能会错过标签变化和仍然多次把物品添加到购物车。
玫瑰和雷克斯改变了添加到购物车按钮暂时一个复选框
玫瑰和雷克斯改变了添加到购物车  button to a checkbox after an item was added to the cart;  a few seconds later, this label reverted back to a standard 添加到购物车, 没有提供任何证据表明商品已经在购物车。
Freshdirect显示一个小,容易错过表明一个项目已经在购物车
Freshdirect.com显示下面的一个小消息添加到购物车 按钮显示,已经有两个车的这个项目虽然可能有帮助,很容易错过这样一个消息。

结论

给用户时适当的反馈他们的购物车添加一个项目,包括以下:

  • 购物车图标的徽章
  • 持久覆盖或新间隙页面显示项目已成功添加到购物车(以及关于产品的细节)
  • 一个改变添加到购物车按钮来展示这种产品已经在购物车(但能够添加更多的相同的商品到购物车)

了解更多关于简化购买800 +用户体验新版本的指南我们电子商务报告系列。