Progress indicators in multi-step checkout: do they reduce drop-off is a question that keeps many e‑commerce operators up at night because the answer directly impacts the bottom line.
The cost of abandonment in a multi‑step checkout
The Baymard Institute puts the average e-commerce cart abandonment rate at around 70%, and South African stores commonly see figures in a similar range. For a store that generates R2 million in monthly traffic, that translates to roughly R540 000 of lost revenue each month. When a checkout is split into three or more steps, the risk of friction grows. Each additional page adds a chance for a user to be distracted, to encounter a slow load, or to simply decide the purchase is not worth the effort.
Before adding any visual element, it is essential to understand where the biggest leaks occur. Typical culprits include:
- Unexpected shipping costs appearing at step 3
- Form fields that are not clearly labelled
- Slow page load times on mobile devices
- Lack of confidence about how many steps remain
Addressing these issues alone can shave 5-10 % off the abandonment rate. Progress indicators are a low‑cost visual tool that can further improve the experience, but they must be used correctly.
How progress indicators affect shopper psychology
Human beings are wired to prefer tasks with clear endpoints. When a shopper sees a bar that reads “Step 2 of 4”, the brain registers a finite goal rather than an open‑ended process. Nielsen Norman Group’s research on usability consistently finds that a visible endpoint reduces how long a task feels, even when the actual number of steps has not changed
Expectation management
A progress bar sets expectations about the remaining effort. If a shopper expects three steps but sees five, the perceived workload increases and the likelihood of dropping off rises. Conversely, a clear “3 of 5” label can reduce uncertainty, making the checkout feel more predictable.
Motivation through completion cues
Each time a shopper moves to the next step, the bar fills a little more. This visual cue triggers a small dopamine release associated with progress, encouraging the user to continue. The effect is similar to checking items off a to‑do list.
Trust building
When a checkout layout includes a progress indicator, it signals that the site has been designed with the shopper’s journey in mind. This subtle cue can increase trust, especially when combined with security icons and clear return policies.
Data‑driven method to test the impact
Because every store has a unique audience, the only reliable way to answer the question “Progress indicators in multi-step checkout: do they reduce drop‑off” is to run a controlled experiment. Follow this step‑by‑step method:
- Define the baseline. Record the current checkout conversion rate (CCR) for the last 30 days. For example, a store with 12 000 checkout initiations and 2 400 completions has a CCR of 20 %.
- Create two variants. Variant A (control) keeps the existing checkout unchanged. Variant B (test) adds a simple horizontal progress bar that shows “Step X of Y”. Ensure the design matches the site’s visual language.
- Set up A/B testing. Use a platform such as Google Optimize or VWO to split traffic 50/50. Run the test for at least 14 days or until the sample size reaches statistical significance (usually around 2 000 sessions per variant for a 5 % minimum detectable effect).
- Measure key metrics. Track checkout initiation, step‑by‑step drop‑off, and final conversion. Also record average order value (AOV) to see if the indicator influences basket size.
- Analyze results. Use a chi‑square test or the built‑in calculator of your testing platform. A lift of 2-4 percentage points in CCR is typical for a well‑implemented progress bar.
- Roll out or iterate. If Variant B shows a statistically significant improvement, implement it site‑wide. If not, consider adjusting the design (e.g., adding step titles) and retest.
For reference on statistical significance in e‑commerce testing, see the Wikipedia entry on statistical significance.
A hypothetical worked example
Consider an online fashion retailer in Johannesburg that processes 8 000 checkout initiations per month. Their current CCR is 18 %, meaning 1 440 sales per month and an AOV of R1 200, for a monthly revenue of R1 728 000.
The store adds a progress indicator and runs a 30‑day A/B test. Results are:
| Metric | Control (A) | Test (B) |
|---|---|---|
| Checkout initiations | 4 000 | 4 000 |
| Completed purchases | 720 (18 %) | 800 (20 %) |
| Average order value | R1 200 | R1 210 |
The test variant shows a 2 percentage‑point lift in conversion, which is a 11 % relative increase. The additional 80 sales generate R96 800 extra revenue (80 × R1 210). Assuming a profit margin of 30 %, the incremental profit is roughly R29 040 per month.
Statistical calculators confirm the result is significant at the 95 % confidence level. The store decides to roll out the progress bar to all traffic, expecting a monthly profit boost of R29 040, or R348 480 annually.
Implementation checklist and common pitfalls
When you decide to add a progress indicator, use the following checklist to avoid costly mistakes.
Design basics
- Place the bar at the top of the checkout form, where it is immediately visible.
- Use clear language: “Step 2 of 4”. Avoid vague terms like “Progress”.
- Match the colour palette to the site’s primary brand colours, but ensure sufficient contrast for accessibility.
- Make the bar responsive: on mobile it should stretch the full width of the screen.
Technical considerations
- Load the bar asynchronously to avoid adding latency to the checkout page.
- Track each step with an event in your analytics platform (e.g., GA4) to monitor where users still drop off.
- Test the bar on major browsers and devices. A broken layout on Safari can increase abandonment.
Behavioural tweaks
- If the checkout has optional steps (e.g., gift wrap), hide those from the progress count unless the shopper selects them.
- When a user returns to a previous step, keep the bar state consistent; do not reset the count.
- Combine the bar with inline validation messages to reduce friction further.
Common mistakes to avoid
- Showing an inaccurate step count. If the flow changes after a promotion is applied, the bar must update.
- Using overly bright colours that distract from the form fields.
- Adding a progress indicator to a single‑page checkout; the visual cue adds little value and can clutter the layout.
- Neglecting to test the impact on page load speed. A slow checkout nullifies any psychological benefit.
After you have verified the design works and the data shows a lift, consider adding a short message next to the bar that reassures shoppers, such as “Only two more steps to complete your order”. This reinforces the sense of progress without adding extra clicks.
Next steps for store owners
Progress indicators in multi-step checkout: do they reduce drop‑off is not a theoretical debate; the data shows they can improve conversion when executed correctly. To start, audit your current checkout flow, run the A/B test outlined above, and use the checklist to guide implementation.
If you need a quick health check of your store’s checkout, run a free scan of your store. The audit will highlight where friction points exist and suggest whether a progress bar is likely to help.
Audience Connect
We help online stores find and fix the money quietly leaking out of their checkout. These guides are part of that work. Want to see where your own store is leaking?
Scan your store free