The Wheres and Whens of Users’ Expectations

Recently, 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.

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.

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.

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.

When Does Sign-in Happen?

While we found user’s expectations didn’t seem to influence where on the page the sign-in information should appear, we did notice users had strong expectations when it should appear. The design of the interaction flow had a noticeable impact in our travel site study.

At Hertz.com, the home page presents the traveler with both log in fields and rental detail fields. Many of our travelers, arriving at the site with their flight information fresh in their mind, would start by entering the flight information first, then press the button to proceed with the car selection and payment information steps.

Unfortunately, this approach wouldn’t let them take advantage of their Hertz #1 Club membership, which stores their car preferences and payment information. Once at the second step, they’d have to return to the home page, log in again, then re-enter their arrival and departure data. At the time of our study, there was no way to log in once they started the process without abandoning and restarting the reservation. (Note: Hertz has subsequently changed their design so this problem doesn’t occur.)

At Marriott.com, a Marriott Rewards member doesn’t have to log in before they start their hotel search. They can choose a hotel to stay at and start the reservation process. When the site presents the page where the stored membership information becomes beneficial, the traveler has the option to log in, without having to restart the process.

While the interaction design is important, it doesn’t diminish the role of visual design. Several Marriott travelers missed the log in box, because of its apparent subtle presentation in the right margin of the page.

Westin.com takes a different approach, putting the Starwood Preferred Membership log in (and new membership enticement) in the center of the page as the first fields in the form. Travelers had no trouble seeing this as they were making their reservations. (Note: Marriott has recently changed their design to be more like Westin.)

Expectations, Visual Design, and Interaction Design

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.

When creating great experiences, it’s not so much about doing what users expect. Instead, it’s about creating a design that clearly meets their needs at the instant they need it. With strong visual and interaction design skills, teams will be in a place to take their designs to the next level.