Wizard Button Order

Design Thinking
, ,
#1

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 Wizard Design Pattern. by Nick Babich | by Nick Babich | UX Planet

#2

I’d go Back Next Cancel Finish.

It seems more intuitive to me that Finish would be last.

2 Likes
#3

I agree. I think the Finish button should go last.

3 Likes
#4

@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?

1 Like
#5

hey @Rei_Hino
I do have some questions for you:

  • can I complete the process at any step by clicking the “Finish” Call to Action?
  • where will I be redirected by pressing the “Cancel” CTA?

And I have some suggestions after checking your wireframe:

  • I’d like to have the screen/page title instead of “Back” and “Next”, it will help me to remember where I’m coming from in my user journey
  • I’d like to have a strong visual identity for the CTAs and the navigation items (in this case “Back” and “Next”)
  • I’d like to have a strong visual identity for the primary/positive CTAs and the secondary/negative CTAs (in this case “Cancel”)

I hope it will help :slight_smile:

#6

@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

@dopamino

  • 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

#7

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

415×1228 99 KB

#8

@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.

1 Like
#9

Option B looks best

1 Like
#10

I think the typical order for a 4 step generic wizard is like

  1. Cancel, Next
  2. Cancel, Previous, Next
  3. Cancel, Previous, Next
  4. Cancel, Previous, Finish

All of these should be placed based on the pattern that we follow in the product.

3 Likes