User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
What do you think of the following form design which I've prepared?
alt text http://kepfeltoltes.hu/110210/form_progress_indicator_www.kepfeltoltes.hu_.jpg
Do you use anything else? Is this sufficient? (in this current case the form is designed for a bank)
...or is it already to much? Ask yourself: why do you need a progress indicator?
Typically, you indicate progress so the user can estimate how long it will take him, whether s/he can finish in a given time. I would try to minimize "context" elements.
Progress Bar
Compared to the other options, that makes sense only in the following cases:
Step i / N
This is enough if the user doesn't have a chance to jump to individual steps, and can anvigate back/forward.
Jump List
A jump list of individual topics is a definitive plus if the user can skip certain steps, or a non-sequential processing order is a common use case. (I can't think of one that doesn't sound constructed).
Static List
A static list (i.e. not for navigation, just an indicator) still helps in some cases. First, it gives the user an estimation that can be much better than a Step i/N or a progress bar. Second, it gives hints what the user needs to complete all pages. If the penultimate step is "Credit Card details", I know that I do need a credit card.
Knowing the requirements is especially important when I can't save an incomplete sequence and continue later. A static list is less indoctrinating than a page explaining.
A static list does not make much sense as preview, if depending on user input, you branch and skip significant parts. A jump list still makes sense in that case if it allows you to go back, ad maybe preview the next steps.
There are more complex scenarios, such as filling out tax forms, where you need to give detailed feedback that some fields are missing or invalid. That can be mixed very well with a progress indicator.
I found this post on SmashingMagazine quite enlightening. This is an extract of the post:
Progress trackers are designed to help users through a multi-step process and it is vital that such trackers be well designed in order to keep users informed about what section they are currently on, what section they have completed, and what tasks remain.
Online Ordering: By far the most common application of progress trackers is in conjunction with online purchasing, since this usually involves multiple steps.
Feature Tour Guides: Progress trackers are also used to guide users through the features of online products and services, as demonstrated in the following examples:
Multi-Step Forms: If a form requires a lot of user input, it may be best to split the form into multiple steps.
Indicating a Logical Progression: Most progress trackers are designed to display the steps from left to right. In most lands, people read from left to right, so it makes sense that progress trackers follow that pattern. That isn’t enough though — there has to be something that informs the user that they are performing a multi-step process.
Keeping the User Informed of their Location: One key aspect of good progress tracker design is keeping the user informed of where the user is in the process. This complements the logical progression because the user will know where they are in relation to where they have been, and what sections are to follow.
Positioning: Since progress trackers are a form of navigation, it is best to place them below the primary and secondary navigation (such as breadcrumbs) and above the content that the progress tracker relates to. Also, while a progress tracker can act as a page title, it is best to place the title of the current section underneath the progress tracker, to reinforce the current location.
Read the full post for design mistakes to avoid, how to implement and graphical examples.
You can see the html/css I've used (jsfiddle) rendering the following (no images used):
Because mathematically the percentage progress bar represents an interval of real numbers between 0 and 100, it doesn't really lends itself to a situation where you have a discreet number of steps you have to make.
Instead of the percent progress bar you could have any variation on the "step 1/6 theme" like
(o)----(x)----(o)----(o)----(o)----(o)
which I think would be more appropriate in this case.
Of course, you could argue that the percentage is actually (number of completed fields)/(number of total fields) in which case it would display the position in the form very accurately. The only thing here is to not make it confusing for the user when displaying the percentage bar at 50% and still be on step 1.
A progress bar is intended to give the user an idea of how far along they are. I find yours to be too "precise". How about something like this:
Note the absence of the "0 %" and "100 %" labels.
For the user, is the issue really progress? Or completeness? So instead of showing them how long until they will be done (progress bar), show them what they have left to do (completeness icon). Just worked on a set of wires for an initial sign up workflow for a financial service product, and settled on showing completeness.
In this case - a ~30 minute process that required the user to have a lot of external information at hand - it was more important to show the user what they had done (a checked icon) and what they had left to do (no checked icon), displayed next to the titles in the tabs that organized the user's task.
Looks like you're over-specifying progress by having a bar and also the steps on the right. Use on or the other. Probably in this case, since progress is discrete rather than continuous, it would be more appropriate to use steps.
Also, the steps should be on the left side. Convention is that the left panel is used for "higher order" information (i.e. navigation, menu, or other high level information) while the right side is used for "detail" information / entry.
