菜单 关闭

将项目添加到购物车:提供清除,持续反馈

通过 页劳布海默6月17日,二千零一十八

总结:要确认已将项目添加到购物车,显示数字徽章和确认弹出窗口或页面,并更改“添加到购物车”按钮的标签,同时保留添加该项的倍数的能力。


在电子商务网站上,购买产品的第一步是将其添加到购物车中。清除反馈成功完成此步骤会给用户一种控制感,允许他们自信地继续购物或继续结账。(它还符合10可用性启发-系统状态可见性以及错误预防,因为它使人们确信他们没有打滑的添加了错误的项目。)

然而,我们对电子商务网站的可用性测试表明,许多网站在确认产品添加到购物车的时间方面做得很差。明确地,这两个问题经常出现:

  • 尚不清楚网站是否处理了“添加到购物车”操作。
  • 如果操作被处理,没有迹象表明对的产品(包括特定选项,如尺寸,颜色,或数量)已添加到购物车。

当遇到这些问题时,用户经常感到必须再次检查并确保“添加到购物车”操作已成功完成。此行为表明他们以前在向购物车添加产品方面的经验不足。

对于电子商务网站来说,这是一个相对陈旧的可用性问题——我们在前一轮的电子商务用户研究中报告过这一问题,我们公开警告说这个设计缺陷是前三名之一manbetx官方网站手机版2014年电子商务设计新趋势manbetx官方网站手机版.我想我们警告是徒劳的,因为同样的问题已经变成更糟的现在,正如我们刚刚完成的新一轮电子商务测试所证明的那样。

购物车图标上的徽章

在购物车图标上叠加的醒目徽章清楚地显示了购物车中的物品数量,并可以间接地向用户保证产品已成功添加到购物车中。如果徽章的颜色与购物车图标形成鲜明对比,则该徽章将清晰可见。

如果可能的话,include the cart subtotal near the icon as well.小计有几个方面的帮助:

  • 用户可以在某种程度上推断是否犯了重大错误(例如添加多个项目)。
  • 小计的变化可以吸引眼球(尤其是伴随着动作或动画的变化)。
  • 购物车的大小增加,表示鼠标或手指,杠杆作用费茨法则.
Buddibox的移动网站在购物车图标中显示正在运行的小计。
Buddhiboxes.com的移动网站显示了一个购物车图标,购物车中的项目数,以及运行小计,证明即使在小屏幕上也可以显示所有这些细节。向用户提供了有用的,易于识别的信息;更大的购物车目标区域很容易点击,而不会意外碰到其他用户界面元素。

确认将商品添加到购物车

然而,仅更改购物车图标以反映购物车中的项目数是不够的。除了购物车图标上的数字徽章,使用辅助设备,更明显的指示,以确认产品已添加到购物车。典型示例包括微妙地有生气的弹出或显示已添加到购物车的产品的单独页面。在这些确认中包括产品的图像和相应选项的列表。然而,不要过度使用动画:少量的运动会引起注意,但很多动作既让人分心又让人恼火。

远离消失覆盖物很快就从视线中消失了。这些弹出窗口的短暂特性使用户无法轻松查看具体是什么最后进了购物车-尺寸和颜色对吗?观看反馈会成为一场与时间的竞赛,会产生压力,以及如何再次访问此信息的不确定性。

在我们新一轮的可用性测试中,一位在Burberry.com购物的参与者在她的购物车上添加了一件外套,注意到覆盖显示产品已添加到她的购物车,然后开始将鼠标移到覆盖层上,双击项目的大小。然而,在她读到覆盖图之前,它不见了。“我的包去哪儿了?我想它对我的鼠标的移动非常敏感。”

巴宝莉临时覆面,可加入购物车
Burberry.com上的覆盖图显示,购物袋中添加了一件物品,但很快就消失了。我们研究中的参与者试图回顾反馈,以确保他们在包中添加了正确的物品,但由于暂时的重叠,不能这样做。

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

  • 覆盖或弹出不妨碍产品页面上的关键信息,不会自己消失,或
  • 出现在产品页面顶部的横幅,或
  • An new interstitial page that shows a产品x已添加到购物车中消息,具有查看购物车, 结帐,继续 购物按钮
Saks Fifth Avenue非模态叠加显示项目添加到购物车的反馈
萨克斯第五大道非模态的覆盖没有消失在自己的用户添加了一个产品到购物车。虽然覆盖层掩盖了一些页面内容(我们不建议这样做),它仍然使主要产品信息保持可见。此外,覆盖的非模态性质允许用户选择覆盖之外的链接,而不忽略它。最后,覆盖看起来不像我们研究中的用户经常会出现的新闻稿注册弹出窗口。不阅读而解散.

Boden显示一条横幅,指示已将项目添加到购物车,但也包括交叉销售促销
Bodenusa在产品上方显示了一条横幅,表示产品已添加到购物车中。这个横幅恰当地展示了一个产品形象,选择的选项,以及与结帐流程的清晰链接。然而,它还包括促销活动(我们看到这些,想到了你 ),这有两个缺点:(1)用户可以假设促销活动是他们购物车中的商品,并且想知道为什么他们与他们添加到购物车中的实际产品不同,(2)它们也可能导致广告盲点被忽略了。

梅西的iOS应用程序显示一个新的间隙页面,以确认物品已添加到购物车中。
梅西的iOS应用程序将用户带到一个新的间隙页面,显示一个项目已添加到购物车中。当用户在会话期间可能只订购一些项目时,此模式非常有用;否则,它可能会破坏用户流。

这些变化中哪一种适合您的设计取决于您的用户的购物行为。manbetx官方网站手机版在大多数情况下,一个覆盖图或一个横幅显示某个东西已经成功地添加到一个人的购物车中是最有用的,尤其是在用户倾向于购买或比较多个项目的网站上。然而,在选择数量有限的场所(如定制家具店);或者在一个会话中只购买1-2个项目的用户(例如,重复使用的用户,如亚马逊Prime购物者,他们不必费心将多个商品合并为一个订单)。间隙页可以让用户关注结帐流程,从而加快速度。

无论您为站点选择哪种模式,展示:

  • 尺寸适中产品形象正确反映用户选择的颜色或其他选项的
  • 产品名称
  • 项目的价格
  • 增加的数量
  • 附加文本,列出所选的任何选项(大小,颜色,等)

改变到添加 大车纽扣

在我们的可用性研究中,许多参与者多次意外地将同一商品添加到购物车中,而且,当他们发现复制时,在结帐过程中感到惊讶。人们可以多次将商品添加到购物车中,原因有很多:

  • 他们可能会忘记他们已经把产品放进了购物车,要么是因为分心,要么是因为他们的购买被分割了一段较长的时间(例如,几小时甚至几天)。
  • 在进行不同相似物品的比较购物时,人们可以将候选产品保存在购物车中(外部存储器的一种形式)。
  • 当它们以多种方式到达同一物品时(例如,从A搜索结果页从一个相关的 产品产品页面上的列表)。他们每次都可以将其添加到购物车中,却没有意识到他们以前救过它。
  • 网站可能会提供不良反馈,表明该商品已添加到购物车中,用户可以按添加到购物车按钮多次。

设计师如何提醒用manbetx官方网站手机版户某个商品已经添加到购物车中?以下是一些选项:

  • 添加消息表示项已在购物车中。此消息应在视觉上突出,并放在添加到购物车按钮。此外,按钮的标签应更改为添加另一个(或类似)。虽然不是每个用户都会注意到这些更改,有些人愿意。
  • 灰白这个添加到购物车按钮或将其更改为查看购物车,In Cart,或打勾表示该商品在购物车中。我们不推荐这个选项,因为它阻止人们向购物车添加更多相同的商品。为了避免这个问题,许多采用此解决方案的站点都会使标签更改暂时性地发生,并将按钮恢复到标准状态。添加到购物车几秒钟后。这意味着一些用户可能会错过标签更改,仍然会多次将项目添加到购物车中。
Rose和Rex临时将添加到购物车按钮更改为复选框
罗斯和雷克斯改变了添加到购物车 将项目添加到购物车后的复选框按钮;几秒钟后,此标签恢复为标准添加到购物车, 但没有显示该商品已在购物车中。
FreshDirect显示一个小,容易漏掉的项目已在购物车中的指示器
freshdirect.com在添加到购物车 按钮指示购物车中已经有两个此项目。虽然有潜在的帮助,这样的信息很容易被忽略。

结论

在向购物车中添加商品时,向用户提供适当的反馈,包括以下所有内容:

  • 购物车图标上的徽章
  • 一个持久覆盖或新的间隙页面,显示该项目已成功添加到购物车(以及产品的详细信息)
  • 变了添加到购物车按钮以显示该项目已在购物车中(但可以向购物车中添加更多相同项目)

进一步了解如何使用电子商务报万博官网manbetx下载告新版800+用户体验指南系列。