0

First I had a social signin which was nearly identical to the old stackexchange login and my login looked almost exactly like SO:s "login with google" "Login with facebook". Now we have designed our own look and I wonder if you can find any problems with it or give constructive criticism.

enter image description here

  • 1
    Why not merging both login and register form in one but with two buttons? – Yohann V. Apr 22 '15 at 11:51
2

If you value social authentication more than the regular approach, it's better to have social log in logos as CTAs (buttons instead of only logos; e.g. Airbnb), and at the top.

Also, studies has shown that labels for input fields perform the best at the top of its respective field. I'd prefer having placeholders to save space.

I would also suggest you to separate log in and sign up from each other, as it may easily confuse your users having two submit buttons. Best-practice for this can be either Tab approach like in SoundCloud authentication:

https://soundcloud.com/connect?client_id=b45b1aa10f1ac2941910a7f0d10f8e28&response_type=token&scope=non-expiring%20fast-connect%20purchase%20upload&display=next&redirect_uri=https%3A//soundcloud.com/soundcloud-callback.html

PS: I advise you to try to keep consistency with your copy. For example, you have both "LOG IN" and "Login". And, take how and where to display error messages, for example in case of a failed log in or invalid email address etc...

  • It would be good to separate the login and sign up from each other, yah. However, we do want to be careful and not flood the user with input boxes. If you're assuming most people are going to be logging in (a general assumption to make) instead of creating an account, then it would be wise to simply show the login screen, but provide a button (someplace where it's not screaming in the face, but visible) that will take the user the registration screen. Think the Tumblr login screen. – Andrew Apr 22 '15 at 12:52
1

The vertical spacing between rows is small enough to make the whole thing blur together as "one thing" when first looking at it - it's only after some examination that I realize that there's three major options at the top level that I need to choose from. Furthermore, the wide horizontal spacing between LinkedIn and Yahoo makes it seem like "Google LinkedIn" is somehow associated with the e-mail field above, and "Yahoo Facebook" is somehow associated with the password field above, making this blurring together even worse.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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