The login page is a compulsory part of many sites. Designers, however, frequently overlook it, viewing it as a straightforward process of inputting text into 2 fields and selecting Submit. Even though logins have been around since the very early days of computing and networking, there are still usability issues that developers are not getting right.
Screen Elements
The traditional login page is designed to allow the user to input text into two fields, traditionally “username” and “password”, and select a Submit button to access secure or member areas of a site.
These elements are often put alongside options like “forgot your password?“, “register” or “remember my details” which, if not organised intuitively, can crowd the screen and slow down the process.
Tab order
Many users, and specifically those with mobility problems, rely heavily on the tab key as a navigation device. It can be very useful during the login process. When the page loads, the initial username field is highlighted. When the user presses the tab button, they should move onto the password field, and then finally onto the Submit button, where they select the return key to move on.
Developers can use the tabindex property in their xhtml to specify the order that the elements are highlighted as the user tabs through the page.
If a cookie option of “remember details” is required, it is better practice to include this between the password field and the Submit button. This allows the user to select the checkbox with the spacebar and select tab again to move to the Submit button. This means that the entire login process can be done quickly and easily without the use of the mouse.
Form Focus
Very often, developers will set up a form so that when it is loaded, a piece of JavaScript automatically highlights the username field allowing immediate typing and eliminating the need for an extra mouse click. In theory, this is an excellent idea. Unfortunately, a downfall of this feature is that it often only kicks in once the page has fully loaded.
This causes problems for users with slow connections on pages with a lot of graphics or script. They could visit a login page and click on the username field and begin to type. They then select tab and begin to type the password in its field. Half way through typing their password, the page finishes loading, the focus kicks in, and suddenly they’re typing the second half of their password in the username field.
File Size
With the issue of form focus in mind, it is important to monitor file size and take out any un-necessary elements. This will allow for a quicker download. It is interesting to note how varied the file-sizes of the most commonly used login screens are. A good example of a company aware of this issue is Google. Their Gmail login clocks in at 7 KB in size.
Unfortunately, other major sites are not as aware of the problem and choose to include the full site architecture and navigation on the login page. Hotmail’s screen is 21 KB while the Yahoo! mail service is a weighty 32 KB. Needless to say, issues with form focus become prevalent on these sites if using a slow connection.
Errors
In an average login screen, if a field is entered incorrectly, the form is returned to you empty with a simple “You have entered the wrong username or password” error message below it. There are obvious security issues involved with high-profile sites, with the protection of usernames and passwords. However, it would be helpful if, on some sites of lower security, like message boards or news sites, the form could identify if it is the username or password that is incorrect.
From an accessibility point of view, it is important that the error message appears before either of the two input fields. This would enable people using screen-readers to get the error message read out to them before the form fields are. If this is not the case, then they could end up repeatedly filling out and submitting the form without realising what the problem was.
Summary of Recommendations
- Logically organised screen elements.
- Use form focus JavaScript to highlight the username field for the user. This eliminates the need for an initial mouse-click.
- Use the taborder index in your xhtml to ensure quick and easy tabbing and allow the option for a mouse-free login.
- Program logical and helpful error messages in the scenario of the user entering incorrect data.
- Consider whether the login page needs all the links and content native to the site. Removing banners, navigation and secondary content will increase download time.
Great resource and reminders. Thank you.