New Approaches To Designing Log-In Forms

Advertisement

For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all.

These experiences are not just frustrating for us, but are bad for businesses as well. How bad? User Interface Engineering’s analysis1 of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested their password every day, and 75% of these people never completed the purchase they started once they requested their password.

To top it off, visitors who are not logged in do not see a personalized view of a website’s content and recommendations, which reduces conversion rates and engagement. So, log-in is a big deal — big enough that some websites have started exploring new designs solutions for the old problem.

Is This You?

Gowalla2’s sign-in form (below) looks pretty standard: enter your user name or email address and your password, and then sign in. There’s also help for those of us who have forgotten our password or are new to the website. In other words, all of the most common log-in user-interface components are accounted for.

Gowalla3
The sign-in form on Gowalla.

But Gowalla has taken the time to include a few more components to help people log in with more confidence if their first attempt hasn’t worked. If you attempt to sign in with a user name (or email address) and password that do not match, the website not only returns an error but returns the profile image and user name of the account you are trying to sign into as well:

Gowalla4
A log-in error on Gowalla.

Including a profile picture provides instant visual confirmation: “Yes, this is my account, and I may have forgotten my password,“ or “No, this isn’t my account, so I must have entered the wrong user name or email address.” In either case, Gowalla provides a way to resolve the problem: “This isn’t me” or “I don’t know my password.”

The Q&A website Quora5 takes a similar approach, but it doesn’t wait until you are done trying to sign in before providing feedback. Quora’s log-in form immediately tells you if no account is associated with the email address you have entered, and it gives you the option to create a new account right then and there:

Quora6
Quora instantly lets you know if there are no matching accounts for the email address you have entered.

If the address you have entered does match an account on Quora, then the account’s profile image and user name will appear to the right of the log-in form. This confirmation is similar to Gowalla’s but comes right away instead of after you’ve submitted the form.

Quora7
If the email address you enter on Quora matches an account, you get visual confirmation instantly.

Instant Sign-In

Quora’s log-in form also includes an option to “Let me log in without a password on this browser.” Checked by default, this setting does just what it says: it eliminates the need for you to enter a password when re-logging into Quora. All you need to do to enter the website is click on your profile picture or name on the log-in screen.

Quora8
Quora’s one-click log-in page.

To go back to the standard log-in screen, just click the “x” or “Log in as another user,” and then you can sign in the hard way: by entering your email address and password.

While one-click sign-in on Quora is convenient, it doesn’t really help you across the rest of the Web. For that, many websites are turning to third-party sign-in solutions.

“Single-sign-on” solutions9 such as Facebook, Twitter, OpenID and more have tried to tackle log-in issues by cutting down on the number of sign-in details that people need to remember across all of the websites that they use. With these services, one account will get you into many different websites.

Sign In Options10
A sampling of single-sign-on solutions.

Logging in this way is faster, too. When someone connects their Facebook or Twitter account to a website, they simply need to click the “Sign in with Facebook (or Twitter)” button to log in. Of course, they need to be signed into their Facebook or Twitter account in order for it to work with one click. But with 50% of Facebook’s 750 million active users logging into Facebook11 on any given day, the odds are good that one click is all it takes.

You can see this log-in solution in action on Gowalla (screenshot below). A Gowalla user who has connected their Facebook account needs only to click on the “Log in with Facebook” option in order to sign in — provided they are already signed into Facebook, of course. If they’re not signed into Facebook, they’ll need to do that first (usually in a new dialog box or browser tab). After doing so, they will be instantly redirected to Gowalla and logged in.

Gowalla12
Gowalla provides an option to log in using your Facebook account.

New Log-In Problems

But with these new benefits come new problems — usually in the form of too many choices. When faced with multiple sign-in options on a website, people do one of the following:

  1. They remember the service they used to sign up (or that they connected to their account), and they log in instantly. This is the best case scenario.
  2. They assume they can sign in with any third-party service (for which they have an account), regardless of whether they have an account on the website they are trying to log into. The thought process for these folks goes something like this: “It says I can sign in with Facebook. I have a Facebook account. I should be able to sign in.”
  3. They forget which service they used to sign up or if they used one at all, and thus hesitate or fail to log in.

To make matters worse, if someone picks the wrong provider, instead of signing in to the service they’re trying to use, they might end up signing up again, thereby creating a second account. While a website can do its best to match accounts from different services, there’s no completely accurate way (that I know of) to determine whether a Twitter and a Facebook account definitively belong to the same person.

So, while third-party sign-in addresses some problems, it also creates a few new ones. In an attempt to solve some of these new sign-in issues, we’ve been experimenting with new log-in screen designs13 on Bagcheck14.

Our most recent sign-in screen (below) is an attempt to reduce confusion and prevent the types of errors I have just described — admittedly, though, at the expense of one-click sign-in. In this design, people are required to enter their user name or email address to sign in. We use instant search results to match their input to an existing user on the website, so someone needs to type only the first few letters of their name to find their account quickly. This tends to be much faster than typing an entire email address. But because more than one person is likely to have the same name, we provide the ability to sign in with an email address as well.

Once someone selects their name or enters their email address, then their options for signing in are revealed. No sign-in actions are shown beforehand.

Bagcheck sign-in15
The current Bagcheck sign-in screen does not reveal any log-in options until you select your name or enter your email address.

True, in this design people can no longer sign in with one click, because the sign-in buttons are not visible by default. But this may be a trade-off worth making, for the following reasons:

  • We keep people signed in until they explicitly sign out. So, hopefully people will rarely need to go through the sign-in process. Remember: the less people need to log in, the fewer sign-in problems you’ll have!
  • The added amount of effort required to sign in is small: just start typing your name and select a search result, or enter your complete email address, and then click the sign-in button. It’s not one-click, but it’s not a lot of work either.
  • Trying to sign in with an account provider that you have not set up on Bagcheck is no longer possible, because the log-in buttons don’t show up until after you have selected your name. This cuts down on duplicate accounts and confusion over which account you have signed up with or connected (especially on different browsers and computers where a cookie has not been set).

On mobile, however, these trade-offs may not be worth it. Logging into a website on a mobile device by typing is a lot more work than just tapping a button. So, in the Bagcheck mobile Web experience, we’ve kept the third-party sign-in buttons front and center, allowing people to log in with just one tap. It’s just another example of how the constraints and capabilities of different devices16 can influence design decisions.

Bagcheck17
The Bagcheck mobile Web experience keeps one-tap sign-in options visible.

Since launching this log-in experience on Bagcheck, we’ve gotten a lot of great feedback and ideas18 for improving the interactions. Many people have suggested using browser cookies to set a default sign-in option for returning visitors. While this might help people who return to the website using the same browser, we’ve seen many more sign-in issues when people use a different browser or computer. In these cases, a browser cookie won’t help.

Another common question is whether allowing anyone to search the list of Bagcheck users by name or email address reduces security. While this design does somewhat reduce the security of a Bagcheck account (compared to our previous log-in screen design), it’s no worse than many websites that let you sign in with your public user name, like Twitter.

And because all Bagcheck profile pages are public, users can be searched for on Google and on Bagcheck itself. Despite this, we’ve seen a bit of increased concern over this same search capability being on the sign-in screen. So, if you’re thinking about trying this design, make sure your profile pages are public, and be aware that people may still be a bit sensitive about it.

We’ve All Got Email

Although signing into a service with one’s name may be too new for some people, logging in with an email address is common practice for most. Using a solution that brings together a lot of the ideas outlined in this article, Google’s Identity Toolkit19 and Account Chooser20 allow people to sign in across the Web using just their email address:

Google21
Google’s Identity Toolkit allows people to sign in with a number of email verification options.

When multiple accounts have been accessed in the same Web browser, each account is listed as a sign-in option, making account selection easier. If you want to try out this sign-in solution, you can opt in22 on Google’s website or implement it on your website with Google’s Toolkit23.

Google24
Selecting from multiple accounts on Google’s experimental sign-in page.

The Little Things Matter, Too

The Bagcheck and Google examples we just looked at try to rethink log-in pages in big ways. But not all sign-in innovations need to be so comprehensive. Even small changes can have a big impact. For example, I mentioned earlier that inputting text precisely on mobile devices can be harder than on full keyboard computers. Coupled with obscured password fields, this can make logging into a website on a mobile device a challenge.

Facebook’s mobile Web experience25 tackles this in a small but useful way. If you enter an incorrect password when trying to sign in, the website will change the password field to plain text so that you can actually see your input. Facebook also offers an alternate way to log in, using your email address or phone number (screenshot below). It’s a small enhancement but one that can go a long way on mobile.

Facebook26
Facebook does a lot to help you log in on mobile.

It’s Not Over

As these examples illustrate, even the most common interactions on the Web (like logging in) could benefit from new ideas and design improvements. Not every idea I’ve walked through here will become part of all the log-in forms we encounter on the Web — chances are none of them will. But without trying, we’ll never know.

So, if you have some new ideas for signing in or any other Web interaction we’ve come to take for granted, try them out and let the rest of us know what you’ve learned!

Online Resources

(al)

Footnotes

  1. 1 http://www.uie.com/articles/three_hund_million_button/
  2. 2 http://www.gowalla.com
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig1-gowalla.gif
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig2-gowalla.png
  5. 5 http://www.quora.com
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig3-quora.gif
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig4-quora.gif
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig5-quora.gif
  9. 9 http://en.wikipedia.org/wiki/Central_Authentication_Service
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig6-signinoptions.gif
  11. 11 http://www.facebook.com/press/info.php?statistics
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig7-gowalla.gif
  13. 13 http://bagcheck.com/blog/02
  14. 14 http://bagcheck.com
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig8-bagchecksignin.gif
  16. 16 http://www.lukew.com/ff/entry.asp?1333
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig9-bagcheck.gif
  18. 18 http://bagcheck.com/blog/02
  19. 19 http://code.google.com/apis/identitytoolkit/
  20. 20 https://sites.google.com/site/gitooldocs/experiment---account-chooser
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig10-google.gif
  22. 22 https://sites.google.com/site/gitooldocs/experiment---account-chooser
  23. 23 http://code.google.com/apis/identitytoolkit/
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig11-google.gif
  25. 25 http://mashable.com/2011/03/31/facebook-launches-mobile-website-for-all-phones/
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2011/08/fig12-facebook.gif
  27. 27 http://www.lukew.com/resources/web_form_design.asp
  28. 28 http://www.lukew.com/ff/entry.asp?1219
  29. 29 http://www.lukew.com/ff/entry.asp?1187
  30. 30 http://factoryjoe.com/blog/2010/03/12/the-social-agent-part-2-connect/
  31. 31 https://sites.google.com/site/oauthgoog/

↑ Back to top Tweet itShare on Facebook

LukeW is an internationally recognized Web thought leader who has designed or contributed to software used by more than 600 million people. He is currently Senior Director of Product Ideation & Design at Yahoo! Inc., author of two popular Web design books, and a top-rated speaker at conferences and companies around the world. You can follow Luke on Twitter at lukewdesign or by using RSS.

Advertising
  1. 1

    I have to agree with most of the other comments, displaying user-image to help people verify its the correct login is like leaving a note under the doormat saying what neighbor has the key.

    If the system had some way of displaying random images on false names (from a huge database), to avoid being able to notice fakes vs. real. then i could see the point, but still it would create a huge security risk. That way the real person would know if its correct, but not an outsider.

    There is a reason why most login errors says: Username and / or passord did not match. To avoid being able to tell if its a real username.

    But then again, alot of services has usernames as displaynames, so the only unknown is the password.

    0
  2. 52

    Realize I’m a bit late to this conversation, but I’m noticing a glaring error — yes, I can search on Facebook by my name to see that I am a member, but my name is NOT my login, the primary email address I associated with my account (which I can freely hide from anyone else via privacy settings) is. The auto-suggest feature on Bagcheck is auto-suggesting a LOGIN.

    Yes, I realize that Twitter also allows the username as login, but that doesn’t negate the security issue, it just means that Twitter has the same security issue your Bagcheck site has.

    0
  3. 103

    I understand the security/privacy issues here, but I think there’s another angle to look at it… if a service isn’t critical/security-important, do we really need such strong login credentials?

    We started seeing people adding checkboxes for changing the password box to plain text, but what if we went one step further, and maybe even not require a password, or use some other memorable thing as the password-equivalent?

    For instance, on a shopping list app I’ve used between the web and android, it was a simple ‘shopping list number’ which was needed, without any login details. Yes, this might mean someone could randomly guess my list’s number, but what have I lost? Someone now knows I was planning to buy shampoo?

    I think people need to start looking more closely at the usage of service before defaulting to having their own login unique credentials. I hate it when I can’t have my ‘normal’ username on a service because someone’s already taken it (rare, but still happens), it makes me really consider whether I want to use the service at all, and I’m not keen on logging in with my email address because I use unique email addresses with each service I sign up to.

    0
  4. 154

    this is an excellent article!
    i enjoyed reading it and most of the comments below
    it definitely brought up many questions, concerns, and thoughts

    its unfortunate that we cant please everyone. if someone wants higher security with logins, other complain that there are too many steps to reach that point. if someone asks for quick and most convenient way to login to your account, others complain that security risk is too high.

    the issue here is definitely that all these examples sacrificed some part of privacy by making the login process less painful and more convenient (for users or for “hackers). however, its difficult to solve this kind of problem today since we now live in a world where public profiles, sharing, connecting is “in”

    maybe we should step back and realize that we cannot have both. if one is gained other is compromised.

    as designers, maybe we should be asking what is more important for the users for these websites? is it the user’s security or a quick way for them to access their account?
    if security is the important factor then the user of that website will be responsible and remember their account name and password (we never see bank websites asking if we want to connect to facebook or our email)

    if its the convenience the website needs (such as social networking sites) then users should understand that by connecting through mails, facebook, or twitter, or any other “shortcuts” it may cost them some privacy.

    at the end, its user’s decision to know which part they will compromise

    wherever the priority lies, we should focus on that priority.
    either making the log in process most efficient in security OR convenience.
    we cant have it all.

    0
  5. 205

    Thanks for the insight. Also, check out WebFinger http://webfinger.org/ (I don’t know if we can start using it in webapps yet)

    0
  6. 256

    I enjoyed the article and all the discussion very much. I’m currently on the lookout for some effective signin solution for a niche e-commerce website, and one of the key takeaway point I’ve learned from here is that probably none of the described signin methods are a good fit when it comes to e-commerce websites.

    This being said, I would appreciate any suggestions regarding some login best practices for e-commerce websites. Thanks!

    1
  7. 307

    James Harry Simons is at one of the most successful hedge means managers of all time. His company, Rejuvenation technologies, is many times drunk on the investment capital rankings. Simmons is also story of the riches handcuffs in the planet with a net quality of 8.5 billion dollars. His business relies on the blue blood of the analyses his employees make. A lot of them sustain Ph.Ds in mathematics, physics and other fields of study and secure paltry or no practice in finance. Their chore is to base models that help the company predict amount changes of different securities.

    Simons is a recent MIT- cultivated mathematics professor. Like some other assets founders he didn’t bring into the world a penetrating experience in finance before starting. But he knew that his schooling of statistics and his make a proposal to of trading could be a potent competitive dominance in the market.

    His approach to management is also unquestionably captivating and refreshing. He organizes a weekly convention with his researchers. The picture is to parcel as uncountable ideas as possible. And they do because their remuneration depends on the profit of the unreserved fund. They drink a great incentive to join forces and communicate. It’s a collective aptitude oriented kind of organisation.

    Set off d emit’s make a muster of what tools James Simmons misuse:

    – An unlatched milieu

    Everybody knows what others do. Everybody can access the train’s resources.

    – Shared ideas
    The weekly meeting is precise stirring after researchers who can liken their findings with others.

    – A compensation based on the undiminished inflexible profits
    Employees share their ideas because they identify that resolution not not emoluments them but also others.

    This kind of direction can be outstanding for every fellowship but hedge funds seems the whole task to fulfil it.

    0
  8. 358

    Great article :-) I am working on a design for a log in box and my case is a bit different than seen else where. Our members can either login with member number and zip code OR username and password. We have a usability issue here because some (not manye hopefully :-)) would think that you could login with fx username and zip code which is not possible.
    The challenge is that I would like to show this without over communicating through a simple design. I am thinking fx using two colours – one for each option there by showing which options are tied together. Have you designed any solutions like this or could you elaborate on what is best practice in a case like this?

    0
  9. 409

    Ahh the age old battle between Security and Usability.

    I hope in the future that we arrive at these conclusions:
    – Obscurity is not security
    – Security problems most popular in the news (and in Congress) are the least common in reality
    – Current forms of security don’t work for people and the data proves that
    – Most implementations widely used only provide the perception of security
    – Nothing is uncrackable or unhackable

    – Usability is usually more important than security
    – Security need only be sufficient to demoralize malice, while usability must succeed in actually enticing interest in an unappealing activity (luring is more difficult than impeding)
    – When we make more usable functionality quicker to implement (one line of code) then developers will welcome it
    – When we prove with data that many threats are not reality and security is often overkill then employers can feel good about tipping their investment in favor of usability

    Currently we have a lot of fearful perception and “what if” corner cases polluting the landscape. Getting consensus on this topic doesn’t easily happen right now. Security is entrenched in technology and that point of view is what wins most often, especially in the States.

    -1
  10. 460

    And this is what happens when you allow designers to “design” your security to look pretty.

    -4
  11. 511

    As I site possessor I believe the content fast payday loans matter
    here is rattling wonderful , appreciate it for your hard work.
    You should keep it up forever! Good Luck.

    -4
  12. 562

    Natural Shop is an E-commerce HTML design designed for online stores selling cash conscious, organic, spa & beauty related products.

    Features

    Unlimited color techniques, simple to apply using the exterior color stylesheet provided
    Completely sensitive, suitable with iPad, iPhone etc
    Search engines typeface integration
    Product pages with flexslider
    Search engines Charts and Reddit Completely Integrated
    12 PSDs included
    To download this shop template go to -> http://nulledshare.com/templates/535-nulled-themeforest-organic-shop-responsive-ecommerce-html-template.html

    -3
  13. 613

    Arnav Chakraborty

    February 7, 2014 8:11 am

    I want to know how to make a login form using HTML 5, and how to make users log in using other accounts as well.

    0

↑ Back to top