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

3 Answers 3

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

0

I think you need to go back to the higher level of solving and try to improve your set of actions in the form. Because now you have the form overwhelmed by buttons at the bottom. And another tip - if these inputs aren't connected, try putting them in different rows. It would be easier and faster to scan, and easier to make a mobile version. Also, the core actions would be easier to scan if they are on the same line with fields.

Here is my example of how to solve this problem (screen 1).

  1. Let's start with the first screen (when nothing is filled in). You don't need to disable actions that are not available in this case. Just NEXT and CANCEL buttons will be enough. You also don't need to validate whether the form has been filled in or not. Give the user the space to check all the steps and know the total amount of information that needs to be filled in.

    The NEXT button will take the user to the next step (without any validations about filled inputs).

    CANCEL button has two options. If there is nothing filled and someone presses CLOSE button, the form will be closed immediately. If there is something filled and someone press CLOSE button, the form will show pop-up alert with 3 actions: Save as draft, Close without saving and close the pop-up. This pattern could also help in case of missclick.

  2. If the user has come to step 2, 3 or 4, there will be a BACK button below the form, which can move the user to the previous step. Again, all the elements of the form are in one line for easy scanning.

  3. When user came to the 4th step, the NEXT button will convert into SAVE button (or any other core action name, like push or whatever this forms makes).

The only disadvantage of this approach is that it is not obvious that it is possible to save the draft until you press the CANCEL button. But you can try to fix it by giving some hints or saving drafts for all cases and giving possibility to delete them.

I hope this solves your problem! Have a nice day!

P.S. In case when someone tap save without all required fields filled, you can show the error by highlighting step names with red colour and required inputs in them.

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.