Elements that show the progress of a task or a series of actions that users take to achieve a larger goal – for example, registering – are indicators dedicated to showing the user where they are on the path to their desired outcome. These progress bars show the user what they have done, where they are currently, and how much is left.
The usefulness of such bars is that by showing users how far they have come, it not only motivates them to complete the action, but also tells them how long it will take them to complete it.
There are several options for showing progress. You could break each input into a separate “page”, which will reload the form each time the user clicks the button to continue. This, on the one hand, will extend the user-perceived duration of the operation, but on the other hand, they will have movement on the progress bar much more often. Although the movement itself will be minimal, to none.
Another option, the more widely accepted (and rightly so), is to divide the actions into separate groups in terms of meaning. For example, if you have a store, you could make the first page (for the first order) “Personal data/Registration”, the second step “Product selection”, and the third step – “Cart review and confirmation”. The first and second steps in this list are, of course, interchangeable. It is completely normal for the selection of products to occur before entering the data. The goal is to show that these are three separate steps, even if they are saturated with numerous sub-actions.
The progress bar is also suitable for blogs (personal or corporate), in which you can show how much is left until the end of the article. This “progress bar” or progress display element can be in any shape – round, bar, numeric, pie chart, as well as the already discussed “steps”.
Here are some sample progress indicators:
