How would you place multiple buttons in a multi-step form? The User should be able to save ( for drafts) and proceed. Being able to go back and cancel

Question

With this multi-step form, the user should have the opportunity to save each intermediate step (draft) and not just at the very end. The user should be able to cancel the process without saving and he should go back and forth. The fields on the first page are mandatory to continue. Some of the other fields are mandatory in order to get out of the draft status.

What would the correct hierarchy of buttons look like? If you can't take steps forward or back because you're on the first page or the last, would the button disappear or just be grayed out? When he disappears, the buttons jump back and forth, which I don't like.

Answer 1

You could try using the Z or F pattern, where the CTA button placement is involved in a visual hierarchy. Four buttons below the form could create a higher cognitive load for the user, meaning it takes a bit more time to think and decide which button to click.

I made two possibilities where the save button could be either top right or bottom left. If you haven't conducted an eye-tracking test, maybe that would help improve your design :).

[F Patterns Vs. Z Patterns] for more information about the reading pattern: link

Answer 2

I propose a button cleanup:

• The Cancel button that affects the window replaced by the close button X
• Previous and Next buttons replaced by screen forward and back buttons <>
• Leave the Save button as the only window action

I don't see it necessary to gray out any of the buttons if the action is impossible to perform.

Answer 3

So how would I do it? First of all, I wouldn't show the user buttons that aren't available to them. We remove Previous because we have no place to go back to yet. SAVE is not needed either, as there is nothing to save. Next, I would try to speed up the scanning of this form a little by putting the fields on one line and putting the main, most important button below them. This will be the NEXT button, which will take you to the next step. Don't limit this option, users should be able to see the size of the form in general. Next to the key action, place a Cancel button. No other buttons are needed here.

The user navigates to the next step using Next, where a BACK button appears in front of the form itself, so the user can navigate between steps. Note that you could work with the indentations so that the button does not cause the form to jump. When the user reaches the last step, he or she can perform a key action instead of NEXT. In my example, this is to create something.

What about the SAVE button to save drafts? It will only appear if the user fills in at least one field. This way we can get to a state where buttons only appear when they are really relevant and nothing jumps around.

Answer 4

Okay let's start with some standards and use placements and behaviours users are quite familiar with:

• Close is an X in the top right
• Save is displayed in the bottom right
• Buttons can have disabled states -Next/Save/Continue is our primary action
• Previous/Back is a secondary action
• Users should know they can click the stepped pagination to click between steps but we'll make it look super button-y just to reinforce that (I hid 2 suggestions in wires)

If we consider those standards then the only thing sort-of unique about your form/wizard is the saving at every step. That's really not all to unique so we can simplify with a Save & Continue.

The only question you'll be left to answer is what happens on the last panel. Are users just saving data in the wizard session? Or can they close the window, re-open and still see their saved data? If they can save, close, re-open then you'll need a Save and a Finish button on the last screen.