25

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?

Improve this question
2
  • 3
    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, 2011 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, 2011 at 17:24

5 Answers 5

Reset to default
19

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

Improve this answer
1
  • 4
    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, 2011 at 17:30
17

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

Screenshot of Amazon Sign In form

Improve this answer
1
  • 2
    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, 2012 at 14:53
1

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.

All that said, I would still prefer signing in with Facebook personally, as it really can't get much easier.

Improve this answer
0

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.

Improve this answer
0

A good way of achieving this is by keeping the form same, but just changing the buttons at the bottom.

So, the (default) log in screen has two fields: 1. for entering email/login 2. for the password

and two buttons: 1. log in - which makes a request to the server with the credentials above. 2. sign up for new account (see below).

When the user touches the second (new account button), the input fields stay the same, but the two buttons above are replaced by a single sign up button, which makes a server request to sign up.

This allows to keep the forms/process extremely simple, while also preventing false sign ups due to entering a wrong email/id.

As others have mentioned, it is not a good idea to have one button for both sign in/up. It is also slightly confusing if you had the sign up button right next to the log in button - most users consider them to be two distinct tasks, so some sort of separation in the ui is best.

Improve this answer

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.