Where do I log in? - An introduction to thinking in UX
It seems that users to a new site looking for a login look for two roughly similar sized boxes that they can type in.
The Two Boxes Pattern
As we watched users, it seemed they first looked for two text-entry boxes of equal size. Their eyes would scan the page (often with the mouse cursor in tow) searching for the two entry fields.
Sites that had two text-entry boxes, often contained in a larger box with a distinct background and border, would quickly acquire the user's attention. They'd type their username into the first box and their password into the second.
This pattern is so strong that we see it work even on sites that don't follow the pattern. Over at Etrade.com, the online trading and banking site, their design has two pairs of dual text-entry boxes. One pair is the standard login field, but a more prominent pair is for stock quotes and the site's search functions....
.....Because of the strong drive of the user to react to this pattern, it's common to see users type their username and password into the stock and search buttons, completely missing the proper sign-in fields. From this, we can see designers need be careful when placing pairs of text fields that users don't confuse them for the sign-in boxes.
The Sign-In Link Pattern
If users don't see two boxes, they then start scanning for a link called Sign-in or Log-in. (We haven't seen anyone who uses a button for this, but it's also an option. However, we'd wonder if a button would create cognitive dissonance if it appeared without corresponding fields.)
A pattern that worked well in our research was, once logged in, to replace the sign-in link with the user's name, id, or email address, followed by a sign-out link. Users showed they understood the semantics and reassured them that the system had recognized their account information.
As with the two boxes pattern, the sign-in link needed to be visual apparent and distinct from the many other links that could appear on the page. Clever visual design techniques can easily make "Sign in" or "Log in" visible while not overwhelming the design aesthetic of the page
This site has a great explanation of designing your site layout to meet users (visitors) at the level of their expectations as far as elements that are real common and experienced by a majority of users today.
If users don't see two boxes, they then start scanning for a link called Sign-in or Log-in
For example, Hertz.com puts theirs in the center of the left margin, while Marriott.com locates it in the center of the page. USAirways.com puts the username and password across the very top of the page.
read the full UIE's Article on The Wheres and Whens of Users' Expectations
Visual design shows us how to make elements look distinctive, so users easily locate them when they want to. Interaction design shows us how to integrate the elements into the conversation, so users access them when they need them.
ecently, a designer asked us where users expect to find the sign-in box on a web page. Some sites put it on the left and some put it on the right. Has our research shown that one position is better than alternative positions?
A question like this brings up a bigger question of designing for the user's expectations. On the one hand, users, being neither new to the planet nor new to technology, have developed expectations on where certain things should appear. Designing to those expectations can reduce the user's cognitive load and let them focus on their task.
On the other hand, not every de facto standard is the optimal way to design something. Designers rightly resist being constrained to previous approaches, when better alternatives can exist. Some even refer to the improvement on existing standards as "progress."
Therefore, there's a tension: do we design to user's expectations or do we give them a possibly improved experience that defies their expectations? The sign-in box is a good place for us to explore how this tension could play out. To help us resolve this, we can turn to both visual design and interaction design for guidance.
Locations, Locations, Locations
In a recent study involving frequent travelers, we had an opportunity to see first-hand how the sign-in functions worked when placed on different portions of the page. There doesn't seem to be much consistency across travel organizations in how they locate their log in capability.
Nor is there much consistency as to whether they use actual login entry fields -- a username or email address, plus a password -- or they just use a link that says "Log In" or "Sign In," bringing the user to a secondary login screen.Orbitz.com has such a link along the top margin, Avis.com locates their link in the middle of the page, and Westin.com puts their link on the top-left.
Watching our travelers, we concluded that neither the location nor the style (fields versus link to fields) made a discernable difference. Any of these locations or styles worked fine -- users who needed to log in would find the way to do it without frustration or error. This is good news for designers, as it gives them great flexibility in their design.
Presentation, Presentation, Presentation
While the location didn't seem to matter, we did discover the visual presentation was important. While it seems obvious to say, users had trouble when the sign-in boxes or links were difficult to see on the page.
In a recent interview with Bill Scott, Director of UI Engineering for the movie-rental site Netflix, he confirmed our observations of this. He related a story of how Netflix's customers who ran into the site's new user page couldn't find the "Member Login" link because it was too small and blended into the design a little too well. When they made some subtle changes to the color, size, and presentation of the link, they saw the problem practically vanish.
Turning to the best practices of visual design can help teams ensure their users find the log in functionality when they need it. By creating design elements that are visually distinct, they will jump off the page for someone looking to log in.