Guiding the user through a multi-step form

Question

We are building a kind of wizard driven by rules which will assist the user to complete a number of stages each consisting of a set of steps - I asked a question about this earlier on a different topic.

Things have moved on since then, and the UI now looks like this:

The red numbers show the user how many steps within each stage he needs to complete (other steps will have been filled in by the rules behind the scenes), so that once Step 1 has been filled in, the first red number alongside Stage 1 would disappear.

Because there may be many steps (possibly 30-40) within each stage, the chevron arrows in the ribbon will take the user to the ones he needs to complete. However it isn't immediately obvious what they do!

A colleague suggested that some text in between the arrows could be inserted, something like:

but then both the numbers would be changing as the user progressed and I suspect that would be confusing.

Can anyone suggest or point me to a pattern that might work?

Answer 1

The user story here would be:

As a user, I'd like to easily locate to the next field where my action is required.

Now there are many ways to satisfy this, but also quite a few assumptions being made.

Visual inspection anyone?

One of them, is simply by visual inspection. If you know a bit about visual cognition, you can design the interface in such way that users can easily spot such fields by mere scrolling. Adding some clear indicator to what requires action (or what does not) would mean a very low cognitive load as users scroll the step list. (There is a research from which you can infer that this would be an effective method for a list composed of up to around 70 items.)

However, in specific scenarios, even this low cognitive load can accumulate to something of annoyance. For instance, it may be the case that users repeatedly use the wizard each day, and worse - that in the way it is filled is not sequential and involving quite a bit of step-skipping.

And so, you've opted for a way to help users by providing an action taking them to the next required field. Now there's a hidden assumption here that indeed the next required field (as determined by your arrow) is what the user wants - can it be the case that the user will prefer to fill a latter step?

Keep the user in control

Now here is a real-world metaphor: Consider you have to go through 40 letters that you received. Now all the letters are in front of you, although some are further away. You can do this in two ways:

• Either there's a servant who gives you one letter at a time, you can either open the letter or give it back to the servant so to open it later.
• You pick a letter, if you're done with it you put it in the 'done' tray, or you can put it back on the table. No servant involved.

The former, involves an external agent whose work is beyond your control and could appear odd at time. The user has less control here.

The latter puts the user in full control.

Using this metaphor, here's a revised user story:

As a user, I'd like to see what else requires my action, so I can choose what to do next.

The way you'd achieve this on an interface is a simple filter above the step list:

^{download bmml source – Wireframes created with Balsamiq Mockups}

In addition, you can provide something like '7 steps left' to indicate progress.

Answer 2

I think a very similar challenge has linkedin when you are editing your profile. It gives you some visual representation of how much you have completed in your profile. To motivate you for more input, it constantly puts a prominent text box at the top of the screen, one by one, to ask for more input.

For your case it does not perfectly fit due to the lack of information on how much items are missing. I tried a short mockup where the user would be guided through the form of missing input fields. Just showing only 1 field (1 category) and a progress on the right side, to give the user a overview of the overall progress and yes, some reward ("Halftime!", "So close!",....) to keep on entering data. As soon as you have all data, the box disappears.

Benefits:

• It's highlighted prominent place draws attention immediately. No scrolling is needed as you keep the progress flat.
• One by one: (progressive disclosure). People often have to think about what to fill in. So less distractions due to the one prominent field.
• Rewards: I hate forms. Yes I do. Give the user a reason to smile during this process and the pain is gone. ;)
• The right side gives a clear overview on how much is left for the current process (no switching between steps, just how far have we gone)

I hope this input gives you some clues on how to fix this issue. :)

^{download bmml source – Wireframes created with Balsamiq Mockups}