A registration form is a critical step for converting visitors into users. Make it easy, impressive, and sleek. In this post, we will look into the process of monitoring and optimizing signups and share some best practices that can help you increase form conversions and help you achieve an exceptional user experience.
As formisimo has described in their case study Small changes can lead to a 55% increase in conversions. We will present those small changes and many more from other sources. Learn how you can improve your signup forms conversion rate!
1. Monitor your signup process
Start the optimization with setting up form analytics, like MouseFlow or HotJar which offer:
- Recordings
- Identify usability issues by watching recordings of real visitors on your site as they click, tap, move their cursor and navigate across pages.
- Conversion Funnels
- Find the biggest opportunities for improvement and testing by identifying on which page and at which step most visitors leave your site.
- Form Analysis
- Improve online form completion rates by discovering when and why your visitors abandon your forms.
Collect data for two equal cycles - least two weeks long each. Analyse your data. Where are the people struggling? What impact changes do you have?
Look beyond just conversion rate form metrics. Here are some others to consider:
- Abandonment rate
- Average correction rate
- Failure rate by device
- Top converting / abandoning paths
Getting to the optimal conversion will likely be a trial and error or a series of A/B tests. For best results, optimize forms separately for desktop and mobile.
In the next points, we will go through top registration form optimizations best practices.
2. Fewer fields is more conversions
Unnecessary fields are to be avoided or made optional. Imagescape was able to increase conversion rates by 120%, simply by reducing their form fields from 11 to four.
If you think one form field question doesn’t matter that much, you’re wrong. Expedia took out the optional form field “Company”, and increased their yearly profit by $12 million.
Some form fields to consider consolidating/getting rid of:
- Username: do your users really need a username to register?
- Password confirmation: consider “show/hide” feature like MailChimp
Filling out a form is simpler than ever with autofill function, but a browser can only auto-fill if you use easily distinguishable context clues, like “First Name” or “Email”. It’s a best practice to title each form field with a term the browser will recognize, to help your users speed up their own fill-out process.
3. Provide social login button
You can also provide social media logins as an alternative to registration. Blue Research has done studies on social login:
- 92% of people have left a website instead of retrieving a username/password
- 54% of people may leave or not return to a website if asked to login
- 3/4 people say social login options should be offered
Social button login benefits go beyond user convenience with not having to pick and remember password. You can go even further and use social media login to fill in the data that your users would otherwise have to enter manually.
This LinkedIn sign up page includes a good headline, 4 input fields and optional "Continue with Facebook".
4. If you need a lot of information - split it
Sometimes you really do need a lot of information to register a new user account. Signups that require payment details, like billing address and credit card data. When that happens, consider breaking the registration process down into multiple steps or use conditional logic to shorten your forms.
In fact, some reports like report from Formstack shows that multi-page registration forms can outperform single-page ones. Signups usually come with a convenient progress bar that lets users know how far along they are in registration.
Another common solution is to split subscription process beyond single form, into multi-step flow. It allows you to submit the form when a user has reached a certain step in the form, and then continue providing more information if they want to. Check 3 Common SaaS Sign-Up Flows (and a Friction-Based Analysis)
Want to see how popular web apps handle their signup experiences? Here is a handy list of onboarding processes, including How Slack Onboards New Users.
5. Top-left aligned labels are best for readability & completion
Most users scan the form before filling out. Aligning and stacking fields and labels to the left of the page decrease eye movement and speeds up the processing time. A single column form converts better than two column forms. Form fields should adopt a natural or logical flow.
Google’s UX researchers found that aligning labels above fields on the left-hand side increased form completion time. This is because it requires fewer ‘visual fixations’.
6. Communicate expectations and errors clearly
Google’s UX researchers’ user interviews with participants in the study revealed which guidelines were most impactful in improving the forms:
Format specifications (e.g., requiring a minimum password length) should be stated in the form, prior to submission. The application of this guideline had a large positive impact on user performance, subjective user ratings and was also mentioned frequently in user interviews.
Error messages must be placed next to the erroneous field and designed in a way users are easily able to fix the problem. Doing this reduced form-filling time and increased subjective ratings.
Most frequently users mentioned that it was key to be able to tell apart optional and mandatory fields.
7. Design better forms
Since we try to keep this post a high level guide, we are not going to cover all the aspects of forms design here. Instead, take a look at the incredibly popular post Design Better Forms - Common mistakes designers make and how to fix them by Andrew Coyle, product designer at Google. Here are the most important points not mentioned yet:
- Group labels with their inputs - Present the label and input close together.
- Specify errors inline - Show the user where the error occurred and provide a reason.
- Use inline validation after the user fills out the field unless it helps them while in the process like in the case of creating a password, username, or message with a character count.
- Don’t hide basic helper text
- Expose basic helper text wherever possible. For complex helper text, consider placing it next to the input during its focused state.
- Ditch the * and denote optional fields
- Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields.
- Group related information
- Users think in batches, and long forms can feel overwhelming. By creating logical groups the user will make sense of the form much faster.
8. Use a benefit-oriented headline and CTA
By the time a prospect arrives at your signup page, in most cases they’ve already evaluated your service. But, does that mean you shouldn’t remind them why they’re there?
People don’t fill out forms for fun. They fill them out to achieve the outcome that sits on the other side of your form. The more motivating the outcome is, the more people that’ll complete your form.
Even when nothing on the form changes, you can significantly increase registration form conversion rates by changing the outcome that drives people to complete the form in the first place.
As a result of re-titling their sign-up form, BettingExpert increased their sign-up conversions by 31.54%.
Copywriting best practices should include:
- A clear and compelling headline
- Strong benefits and action words
- Show social proof (i.e. client testimonial)
- Clearly explain why you’re asking for sensitive information
9. Make CTA button stand out
The color of your CTA button has a major impact on conversion rate. Think of the button design/color as a visual cue that helps your prospects find the button. In other words it answers the question, "Where should I click?"
It is important to make your button stand out from the rest of the page in such a way that it’s easy to spot and identify as a clickable button:
- Start by experimenting with an orange or green button, simply because they often perform well.
- Reduce clutter around the CTA button.
- Make CTA button width match inputs width.
- Consider making your CTA bigger.
It's a final opportunity to convince your visitors that they should fill out those last few fields. Ideas from 31 Call-to-Action Examples You Can't Help But Click include:
- Join now
- Sign up for free
- Sign up to [drive]
- Start riding with Uber
- Get Started
- Give [Prezi] a try
- Claim Your Free Trial
- Continue
- Continue with Facebook
Summary
Sometimes the most obvious places for optimization are overlooked. Optimizing your registration form can lead conversion efforts on your website. Your signup process should be designed and catered for your specific audience.
It’s important you test design changes and monitor their impact. There is no one size fits all, but there are some general principles and best practices you can use to guide to minimize the pain of completing registration form. Support your form conversion with benefit driven headlines and supporting images and social proof.
Other pages you can to look into
- Use this 6-Step Process to Boost Conversions
- 50 A/B Split Test Conversion Optimization Case Studies
- The 7 Principles of Conversion-Centered Design
- 16 Tips that Will Improve Any Online Form
- 58 Form Design Best Practices & Form UX Examples
Need help with your UX/UI? Contact our team of specialists!
