The users need to identify themselves so that stored data about/of them can be used in the process they are in


When needed, ask the users to login using a combination of an email-address and a password

From www.bn.com

Use when

When users frequently return to a site that uses large amounts of data about or belonging to the users, it is convenient to have users enter that information once and use it again for future visits to the site. Usually the information that is stored is personal information and can include name, age, gender, shipping addresses, stock portfolio, bank account numbers and credit card numbers. In order to be able to access their data, users must complete their Registration first.
For many site types it can be convenient to store information of/about visitor. Often these are E-commerce Site, Community Site or Web-based Application such as electronic banking applications.


Late login
Allow users free access of the site until it is absolutely necessary that they identify themselves. Tell them why they need to log in.

Email address and password
Use a combination of an email address and a password. Optionally the email can be filled in automatically the next time the user returns. By using the email address as "login name" users can retrieve their password if they loose it (which they will...). Offer help to users who forgot their password.

Storing username/password locally
If the users need to log in very often, it can become annoying to type in the username/password over and over again. To help users, offer the possibility to remember the username/password locally on the users' computer, e.g. using "cookies". The next time the login screen is shown all fields will be automatically filled-in and users only need to confirm. The default should be unchecked, i.e. the username/password is not stored locally.

For some sites it is very important that users understand that their activities are safe enough. If so, tell users that they can use "secure" connections.

Provide feedback
Once users are logged in, let the site provide feedback that confirms this. Do not suggest that users are logged in, for example by welcoming them by name once they enter the site, when they are not.

Basic Login wireframe

The login screen usually starts with a statement that the user needs to log in, including a solid reason that should motivate the user to do so. If that statement requires elaboration, provide a link to a help text. Then the username and password fields are shown. Users can use the TAB key to go from the username field to the password field and press ENTER instead of selecting the "Log in" button. A link to help users who have forgotten their password must be displayed directly under the password field.

Depending on the amount of screen-space available, it is also possible to make a more clear distinction between new and registered users, like in the examples of Barnes & Noble and Amazon. More advanced users don't really need this and will do fine with the shorter version.

Then an Action Button is shown to confirm the login. Other relevant options can be shown at the bottom.

Some users simply enter a username/password without having registered before, expecting the system to recognize this and respond intelligently. However, usually this results in an error message but you could also try to start the registration, at least on the error page, using the username/password that was already submitted.


Users do not like to be bothered with login procedures. Only if they believe they have a reason to return frequently and the benefits of registering are clear, they will actually register. Even so, they should only be asked to do so when it is absolutely necessary. This also facilitates browsing and exploring the site without commitments. Using a combination of the email address as the username and password makes it possible to email users their password when they loose it, and relieves them from remembering again another login name.

More Examples

At Amazon's, the users log in with their email address and password. They are offered help in case they forgot their password.

At www.ebay.com, users get this sign-in screen that elegantly deals with the new and registered users:

What is also interesting about this example is that you can also sign in using your Microsoft Passport. That is a system that allows you to create a "digital passport" once and use it on all site that require a login (and support Microsoft Passport, of course...).

plml logo


12 comments have been added to this pattern

by Michael Brown, 18th July 2007
What are you thoughts on the hierarchy of the "register" and "sign in" calls to action (eg. relevant eBay buttons in above screenshot) in the context of a page where the audience is 50/50 new and registered users? The case study screenshots exhibited above demonstrate a ballance of heirarchy, that makes me question the heavy bias in the wireframe, that promotes the registered user input over the new / unregistered users.
Martijn van Welie, 20th July 2007
That's a good point. Often a site needs a login box that is small for existing users. There the wireframe example is optimal. The eBay example is more balanced and probably more targeted at new users rather than existing users. When the eBay type of example is used the other version usually also exists.
Rolf van der Steen, 24th July 2007
What is your opinion on 'logout'? I think if users are provided with a login-option, they also should always have the possibility to log-out. Obviously logging out would bring them back to the public-area of the site.

I'm not sure if 'logout' should be seen as part of the 'login' pattern or as a separate one.
Matthijs Collard, 24th July 2007
I have had some discussions about using an email address as login or a user name (or screen name or nick name).

Is there a certain type of site where use of one of the two is better? I mostly use an email address because it is always unique and most people can remember their email address. If the user name needs to be unique, people will use many different user names on many different sites. Besides, you always need to ask for a email address anyway, because you like to send the password when the user forgets it.
Martijn van Welie, 31st July 2007
The logout button is indeed important. I guess it should be included in this pattern since it would be a bit silly to devote a pattern to a logout button. I'll make the update.

I guess the only real issue regarding the logout is where you should send people to. Of course you can always send them to the homepage but perhaps that is not always the most logical place. What do you guys think?
Gors, 1st August 2007
I will send people to a randomized page in the site, or "What's new" page. People may not know all in your site, especially in a portal site, perhaps the page is that he had missed. It will be benefit to promotion.
Marc, 7th August 2007
I think you should confirm people that they are really signed out, especially when private data is used (i would like to have a confirmation that i'm logged out from my private banking application). This could be a separate 'signed out' page where you can provide different navigation options. But it could also be possible to send users back to the page they logged in, even when late login is used. I think this depends on the site's structure. Off course, when early login is used, the login page is the most obvious.
vespabob, 28th January 2008
very late comments ...
As to the logout, have seen and begun to standardise on having a "you are loged in as then a logout link - usualy top right hand corner. Agree on banking sites I'd expect to be taken to a scecific screen confirming that I have indeed ended my secure session - the bank also used this space for promos, exit surveys etc.
vespabob, 28th January 2008
very late comments ...
As to the logout, have seen and begun to standardise on having a "you are loged in as then a logout link - usualy top right hand corner. Agree on banking sites I'd expect to be taken to a scecific screen confirming that I have indeed ended my secure session - the bank also used this space for promos, exit surveys etc.
winzurf, 14th April 2009
I like the login approach here because it treats the registered and unregistered users equally
Pascal, 23rd April 2009
In your opinion, do you think the login (and logout) is only a status change of the user and therefore the system must recognize the context of the user?
This implies that a user after a login still recognizes his own context before login, complemented with additional features because of the login.
This also implies that after a logout the context before the action must also be recognized.
Yingying, 21st August 2011
Great post!

I saw this article published in 2007, but it still so helpful. As time goes, there are so many different login patterns. I guess people not only pay attention to function of "login" but also how to integrate the overall style of the site into the login part.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below