Showing Progress

Progress trackers are a valuable feature that can improve the user experience by breaking a long form into logical and numbered steps, allowing users to track their progress. They can be especially helpful in minimizing user abandonment rates and motivating users to move forward and complete a task. By providing a clear sense of progress, progress trackers can satisfy the basic psychological need for closure and increase user satisfaction when a form is completed successfully.

On the other hand, ambiguous and confusing forms can create roadblocks, impede progress, and cause frustration for users. Therefore, using progress trackers can improve the user experience and increase the likelihood of successful form completion.^[1]

In addition to tracking progress, progress trackers provide users with information about how many steps they have completed, their current position, and the remaining steps. However, it's important to note that not all forms require progress trackers. Overcomplicating the flow of a form can be counterproductive, and progress trackers should only be used when the process is long and takes more than three steps.

Forms such as checkout processes, tax forms, flight bookings, scholarship applications, and other complex forms that require multiple steps can benefit from progress trackers. By providing users with a clear sense of their progress, progress trackers can encourage users to continue and ultimately lead to a more positive user experience.

The tracker can exist as determinate progress bars or numbered steps. Their main goal is to show users the current progress, how many steps are ahead, and how many have been completed. Progress trackers help encourage users to keep going and complete a specific task.

When the form is large and includes at least 3 stages, numbered steps are more helpful for setting milestones. Simply seeing the last step can motivate users to go through each step and complete a form. When the journey isn't long, like in the case of a signup form, it can be enough to show the incremental filling of a bar as users progress.

One of the primary goals of using progress trackers is to notify users about what is happening in the system when they fill in a form. Users may get distracted, leave the window, and get back to the form later. They should immediately understand what they're doing, their current status, how many steps they've already gone through, and how many steps are waiting for them ahead.

Progress trackers support Nielsen's "visibility of system status" heuristic. When users know what's going on in the system, they feel in control and don't experience any fear of the unknown.^[2] Plus, people will be more likely to complete the process if they know what's ahead of them and have a sense of completion along the way.

A progress tracker with milestones should always show 3 states:

• Steps that have been completed
• Current steps
• Steps that haven't been completed yet

You can use color and unfilled circles to indicate steps that users haven't reached yet and checkmarks to signify completion.

Unfortunately, if the form is long, progress trackers can't make it shorter. They only simplify the journey and keep users motivated. Allowing users to save their progress and get back to the task later is the right thing to do when the form may take more than a couple of minutes.

Another option is to autosave users' progress, so even if they navigate away from a page or close the window, they are able to return to the last step they were on without losing the data they've already entered.

As a final touch, you should decide how to label each milestone — by numbers, percentages, or titles. Titles add to scannability, helping users understand what they are expected to do here. Numbers and percentages motivate users to keep going, informing them about their current status and how many steps are to follow.

Depending on the complexity of your form, decide which progress tracker better fits your needs. More complex forms may benefit from being tracked with percentages — the progress indicator will move as users complete each section or subsection.