Mike The Coder

Note: this is one of those opinion pieces that you may disagree with if you like.

There’s a right way and a wrong way to do login forms. The right way goes something like this (from the eyes of the user):

1. User enters username/email
2. User hits tab
3. User enters password
4. User hits tab
5. User lands on ‘Remember Me’ checkbox and can check or uncheck. If your login form doesn’t have this checkbox, that’s ok, just skip this and the next step.
6. User hits tab
7. User hits enter to login

This should be the case for 99% of login forms on the web. This way, the user goes in a very specific order (Username -> Password -> Remember me -> Log in), and it’s an order that makes sense, because it’s a logical progression. You enter your information, you decide if you want the website to save the info you just entered, and finally you submit the form.

What not to do

• Don’t put the Remember Me checkbox after the submit button. It just doesn’t make sense to do that.
• If you have to put the Remember Me checkbox after the submit button (i.e., the design mandates it), don’t forget to give it a tabindex that makes it come before when tabbing through the form. See Twitter’s login form (in the little dropdown box in the top right corner of the homepage) of an example of this.
• Don’t put the “Forget My Password” link anywhere before the submit button. That should come afterwards, completely out of the flow of logging in.
• Don’t assume that the user knows that you can hit enter at any time to submit the form (i.e., even if you’re not on the submit button). In my (completely unofficial and limited) testing, most users don’t know that. Therefore, the submit button’s placement is important.

That’s all for now. I’m just a bit tired of having to tab past the submit button to reach the ‘Remember Me’ checkbox, or accidentally hitting enter on the ‘Forgot My Password’ link since it’s in the wrong place.