Design Pattern #11 : Progress Bar

Prathamesh Krisang

Creating a sense of progress for your customers

Hot Take : People don’t want outcomes, they want progress.

We humans crave progress. Nothing is more addicting than seeing how much we have progressed in our journey.

The first time I saw this pattern was in Yu-kai Chou‘s book Actionable Gamification where he talks about his extraordinary framework called Octalysis Framework.

I started seeing this being used in a lot of ads and landing pages as well. So the credit for bringing this pattern to notice goes to Yukai’s book. Which you should definitely read.

So how can you use this to design your ads & landing pages?

Show a “progress bar” :

A progress bar inherently shows 2 things,

1. Where your user is in the present moment and

2. Where they are supposed to reach.

There is a deeper psychology behind this…

A constant feedback of small wins to keep user motivation up:

A progress bar gives you a constant feedback about little wins you make on your way without getting too invested in the outcome and losing motivation.

Check some real world examples of Progress Bar Design Pattern????

Design Pattern #11 : Progress Bar
Design Pattern #11 : Progress Bar
Design Pattern #11 : Progress Bar
Design Pattern #11 : Progress Bar
Design Pattern #11 : Progress Bar
Design Pattern #11 : Progress Bar
Design Pattern #11 : Progress Bar
Design Pattern #11 : Progress Bar

[Summarizing]

Use this pattern when customers need to know about –

– Progress they can achieve by using the product over time

– Where they are in their customer journey in the present moment

– Estimated time required to achieve a goal that you are helping them achieve

>> Explore Next Pattern : Design Pattern #12 : Personification

<< Explore Previous Pattern : Design Pattern #10 : Certification