"Sometimes I put my log in information into the register fields."
"Me too! I hate that not only do I feel stupid, I have to retype everything again."
For one of my side projects, Leafy Chat, we have just added the concept of user accounts. This includes the need for registration and log in (as well as log out and forgot password and so on). Leafy Chat only requires an email address and a password for both registration and log in, so it would be great to have some clever way to have both forms on the homepage.
Some things to consider:
- Users only need to register once but will log in many times.
- It's really important to get new users and registration should be dead simple.
- Users will accidentally use the wrong form and should not be punished by having to re-enter their information.
- The two forms, register and log in, require different validation. For log in, we need to check if the username/password combination is valid and for registration we need to verify that the email address is unique.
Another project that I've designed also has an email/password registration system. Hurl is a site for testing APIs. At any point while using Hurl, a user can click the "Log in" link to log in or register. A pop-up displays a single form and two buttons to choose from: "Log in" or "Sign up"
I like this design because by clicking the correct button, the user determines which validation to perform. For example, if the user clicks "Sign up" and the email is already in use, they probably already have an account and can simply click "Log in" to correct the action. What if the user first clicks "Log in" but doesn't actually have an account? They simply get an error message that the account doesn't exist and can click "Sign up" to create one. The user isn't punished for picking the wrong form.
I think the Hurl design is an improvement over a two-form system but it's far from perfect. I don't like that the buttons look so similar and that there's very little guiding the user to pick one or the other.
Mike Malone suggested taking a look at Amazon's log in/register page. Wow.
I love this form because it is so straightforward. If you're an existing user, it's only one step to log in. For a new user, the form takes you to a second page that asks you for a little more information and also prepopulates the email you entered.
The use of radio buttons makes it clear that there are two distinct validation choices (as opposed to the form buttons which don't necessarily imply that you should only pick one). While radio buttons aren't the trendiest HTML form input, they are the appropriate one for prompting a user to pick one option out of many (while not obscuring the options like a select input does).
So after probably far too much research, I've come up with the following single register/log in form for Leafy Chat.
Log in
Sign up
The form updates via JavaScript when the user selects a radio button. For the log in form, notice that the submit button says "Log in" and there is a link to retrieve a forgotten password. For the sign up form, the label for the password field prompts the user to "Choose a password" and "Sign up!" while also accepting the terms of service.
I like this design because a user can either log in or sign up directly from the homepage and the radio buttons stand out and make the options clear to the user. I love that the page dynamically updates to provide relevant help for the chosen form. Also, the user can easily correct any errors without re-entering their email/password.
What do you think?
