3

I'm currently defining the order of tab navigation for a form. At the bottom of the form there are two buttons, "Cancel" and "Save". Following the tab order from left to right, the first button to gain focus would be "Cancel", But the primary action of the form, and the most used is "Save".

What would be a better experience, finishing the form and going for the cancel button, or go directly for the save button?

Also, if going direct for save button, another tab would go back to cancel or go to the first field of the form?

Here is an example of both paths:

enter image description here enter image description here

Thanks!

Improve this question

1 Answer 1

Reset to default
4

Give more focus to the primary action and least destructive, also ensure the cancel is confirmed if the user has 'dirtied' the form. Something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Also, make the save button the first one to hit in the navigation order to prevent accidental cancellation.

Improve this answer
2
  • Thank you for the answer! :D Would you go back to cancel button if the user hit the tab one more time, or back to the first field of the form?
    – Aline
    Dec 21, 2018 at 15:50
  • 1
    You're testing my Web Dev memory on indexing, I personally would not have it in the index order, so it's a physical selection someone has to make, however I caveat that with users who may rely on indexing due to usability issues.
    – DarrylGodden
    Dec 21, 2018 at 15:51

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.