There are many ways to design sign up and login forms. Most designers are only familiar with the conventional ways. Applying a few innovative techniques can make your form simpler 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.
Combat spam by hiding a Javascript textfield, instead of using CAPTCHA.
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.
A simpler approach that won’t hurt the conversion rate of your form is to use a hidden and required textfield generated with client-side Javascript. Spambots can’t fill in this textfield because they can’t interact with objects in client-side Javascript; only users can. This method is simpler and less intrusive, so that you can reduce spam without hurting your conversion rates.
Simplifying Login
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.
[This article was featured in SmashingMagazine: Innovative Techniques To Simplify Sign-Ups and Log-Ins]
UI Design Kit
Affiliate
For a slick lightweight jquery validation plugin checkout: http://plugins.jquery.com/project/validateHandle
Wow! Awesome compilation…. You probably will save lot of projects by this post…. thank you
Some really great points listed! Thanks for sharing these points this will really improve the user experience a lot!
Good article, but wrt captchas you say “Spambots can’t fill in this textfield because they can’t interact with objects in client-side Javascript; only users can” – with headless browsers (e.g. htmlunit, httpunit) and automated browser drivers (e.g. selenium), interacting with a webpage in exactly the way a user does, and affecting client-side javascript, is no problem for the creative spambot author.
Great overview, thanks!
Instead of adding a required field with client side JavaScript, I would recommend hiding a (must be left empty) ‘honey-pot field’ with CSS.
Disabled people using assistive technology like screen readers might not be able to submit the form. Screen readers can handle JavaScript, but don’t detect a scripted addition of html elements.
Only robots will be tempted to fill in the ‘honey-pot field’. On the server side you can reject the submissions with data in this field.
Source: http://haacked.com/archive/2007/09/11/honeypot-captcha.aspx
Anyone -please: What is the rationale behind masking passwords when creating them? Do you have a lot of people looking over your shoulder at the office or in your home when you start a new account?
I used to “think” that password fields are sent encrypted over HTTP, when I read this article i went out to double check, and it turned out that they are treated exactly the same as text fields!!! shocker I know!
“Making users scroll through an alphabetical list of every coun try in the world…”
has always seemed like a chore to me from a UX perspective, especially when a site/service/subscription is based solely in one country or region. Plugging in a drop-down menu that includes Tuvalu may be an easy fix from a development perspective, but just seems lazy and far from user-centric in its practical application. Making something so innocuous seem “smart” and a “welcomed relief” goes a long way to convincing the user they are dealing with a forward-thinking website or service.
Good advice. So many sites could also benefit from better password memory cues and recovery rules. For example, if your site required a certain scheme for passwords (e.g., “minimum of 8 characters, including at least 1 number”), remind the user of those rules when she is logging in. It may help her remember her password. Paypal does this well.
Amazing stuff… thanks for the inputs. While we are following most of it already, nothing beats a compilation. Just that I guess masking should still be used. Users may not be comfortable if their passwords were visible
indeed. nice article. quick q: why did you choose the devbridge autocompleter for jQuery over, say, JQ UI’s?
Great article indeed.
Regarding password masking: I agree that not forcing users to type a password twice will improve the overall UX. However, I have a feeling it’s not fully obvious (to users) what this “Check password” check-mark is going to do when selected. Is it somehow going to validate (check) my password? I’d suggest using “Unmask password” phrase instead.
“Check password” is probably not the best label for it. But the important thing is that you understand the benefits of that technique.
True “check password” might be confusing. Apple interface uses “show password”. Just another suggestion.
Excellent article, thanks!
This is really great article. Nice analysis.
Awesome List, thanks for the share !!!
Great stuff… regarding the password masking, i think “check password” is too confusing… why not “show characters”? It has been used before in Windows, makes perfect sense to me, doesn’t it?
PS. the checkbox underneath the leave a comment button for spambot… didn’t work 🙁 I checked then doubted then unchecked then clicked then got sent off! so speaking of Captchas, I think a silent captcha is better, or at least make the statement something like “Yes, I am human”
Why not make the form post/get “action” populated with JS on DOM ready, once validation plugins are loaded? That way a spambot with JS turned off can’t use the form (no post action), and a physical spam user has to have it’s content validated.
the reverse Zip lookup to complete State and City is a fun gimmick is not actually any faster for total form entry time. The state should already be approximated by backend geo-location features provided by the user’s ip, or others means. Which is why most people probably won’t go through the significant effort required of implementing the loop up on the backend.
It also forces you to use a non-standard address block pattern, which could be disorienting to first time or non-savvy users for what should be a straight forward task.. This might necessitate your flow be split so zip code appears on a preceding page, in this case creating an additional page in your flow (depending on application) and therefore an additional “Continue” button or click.
Also, if the zip pulled up the wrong city or township (common) then it actually takes more time because they have to go in and correct the bad city name.