Choose patterns by need
Remove work unnecessary for this purchase. Reveal extra fields when needed; keep B2B invoice orders and payment as distinct outcomes.
Cart, checkout and payment
Make totals, fulfillment, errors and the next step understandable.
Observe the task
Measure confirmed, deduplicated outcomes per eligible checkout start. Define paid orders and accepted credit orders separately.
Concepts and examples
Cart quantities, removal and undo ↗
Plus/minus paired with a number field makes quantity changes easier. Update totals automatically and let shoppers undo a removed line.
Total cost and shipping before checkout ↗
Shipping cost affects product choice. Show a relevant estimate or explain clearly what remains to be calculated rather than hiding costs until the final step.
Guest checkout without forced accounts ↗
Guest checkout should be easy to find and use. Account creation should not be a required detour for someone who simply wants to buy.
Shipping, pickup points and local pickup ↗
Show all available fulfillment methods where shoppers choose fulfillment. Explain cost, location and timing before they decide.
Delivery dates, costs and pickup times ↗
An estimated arrival date makes the choice concrete. Cost and expectations should be available before final confirmation.
Checkout fields for consumers and B2B ↗
Mark required and optional fields. Reveal extra fields only when the purchase context needs them.
Payment: totals, next steps and status ↗
Show the total before payment and label the button with the next step. Payment choices should be clear, including any departure from the storefront.
Checkout errors and recovery ↗
After an error, shoppers should retain their input and find what needs correction. Explain the problem at the field and make the next action clear.
Relevant accessories in the cart ↗
Suggest accessories that solve a specific need for the selected product. Explain the relationship and let shoppers proceed without the extra.
Discount codes: eligibility and feedback ↗
Keep the promo field out of the main task. When used, explain eligible items and how the discount changes the total.
Cart drawers: editing, totals and a clear exit ↗
A drawer should confirm the added item and allow continuation, editing or closing. Do not make it a dead end.
Edit cart size or color without starting over ↗
Let shoppers correct a variant without removing the item and finding it again. Preserve quantity when editing.
Recheck availability before checkout ↗
A saved cart is an intention, not a stock reservation. Explain changed purchasability before payment.
Free shipping: explain thresholds and exceptions ↗
Show both the condition and current shipping charge. A free-shipping banner is insufficient when the order is ineligible.
Shipping estimates before completing checkout ↗
Provide early delivery-cost information and explain what a precise quote needs. Unknown shipping must not look free.
Coupon errors with explanations and preserved baskets ↗
Explain whether a code is unknown, expired or ineligible. Preserve the basket and typed code for correction.
Guest checkout email without mandatory registration ↗
Explain email as purchase contact information. Newsletter signup and account creation are separate choices.
Autofill and appropriate checkout keyboards ↗
Use standard field semantics so browsers can assist with name, email and address. Avoid unnecessary custom inputs.
Address checks: distinguish format from deliverability ↗
Valid postal formatting does not prove an address exists. Show real-source suggestions as choices rather than silent corrections.
Optional fields and reasons for required information ↗
Label both required and optional fields. Reveal additional fields when the purchase needs them and explain collection purposes.
Payment failures: safe retry without duplicate orders ↗
Distinguish confirmed failure from unknown or pending status. A timeout does not mean payment failed.
Order review with items, fulfillment and correct totals ↗
Show item, quantity, fulfillment and total before the final action. Editing should preserve completed information.
Check this too
Payment errors, duplicate orders, incorrect totals, unclear arrival dates and discount cost. A pay click is only an attempt.
Create a concrete measurement plan ↗