In a login page, should the "log in using x social media" precede the local site log in prompt, or the other way around, as shown in the image below?

Log in Page

I'd like to ask the same about the registration. Obviously, with registration, there would be a bit more fields to fill in, and the user would have to scroll down to register using social media, even though we would prefer it if they would register using social media, so that we would be able to retrieve more data about them (some fields are optional and they might not fill them up).

4 Answers 4


The solution can be catered in a slightly different way to solve such issues.

enter image description here

A simple layout like this would solve quite some issues. Mobile designs require careful usage of space. Illustrative approach for such can help simplify and beautify app designs.

Description about the layout: The social login buttons can be arranged horizontally instead of vertically with icons illustrating what social networking site to login with. This will resolve the scrolling issues to quite a good extent. Proper dimensions might help remove scrolls completely.

Now the next question:

What order can it be in?

Before answering this question it is important to know whether or not social login will really be important for the application. If it is preferred that social login is required, then may be having it before the login fields can be a good option.

Looking at it from another perspective:

Handling mobile form filling actions can sometimes be too much work for the user. Keeping this in mind may be the user would prefer easier login/registration functionalities instead of filling all details exclusively.

The final solution could be considering all the sides of the workflow and then choosing where it can possibly fit in. I would suggest that keeping the social media icons on the top could be a good option since it will be visible to the user as soon as the screen appears and easier to work with the login screen ( for a user ).


Proper designs can help users navigate through the application easily and will also avoid issues which would appear otherwise.

Hope if not the solution I was able to give a perspective on it :)

  • I was thinking of putting in the social media icon beside the "X log in with x" where the capital x is the icon of the social media. My reasoning behind this to help the user if he were to be confused by the icon or the name; this way, he'll know exactly what he can log in with. There will be other social media platforms to log/register in with; namely, Yahoo, LinkedIn, and Microsoft.
    – yaserso
    Apr 4, 2016 at 20:15
  • 1
    Agreed. But proper illustration with minimal content can lead to a good design. To differentiate the type of social media there is an icon for each which is very different from each other. The only challenge would be to show the users that it is a social media login. This can be solved by using the space above the icons to tell the users that login can be through them as well. It doesn't really have to be through description inside the button. I hope I could help on that :) Apr 4, 2016 at 20:20

If you prefer users to register using social media, then you should definitely put those choises on top. It will gently push them to use it.

To me, it is confusing that you call the manual account creation "Mobile, Username or Email". I would just let the user fill in email (or username if that suits your system better).

  • Thank you for your response. It helps to see when one answer is more popular than others. As for the Mobile, Username, or Email approach, I just took that idea from Twitter and Facebook's log-ins. It's essential for the business to have these.
    – yaserso
    Apr 6, 2016 at 11:23

It all goes with your business needs.

If you want your user's information, then it would be better to include your own login first, and social login as last resource.

If you want less friction, user's information is no problem for you and want just some kind of simple user identification, then give preference to social media login.

Additionally, I see you're asking for mobile, username or mail. Despite this plethora of options is rather confusing, it seems you actually WANT some information social media login won't provide, so this is something you'll need to ponder and your decision has to be made based on what you need from the user rather than some "correctness" or rule, because it simply doesn't exist


Obviously, with registration, there would be a bit more fields to fill in, and the user would have to scroll down to register using social media, even though we would prefer it if they would register using social media, so that we would be able to retrieve more data about them

On mobile apps, user should be able to perform all operations quickly be it login or registration. It also depends on what user data you already have with you & what user data you are expecting for your business needs

  • If you already have user data in which user are registered using their emails & not using social media then the quickest way possible to do login is enter email & password.
    For this, you should place your controls to accept username & password should be above social media icons. (left side image) And once user is logged in as them to connect their social media profiles. This will help you to maintain consistent login flow presumed that you already have web app with same login flow & slowly migrate towards social media logins.

  • If you dont have any existing user data as of now & your business need is to get maximum of user data(as far as I have understood) then its always better to place social media logins first & then normal login controls. This will help you to get max social media logins & more user data.

Choose as per your need.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.