1 Feb 2010

Login Form Design Examples

Web applications often need to uniquely identify users. The reasons include preventing unauthorized access to personal and sensitive information of user account as well as provide access to personalized content. In process they ask user to identify them self by giving the combination of their unique username and password.

Universal identity services(open ID) can also be used to access a web application and help users.

Few common practises to consider:

Same as registration, logging in is also not supportive in user’s interaction experience so delay this till as much you can.

Specify upfront when using email ID as username. You can also consider giving specific help to user when user accidentally put Email ID in user name when it’s not allowed – For example Delicious provide proper message “Please enter a username, not an email address” when user put email id as user name.

In password field most of the applications masked the password fields and put user’s input as asterisks or bullets, idea behind this is that that this prevents another party from viewing the password while it is entered. However Jakob Nielsen has entirely different view on his alert box column “Stop Password Masking”. Though password masking technique of BlackBerries and iphone (*where it shows the current character and masks all previous characters), are good solution for the masking problems.

In typical password masking users don’t receive any feedback on what they are entering, so when user make any mistake and any login error occur, first obvious step is to remove user input from the password fields and provide them help to recover from the error by asking them to check the “Caps Lock” key if passwords are case-sensitive.

Enable user to retrieve forgotten login information as it’s very common that user generally forget their login information’s by giving common options like “got username/password?” or like Yahoo “can’t access my account” link which gives user’s more option to describe their problems.

Provide option to register along with login as there are chances that the user not register with site and needs to register first, this case is very common where user is coming to your site by clicking some link(either on search engines or by referring site) and content require login to be viewed.

Some web applications where user visits very frequent and data is not very sensitive provide remember login information option for few weeks where provide user’s option to save username only or username password both. Linkedin provide option to save username password both but verify user again when taking some action which require verification.