6

steps within steps

I need to create a rather complex wizard which shows the progress of 3 main steps, and then between 4 and 10 sub-steps within each of the main steps. It would seem logical to have the sub-steps vertically on the left side but I have a requirement that it has to run horizontally at the top underneath the main steps. None of the steps are selectable so you can't skip ahead or go back. The steps frame a separate function where multiple other smaller functions can occur, e.g. uploading multiple photos repeatedly to a gallery.

How would you solve this visually? Are there any working examples that I can refer to?

Thanks in advance from a UI designer thrown into a UX mess!

Improve this question
2
  • Is this mobile or primarily desktop?
    – Eric Stoltz
    Dec 20, 2016 at 20:08
  • Desktop primarily
    – Mopo123
    Dec 20, 2016 at 21:57

3 Answers 3

Reset to default
1

Take a look at Material Design - Steppers. It is not a good idea to combine a stepper inside another stepper because it gets confusing.

Don’t embed steppers within steppers or use multiple steppers on one page.

As you have no option to change that I would suggest:

  • Combine all steps in the same stepper. This might be easier to understand but can end up being long. Material Design recommends using a progress bar on Mobile when the number of steps is too long.

  • Use a different kind of steps in each level. You could use the progress bar for the overall process or the other way round.

Improve this answer
1
  • I think your "combine all steps in the same stepper" is the best option. The 3 main steps can be seen as chapters rather thans steps. Presenting this visually and responsively is a challenge as some of the steps have long labels and we want to display them all per chapter.
    – Mopo123
    Dec 22, 2016 at 1:48
1

This case was solved by using bread crumbs Dribble Reference And google photos on mobile had a slider on breadcrumbs. But it is not preferred to use it in this manner. Best example would be android settings>menu keeps going deeper in android by showing current state.

Improve this answer
1

Some suggestions:

  • I don't see the value of showing every substep unless they are labeled beyond (1-N). Is this a requirement? You might want to pushback on this.

  • Having nested numbering is confusing. Since there are only 3 main steps, can these be labeled instead of numbered?

  • Move the substep indicator inside your content pane to show a "nearer" relationship to it, contrasting with the main steps which are not the focus point.

enter image description here

Improve this answer

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.