Shopping Cart: Auto-Update User’s Quantity Changes and Allow ‘Quantity 0’ (86% Don’t)

Changing the quantity of an item in the shopping cart is seemingly a straightforward task, yet our large-scale checkout usability study found that there are several important implementation details to get right for all users to be able to easily change the quantity of a product.

In fact, 86% of the top-50 benchmarked US e-commerce sites either don’t auto-update the quantity field as soon as it’s changed or don’t allow users to set a quantity of 0 items — resulting in anything from simple user frustration at a clunky interface, causing their changes to go unregistered, to orders being placed with incorrect quantities. Unintentionally placing an order with the incorrect quantity of an item will have cascading effects, as users will eventually catch the error and often have to rely on customer support to resolve the issue.

In this article, we’ll discuss the research findings from our checkout usability study related to updating the quantity field. In particular, we’ll focus on

• Why the quantity field should be auto-updated (hint: auto-updating OnBlur is not enough), and
• Why ‘quantity 0’ should be allowed as a way to delete products

The Importance of Auto-Updating the Quantity Field

Changing the quantity of an item, either up or down, sounds like a simple task. Yet our checkout testing reveals how several crucial implementation details can make what should be an easy task into an unnecessarily difficult one.

Requiring that users save changes to the quantity field by clicking, for example, an “Update” button or link will result in changes not being saved for some users. A subgroup of users are likely to either not understand that they have to “tell the site twice” (i.e., by changing the quantity field and clicking “Update”) or will simply overlook the “Update” button, with the result being that the user will enter the checkout flow with an unwanted number of items in their order.

Thus, on sites where the quantity field isn’t auto-updated, some users begin new tasks without having successfully updated an item’s quantity. During our checkout testing, this caused orders to be placed with incorrect product quantities. Yet 50% of the top-50 benchmarked sites don’t auto-update the quantity field as soon as it’s changed.

In order avoid issues caused by “Update” buttons or links for the quantity field, users’ changes to the field should be updated as soon as they’re made. It’s critical that these changes take place immediately and don’t require that users click out of the form field first to submit the change.

It’s not sufficient to only auto-update changes to the quantity after focus is taken off the field (the field OnBlur event), as it doesn’t take into account the common user behavior of going straight from the quantity field to either the button for proceeding to the next page or to invoke another cart feature for another item (“Save for later”, “Delete”, etc.). During testing, this caused multiple subjects to lose out on the changes made to the quantity field — despite the fact that the site had made an effort to implement auto-updating quantity fields.

Furthermore, some sites use open numerical fields for the quantity field, while others use drop-downs. Our testing didn’t reveal any significant difference for the end user between the two, although it should be noted that, for drop-downs, users have an even stronger expectation that the value is saved as soon as they leave the field, as opposed to open numerical fields. Hence, an “Update” link is even less warranted for drop-down quantity fields than it is for open numerical fields, and should be avoided in both implementations.

Quantity Fields Should Allow Quantity ‘0’ — But Caution Is Warranted

When faced with either drop-downs or numerical fields to indicate quantity, a subgroup of users consistently attempt to delete an unwanted item by setting the quantity to 0. This subgroup of users has a strong mental model of “quantity 0 = delete”. Therefore, for both drop-downs and numerical fields users should be allowed to delete items by setting the quantity to 0, whether that’s by selecting “0” as the drop-down value or by typing “0” in the numerical field.

Not only is this mathematically logical, but it’s also implemented this way on several e-commerce sites. For both drop-downs and numerical fields, we therefore recommend allowing users to delete items by setting the quantity to 0. Although it’s only a subgroup that exhibits this behavior, it should only be supplementary to the conventional “Delete Item”. If using a drop-down the implications of setting quantity to 0 can be more explicit by naming the “0” option, for example, “0 - delete this”.

It’s important to be slightly more cautious, however, when allowing users to set “quantity = 0”. In effect, setting quantity to 0 functions as a typical “Remove Items” link and, while that user behavior should be supported, it’s prudent to ask users to confirm their action of removing the item, since it can often be difficult to re-find a deleted product if, for example, the 0 was typed by accident.

For example, a user who has made it all the way to the order review step, and is about to finalize the order by clicking the “Place Order” button, may accidentally change the quantity of a product to 0, or may intentionally do so but then have second thoughts. If users aren’t asked to confirm their action at this stage in the checkout, there’s a much more significant chance that the user will abandon the order, since the user has to leave checkout, re-find the product they had just removed, add it back to the cart, then re-enter the checkout and finalize the order.

Therefore, when setting quantity to 0 or removing an item via a “Remove Items” link, it’s acceptable to deviate from the “instant auto-update” recommendation, and first ask users, for example, “Are you sure you want to remove this item?” before submitting the action.

Ensure Users Order the Quantity They Intend

Even seemingly minor details, such as the behavior of the quantity field, can have outsized impacts on the end user experience.

When quantity fields don’t behave as users expect by not auto-updating, our testing shows that some users will end up with a quantity of products they didn’t intend when they originally placed their order. This, of course, will at the very least result in a back and forth between the user and customer service, as the user attempts to correct the error.

Even more problematically, some users may form a negative impression of the site or brand if they receive an order they believe is incorrect. Imagine users’ frustration when actually receiving an “incorrect” quantity of a product that’s been shipped to their house. They’ll be forced to reorder an item if the quantity was too low or actually ship a product back if the quantity was too high. In both cases, they may be on the hook for additional shipping costs as well.

Therefore, to ensure the quantity field behaves as users expect, it must

• auto-update as soon as users change the quantity (don’t use “Update” links and only auto-update as users leave the field (i.e., don’t use the “OnBlur” event), and
• allow for “quantity: 0” as a supplementary way to delete items, but ask users to confirm their choice (depending on the user’s page context).

Yet, it’s currently 86% of sites that get one or both of these aspects wrong.

This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.