How to make social logins less infuriating
If you use multiple social accounts to log into various sites, you’ll have come across this problem before.
You go to a site you occasionally use, like AirBnb, and see the following login screen:
Hmmm…. I guess I logged in with Facebook? ¯\_(ツ)_/¯
You give it a try, log in, then see a new account has been created and you can’t see any of your data .
It turns out you initially used email. Annoying for you and not ideal for AirBnB.
This Tweet about how Spectrum solve the problem inspired me to think of some solutions:
Label what was previously used
This approach from the aforementioned Tweet is simple and is likely to solve the problem in most cases, but I we could go further.
Make the previously used login more prominent
Here we make the previously logged in service with the most prominent by moving it to the top and reducing the opacity of the other options.
This is quite subtle, but it’s a nudge the user in the right direction without leaking as much information about their previous actions.
If you’re wondering where someone would type their password to login with email, the rest of the form appears if they start typing in an email. These login screens still look a bit cluttered, so we can go further still.
Hide the other login options
Here, the options that the person hasn’t used before aren’t even visible unless they specifically click on the “Other login options” dropdown.
This, my favorite approach, is a stronger nudge in the right direction for the user. I’m only assuming here, but if it seems unlikely someone would want to view other login options if the one they’re seeing could have been what they’d used before.
Recent logins
The final approach, which is used by Facebook, is to have a one click login available for accounts you’ve recently logged into.
This makes it super-easy for the user to log back in and they’d know exactly which account they’re logging into.
Personally, when I’ve logged out of a service, seeing my account data still available is a jarring experience. This could, however, be a good option for your site.
All of the above approaches solve the problem by either helping users remember or removing the need to remember how they previously signed up.
How to implement
The easiest way to implement any of the above approaches is to use cookies.
When the user logs in, set a cookie to store which service they used.
This won’t work across multiple devices, but a cookie can be set on each device the person logs in with.
If you want to get more advanced, you could use more data to predect which method someone is likely to use. For example, people in a certain country might be more likely to use Facebook auth than others.
Maybe people referred from a certain site, like Hacker News would be more likely to create an account with their email.
If you want to see full, annotated recordings of the login/signup flows as well as many other flows from popular products, you should sign up to Userflow pro.
