Rory Primrose

Learn from my mistakes, you don't have time to make them yourself

View project on GitHub

Log in form usability problem

I’ve just realised a usability problem with website log in forms. The “remember my password” checkbox is almost always below the log in button. For keyboard support, the sequence goes like this:

  1. Give focus to the username field (any good app would do this for you)
  2. Type in username
  3. Tab to focus on password field
  4. Type in password
  5. Tab to focus on the log in button (with perhaps another tab to get over a cancel button)
  6. Tab to focus on the checkbox
  7. Space to check the checkbox
  8. Shift-Tab to give focus back to the log in button with perhaps another tab if you need to skip over a cancel button
  9. Space to fire the log in button

If the forms where changed to simply have the checkbox above the log in button, then the keyboard sequence would be:

  1. Give focus to the username field (any good app would do this for you)
  2. Type in username
  3. Tab to focus on password field
  4. Type in password
  5. Tab to focus on the checkbox
  6. Space to check the checkbox
  7. Tab to focus on the log in button
  8. Space (to fire the Log in button)

This would read better as the user only traverses down the screen rather than down and then up. It removes unnecessary actions and makes more sense.

Written on March 27, 2008