I'm building a progress bar which needs to show additional information on a complex automated process.

You have a number of distinct steps in the process (5-12 expected but not necessarily).

Some of these steps last a known amount of time (or can provide a % complete feedback) but some of them last an indeterminate amount of time. There is a known order for the steps though.

I have lots of width to play with but very little height (think two lines of text at most). How should this be represented/animated to best inform the user of their current progress as well as which steps are completed/incomplete and which step is currently underway?

  • is form abandonment an issue in this process? or will most users not get put off i.e. they need to fill it out so they'll just get on with it but they would appreciate some indication of progress
    – Chris
    Apr 8, 2015 at 14:06
  • It's not for a form but rather a lengthy (automated) process with discrete steps. e.g. Downloading >> Processing >> Uploading >> Etc...
    – Forthright
    Apr 8, 2015 at 14:14
  • @Forthright How indeterminate is each step? Could one step last 10 seconds in one case and 2 minutes in another case? How much time in % could this indeterminate steps take over the whole process? Apr 8, 2015 at 18:47
  • 1
    How much of this can be done asynchronously—with your system pulling the user back in (notification, email, sound, etc) when they can continue the next step.
    – JeromeR
    Apr 9, 2015 at 10:30
  • 2
    @rewobs, @JeromeR; rereading the question I didn't make it clear that the process is an automated one with several steps (e.g. downloading, then transcoding, then uploading without user interaction at each step). Edited the question to make it clearer.
    – Forthright
    Apr 10, 2015 at 9:21

1 Answer 1


"You do what you can do," the saying goes. In your case this means informing the user of the information you have. The wait period is useful information. This is especially true if the user will be using this process frequently.
enter image description here
Obviously, the main progress bar should display the overall progress. You can't use a second progress bar if you don't have the luxury of the space or many time indeterminate operations. If you have as many as twelve distinct operations that you would inform the user of, then you won't be able to display any operation but the one you're currently working on either.
enter image description here
If you know an operation by a percent, you must offer it, and optionally an estimated time, too. This must be labeled beside the name of the operation, which is usually placed below the progress bar.
enter image description here
Armed with this information, the right strategy is to give each operation an equal share of the progress bar's width. When an operation is completed, it's segment will be filled. This means indeterminate operations will fill their segment upon completion - as if by magic; whereas determinate operations could update your progress bar on the fly, which I flatly suggest. A little more effort, but your user will be more optimistic about your time-consuming process.
enter image description here
If you know which operation will require the longest time then you could write a function to distribute weighting to your operations for your progress bar based on your general knowledge of them, (much like YouTube's upload progress bar, in which all video's, large or small, are represented as 95% to upload and 5% to process.) If not, or if you can place no confidence in this method, then don't worry about it. For instance, Microsoft has processes that are unevenly distributed across time and progress bars. It's important to keep your user suitably informed. And for long processes this means a full disclosure.
enter image description here
Good luck!

  • Some great ideas. Perhaps denoting the different steps would be nice. I also fear that the user will need some indicator that the process hasn't frozen when an indeterminate segment has been reached.
    – Forthright
    Apr 15, 2015 at 8:18
  • @Forthright True. For not frozen processes, usually three periods crescendo-ing, or some sort of activity signal. Apr 16, 2015 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.