Facebook/Twitter login only vs. Facebook/Twitter signup and login separately

Question

I have searched for this topic here, but haven't found solid answers for the problem.

So the situation is this: we are creating the authentication screens for a mobile app and we are not sure which social login/signup flow should we choose.

1. We have 4 buttons: Login with Facebook, Login with Twitter, Login, Signup. In this case, if you want first time login with Facebook you also get to signup. The other two actions for the users with email.

   Pros:

   • one button for social connect
   • the elements takes less space
   • they fit into one screen.
   • "simpler" flow.

   Cons:

   • accepting legal things /e.g. privacy policy/ for first time through this flow might be a little difficult to implement
   • might be confusing for first timers that they instantly "log in" with fb.

2. We have 6 buttons: Signup with Facebook, Login with Facebook, Signup with Twitter, Login with Twitter, Signup, Login. In this case, if you want first time login with Facebook you also get to signup. The other two actions for the users with email.

   Pros:

   • no confusion for the user about the behavior

   Cons:

   • the elements take more place
   • we definitely have to make 2 seperate screens for login and signup, so the authentication flow will be longer

Could you please share your thoughts/best practices? Thanks!

Answer 1

Why not simply use 'Connect with Facebook' 'Connect with Twitter' on this screen - What is the advantage of differentiating between signup vs signin here?

From the users perspective the action is the same - the only implication is on your end as to whether you are creating a new account for them or logging them in to an existing account

Answer 2

What is the Mobile App? Is it a e-commerce store, news portal, game? Because there is a huge difference between them. You should ask yourself how often your users use Login versus Sign Up. In most cases Sign Up is significantly less important than Login. If that's a case you MUST have 2 separate screens for Login and Sign Up. Why?

• remove additional noise
• clear actions
• less confusion
• easier for development
• ...

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

Instead of using the term Signup & Login for social media, why not use the hybrid term called 'Sign In'

• Sign Up with Facebook
• Sign In with Facebook

This is the term which most social sites follow now. You can do some alpha testing & see whether users face any difficulty understanding it or not.

But if you still want to go with 2 different group of buttons for Social Login & sign up, then I would recommend that you put this actions on 2 different screens. As you said, you are building an mobile app. So it is safe to consider that mostly people who are going to use it already have an account(existing users) unless it is a game or it has no web app. Hence the home screen can have a Login option with the another link to sign-up screen.

But I would still prefer 'Sign in via Facebook' & 'Sign in via Twitter'