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


1 Answer 1


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:


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.

  • 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
    Commented 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. Commented Dec 21, 2018 at 15:51

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.