1

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:

UI screenshot showing stages consisting of many steps

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:

**< 3 of 6 required steps >**

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?

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

A painting of George Osborne holding a car wheel

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:

mockup - a checkbox with the label 'hide completed'

download bmml source – Wireframes created with Balsamiq Mockups

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

  • What if some "letters" will only make sense or are only sensical to work on, when first looking at or working on another letter? I believe the OP has some predefined steps in mind and that order is relevant. Isn't this actually helping the user rather than making him lose control? – user1884155 Feb 24 '15 at 14:44
  • That's a very valid point - if indeed order is a key player here, this should be taken into account. But possibly you'd have to observe users to see how exactly they interact with the system before making such decisions? – Izhaki Feb 24 '15 at 15:17
0

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.

enter image description here

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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