Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I want both forms to be extremely simple - sign in much like facebook in the header with 3 inputs side by side - email, password then "sign in" (or is "log in" better?).

I also want to USE THE SAME FIELDS for a SIGNUP form, but I am stuck at the sign in button. I do not want two buttons, one for sign up and one for sign in, because that will confuse people. I just want to be efficient by using the same email and password fields. I dont need a password confirmation field. Any suggestions on how I can get this to work?

share|improve this question
2  
What advantage is there to people using your product in doing this? Is the benefit that this gives greater than the confusion that it is likely to create for some users? –  JohnGB Sep 24 '11 at 10:12
    
What is the rationale behind skipping the password confirmation field? As part of "sign in", you almost certainly need the link to the password recovery process in case users forget or mistype it. –  dbkk Sep 24 '11 at 17:24

5 Answers 5

up vote 12 down vote accepted

First, keep a non-exiperable cookie with email so you could always identify if it is a returning user, even if his login session has expired and he has no autofill on.

Second, when user completes email field, send an ajax request to determine if such a user exist or not. Depending on that, choose tab. Fields are the same, so do not clear them when switching.

Third, you will need to allow users to choose what they want to do, create account or sign in, even if they misremember or misspell their email. If the user choosed tab by hand, then he knows what he wants. Do not auto-switch tabs after that, instead, show messages like 'no such user registered, create an account?' or 'user with this email already exists, sign in?'

Single button as @Asmor propose won't work, because user will be no clear way to choose desired behavior (I want to login, but button states "Login or create", how do I login?) and also he will not be able to tell what will happen after he clicks this button ("will I be logged in or new account will be created?").

enter image description here

share|improve this answer
2  
Smooth solution. However, it's too easy to create a new account by misspelling the e-mail. I normally log in by blindly typing: username [tab] password [enter] without reading anything. It might be a good idea to have the password confirmation box on the "Create account" tab to prevent creating an account by mistake with the above sequence. –  dbkk Sep 24 '11 at 17:30

Amazon does this quite nicely. That’s the only place I’ve seen it done.

Screenshot of Amazon Sign In form

share|improve this answer
1  
But then Amazon redirects to a signup page where you enter "Login Credentials" — with an email field, again. (Pre-filled though.) And "Enter a new password" and "Type it again" inputs. — Isn't that more like a separate sign up page, hmm. –  KajMagnus Aug 9 '12 at 14:53

What if there was just a submit button. You could call it "Sign In or Create Account" or what have you. Actually, coming up with a good title that will explain you can do both on this form without confusing users might be the most challenging bit...

Anyways, when they click the button, you send a call back to the server to determine what to do next.

If the username exists and the password matches the user name -> Log the user in.

If the username exists and the password does not match -> This is another one that'll be awkward to word, but you need to explain to the user that either their password is incorrect, or the username is already taken.

If the username does not exist -> ask the user if they'd like to create the account.

share|improve this answer

The initial screen should simply present the standard username/email and password fields and the button should be something generic like "Proceed" or "Go" (or even just a right-facing arrow).

If the account exists and the password matches, then you simply proceed with the log-in as usual. If the account doesn't exist or it exists but the password is wrong, show a message saying "Could not log you in with the given credentials. If you do not yet have an account with us, please check your email for an activation link." By having the same response for invalid credentials as no account, a user cannot easily tell if an account with that username already exists or not. (Of course all this assumes that the username is an email, otherwise this interface doesn't really work at all.)

Note that if there already is an account with that email but the user types the password in wrong, no activation email will be sent. However, you could send the existing user a warning that someone has attempted to log into their account with the wrong password.

Finally, if it is a new account, the activation link would take the user to a new page asking them to confirm the password they entered into the sign-in form. This accomplishes two things:

  1. It gets them to double-type the password to avoid accidentally mistyped passwords, and
  2. It ensures that the person who received the email was indeed the same person who entered the information into the sign-in form in the first place.
share|improve this answer

When you have non-native English speakers, you should AVOID at all costs the simultaneous use of "Sign in" and "Sign up". It is not distinct enough for them.

My first times using these logging-in sites, I was several times loosing time, till I got the meaning.

Consider replacing "Sign in" by "Log in" or "Log on".

share|improve this answer
    
This is not an answer to the question, but would have been a very helpful comment on another answer. –  pattern86 Sep 13 at 1:40
    
There is also a question and answers around the topic of this comment here: ux.stackexchange.com/questions/20595/… –  greenforest Oct 13 at 22:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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