User Experience Design

The onboarding experience is one of the most important user experiences in your app. A high quality onboarding experience can lead to conversion rates above 90% and encourages people to become more engaged and profitable.

Facebook Login lets people start using your app quickly and easily, and enjoy more personalized and meaningful experiences. In this doc, we offer tips and considerations to create a great login user experience with Facebook Login.

  1. Show value first
  2. Avoid unnecessary steps
  3. Button design
  4. Permissions
  5. Provide a way to log out
  6. Test and measure

1. Show value before prompting people to login

When deciding where in the user experience to prompt people to log in, ask yourself at what point will people appreciate what your app has to offer enough to trust it with their information.

This is often influenced by what people experience before even downloading the app, but there is a lot you can do to further influence this by design within the app.

Here are a few design approaches to encourage more people to log in:

  • Provide a clear and succinct statement of what your app has to offer
  • Provide a glimpse of the content they’ll get after they're logged in
  • Provide a new user experience
  • Allow people to experience your app without an account

Provide a clear and succinct statement of what your app has to offer

Provide a clear, succinct and compelling statement about what your app has to offer. It might have been a while since they downloaded the app or read about it in the app store.

Provide a glimpse of the content they’ll get after they log in

Provide a glimpse of the content available to people prior to logging in, like the background photo in this example. It doesn't have to be detailed, even blurred out images of Pinterest's pinboard encourages more people to log into Pinterest.

Provide a new user experience

If your app requires additional education to have the best experience, include a multi step demo above your Login button. This gives people the option to either learn more or log in immediately if they're ready.

Allow people to experience your app before logging in

If possible, allow people experience your app before prompting them to log in. For example, many ecommerce apps such as Zulily don't require people to log in until they're ready to check out.

2. Avoid unnecessary steps

Reducing unnecessary steps is one of the most effective ways to improve your conversion rate.

Avoid asking users to first tap “Login” or “Register” to get to the Facebook login button. With Facebook Login, this is an unnecessary step. There’s no need for people to even have stop to think about if they have an account or not.

In addition, after people have logged in with Facebook, don't prompt them to create a username or password. One of the most popular reasons people log in with Facebook is because “it’s fast and easy and I don’t have to enter a password”. After logging in with Facebook, people especially do not want to have to create a username or password.

3. Button Design

The Facebook Login button that comes with our SDKs is easy to integrate and includes built-in education that ensures a consistent design and experience:

But if you decide to build your own, follow the below guidelines.

Color

Recommended button colors are white and the official Facebook blue; 4267B2. Around the world, when people talk about Facebook Login they often refer to it as "the blue button".

Color is one of the best ways for people to recognize something quickly. From a usability perspective, the more quickly people recognize what your button is and does, the faster they want to tap on it and the more seamless the experience.

Copy

If you're using Facebook Login to enable account creation and login, recommended labels are 'Continue with Facebook' or 'Login with Facebook'. We're heard from several partners that “Continue with Facebook” converts best, but this can vary based the context of the button.

If you're using Facebook Login to enhance an existing account, you may also use Personalize with Facebook or Connect with Facebook. “Connect with Facebook” especially makes sense when connecting accounts or additional devices to an existing account.

Choose the font, font weight, and kerning that looks best in your app, but optimize for easy legibility.

Size and shape

Design your login button to be as fast and easy to recognize and tap as possible. On a mobile device, this means close to the thumb and large enough to tap easily. It’s simplistic but true; larger buttons convert better than small buttons.

Facebook branding

Use the correct “f” logo from the Facebook Brand Resource Center. The “f” logo is available in various sizes for button scaling purposes, but the proportions and typography style must stay consistent.

  • Do only use the approved “f” logo or other brand assets and follow the guidelines provided on the Facebook Brand Resource Center.

  • Do use the version of the “f” logo that comes with a blue box on white or light colored backgrounds and the version of the logo that comes on a white box on blue or dark colored backgrounds

  • Do include the “f” logo or the word Facebook, not both, to designate that this is a Facebook login. The “f” logo plus a Facebook call-to-action is fine.

  • Don't use any other logo, an outdated version or custom variations that can give the impression that your app is dated or untrustworthy

  • Don’t modify the "f" logo in any way, such as by changing the design, scale or color. If you can’t use the correct color due to technical limitations, use black and white. The “f” logo is available in various sizes for button scaling purposes, but the proportions and typography style must stay consistent.

Additional messaging

We’ve found that including messaging next to your Login button can further increase conversion rates.

In some cases it’s better to describe the benefit of logging in with Facebook, in others it’s better to reassure people that your app won’t post to Facebook without your permission. The messaging that converts better often depends on the type of app and the level of trust and recognition of your brand. You may also want to vary the message based on the voice and tone of your app.

Examples of reassuring messages:

  • “We don’t post to Facebook.”
  • “We'll never post anything without your permission.”

Examples of benefit statements:

  • Login with Facebook so you can play with your friends.
  • In a hurry? Log in with Facebook.

4. Permissions

Only ask for the permissions you need

The fewer permissions you ask for, the easier it is for people to feel comfortable granting them. We've seen that asking for fewer permissions typically results in greater conversion.

You can always ask for additional permissions later after people have had a chance to try out your app.

An additional benefit of asking for fewer permissions is that you might not need to submit your app for Login Review. You only need to submit for Login Review if you're requesting permissions other than public_profile, user_friends and email.

Ask for permissions in context and explain why

People are most likely to accept permission requests when they understand why your app needs that information to offer a better experience. So trigger permission requests when people are trying to accomplish an action in your app which requires that specific permission.

For example, the Facebook app only asks for Location Services when people explicitly tap on the location button when updating their status.

Asking for permissions in context is especially important when your app is asking for publish permissions. We recommend that you ask for publish permissions after people click a share, post, or publish option in your app. If your app only needs basic sharing functionality (e.g., sharing one item at a time, no custom composer), you can use our share dialog for iOS and Android.

5. Provide a way to log out

Once people are logged in, you also need to give them a way to log out, disconnect their account, or delete it all together. In addition to being a courtesy, this is also a requirement of our Facebook Platform Policy.

The dating app Tinder, for example, gives you the option to hide your profile card to prevent people from finding you, log out, or delete your account entirely.

6. Test and measure

Not even the best designers get their onboarding flow right on the first try. Great onboarding experiences are usually the result of thoughtful design and testing, with multiple iterations.

Before launching your app, run a qualitative usability test to understand how people are reacting to what they see. It doesn't have to be formal to be useful, but make sure to watch people run through the experience.

In addition to qualitative testing, use analytics to understand if people are completing the process and their overall conversion rates. Best practice apps can see conversion rates of over 90%. Facebook Analytics lets you monitor your conversion rates for free.