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.

Twitter

Animoto

Tumblr

In year 2009 use of on page guided help become very popular to educate and promote product features.

We use on page guided help when we expect user to start using a new product/feature or exploring unfamiliar features in existing system, in process users would like to know how to accomplish certain goals/tasks.

The main purpose of how-to guides or guided tours is to explain to users how this feature works and benefits of using it.

No matter how easy it is to use a product, at least a few users are going to find certain functions difficult to understand and use, guided tours with proper explanations can encourage confidence in users to use the feature with ease.

Linkedin

Twitter

Gmail

More »

The fat footer design trend started in early 2008 and seems to be ruling the 2009. Fat footer are very handy for giving users context within your site, offering another set of navigation to users or just for deep-linking for SEO gains.

Few benefits of fat footer designs are

• You can use this as a sitemap for your site or blog.
• You can use this space to promote lot of your important content.
• Some user use them to navigate form one page to other

Virgin

Last.fm

Heels

More »

A user will fill up the registration page of a site when he/she wants to access parts of a site or application. This is a long time challenge to design a form which convince user to fill-up all details.

Few basic things before some good examples:

1. Keep the registration form simple and if possible  max to one page.

2. Deliver as many features possible for users without registration, as this will convince users to register.

3. Explain the benefits of registrations upfront to convince why they should spend precious time to fill all details.

4. Grouping of fields as per their logical relation and also educate user about how and where this information will help in future.

5. Keep required fields to minimum, don’t put unnecessary fields which can be ask from user as and when the requirement comes

Twitter

Mint

Facebook

More »

When user is filling even the most usable form, errors are unavoidable

Despite putting all the effort to make form usable, error are bound to happen. As a designer we can make sure that form has appropriate labels, help text inline instructions and examples but despite all this all the user will not fill the form accurately.

Some of the common errors user does are:

• Not filling the mandatory fields and leaving them blank
• Not filling the details in required format as well as filling the wrong information like wrong birth date.
• Not accepting the terms and condition

To avoid them

• Use of proper and understandable labels, inline help, example and inline validation can reduce the error rate
• In case of error provide clear indication, show the user where error occur by using visual elements and how to recover from that error.
• Provide examples in case where error rate is high

Yahoo

WordPress

Vox

More »

The Carousel will allow to utilise the page real state in more efficient way by grouping similar objects in visual method and give user an engaging experience by allow them to browse images/content arrayed vertically or horizontally.

Few key points while we design them..

Show Focus: The Item in focus should clearly shown selected

Way to browse: There should be clear navigation for user to go forward and backward. In case of auto scroll there should be proper time between the two slides and if you have putted contents along with visuals, you need to keep pause button.

If using dynamic data use loader image.

Best Buy

CNET

Yahoo Movies

More »