Form Button Order (Save/Back/Next)



  • Here's the function of the buttons:

    1. Save - gives the user an option to save and resume the task on the next visit
    2. Back - cancel or return the previous form
    3. Next - proceed to the next form

    What would be the best order?

    1. Save | Back | Next
    2. Back | Save | Next

    enter image description here



  • It depends on the tradeoff you need to account for.

    It looks like in your case, you have a potentially complex form, that doesn't auto save.

    One thing you can do is to separate navigation from saving. You can group navigation together, and can keep save on its own.

    You can also add a visual indicator on the navigation buttons to emphasize the direction that the user is moving along in a linear process. This will make it easier at a glance to parse the difference between saving and navigating the form:

    enter image description here

    This way save is more prominent (because the biggest frustration would be doing the work and not saving), whereas the navigation is together to its left.

    If you have conditional elements that depend on completing a sequence before navigation to the next stage, you can disable the save button until the user completes required fields.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2