0

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

Improve this question
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 at 7:11
  • 1
    Does this answer your question? Placement of buttons for Previous, Next, and Save Draft actions
    – locationunknown
    Sep 13 at 11:02

2 Answers 2

Reset to default
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

Improve this answer
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

Improve this answer

Your Answer

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

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