How to design social login experience?

Users need to access their private or confidential information. This information needs to be secured behind locked doors. It’s often convinient to piggy back on social accounts that the user might have. Commonly used platforms for social login include: Facebook, Twitter, Linkedin, VK, and Google.

Here’s a detailed breakdown of how a login with social media account experience should look and feel like.

Userflow

1. Login Page

1

Back Button

Allow users to go back out of the login screen. This is especially critical if the login or signup is a soft wall instead of a hard wall to access the app/website.
2

Mico Copy

Give users a clear reason for why they should be login to your app or website.
3

Login Buttons

Show users the logo and the name of the platform that they can access your app or website with. Keep the options limited to 3 to 5 to avoid confusion.
4

T&C and Privacy Policy

Include the link to your terms of service/terms and conditions page and the privacy policy. You can either use a checkbox that the user needs to check in order to continue login or you can add copy similar to the example above.
5

Signup Button

The user should always have an easy access to the signup page from the login screen. This allows the users who don't already have an account and accidentally reached the login screen to signup instead and follow through your onboarding flow.

Required Elements

It’s easy to forget and miss out small details. When designing screens for a simple search experience you’ll need to design these elements.

Icons
  • Back Icon
  • Social Media Platform Logos
Buttons
  • Primary Icon Button Default
  • Primary Icon Button Hover
  • Primary Icon Button Pressed
  • Text Link Default
  • Text Link Pressed
Imagery (Optional)
  • Illustration or Image

More Onboarding Patterns

Login — Social Account

Login — Social Account

Login — Email and Password

Login — Email and Password