1

I have a form with multiple steps (at least eight), only a step is displayed once on the screen. What is the best way to display progress trackers (progress indicators):

  • progress bar; enter image description here

  • steppers (numbers);

enter image description here

  • steppers (titles) (but for eight steps it is a little hard to display)

enter image description here

Can mobile steppers be used on desktop for multiple steps? What do you think?

enter image description here

Maybe the active step displayed with number and title and the arrows "back" and "next" is a better solution?

1
  • Knowing there are 8 steps or more to fill is a huge friction no matter how short or long the steps are, is there a possible way to group them? Are there optional items that can be grouped and hidden, like advanced options etc. Nov 6, 2017 at 16:50

3 Answers 3

4

Create a left to right steppers with titles, but here's the caveat: only show the title for the current step and do not number the steps.

  1. Do not number the steps. Showing the user that they have eight steps to go is a psychological disincentive. Imagine a personal trainer telling you that you'll be doing eight sets of an exercise before you start as opposed to just getting you started. That said, do keep the progress circles there to indicate some sort of length. No user is going to sit there and count.
  2. Show checkmarks for completed steps to psychologically reward the user and to visually indicate that the incomplete steps are decreasing.
0

You should avoid using a stepper progress tracker, if you have more than 3-4 steps for these reasons:

  • I assume you'll get most of your traffic from mobile, it is almost impossible to fit a progress stepper in a mobile screen.
  • Showing more than 4 steps separately will increase cognitive load of users enormously, and will distract them from completing the form.

My suggestion for a multi-step form with at least 8 questions would be putting a continuous progress bar and filling the bar according to percentage of completion of form. Most of the time filling the bar accordingly to progress would enough for users to not get lost in a multi-step form.

You may experiment on showing the percentage as a text on top of progress bar after a user completes X% percentage. In my case, showing the progress percentage as a text after 70% worked best.

0

Considering there are 8 steps I would say the best option is to use vertical steppers and show the numbers. It's important to know how many things you need to do in total and see where you are in that process.

A different issue which I think it's more interesting is the fact that there are so many steps... Can you simplify and have fewer?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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