Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What do you think of the following form design which I've prepared?

  • there's a progress bar in the top
  • on the right side the steps are listed, and every time the current state is indicated by selection

alt text

Do you use anything else? Is this sufficient? (in this current case the form is designed for a bank)

share|improve this question
    
Is this the form all on one page or is it a multi step process? –  ArchieVersace Feb 10 '11 at 10:28
    
It is a multi step process (and this element used on every page of the form), and even the number of steps can change, for example if you want to ask for some additional services. Also the list on the left side would be clickable, to enable users to go back to a given page. –  Roland Pokornyik Feb 10 '11 at 14:29
    
I've decided to use both elements because it is a relative long process: - I think the progress bar with % marks encourages people to fill out the whole form - because everybody wants to reach 100% percent - and with the right side (menu like element) I can clearly indicate which step are they doing currently, and how many left till the end! - with reaching 100% and also the last step I want users to feel the 'SUCCES' and finally feel good about this long process! –  Roland Pokornyik Feb 10 '11 at 14:40
1  
"because everybody wants to reach 100% percent" - where's your evidence of this? –  Charles Boyung Feb 10 '11 at 17:57
1  
@Patrick - here it is: ui.stackexchange.com/questions/3485/… –  Charles Boyung Feb 11 '11 at 3:55

6 Answers 6

up vote 9 down vote accepted

...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:

  • the time requried for individual steps/pages varies significantly (more than, say, a factor of 3), and that variance is user-independent
  • you have per-page progress, e.g. which radio buttons were already filled. In most cases, that would be just a nice gimmick, not really necessary.

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.

share|improve this answer
    
I've decided to use both elements because it is a relative long process: - I think the progress bar with % marks encourages people to fill out the whole form - because everybody wants to reach 100% percent - and with the right side (menu like element) I can clearly indicate which step are they doing currently, and how many left till the end! - with reaching 100% and also the last step I want users to feel the 'SUCCES' and finally feel good about this long process! –  Roland Pokornyik Feb 10 '11 at 14:35
    
I have no problem using both as "visual gimmick". "Less is better" is just a general recommendation, apply with care. When the process is so terribly long, I'de definitely allow them to save progress and come back later, e.g. give them a link they can bookmark. –  peterchen Feb 10 '11 at 15:00

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.

share|improve this answer

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:

enter image description here

Note the absence of the "0 %" and "100 %" labels.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

Uses of Progress Trackers

  1. Online Ordering: By far the most common application of progress trackers is in conjunction with online purchasing, since this usually involves multiple steps.

  2. 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:

  3. Multi-Step Forms: If a form requires a lot of user input, it may be best to split the form into multiple steps.

Best Practices in Progress Tracker Design

  1. 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.

  2. 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.

  3. 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.

Code example

You can see the html/css I've used (jsfiddle) rendering the following (no images used):

Steps in a multi-step form

share|improve this answer
    
If you edit your answer to highlight the main points, I'd gladly upvote it. –  Levi Morrison Nov 29 '11 at 18:43
    
@LeviMorrison there you go. It's a full extract of the example but at the end there is a link (jsfiddle.net/naoise/z2Z9W) to a code snippet I'm sure some will find useful. –  Naoise Golden Nov 29 '11 at 19:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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