Home » Spiral Metrics » Checkout » Issues » Make Progress Obvious

Make Progress Obvious

Usability High Priority 78% Adoption 4 Seconds Saved

Make checkout progress obvious – if a customer can see the end and feels progress, they are less likely to abandon their purchase.

Imagine a line at a Disneyworld that snakes around a corner so you don’t know how long you have to wait. The wait might be 5 minutes, it might be 5 hours. That uncertainty is discouraging. That uncertainty might discourage you from joining the line – even if the wait is only a few minutes.

A true One-Page Checkout is the epitome of making progress obvious. At a glance the customer knows exactly how much work is in front of them.

With a Multi-step Checkout where progress is not obvious, there needs to be some progress indicators showing the current section and the remaining sections reduces uncertainty.

Hopefully your checkout has fewer steps than this - but progress should be clear no matter how many steps.

Usage

Progress bars - listing each page and highlighting the current page - are effective at indicating progress for users in multi-page checkouts. Accordion-style can make progress inherently easy to see, so long as each step in the accordion is clearly and accurately labelled and are visible from the start.

Still, single-page checkout is still the fastest solution for making checkouts feel fast and transparent for users.

Many sites displaying unnecessary steps such as post-purchase confirmations or initial cart pages in the progress bar. That’s like reminding a WalMart shopper that they still have to drive their purchase home, unbox it, and assemble it – it’s pointless, and discouraging.

Kohl's implements a standard progress indicator at the top of the page. The current page is highlighted.

Overstock makes progress clear by virtue of the single-page layout.

Nike has the steps of the accordion layout labelled, indicating progress.

Adoption

20%

40%

60%

80%

100%

Make Progress Obvious has an 78% adoption rate among our benchmark group.

Best Practices

Follow Conventional Layouts

Most websites with progress indicators use a bar at the top of the checkout, that lists each stage in order from left to right. Following this pattern will ensure it is visible and clear to users.

Omit Unnecessary Indicators

Your progress bar should only include relevant stages of the checkout. Post-purchase confirmation pages should be left out. By the time the customer reaches that page, you already have their money – mentioning it earlier in the checkout only makes the whole process appear longer and more effort-intensive.

Use Single-Page Layout

Single-page checkouts remain the best way to show customers a checkout that shows progress. They don’t need a progress bar because progress is so obvious.