Tab order for previous/next buttons in a form

Question

We have a multi-step form that has 2 buttons (Previous and Next) at the bottom of each page. The Previous button is on the bottom left-hand side, and the Next on the bottom right-hand side.

What should the tab order of these 2 buttons be? The primary journey for a user is to fill in the form fields on each page and then press the Next button. Fewer users use the Previous button to go back to a previous step in the form.

Should the tab order be Next button, then the Previous button - even though visually from left-to-right the Previous button comes before the Next button?

Answer 1

Normally you should have a tab order that follows the reading direction of the language you are using. So assuming this is English, the 'rule' would be to have previous first and then next.

However, there is an overriding rule that you should break any rules when it makes sense to.

This is a great example of when not to follow 'rules'. Your normal flow will be next, next, next, etc. So you should design for that flow, and have 'next' before 'previous' in the tab order.

Answer 2

It is interesting to note that on the Windows platform, starting with Vista I think, wizards moved the back button to the upper left of the dialog. You really have to look for it to find it. That takes the back button out of the main flow.

Compare that with a wizard in the more classic XP style and on Mac OS:

Here, the Previous button is indeed in the flow with the other buttons, and is located before the Next button (also in tab order). So, the issue you notice has received some attention by the designers of the Windows Aero glass style. While I think their solution makes the back button rather hard to find, it very effectively takes care of your problem. It removes a button from the main buttons in the bottom of the dialog, making it easier to use (though I think it could be improved more, like moving the Help button out of the way as done on OS-X).