by anthony on 05/05/11 at 7:54 pm
[Note: This article was also published on SmashingMagazine: Innovative Techniques To Simplify Sign-Ups and Log-Ins]
There are many ways to design sign up and login forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out.
Simplifying Sign Up
The purpose of every sign up form is to get users to complete it successfully and send it in. However, when users have to fill out a long and complicated sign up form, it can turn their excitement for your website into displeasure. Here are a few innovative techniques that’ll make your forms faster and easier to fill out.
Ask for a username after users sign up.
Sign up forms typically ask users to create a username that’s unique to their website. However, coming up with a unique username that’s not taken can take the time of trial and error. Instead of hassling users with the username process when they sign up, consider asking for it afterwards. This way you won’t lose sign ups from frustrated users. You’ll also prevent users from creating random and forgettable usernames, just so it passes the form requirements.
Allow users to type their password only once.
Many sign up forms ask users to type their password in two different textfields. This is because the form masks the password. Therefore, asking users to type it in twice confirms the accuracy of the password.
Although forms mask passwords so that others can’t see it for security reasons, it also has its downsides. Users can’t see the password they type either, which makes it difficult for them to know whether they’re typing their password right each time.
A more efficient approach is to ask users to type their password in once, but then include a checkbox that allows them to unmask the password, so that they can check the accuracy of their password. This option would reduce the number of textfields and decrease the work users have to do to sign up.
Auto-fill city and state textfields based on user’s ZIP code.
If your form needs the user’s personal address, then consider auto-filling the city and state textfields based on the user’s ZIP code. This approach makes your form faster to fill out because users don’t have waste their time and energy manually selecting their city and state from dropdown lists. The City and State that corresponds to their ZIP code automatically appears when users enter their ZIP code.
Auto-complete the country textfield.
The conventional way for users to select their country is from a drop-down list. A more efficient way is to use an auto-complete textfield. Instead of making users scroll through an alphabetical list of every country in the world, the text field would allow users to select their country from a small subset of countries that match the letters they type. The user needs to only type a few letters to see their country in the menu.
Allow users to auto-fill their payment information from their shipping information.
If a user is buying a product, they’ll have to submit payment and shipping information. Most of the time, the information is the same, so let them auto-fill one from the other. You could include a link saying “Same as shipping information” in the payment section, and when clicked, it would repeat the shipping data in the payment textfields.
- Copying Billing and Shipping Address Information with jQuery
- Copy Form Input Data to Another Input Field with jQuery
Don’t check the email newsletter option by default. offer users a preview instead.
Most website owners pre-check the newsletter box, hoping to get more subscribers. Chances are, it will work. But a subscription is meaningless if the user has subscribed only because they have overlooked or misunderstood the option. If they’re not interested, they’ll unsubscribe sooner or later. Forcing them to subscribe won’t help you in the long run. And receiving a newsletter without having explicitly asked for it can turn users off.
A more effective approach is to make users want to subscribe by showing them a preview or excerpt of the newsletter. This way they’ll know what they’re missing if they don’t subscribe. You’ll also sleep well knowing that users who subscribe have done so because they’re genuinely interested in your content.
If you get a lot of spam, then putting a CAPTCHA on your form is necessary. What’s not necessary is making the CAPTCHA an obstacle that turns users away. Traditional CAPTCHAs that ask users to retype distorted letters have been proven to hurt conversion rates. With the extra hassle they force on users, it’s no wonder.
The purpose of every login form is to get the user into their account. Some login forms do this better than others. Here are a few innovative techniques that will help your users log in more efficiently.
Allow users to log in with their email address.
Remembering an email address is easier than remembering a user name. Usernames are hard to manage and remember. People remember their email address because they use email all the time.
Give users the option to log in with their email address as well as a user name. The flexibility could save them the time and headache of recovering the user name if they forget it.
Log users in without leaving the page.
Logging in is a common task that users will want to do from anywhere on your site. As soon as they log in, redirect them back to the current page. This will make logging in faster and allow users to get right back to their task.
There are a couple of ways to make this happen: a drop-down box or a modal window.
The drop-down box will open without taking users off the page. It takes up only a small part of the page, making it a fast and lightweight option.
A modal window also keeps users on the current page, but it opens up at the center of the page, putting the focus entirely on the login form. This option gives you room to add supplemental information on your login form.
Auto-focus the first textfield when the form shows.
Once the user sees the login form, they’ll be ready to log in. Make the process more efficient by automatically focusing on the first textfield. This saves them the time and effort of hovering and clicking. The user can put their hands on the keyboard and start typing away. The auto-focus should clearly highlight the textfield so that the user knows they can start typing.
Allow users to unmask their password.
This option is as useful for logging in as it is for signing up. If users can’t see the characters in the textfield, they could easily mistype their password. If the form rejects their password, they’ll know that they mistyped something and will have to re-enter their password until they get it right.
The problem is that users don’t know which character they mistyped, so they can’t fix their mistake before submitting it on their first attempt. This creates more work than necessary and makes users slow their typing down. Avoid this by adding a checkbox that allows users to unmask their password before they submit it.
Use a question mark icon for the password recovery link.
Users should have no trouble finding the password recovery link on your form. Instead of using a “forgot your password” link, consider using a simple question mark button that won’t take up a lot of room and get lost among other links. Because the question mark is the universal symbol for help, users won’t wonder where to go when they’re having password trouble.
Make the login button as wide as the textfield.
The login button isn’t just for taking action. It also lets users know what action they’re about to take. A small login button has as a weak affordance and can make users feel uncertain about logging in.
A wide login button gives users more confidence in logging in and is hard to miss. The button’s label also becomes more visible so that users are clearer about the action they’re taking.
Allow users to log in via Facebook, Twitter or OpenID.
Nearly everyone has a Facebook, Twitter or OpenID account, and letting them log in with it brings big benefits. They can use your website almost instantly, without having to go through the sign up process. Also, they won’t have to manage multiple user names and passwords across different websites.
Your sign up and login forms shouldn’t make the user’s life difficult. Spending time filling out a form is no one’s idea of a party. These innovative techniques will make your forms simple and efficient, so that users can sign up and log in quickly and start enjoying your content.