Forms - Progress Indicators

Problem

Once a user has completed a form and hits the control to submit the data, the user needs to know that the form submission is in progress so they are not in danger of assuming the application has frozen, or an error has taken place with no notification.

Solution

Display an indicator that shows actual progress or at least that progress is being made.

Why

Progress indicators let users know that the application is performing a function - e.g., submitting a form - and this function is in progress. It's important to show this to the user, even just after a short time.

Providing a progress indicator removes the concern that will arise for the user when they don't know that something is going on, what is going on, how long it will take, and are unable to take control of their circumstances.

More advanced progress indicators can also let the user know actual proportionate progress, estimated time to completion, offer further details concerning what is going on, and also offers an affordance to allow the user to cancel the operation. These extra features should be implemented whenever possible, as they provide much more transparency into the processing, which gives the user some control over the situation should they change their minds.

Code

code here

How

There are a handful of common bits of feedback and control you can provide with progress indicators. As a general rule, the more, meaningful feedback you can provide, the better:

• The proportion of work done - this usually manifests in some sort of visual graph such as a bar that fills up, but it could be as simple as showing percentage from 0-100%. If you can't know or show the proportion of progress, show an indefinite indicator such as a spinning circle or repeating bar (as in Windows XP and Vista start up)
• The estimated time remaining - this can be very helpful, but it can be inaccurate due to a variety of reasons. Err on the side of longer time required, and do NOT end up stating "0 seconds remaining" for a five minute operation. If this is estimated that badly, then don't add this indicator
• What is the application doing - if you can explain in normal human terms what is going on, do so. Reporting back every file that is being installed is not helpful to the user in most cases; but if there are large operations that the user would understand and care about (e.g., 'Now setting up your profile'), then let them know that you're working on that
• How to cancel the operation - if it can be canceled without undesirable results, do so. Usually, if something can't be fully completed, you should undo to the previous state, unless you can seamlessly pick up where you left off. If it is a big operation, you might want to ask the user if they want to leave it as it is or undo what had been done to that point, but only do that if they can make an informed decision. When in doubt, roll back to the previous state

Most important of all, don't freeze up the UI or provide no indication that the solution is doing the processing requested. That leaves the user hanging and leads to great confusion and frustration and a poor user experience overall.

Examples