In the first days of the COVID-19 pandemic, online grocery stores in the US were overloaded and often failed to meet the sudden demand. People were desperately filling in their carts only to discover that their order could not be delivered or there were no pickup windows available. Those lucky enough to place the order found that many of their items were missing upon delivery. Grocery stores were overwhelmed, the supply was low (as people were stocking up), and there were too few employees available to deliver the order or help with pickup.

The pandemic was a corner case for a system that was not designed for extreme situations: in typical circumstances, most stores in the US expect to be able to find a delivery window and to have a stable inventory that doesn’t change from one moment to the next. So, in normal conditions, it may be okay to ask users to select a delivery window or a pickup window during the last steps of the checkout. But, during the pandemic, that proved a big problem. Luckily, some retailers moved quickly, identified the issues, and fixed some of their flow problems.

It is impossible to predict every future emergency perfectly. All we can predict is that therewill be紧急情况:自然灾害,罢工,进口或出口禁令,战争,产品短缺,设备故障,并列出。许多此类障碍会影响电子商务网站的能力,如预期的那样,必须在用户体验中正确反映。You can’t design for every eventuality in advance, but, for proper contingency planning, you should develop an understanding of the kinds of things that can go wrong and of your users’ main concerns, and find the best way to clearly explain limiting circumstances and plan your response to fast-changing constraints.

那么,我们从大流行中学到了设计结账流程的东西?以下是一些课程,这些课程不会在下次灾难命中时更好地准备,但将改善在线购物的食物的整体用户体验。

交付和拾取

  1. 如果在开始购物之前,应当有任何送货或拾取时间有任何送货或拾取时间。所有用户都应该详细讨论此信息,无论是否记录。

在许多工作中添加物品来添加到购物车时,这是一个耻辱,只能在需要时找出订单无法交付或拾取。应在网站上明确披露可用于交付和接送的时间。用户不必创建帐户或登录以访问此信息。

Target did not allow shoppers to find if there are any delivery windows available in their ZIP code unless they created an account or logged in. The copy on the site saidSame day delivery to 94089 — Get it as soon as 6pm但邮政编码不正确,无法更改。此外,Get it as soon as 6pm没有关于交付窗口的足够特定信息。

请注意,模糊的措辞如Available today不是特定的足够 - 人们有各种各样的制约因素,并且经常希望确保他们在家安全地储存食物。允许用户查看其区域中可用的确切交付窗口,以便能够在开始购物之前进行明智的决定。即使您有一些送货窗口,请记住,人们可能会在其所需交货日期前几天购买杂货(特别是在大流行期间,他们了解到他们必须提前计划,并且很难确保它很难确保一个下一天的交付窗口)。

Amazon’s Whole Foods advertised that free pickup was available (top), but did not allow users to see pickup or delivery windows before they started shopping. Users had to add items to their shopping cart and go through checkout (bottom) in order to see if any delivery windows were available. If those windows proved inconvenient, the customer had to either abandon the cart or make arrangements for a different delivery date.
Instacart allowed users to see specific delivery times for a store before they started shopping.
  1. 在开始购物之前(或在购物过程中的任何时间)之前,应允许用户预留其交货或拾取的时间。

Scarce delivery windows were a common experience during the early months of pandemic. I have heard many stories of people staying up until 12 am or waking early in the morning to catch a delivery window. It was often the case that, when they had finally caught a window, they remembered that they needed an extra item and left the checkout to add it to the cart. Of course, once they came back, the delivery window was gone!

That is why it’s important to allow users to reserve a window. That reservation can be valid for a limited amount of time — say 30 minutes. (This approach is already used by event-ticket vendors.)

在结账过程中的任何时候,应在签出或稍后开始的任何一点中进行保留窗口的步骤,用户向购物车添加了一些东西。

Safeway allowed users to reserve a delivery time before they started shopping. However, this feature was only available to logged-in customers. Those who did not have an account had to create one in order to see the available delivery times or reserve one
Smart&Final: By clicking on theAvailable in 3 hrslink next to the cart (top), users could select a delivery window (bottom) as soon as they added an item to the cart, The design could have been slightly improved by allowing customers to select a delivery window even before they started shopping.
  1. If the user has specified a delivery time or location, check first that the delivery can be made at that time or location. Alert the user if any of these are unavailable as soon as possible in the shopping process.

With DoorDash, a restaurant-delivery application, users could locate a restaurant, set a delivery time, and spend time adding items to cart, only to then discover at checkout that the restaurant was either closed at the desired delivery time or did not deliver to the user’s address. Even though the restaurant page included that information, it was not clear enough and easy to miss. A better solution would have been to alert users as soon as they started adding items to the cart and offer them a suggestion for how to proceed (e.g., tell them that they should switch a different restaurant).

doordash允许用户添加到购物车167美元从用户地址没有提供的餐厅(已作为第一步提供的餐厅)。最重要的是,Doordash也没有提供清空推车的简单方法 - 强迫用户逐一删除所有项目。餐厅的页面确实说了餐厅是Unavailable, but that information was unclear (it could have been that it was closed at the time when placing the order) and was ignored.

一旦用户有一个项目添加到购物车,delivery information and time should be confirmed, in order to make sure that people don’t spend unnecessary effort on an impossible task. If the delivery time and address are not serviceable, alert the user before it’s too late. Offer them alternatives whenever possible (e.g., different delivery times or different restaurants).

Yelp: When the user selected an item from a restaurant that was closed at that time, the site alerted the user. It would have been better if the alert had also offered a link to the page where the delivery time could be changed.
智能和最终要求用户在用户向购物车添加物品时确认交付区域,以确保可以从所选商店传送项目。(理想情况下,应在同一步骤中选择交付商店和交付位置。)

Replacements and Substitutions

Especially during the pandemic, supply chains became overstressed and certain products were available for a short amount of time. It was very common for people to add an item to their grocery shopping cart only to discover that it was out of stock on the day when they received their order and it was replaced for something that was completely useless. For example, in one of my orders, cleaning vinegar was replaced with organic lemon juice. A friend received beets instead of radishes.

为避免令人不快的惊喜,准备购物者,以便物品缺货,并允许他们指示替代品。并且,一旦指定了那些替换选项,就坚持了它们。

  1. 允许用户在购物时指定低股票产品的替代品。在订购产品时使这一部分流动,而不是在结账时隐藏它。

在购物期间选择不同的产品是最容易选择的,因此应该提示用户进行替换时。但是被要求选择为每个产品选择替代乏味 - 所以,只适用于那些存货运行低的产品。

Instacart alerted the user that an item was running low and allowed him to specify a replacement during shopping. (Unfortunately, there was no guarantee that the shopper would receive the selected substitution either — if the substitution was also out of stock, Instacart would select another replacement.)
Doordash在Mobile(左)上的购物者默认拖欠的糟糕工作。在桌面(右)上,它显示结帐时每个项目的替换选项,但默认值无法更改。
  1. 在结账时,有一个专用页面,允许人们为各个产品指定替换。让他们尽可能准确,并提供无替代选项。

重要的是要注意替换的可能性,因此人们不会在收到订单时令人不愉快地感到惊讶。这样做的最佳方法是在结账时具有专用步骤,允许用户指示替换项的项目。

亚马逊不允许用户指定替换while shopping, but at checkout it provided a separate page dedicated to substitutions and let the shopper indicate which products should not be substituted. The separate page is likely to draw shoppers’ attention. However, a global不要替换任何东西复选框将有用,并且能够为更换产品选择特定产品。
在结账时,Safeway致力于替换的单独步骤。用户可以选择将产品替换为同一品牌中的一个不同大小或不同品牌的相同大小。(Customize项目link offered these same general options for individual items, but did not allow the shopper to pick a specific product for substitution — which would have been ideal). This policy is, however, meaningless for fruits and vegetables.
默认情况下,智能和最终不允许替换。
  1. 要求人们进行电话号码,以便联系可能的替代品。

如果必须对订单进行替换,则为文本或电话是联系某人的最佳方式。请人们在结账时在替代步骤中提供此信息,以提供最优惠的客户服务。此外,容纳那些可能更喜欢另一种联系方式的人,如电子邮件,或根本没有联系。

In the substitution step at checkout (see above), Amazon showed the on-file phone number for the user and explained she will be texted with a possible replacement that will need approval.

相比之下,Instacart允许用户添加首选联系方式,但默认情况下,该方法是现场消息传递。Instacart购物者通过Instacart发送了一条消息,关于其中一个物品缺货,但不幸的是客户没有看到该消息。最好明确向用户询问他们如何与替换联系方式(而不是依赖于默认方法)。人们可能不会注意到,在他们购物之前有几种联系人偏好或了解他们的相关性。

Instacart’s shopper’s messages were sent through the site instead of through text because the user was not asked to specify a contact option and that preference was set to the没有偏好默认。

购物过程

  1. Don’t automatically remove an item that is out of stock from the购物车Instead, mark it as unavailable or out of stock.

In the early days of the pandemic it was common for people to add items to their grocery cart and wait throughout the day for a delivery window to become available. But, because of the time lag between shopping and actually placing the order, often some of the items in the cart became unavailable. When users finally found a delivery window, they placed the order without realizing that now it did no longer include milk or some other essential item.

In general, when没有东西不可用, it’s best to (a) explicitly say so, (b) if possible estimate the availability date, and (c) offer users the option to enter their email address to be notified upon availability.

亚马逊整个食物:当用户第二天回到购物车时,牛奶已从购物车中删除(见上面的屏幕截图,包括产品相同的物品),但用户没有警告。更好的设计将简单地显示推车中的物品,但标记为不可用或售罄。
  1. Indicate any quantity limits on the product page.

为了防止储存物品或均匀分配低供应物品,零售商已经对消毒剂,清洁擦拭巾或卫生纸等高需求商品进行了购买限制。清楚地指定产品页面上的这些限制,以防止徒劳的尝试增加项目数量。

Smart&Final: The user could click the编辑按钮(左)普瑞来的数量变化,布鲁里溃疡t the plus button (right) did not work. A better design would have clearly indicated the restrictions imposed on the product on the product page. (And the quantity field should have been an editable text box instead of requiring clicks on the编辑按钮首先,然后是步进 增加数量)。

价格,提示和费用

  1. Where applicable, clearly disclose whether the online prices are the same with in-store prices before people start shopping.

许多人认为,当事实上,店内价格将与交付价格相同,这并不一定是这种情况。是预期而不是强制用户挖掘该信息的网站。如果您想要构建,始终需要透明度相信和与您的客户的长期关系。

Costco explained the difference between the online prices and the “same-day” grocery prices. Its price limits for delivery were clearly listed.
GrubHub, a restaurant-delivery service, did not indicate whether the prices listed on its website were the same with the in-restaurant prices.
  1. 明确披露任何交付限额,并告诉别人是否已将足够的商品添加到购物车以获得免费交付的资格。

当您在您的网站上宣传食物交付时,请立即告诉人们是否需要最低购买以便有资格进行交付。例如,Costco对同日度交付的35美元最低限度是最低限度的;相比之下,Safeway仅在购物车页上提到了此信息。

Safeway told the users that there was a delivery minimum only after an item was added to cart.
Smart& Final indicated that the shopper had to add 19.56 to be eligible for delivery, but this information was only communicated after the user added something to cart and attempted to select a time slot. Ideally, it should have been presented in clear on the home page.
  1. Be upfront about extra costs (service chargers, tips) that the shopper will have to incur.

Often customers have an unpleasant surprise at the checkout when they see theextra delivery and service feesthat are added to the cost of their items. If the delivery or pickup incurs extra charges or fees, disclose them upfront, so people know what to expect.

例如,Safeway列出了其交付费用预订时间页。但是,那些愿意在向购物车添加物品后保留时间的用户将仅在结账时发现额外费用。智能和最终有交付和服务费,但仅在用户开始结账时披露了信息。

智能和最终仅在用户开始结账后披露其交付和服务费用。

交货/皮卡后联系

  1. Allow users to specify a no-contact delivery or pickup option. Make that option the default.

在Covid-19大流行期间,应提供不与送货人直接互动的选择。此外,虽然应该允许用户切换到人员交付,但No-联系选项应该是所有交付和拾取器的默认值。

In the early days of the pandemic, I received a takeout order from a local restaurant through Yelp. I was unpleasantly surprised when the driver rang my doorbell and waited for me to pick up the order, as I would have preferred to not have to interact with him. (Even though it may feel that waiting to make sure that the customer received the order is common curtesy, that bit of customer service may be perceived as against social-distancing rules.)

When I came back to Yelp, I noticed that the site did have a contactless delivery-option, but that was not the default. Since then, Yelp has adapted to the new reality and changed its default.

yelp:新的结账表格包括默认的非接触式交付。
Safeway: The user was given the option of a contact-free delivery, but it was not the default (in fact, it could not even be selected). Moreover, the site did not allow users to find any additional details about what the referred “免费联系“社会疏远meant.
  1. If people must sign or receive certain deliveries (e.g., alcohol) in person, be explicit about that requirement during checkout and on the final order-confirmation page.

Normally, the user is required to sign for certain deliveries. The need for a signature should be clearly specified on the place-order page as well as in the final confirmation page, so people will know what to expect.

For example, while ordering wine with Instacart, the user was allowed to specify that the order can be left at the door. However, because the order contained alcohol, the user had to be present to receive the groceries. The final confirmation did not indicate that. (Even though it is custom to ask for ID for alcohol deliveries in the US, some people may assume that the restrictions have been relaxed because of the virus.)

Instacart: The order-confirmation page did specify that the user must have a valid ID, but the delivery option was still留在门口。This messaging was contradictory and confusing.

任何电子商务工作流程的更大课程

Some of the guidelines in this article are specific to the problems during a pandemic. But many are special cases of general principles of good workflow design that apply in many other circumstances, including normal times. Disregarding them may work when product and delivery availability are high, but breaks the design in extreme situations and uncovers some hidden usability issues. These general principles are:

  • Figure out if you can fulfill the order before the user puts in any substantial work. That means asking for customers’ constraints upfront (delivery area, desired time of delivery) or allowing them to see (and reserve) the available delivery and pickup windows. If it’s not possible to satisfy those constraints, offer alternatives (available delivery windows, alternate stores).
  • Once the user starts adding items to cart, keep those items in the cart, whether they become out of stock or not. Mark those items clearly.
  • Be transparent about minimum-price delivery limits and extra fees.
  • 提醒人们对可能的替换,让他们允许预设低库存物品的更换,并尽最大尽力确保他们会看到警报并有机会批准替代。

遵循这些原则将使电子商务用户不仅在紧急情况下更好地体验,而且在正常时期。