在电子商务网站上,购买产品的第一步是将其添加到购物车。清除feedbackthat this step was completed successfully gives users a sense of control and allows them to confidently continue shopping or proceed with their checkout. (It also complies with two of the10可用性启发式-系统状态的可见性并且预防错误,因为它安慰他们没有的人sl并添加了错误的项目。)

但是,我们对电子商务网站的可用性测试表明,当产品已添加到购物车时,许多网站确认确认较差。具体而言,这两个问题经常出现:

  • 目前尚不清楚该网站是否处理了加载购物车操作。
  • 如果处理行动,则无论是何种行为正确的推车添加了产品(包括尺寸,颜色或数量等特定选项)。

当遇到这些问题时,用户通常会感到迫切需要仔细检查并确保换乘器操作已成功完成。这种行为表明,他们对购物车添加了较差的经验。

这是电子商务网站的一种相对较大的可用性问题 - 我们在前一轮电子商务用户研究中报告了它,我们将公开警告这个设计缺陷作为前3名bad new ecommerce design trends in 2014。我想我们徒劳地警告,因为同样的问题已成为更差现在,通过我们刚刚完成的新一轮电子商务测试证明。

Badges on the Cart Icon

叠加在购物车图标上的明显徽章清楚地表明购物车中的物品数量,并且可以间接保证用户已成功添加到购物车的用户。如果它的颜色与购物车图标对比,徽章会显然脱颖而出。

If possible, include the cart subtotal near the icon as well. The subtotal helps in several ways:

  • 用户可以在某种程度上推断出一个主要错误(例如添加多个项目)。
  • A change in the subtotal can attract the eye (especially if accompanied by motion or animation).
  • The size of the cart is increased and represents a larger target for mouse orfingers那leveragingFitts的法律
Buddiboxes's mobile site shows the running subtotal in the cart icon
The mobile site of Buddhiboxes.com showed a cart icon, the number of items in the cart, and the running subtotal, proving that displaying all these details is possible even on a small screen. Users were provided with useful, easily recognizable information; the larger shopping-cart target area was easy to tap without accidentally hitting other UI elements.

确认将物品添加到购物车

但是,只需更改购物车图标以反映推车中的物品数量是不够的。除了购物车图标上的这个数字徽章外,使用二级,更明显的指示器来确认产品已添加到购物车。典型的例子包括一个巧妙的animated弹出窗口或单独的页面显示哪些产品已添加到购物车中。包括产品的图像和这些确认中的相应选项列表。但是,不要过度使用动画:少量运动可以引起注意,但很多运动都分散注意力和烦恼。

stay覆盖从景色中迅速消失。这些突出部的暂行性质可防止用户轻松审查具体来说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.

在我们新一轮的可用性测试,participant shopping on Burberry.com added a coat to her cart, noticed the overlay showing that the product had been added to her cart, and began moving her mouse over to the overlay to doublecheck that the item was the size she wanted. 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 Transient Roverlay添加到购物车
Burberry.com上的叠加显示,一个项目已被添加到购物袋中,但很快就会消失。我们的研究中的参与者试图审查反馈,以确保他们已将合适的物品添加到他们的包中,但由于瞬态叠加,因此不能这样做。

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

  • 覆盖或弹出草doesn’t obstruct产品页面上的关键信息,并不自行消失,或者
  • A banner that appears on the product page at the top of the page, or
  • 一个显示一个新的缺口页产品X已添加到购物车中message, with查看购物车,Checkout,Continue购物纽扣
Saks第五大道非模态叠加,显示了将物品添加到购物车中的反馈
SAKS第五大道展出了一个非透明度在用户向购物车添加产品后,覆盖层并没有自己消失。虽然叠加层遮挡了一些页面内容(我们不推荐的一些页面),但它仍然保持了主要的产品信息。此外,覆盖物的非透明度允许用户在不驳回覆盖层外选择链接。最后,叠加层看起来不像我们研究中的用户的时事 - 注册弹出窗口的类型dismiss without reading

Boden显示横幅指示已添加到购物车的横幅,但还包括交叉销售促销活动
Bodenusa显示了产品上方的横幅,以表明它已被添加到购物车中。此横幅适当地显示了产品图像,选项选择的选项,以及结帐过程的清晰链接。但是,它还包括upsell促销(We saw these and thought of you),它可以有两个缺点:(1)用户可以假设推销中的促销是他们的购物车中的项目,并怀疑他们为什么与他们添加到购物车的实际产品不同,而且(2)他们也可能引起横幅失明和get ignored.

Macy的iOS应用程序显示新的鸿沟页面以确认已添加到购物车的项目
The Macy’s iOS app took users to a new interstitial page to show that an item had been added to the cart. 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.

这些变体中的哪一个适合您的设计取决于您的用户的购物行为。在大多数情况下,叠加或横幅显示成功添加到一个人推车的横幅最有用,特别是在用户倾向于购买或比较几个项目的网站上。但是,在有限数量的选项(如自定义家具商店)的网站上,或者在会话中仅购买1-2个项目的用户(例如,重复用户,如亚马逊PRIME购物者,他们不费心巩固单个订单中的多个项目),卧间页面可以keep users focused on the checkout process,并加快它。

Whichever pattern you choose for your site, show:

  • 一个很大的大小产品映像正确反映用户选择的颜色或其他选项
  • The name of the product
  • The price of the item
  • 增加的数量
  • 列出所选的任何选项(大小,颜色等)的附加文本

Changes to the添加大车按钮

在我们的可用性研究中,许多参与者多次将同一商品切入购物车,然后在结账时感到惊讶,当时他们注意到复制。人们可以多次将项目添加到购物车的原因有很多:

  • They may forget that they have already put the product into their cart, either because of a distraction or because their purchase was split across a longer period of time (e.g., several hours or even days).
  • When engaging in comparison shopping across different similar items, people may save candidate products in their shopping cart (a form of external memory).
  • As they reach the same item in multiple ways (e.g., from asearch-results page和from a有关的产品list on a product page), they may add it to their cart each time, without realizing that they have saved it before.
  • 该网站可能提供差的反馈,即将物品添加到购物车,用户可以按下该项目添加到购物车button multiple times.

How can designers remind users that an item was already added to cart? Here are some options:

  • 添加消息表示该项目已在推车中。此消息应视觉上突出并放置在旁边添加到购物车按钮。此外,应更改按钮的标签加上另一个(或类似)。虽然不是每个用户会注意到这些变化,但有些意志。
  • 灰色添加到购物车button or change it to查看购物车,在购物车中,或者到复选标记,以指示该项目在购物车中。We don’t recommend this option,因为它阻止人们向购物车添加更多相同的商品。为避免此问题,采用此解决方案的许多站点使标签更改瞬态并将按钮还原回标准添加到购物车几秒钟后。这意味着有些用户可能会错过标签更改,并且仍将多次将物品添加到购物车。
Rose and Rex changed the Add to Cart button to a checkbox temporarily
玫瑰&rex改变了添加到购物车button to a checkbox after an item was added to the cart; a few seconds later, this label reverted back to a standard添加到购物车那其中没有提供该项目已在推车中的任何指示。
Freshdirect shows a small, easy-to-miss indicator that an item was already in the cart
Freshdirect.com showed a small message below the添加到购物车button to indicate that there were already two of this item in the cart. While potentially helpful, such a message is easy to miss.

结论

当他们将物品添加到购物车时,为用户提供适当的反馈,包括以下所有内容:

  • 购物车图标上的徽章
  • 持久覆盖或新的缺口页,显示该项目已成功添加到购物车(以及关于产品的详细信息)
  • 改变了添加到购物车按钮以展示该项目已在购物车中(但能够将更多相同的商品添加到购物车)

了解有关使购买更容易的更多信息我们电子商务报告新版中的800多个UX指南系列。