Many internet users are used to quickly navigating between different text fields like “Username”, “Password” and “Comment” fields by using the “Tab” key (located above Caps Lock). Being one of them I have noticed several times that some web forms have pretty unusable tab orders – the field focus shifts in unexpected places, leading to mistakes and confusion.

Examples:

1. If instead of the password field search box will be activated. The user doesn’t notice this, types the password, it gets visible and someone behind (especially in a public place) might see it.
   You probably won’t get sued, but the user experience will be totally ruined and this person might never come back to your site again.
2. Again, the input focus is shifted through the tab key, but it ends up in the wrong field. Best case scenario: user sees the mistake and corrects it. Worst case scenario: the form with misplaced information gets filled out and submitted.

Now most of the times the tab order doesn’t have usability problems by default. But sometimes the layout isn’t the same in the code as it is visually and the field order gets mixed up.

To correct this problem you only have to use “tabindex=”. For example:

<form>
Username:
<input type=”text” name=”field1″ tabindex=1 />
Password:
<input type=”text” name=”field2″ tabindex=2 />
</form>

Can you remember any usability mistakes done with wrong tab orders?