In this post i’m going to deal with a simple User Interface concept in web designing. The part i’m going to deal with is Forms. More specifically Login Forms. They are found in almost every other website that you’ll come across. Also, they’re one of the most used elements of the websites that use them. Though i use “Remember me” feature on almost all the websites i use, there are people who don’t use it. For them, the login form needs to be the most usable. I’ll give you some tips on how to improve your login form’s usability. (Note : I’m not a usability expert)
KISS : The Markup
<input type="text" name="username" /> <input type="password" name="password" /> <input type="checkbox" name="remember" id="remember" /><label for="remember">Remember me</label> <input type="submit" name="login" value="Login" />
Keep the markup as simple as possible. The above is one of the simplest markups. If you use email address for logging in, keep the input box’s names relevant like “email” “email-address” etc. Sure, names like “my-site-e” “my-site-login-field” will work. But, Google Toolbar and the like will not be able to “AutoFill” the form. This is a huge usability mistake.
Preserve The Form Order
The order of the form elements goes as above :
- Username/Email address box
- Password box
- Remember me checkbox (if available)
- Login button
Don’t insert other elements like “Forgot password ?” “Resend Activation” “?” links in between these elements. Place them after the Submit button. But, why ? The usual behaviour of users when they encounter a login form is :
- Enter the username/email address
- Hit [Tab] and type password
- Hit [Tab] and hit [Space] to check the Remember me box (if available)
- Press Enter to login
When you insert other elements in between, they’re selected by hitting tab. So, users are forced to click-focus on the next element, or hit [Tab] repeatedly. This really spoils the usability. Check out Blellow’s login form, which breaks this order. (In fact, this is what triggered me to write this post.)
AutoFocus The First Field
When you reduce the work of the user, you increase the usability. 99% of the users use the login form for logging in. So, it makes sense to automatically place the I-beam in the first input box on the login page. Examples that come to my mind are Google, Digg, Facebook. Click on the login link and the cursor will be already placed in the username field. It can be easily achieved using jQuery. Here’s how :
$(document).ready(function() {
$("input[type='text']:first", document.forms[0]).focus();
});
The above code will focus on the first text field in the first form on the page. If you’ve some search form or other form before the login form, you’ve to adjust the index of document.forms[n] accordingly.
Hope the post was useful. As i stated previously, I’m not a usability expert. So, if you have some more tips to improve a login-form’s usability, share with us in the comments.
