5

I am building a login page and I spent over 5-6 hours reading a tonne of posts in this group. I saw the following discussions

  1. Login and Register as separate pages
  2. Login Modals
  3. Login Register vs Sign in Sign up
  4. Social logins

I have tried hard to wrap my head around what would work best. I plan to run a site where people can code in a playground that has a free account and a PRO account and built a page as follows enter image description here

You can see it in action HERE

I have a few questions where your suggestions are super appreciated

  1. Should I do a login or sign up as shown below? I never came across this on ux stackexchange posts
  2. How many social login options should be displayed. I have atleast 6 options to show. To reduce the clutter perhaps have buttons in rows and columns?
  3. If I were to separate login and register, would they be separated using tabs or plain links at the top (or pills in Bootstrap)
  4. if I had to stick to x social login options on the screen, how do I reveal the rest?
  5. Should I add a small label below the email box saying "We wont spam or share your email with anyone"

Thank you for taking your time to read this question. Would love to hear your thoughts

UPDATE 1 Thank you so much everyone, based on your recommendations and reading all the links posted below, I have redesigned the screen and hopefully this one's better. Feel free to use it for your projects as well HERE

Mobile enter image description here

Desktop enter image description here

Improve this question
2
  • 2
    Next time, please submit each question separately. It makes it much easier for others to find answers to the questions that are relevant for them
    – Tin Man
    Commented Dec 15, 2017 at 23:33
  • 1
    as this question is the closest to mine - I'm writing here before opening a new one. I believe while using social id providers only - the "Continue with" seems perfectly valid - the key doubt I have is what to do with ToS consent - this should be made before opening a new account - is it acceptable to do this after obtaining identity info from social login and before creating an account in my app?
    – ciekawy
    Commented Oct 30, 2019 at 17:44

3 Answers 3

Reset to default
6

Your main question:

Combining registration and login into a single form inevitably leads to errors where existing users mistype their email and end up accidentally registering.

Also, and this is just a hypothesis, but having one form serve two different functions could be confusing to visitors. "Continue" is extremely vague, especially for people registering. You can test this with real users.

To answer your other questions:

4: Lots of valid possibilities for additional login options. Stack Overflow uses a "more login options" link that expands a section with more login buttons.

5: A "we won't send spam" is appropriate when users have reason to worry about a site sending them spam. Is it a legitimate worry with your web app? If you're not sure, perhaps you can do an A/B test with a large enough audience and see if this label brings in more conversions.

Your remaining questions are answered elsewhere:

2: Why do most sites only offer two social login options?

3: Having the register and login options on same page - Best practices

Improve this answer
0
0

I would recommend limiting social login choices. If you provide six, users might forget which one they used to sign up when they are prompted to log in again. I've been told that Facebook and Google are the most-used options. Github might be good if your app is for developers.

If your app is new, consider "Sign up" email and password fields as the default and a subordinated "Sign in with email" link below that.

For social login, you could use "Continue with Facebook" or "Continue with Github" to either sign up or re-authenticate social users.

Improve this answer
0

here is what i think:

  1. Should I do a login or sign up as shown below? I never came across this on ux stackexchange posts

I am not a 100% sure what's exactly behind the login but if seems like your link should read "Register" and not "Sign up". if that's the case, i would add a small link similar to your current "forgot Password?" and call it Don't have an account? Register Now

  1. How many social login options should be displayed. I have atleast 6 options to show. To reduce the clutter perhaps have buttons in rows and columns?

You definitely have a lot of links... I would recommend limiting them, but if you can't and really have to display all, try using only the social media icons. similar to this: https://warehouse.socialengine.com/storage/files/72fd2b21-a0cb-4fc0-b7d4-b1e96d4709c3.jpg

  1. If I were to separate login and register, would they be separated using tabs or plain links at the top (or pills in Bootstrap)

Plain link

  1. if I had to stick to x social login options on the screen, how do I reveal the rest?

I have used Sign in with your social media account and when you clicked, a modal with the social media options is presented

  1. Should I add a small label below the email box saying "We wont spam or share your email with anyone"

Personal preference... I would

hope this is helpful

Improve this answer
0

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.