8 ways to create the perfect Registration Form
Carlos Sousa
Product Design | Innovation | Strategy | Helping teams in their product innovation journey
This article was first published on Strata3 blog.
Ever since businesses went online and started taking the web seriously, Registration Forms have been vital. While they could be considered the first barrier to an online sale, they’re essential for any business that wants to maintain a relationship with a customer.
When talking about Registration Forms, I mean everything you have to fill in before buying something or using an online service. On Amazon, you have to register before you can buy; similarly on Airbnb before you rent. And you also have to do it on eBay, Twitter, Google, Facebook, etc.
With these questions in mind, I’ve compiled a list of things I consider the most important when designing a Registration Form.
1. Add value for registration
Why should your users register? As a service or product provider, you must be able to convince your users why they should spend a few minutes of their time doing so.
To do this, show the user the benefits of becoming a registered user. It’s proven that doing so will make your users more willing to give their personal details in exchange for what you have to offer.
Here are some examples of interesting ways of demonstrating a benefit:
2. Eliminate unnecessary fields
This might be one of the most frequent mistakes in Registration Forms. Forget about what your marketing or IT department says?—?those arguments are from the 90s when everything was complicated and hard to do. We live in the 21st century now when everything is possible.
One of the main reasons that forms have so many inputs is to gather as much qualitative information as possible about the user for marketing campaigns. But there are many other ways of acquiring this information to enrich your user database.
When registering a new user, ask the minimum you need to get you started. You can always ask further information down the line. If your goal is quality and not quantity, you’re better off focusing on your qualitative leads.
One of the things any Registration Form can do better is to remove the double entry password and email field. There are other solutions for capturing typos and wrong inputs. Apart from using proper validation, there are some other ways to prevent this, one of which is suggested by Chris Jackson:
To reduce the double password confirmation problem, add a way for the user to show the password. Doing so could dramatically increase your form signups.
Formissimo’s signups increased by 55% after this change.
3. Know where to put your labels
This is possibly one of the other most-discussed subjects relating to form design. Studies have been made and most of them come up with more or less the same conclusions.
Labels above the input fields take less time to fill than left-aligned form inputs because there are fewer visual fixations.
Studies also argue that inline top-aligned labels are the best way to present labels because they offer minimal visual fixations and make the form lean and compact. Anthony from UX Movement posted a detailed article on this.
This last technique seems promising but the folks at Formulate have some issues about this study. You can see their thoughts here.
In conclusion?—?and in my opinion?—?the best technique for desktop and mobile is to put labels above each input. This means fewer visual fixations, no visual ambiguity and a cleaner and clearer experience for the user
4. Provide Guidance
Successful Registration Forms guide the user through them.
You should explain how you want users to input your data or why you need it. Do you need their birth date? Then tell them why as this builds trust and the user will thank you for it.
Need a strong password? Don’t push it by saying you need them to type at least 8 characters long with an alphanumeric, at least one uppercase and one special character from a list (! # $ _). Let the user pick their own complexity level. In fact, a passphrase is considered more secure than a complex P4ssw0rd!.
5. Required inputs are bad, use optional instead
While not too bad in themselves, required inputs could affect your signup quality conversions. A research study shows that people are willing to provide more information than is needed. This means that if you say fields are required, then users will only fill in those fields.
Instead of indicating required fields, mark the optional fields and users won’t feel the need to take shortcuts to fill the form. You can read more about this technique in this article.
6. Use the right input field
This is another example of asking the right questions in a wrong way. How many times has a form asked you for your sex, then provided a dropdown with male/female options? Or requested your date of birth and offered day, month and year dropdown boxes?
This is a problem because you are hiding information and making the user have unnecessary interactions with the form. There are also better ways to let the user input the information you need.
Check out this an article by Luke explaining why dropdown should be the last UI resort.
Here’s another option: take advantage of HTML5 and give the proper type attribute to inputs. For example, use the input ‘type email’ when you’re asking for a user’s email. On mobile, the keyboard defaults to a friendly email input when the user is about to fill in this field.
Look at the @ on the keyboard when you use email input.
Here are a few other examples you case use to increase the user experience on your form.
- The URL input type includes a slash and a period.
input type=”url” name=”url” /> - The TEL input type brings up the telephone keypad.
input type=”tel” name=”telephone” /> - The number input type brings up the numeric keyboard and you can even set min or max values and step sequences.
input type=”number” name=”number” min=”10″ max=”100″ step=”10″ value=”10″ />
7. Avoid using a Captcha
Harry Brignull said this about Captchas
“Using a CAPTCHA is a way of announcing to the world that you’ve got a spam problem, that you don’t know how to deal with it, and that you’ve decided to offload the frustration of the problem onto your user-base. As statements go, that’s pretty lame.”
A captcha is probably one of the major causes of form drop off; as such, it does more harm than good. There are alternatives out there which don’t have any negative impact on your form.
- Use an alternative like the Google solution reCaptcha
- Or use the ‘honeypot’ technique which consists of having an input field that the user leaves blank. A robot it will fill it?—?and that’s how you can prevent spam. You can read about this technique here.
The bad news is that spam will always be there. However, the solution to overcoming this problem should never lie with the user since it’s not their fault you have a spam problem.
8. Use social media for logins
Did you know the average person has between 7 and 25 accounts that they log into every day (source). And around 82% of people have forgotten a password used on a website (source). Not surprisingly, this has led to the expression “Password Fatigue”
On the other hand, imagine a user arriving on your website and being able to log-in with one click- following which you can harvest a ton of data from that user.
With social media log-in, you can decrease fake email registrations and personalize online experiences by using the retrieved data.
Conclusion
If you’ve read this far, I hope you found the article useful and might bring it for your next discussion about your Registration Forms.
Many successful online businesses are aware of the importance of offering better registration processes. These include companies like Uber, Spotify,Netflix, Mailchimp, Facebook among many others. However, there are still too many people who more concerned about their own business priorities rather than users’ needs.
The list above was created to show the non-rocket science way to build a successful Registration Form. Each technique was tested but should be treated case-by-case. And in case of doubt, A/B test?—?after all, there is always something that can be improved.