Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Progress Bar design patterns?

The application I'm writing performs a length algorithm which usually takes a few minutes to finish. During this time I'd like to show the user a progress bar which indicates how much of the algorithm is done as precisely as possible.

The algorithm is divided into several steps, each with its own typical timing. For instance-

  • initialization (500 milli-sec)
  • reading inputs (5 sec)
  • step 1 (30 sec)
  • step 2 (3 minutes)
  • writing outputs (7 sec)
  • shutting down (10 milli-sec)

Each step can report its progress quite easily by setting the range its working on, say [0 to 150] and then reporting the value it completed in its main loop.

What I currently have set up is a scheme of nested progress monitors which form a sort of implicit tree of progress reporting.

All progress monitors inherit from an interface IProgressMonitor:

class IProgressMonitor
{
public:
  void setRange(int from, int to) = 0;
  void setValue(int v) = 0;
};

The root of the tree is the ProgressMonitor which is connected to the actual GUI interface:

class GUIBarProgressMonitor : public IProgressMonitor
{
   GUIBarProgressMonitor(ProgressBarWidget *);
};

Any other node in the tree are monitors which take control of a piece of the parent progress:

class SubProgressMonitor : public IProgressMonitor
{
  SubProgressMonitor(IProgressMonitor *parent, int parentFrom, int parentLength)
  ...
};

A SubProgressMonitor takes control of the range [parentFrom, parentFrom+parentLength] of its parent.

With this scheme I am able to statically divide the top level progress according to the expected relative portion of each step in the global timing. Each step can then be further subdivided into pieces etc'

The main disadvantage of this is that the division is static and it gets painful to make changes according to variables which are discovered at run time.

So the question: are there any known design patterns for progress monitoring which solve this issue?

like image 355
shoosh Avatar asked Mar 24 '10 09:03

shoosh


People also ask

Why progress bar is good UX?

A progress bar ensures the app is working and making progress. Good design will reduce user uncertainty, offer a reason to wait, and reduce users' perception of time.

What is progress bar in UI UX?

A progress bar is a visual status representation of how a user is progressing in your SaaS. They're primarily used to help orient your users to where they are in a particular journey: they help set expectations, provide instant feedback, and reduce user friction.

How do you use the UX progress bar?

Informing your users will make your users wait or else they may assume it as a bug and move onto other websites. Include a label with a progress bar to add context. Don't use vague terms like 'Loading' and 'Processing'. Use simple, meaningful sentences for example “linking your bank account” that inform users.

What is the purpose of progress bar?

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.


1 Answers

A very interesting approach is the user perception.

Chris Harrison published a paper on how user perceives the time passing depending on the progress reported by the progress bar (although the actual duration was obviously identical in all experiments)

Note that the preferred display formula is (x + (1-x) / 2 )8 where x is the actual progress on a 0 to 1 scale :)

Therefore, I would suggest:

  • gather some statistics on the percentage of time a given task take
  • measure the initialization and use it to scale your progress on the progress bar, being pessimistic (prepare a buffer of 10-15% for example)
  • just before the last task (or few last tasks, as long as they have deterministic duration), go all out in order to complete the progress bar in time (with progressive speedup)

I know, that's not accurate, but if users think it's faster I'll settle for it!

like image 156
Matthieu M. Avatar answered Oct 01 '22 04:10

Matthieu M.