9

I'm working on a new design for the log in or register page, and since we have some very unique constraints, this might be the first time I've done one of these pages that isn't reinventing the wheel.

Here are the goals:

  • Make the new version easier/no harder to use than the current version
  • Reduce the number of clicks, if possible, for common use cases
  • Try not to make the form look too daunting

Here are the constraints:

  • All of the open ID buttons (Google/Facebook/Yahoo, etc.) function equally well as sign-up or login buttons no matter how they are labeled
  • Because of SSL limitations, embedding any stack exchange sign-up or login forms requires an iframe
  • The forgot password feature only really works for stack exchange open IDs, but if you have forgotten how you signed in, the email that you get through this feature will point you in the right direction
  • Google, Facebook, and Stack Exchange open ID register/login covers over 95% of cases

So I've done three wireframes that head in different directions. I'm looking for suggestions on how to best balance the above goals and constraints (we definitely plan on split testing, but sometimes split testing doesn't uncover ease-of-use problems)

Option one: Put everything on the page, and duplicate the open ID buttons for clarity

enter image description here

Pros:

  • Everything has an explicit label; no chance of a new user wondering where the Google sign-up button is
  • Reduces the number of clicks for the stack exchange login and sign up use cases by one

Cons

  • Puts a lot of things on the screen; may be intimidating

Option two: remove the redundancy from the open ID buttons

enter image description here

Pros:

  • Less intimidating
  • Reduces the number of clicks for the stack exchange login and sign up use cases by one

Cons

  • Does the two column format work when there aren't explicit labels above the columns?

Option three: minimal

enter image description here

Pros:

  • Much less intimidating, at first; reduces the number of decisions that need to be made immediately

Cons

  • Stretches the process out over several screens/clicks
Improve this question
2
  • UX is an art as much as a science, and as such choosing the best balance changes between situations. There is no "right" balance.
    – JohnGB ♦
    Mar 5, 2013 at 19:49
  • Point taken, which is why I'm asking for what one might take into account when attempting to balance these things.
    – Jeremy T
    Mar 5, 2013 at 19:57

3 Answers 3

Reset to default
3

I think tabs solve your problem. Something like this mini-form:

enter image description here

Improve this answer
2
  • Yeah, I'm warming up to this option. It just means that we're going to have to be careful to specify default tab in a lot of situations. I would want someone to have to come through expecting a sign-up form but having to click on a tab first.
    – Jeremy T
    Mar 6, 2013 at 16:53
  • Of course we should take into account all these risks. But SignUp form much more dependent on content of the site than Login form. Google mail, as well as most others, has SignUp link (Create account) invisible relatively to Login form. From the other side, every hosting provider has 5 huge SignUps and just little Login link somewhere in up right corner of webpage. This is your responsibility to properly define most valuable function for your site. But it's hard to find situation where both of them are equally important.
    – Serg
    Mar 6, 2013 at 19:42
3

Option Two: I would recommend going with Option two since it clearly calls out the different actions a user can take i.e.

  1. Sign in with Facebook
  2. Sign in with Google
  3. Sign in with his account details.

The option also provides him with an option to create an account within the same frame which would be a one time process and the next time he comes to the page, he can just directly use the login screen to login as desired. Another advantage of option two is that all three options are clearly called out and the user can make a choice easily based upon his preference. The concept of switching to a register link is also not unknown to users and most users are aware of the page change to show a register option if selected.

There are a number of apps which follow this login approach as shown below.

enter image description here enter image description here

enter image description here

Option 1: I am not a fan of option one since there are two many distracting elements from the page and there is no single point of focus which directs the user towards what he has to do.

Option 3 : I am not a fan of option three as well since the links get overshadowed by the Sign in using Google and Sign in using Facebook buttons and a user might not notice them due to the prominence of the open auth sign in buttons.

Improve this answer
0

I have re-arranged the buttons converting them into more visible and meaningful Tabs. My solution would be something like that.

enter image description here

Improve this answer
3
  • 1
    The account details for Google/Twitter/Facebook are never asked (should never be asked) at your own website. Those buttons will/should always lead to the websites of those companies.
    – Lode
    Jun 5, 2013 at 8:28
  • Agreed. There should be buttons instead which lead to their respective verifier.
    – Salman Ehsan
    Jun 5, 2013 at 10:26
  • Wow. I imagine many people would actually type them in (esp. if you paid them $1... it-beta.slashdot.org/story/14/06/19/1728239/…)
    – prototype
    Jun 20, 2014 at 14:00

Your Answer

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

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