Progress Bar

progress bar · progress indicator · progress meter · goal gradient bar · completion bar · free shipping bar

Definition

A progress bar is a gamification element that displays how far a goal has been reached, using the goal gradient effect to motivate the user toward the final action.

How a progress bar works

A progress bar is a visual representation of the distance between where someone is now and the goal.
The psychology rests on two effects.

The goal gradient effect: activity increases as a goal gets closer. The nearer the end of the
bar, the stronger the urge to take the next step.

The endowed progress effect: when it looks as though movement has already started — the bar does
not begin empty but at some value — the probability of finishing is higher than when starting from
zero.

That is why a cart bar reading already 60% of the way to free delivery motivates more strongly than
add $50 more.

Use cases in e-commerce

The cart: progress toward free delivery

The most common and most direct case. The user sees how much to add to earn the benefit:

Cart: $134.00
[████████░░] $16.00 to free delivery

The threshold works best set 15% to 25% above AOV. If AOV is $150, put the threshold at $170 to
$190.

The loyalty programme: progress toward the next tier

The account area, or a My Points section, shows progress toward the next tier or reward:

Current tier	Spent	Next tier	To go
Silver	$420	Gold ($500)	$80

Onboarding and profile completion

A bar reading your profile is 60% complete prompts people to finish, especially when the next step is
stated explicitly. It works well in mobile apps on the first session.

Best practice

Show what is left, not what is done: $30 to go is stronger than you have already added $170
Name the concrete next step: add 2 more items beats a bare bar
Do not start at zero: a small initial fill of 10% to 15% raises the chance of completion
Pair it with a recommendation: a free delivery bar plus an add from your interests block lifts
order value more than the bar alone

Important: a free delivery bar only works if the threshold is reachable for most users. Set it
too high and it creates a cognitive barrier — people ignore a bar when they know they will not get
there.

Frequently asked questions

Why does a progress bar work better than text stating the condition?

Visualising progress triggers the goal gradient effect more strongly than an abstract number. The sentence add $50 more reads as a task. A bar filled to 70% labelled $50 to go shows that the goal is nearly reached, which is a far stronger prompt to act.

Where are progress bars used most in e-commerce?

The cart — progress toward free delivery or a gift. The account area — progress toward the next loyalty tier. Onboarding — completing a profile. Product and listing pages — X people have already bought this, as social progress. Mobile apps — daily and weekly challenges.

How do you set the right threshold for a free delivery bar?

The threshold should sit just above average order value, so that most users see they are only a little short. Set it too close to an empty cart and the bar motivates nobody. Set it far above AOV and people do not believe it is reachable and ignore it.

What is the difference between a progress bar and a streak?

A progress bar visualises movement toward a one-off goal — the next reward, the next tier. A streak is a run of consecutive actions across different days, such as five purchases in a row. A progress bar works on a specific transaction; a streak builds a visiting habit.