Progress Bars in Online Forms - How to Get Them Right

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.

Alongside strong visual branding, 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:

• Provide feedback: communicate with the customer and encourage them to continue
• Provide reassurance/reduce uncertainty: we have your information and this is how much more we need
• Increase satisfaction levels: appeal to a user’s drive to complete a task
• Supply customer insight: set up the right analytics and you’ll see when customers most frequently abandon your form - which steps are the hardest to complete, take the most time, and cause the most friction

Need to understand whether progress bars will improve your form conversion? Get started with a Zuko Free Trial or Demo

‍

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.

For more design and UX tips, take a look at Zuko's Big Guide to Form Optimization and Analytics.

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.

If you're looking to create a multi-step form with a progress bar then Zuko's Form Builder offers this feature as standard.

‍

Some progress bar examples:

‍