Adding to cart needs immediate feedback
Aliases: add to cart confirmation · cart badge · duplicate add
What it is
After “Add to cart,” people must know three things at once: the request was taken, how many items are in the cart, and where the cart lives. Immediate feedback is that beat after the tap. It is not whether the cart survives tomorrow, and not how later stock changes are explained. Without the beat, people tap again, doubt the add, or leave the product page to check—turning a low-commitment action into an audit.
Why it happens
Add-to-cart is a side action on a product page; browsing remains the main task. People do not naturally go to the cart to confirm. A button that flashes “Added” and snaps back, or a badge that increments after a lag, feels like a miss. Repeat taps stack quantity until checkout. Success has to change two places: the button (added / quantity) and the cart affordance (badge or fly-in). Button-only leaves the cart unfindable; badge-only is easy to miss at the current focus. Failure (sold out, limit, network) must occupy the same spot—never look like success and then vanish in the cart.
Studying it
Log the two to three seconds after add: extra taps, immediate cart opens, scrolling to hunt the badge. Compare no feedback, button copy only, button plus badge, fly-in motion.
Independent variables: number of feedback channels, whether the badge is in view, whether failure uses the success slot, whether the button stays tappable during the request. Dependent variables: repeat-tap rate, cart opens right after add, gap between intended and actual quantity, retries after failure.
A lab monitor makes even an off-corner badge visible; one-handed phones put badges in a thumb blind spot. Do not score motion on “looks nice”; score duplicate taps and quantity correctness.
Where it stops holding
“Buy now” skips the cart; feedback should be entering checkout, not a successful add. Batch add (reorder, buy-again) needs a list summary; a single fly-in hides scope. Screen reader users need button state and a live region, not a trajectory. High-frequency live-commerce adds should coalesce feedback so animation does not block.
Applying it
- Disable that SKU’s add control until the request returns; on success change copy and increment the badge; on failure explain beside the button and re-enable.
- Some cart affordance must change in the current viewport; a mini-cart drawer on desktop must not block continued browsing.
- Repeat adds of the same SKU should show the new quantity, not imply it is still one.
- Verify on recording: extra taps in the next three seconds, then cart quantity versus tap count. For a sold-out item, confirm no success state and no badge increment.