Zuko Blog

Progress Bars in Online Forms

Back to blog

Progress indicators are a powerful tool to help your customers complete their form-filling journey. They inform, reassure and encourage users when completing a longer online form spread over multiple steps.

Above we can see Apple’s checkout. Ever the contrarians, Apple does not have any sort of progress bar in the checkout. How many steps are there? Do I have to pay in full, or will I be able to choose to finance my purchase? Can I amend previous information by jumping back to a previous step? Am I almost there? No idea.

Progress bars play an important role in reducing the anxiety many users feel when faced with a long form: how long is this going to take me? Will I manage to finish it before I need to go out? Is it just going to be a waste of my precious time?

There are several ways of showing progress within a form, including progress bars and inline validation, and they both have valuable benefits:


The Psychological Power of a Progress Bar

Progress bars can appear either inside or outside the form. There are three main types:

Percentage bar – this displays how far a user has progressed through the form in percentage terms. Starting fast and ending at a slower pace will reduce drop-off rates as satisfaction levels spike quickly. The perception is that most of the work has already been done.


Steps left bar – this option indicates how many steps have been completed and how many are left. Again, this is a numerically-pleasing method of showing progress which is often designed to look like a path to completion.\



Checklist bar – similar to the steps left approach but the fields don’t need to be completed in a specific order. This gives the customer the freedom to move through the form in their preferred way, for example completing the most complicated fields first to get them out of the way.

All of these options provide feedback on the users’ actions. What they’re inputting is being taken on board, the interface reassures them that the system is working: the computer says yes.

Informative and honest guidance like this reduces uncertainty and creates the impression of speed, progression and achievement. It humanises the process, harnessing the emotional rather than the technical journey a user is on and making it a positive experience.

Taige Zhang, senior product manager at online grocery delivery service Shipt, states in his blog The Power of The Progress Bar: “If I had to pick out the most effective tool for onboarding a user, it would be the progress bar.”

But why are they so effective?

It’s all down to psychology. Specifically, gamification.

Incorporating game design elements in non-game contexts – in this case, points that take the form of the stages in a progress indicator – can dramatically improve user engagement.

Described by Peep Laja, Chief Conversion Officer at conversion marketing agency Markitekt, as a “path to mastery”, gamification encourages users to engage in desired behaviours via reward-based methods.

The technique taps into several psychological phenomena:

1. We can feel stressed by incompleteness

Incomplete tasks – and an incomplete progress bar – can stay stuck in your customer’s memory. Focusing on it, and only being able to imagine completion, can lead to tension: when can I finish it? Will the information I’ve already inputted still be there? Can I remember the password I used?

2. We all respond to operant conditioning

Doing something to resolve this tension – returning to the form to finish it – is a form of negative reinforcement. You’ve silenced the nagging voice and can enjoy the bonus of positive reinforcement: form is filled in, tick is made on to-do list.

3. We find completeness intrinsically rewarding

We inherently feel good when we achieve something and this is backed up by neuroscience. Zhang quotes an article written by Dr Hugo Liu from MIT and hunch.com in which he says: “It turns out that when you finish a complex task, your brain releases massive quantities of endorphins.”

The reward for this “need to complete” is powerful: you know that when you complete a project, your spirits will be lifted. This knowledge spurs you on to keep going.

Harness this effect within your forms and you’re much more likely to be successfully cheering your customers over the finish line.

There’s also another important reason why progress bars are a good idea - they make for a more open, transparent and honest user interface. They allow users to judge the effort required to complete the journey on your site and decide if it is worth their time.

If a progress bar decreases your conversion rate, it’s likely that your form was too long to begin with. By removing it, you’re essentially hiding the fact that your form is so long you don’t think users will complete it and relying on them sticking with it after spending time on the first few steps. Essentially, you’re exploiting the sunk cost of users.

Some further considerations when adding a progress bar

Section Titles or Numbers or Percentage, or some combination?

Each of the different steps of your form have probably been crafted to ask for a different type of information at each step (rather than including a random number of unordered questions on each). 

You may there want to consider some combination of numbered steps and section titles for each. 

Here are forms with only section titles:




Here’s one with only numbers:

And here a selection with a combination:



Which should you choose?

Well, if you’re looking beyond the benefits of a progress bar to incentivise your users to complete, you’ll recall that the progress bar adds clarity and openness to your UX. It goes some way to setting expectations about the journey ahead and prepares users for the information they may need to enter.

Having numbers only therefore does add some clarity but does not prepare users for what kind of information they are going to be asked for at each stage - what exactly is Step 4? Order confirmation, bank details, my life history? Similarly, having section titles only sets expectations but doesn’t indicate clearly how many different stages there are going to be.

For example, this form has one or two questions on a series of mini-steps, across 5 sections:



A user only realises that there are actually lots of small steps after starting, and the larger section titles are actually not an indication of how many steps still lie ahead.

So if you’re aiming for maximum clarity for users, include both Section Titles and either Numbers or a Percentage indicator. This prepares users both for the kind of information they’re going to be asked for, and gives an indication of the number of steps completed and ahead of them.

The ability to skip back to a previous step

Another advantage of progress bars is that it may allow a user to skip back to a previous step to review or amend information, like in the below:



If your journey requires a lot of complex, detailed information and there’s an important product or service at stake, users will be tempted to review, go back, amend, and change information on previous steps before attempting a submit.

A progress bar allows them to easily access previously entered but no longer visible information. If you do not allow for this skipping about, a user will either press a back button in your form multiple times (unnecessary friction) or worse use the Back button in their browser. Sometimes this will cause the form to be wiped, setting the user back to the start.

If you suspect your users do want to review or amend information, you should support this, rather than force them in one direction and risk abandonment. 

Some progress bar examples:


British Airways - not a 'bar' as such
Ocean Finance - no numbers!
JD Williams
Argos - no numbers


Forex


Halifax - no section titles, no bar


Santander


Money Supermarket


Go Compare, Car Insurance


Go Compare - Home - No section titles


Compare the Market - no numbers
Windows - a vertical progress experience



More from our blog:

Web form design lessons from examples of high converting forms
What can you learn from some of the highest converting forms in Zuko?
Zuko Benchmarking Data - Comparing Form Types
Some highlights from our benchmarking data, comparing different form types against each other.
Is this metric 'bad'? Why judgement statements about online form performance are dangerous.
We discuss the perils of making broad statements about form metrics based on messy (but real) data.
Zuko Benchmarking Data - How does your Form compare?
We've opened up our data for you to explore - compare metrics across industries and form types, and explore how different metrics compare with each other.
Zuko c/o Formisimo Ltd, 5th Floor, Arrive, White Tower, MediaCityUK, Salford, M50 2NT
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io
Telephone: +44 (0)800 772 0982
This website stores data such as cookies to enable important site functionality including analytics, targeting, and personalization. By remaining on this web site you indicate your consent.