1

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.

enter image description here

2
  • Is it a a technical constraint that buttons shift when another button is being hidden? Otherwise I would say, don't move them, leave them in place. Also maybe it's an option to turn the idea around: Automatically save changes in the form and provide a reset button or link (positioned with some distance from other buttons) so users can decide for themselves if they want to undo the changes. Because people might forget to save while they just wanted to briefly review the previous page for example.
    – jazZRo
    Sep 13, 2023 at 7:11
  • 1
    Does this answer your question? Placement of buttons for Previous, Next, and Save Draft actions Sep 13, 2023 at 11:02

4 Answers 4

0

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

Z or F pattern

0

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.

enter image description here

1
  • Thank you all very much for the help! We decided on something similar to this one.
    – Aiyanaa
    Feb 29 at 6:35
0

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.

enter image description here

0

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.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.