I feel that every time I design a wizard, I end up going through 10 different iterations in terms of which order the Back, Next, Save, and Cancel buttons go (all four are required in my case).
Any thoughts on best UX?
I found this image from https://uxplanet.org/wizard-design-pattern-8c86e14f2a38
I’d go Back Next Cancel Finish.
It seems more intuitive to me that Finish would be last.
I agree. I think the Finish button should go last.
@Rei_Hino, here ← is a good read about this problem.
Back, Next, Save, Cancel - they are all really required on single screen? Can you give us more info?
I do have some questions for you:
And I have some suggestions after checking your wireframe:
I hope it will help
@kwedo I think Cancel is required because the user should have an exit path. Save may not be required as a button but the user needs a way to save–perhaps it can be done with a modal window but I’m avoiding that, open to suggestions
can I complete the process at any step by clicking the “Finish” Call to Action?
You complete the process by clicking “Finish” on the last step. The “Next” button turns into “Finish” or “Publish” or whatever action the user is performing
where will I be redirected by pressing the “Cancel” CTA?
Back to another home screen; irrelevant for now
I’ve seen this already and he’s referring to system dialogs, not web wizards. Still a great read, thank you!
I’m attaching screenshots including some of your suggestions
@Rei_Hino In some cases you could combine cancel+save into a “later” action. I’m guessing that’s why Luigi asked what happens when user press cancel.
Option B looks best
I think the typical order for a 4 step generic wizard is like
All of these should be placed based on the pattern that we follow in the product.