2

I am in the process of implementing a generic material design stepper according to the specification here.

Unfortunately there are some points I do not completely understand, maybe there is someone that could help me out (to fulfill user expectations):


1. Differentiation of editable vs. non-editable vs. optional Steps

In the specification you will find different types of steps. Among them there are editable, non-editable and optional steps.

The way I understand it it works like follows:

1.1 Non-editable Steps

If at a non-editable step, once the user clicks Next, the step is completed & submitted, there is no way of coming back and changing the step.

1.2 Editable Steps

Those steps can be edited later on. Once the step is completed and submitted (by clicking Next), the user can come back at any time to change and resubmit the step.

1.3 Optional Steps

Those steps can be skipped by the user. If the user skips this step by pressing Skip, it is completed, but not submitted and the stepper proceeds.

If the user presses Next, the step is completed and submitted.

Depending on whether the the optional step is editable, it will behave according to the sections 1.1/1.2. regarding going back/forth


2. Differentiation of linear vs. non-linear Stepper

Additionally to the different step types, there are also different stepper types.

The general navigation using buttons works like this is both cases:

  • Next: go to the first following editable or non completed step.
  • Back: go to the first, preceding editable or non completed step.
  • Skip: go to the first, following editable or non completed step.
  • And: the buttons are only visible if there is actually a previous or next step.

2.1 Linear Stepper

In this stepper one step is completed after the other, in the given order.
Navigation happens only using the buttons (or clicking on the title on editable steps).

2.2 Non-Linear Steppers

In this stepper the user can complete the steps in a different order. Navigation happens by clicking on the step title or using the buttons.

Nevertheless, once a step is completed and non-editable, there is still no way of coming back. So again the principles of Section 1. apply here.


Is this interpretation correct? Do you see any drawbacks/pitfalls?

It's just that the specification is not completely clear to me.

Thank you already!


UPDATE:
Would you rather ignore editable steps for the Next, Back button?

So instead of proceeding to the next non-completed, editable step, you would go to the next non-completed, non- editable step?

And instead of going to the preceding non-completed, editable step you would go to the preceding non-completed, non- editable step? (Which would by consequence hide the Back button completely in a linear stepper?)

  • I would say that, when going back to an editable step in a non-linear stepper, either you pass through the non-editable (completed) steps on the way and see the step as "completed" without any possibility to edit (like a disabled input) or directly skip them. – Alvaro May 10 '17 at 10:19
  • Why would you ignore the editable steps going forward? when clicking on next you would go to the next non-completed step (regardless if it is editable or not). When clicking on back you go to the previous editable step (non-editable can not be revisited once completed). On the other hand, if you prefer the user to be able to see the non-editable section even though if it can not be changed you could use the approach of disabled fields – UX Research May 10 '17 at 23:06
1

In section 1, your understanding of the guidelines is correct.

As for section 2, the Material guidelines doesn't specify the behavior of back/next buttons, when to show them, or what their labels should be. Until they specify, the ideal behavior is completely up to you to determine. The best way to do that is to do user testing and iterate until problems are gone.

As for what I personally think might be the best behavior, based on my expectations:

  • Show the back button only when the immediately preceding step is editable.
  • If mixing editable and non-editable steps, keep non-editable steps at the beginning, editable steps at the end. Don't have editable steps between non-editable steps — that's just confusing.
  • If you must have editable steps between non-editable steps (I can't think of a scenario when you would, though), then: When going back to edit a step, where the following step is not editable, don't show a "next" button, but rather a save button. Clicking this button should stay on the step.
1

Combining editable and non-editable steps into a single process seems potentially confusing, if not frustrating.

You might consider separating the editable and non-editable steps into distinct forms or processes. That way, user expectations are clearly set and the experience is consistent.

Or, combine all non-editable fields into a single step and provide a warning that the user won't be able to change this information once it's submitted. Indicate the 'locked' state of the non-editable step in the stepper bar (or whatever pattern you're using) so that the user can clearly see they can't navigate back to it.

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.