2222-06-29

How to Design Effective Registration Forms

Even though user registration is quite a common thing, it’s also one of the trickiest parts of web design. You need to make sure that your sign-up page isn’t an obstacle for your users by following these tips for designing a better registration process.

Registration form design is a crucial aspect of marketing. It is probably the best way to increase conversion rates, which is why it is a popular choice for businesses. Hence getting your registration form design is key to high conversion rates. So, how do you design the best registration form? Here are some tips:

Make It Easy to Read and Approve Terms and Conditions

T&Cs forms are a common sight on websites, especially in financial sectors. They are frequently required on registration pages unless you use website user registration software. There are several methods to provide them, but the most basic is to give a link to the dorm with a choice to read before signing.

With GDPR compliance required in many countries, you cannot afford to make a compliance mistake if you want to relate with users via registration forms.

You can also color code this section for easier use and referencing.

 

Do not use captchas.

Captchas? That’s some old-school stuff. The best sign-up form designs do not include captchas.

True, spam is a serious problem, but you should not put the burden of anti-spam protection on your users. Captchas, as you know, can be downright annoying at times, which is why they should be used sparingly when creating effective sign-up forms.

Sliders and checkboxes are superior alternatives to captchas for spam prevention.

 

Make your form responsive to mobile devices.

You probably would be termed unserious if, in 2022, your registration form is not mobile-friendly.

Currently, smartphones and other mobile devices account for more than half of all online traffic. Given that more than half of your visitors and potential users will access your website through smartphones, it is vital to pay close attention to the mobile experience of your forms. If done well, it can boost your conversion rate beyond your expectations.

 

Streamline Email Logins

No one intentionally types the wrong email, so there’s no need to remind users of mistakes. Rather than correct the users on the issue of wrong emails, simply automate this by adding a plugin in the registration page design that validates the domain name connected with the email address.

So, when Anna inputs “anna652@gmsil.con,” she is notified of her error. Also, rather than allow her to type it again, she can just pick the correct option from a list of email addresses supplied by the installed plugin. This greatly improves user experience.

 

Do not implement password confirmation.

Password confirmation doesn’t improve conversions since it slows down users during the process and increases the likelihood of mistyping the password on the second try. Rather than request confirmation, show your visitors what they just typed by using a symbol that masks and unmasks their password.

 

Describing the Registration Form Types

Generally, there are four primary types of sign-up forms – email, product, subscription, and services. Here are some of their characteristics:

Email

These forms are designed to collect email addresses to create an email list and generate potential leads. For this option, it is best to keep things basic and request just one email. Anything more might be seen as demanding too much information, which might jeopardize your conversion rate.

 

Product

This sign-up form type is vital for e-commerce websites; hence you find them on the final page before making purchases. You must be clear on form-fill procedures and display all available security components.

Product forms should be as sparse and straightforward as possible to avoid the loss of customers.

 

Subscription

It’s not easy to turn users into paying customers. Subscription sign-up forms are an essential component of every subscription-based digital business: they induce conversion.

Prospective customers of SaaS and subscription-based companies need time to get educated and be converted. This is where subscription forms come in.

Subscription forms should, typically, request as little information as possible, offer a free trial option, and allow users to register with their SM accounts.

 

Services

Service sign-up forms differ from subscription forms because they do not bind the user to a subscription. These forms may be used for a wide range of services. Examples are service providers (YouTube) and social networking platforms (Quora).

Service sign-up forms are often designed to convert as many visitors as possible into users. A social media sign-up procedure is one of the finest tools you can employ to make that happen; it can more than triple your conversion rate.

[otw_is sidebar=otw-sidebar-1]

Do not Use ‘Sign In’ & ‘Sign Up’ Together

How fast can you spot the difference between ‘sign up’ and ‘sign in’ on the image below?

registration form design
Bad: ‘Sign in’ and ‘Sign up’ are used together

The problem is that ‘Sign In’ and ‘Sign Up’ are quite close. When buttons look too similar and both use the same verb in their labels it’s pretty easy for users to get confused.

Users might click one instead of the other. Usually, this problem frustrates the users who try to log in because they make the mistake the most. This happens because users scan the screen quickly and assume that the first call to action that catches their attention is the correct one. Even if users didn’t make the mistake, they’ll spend extra time to distinguish the two buttons.

Users shouldn’t have to pause and think what button should they click.

If you want to provide a good user experience, avoid using ‘sign up’ and ‘sign in’ together. Instead, make the button distinct from each other by using different verbs in labels:

Prior to registration form login example usersnap

…and different visual appearance for buttons (colors and styles) to make the difference more evident:

registration form design buttons
Image credit: ThinkWithGoogle

Eliminate as Many Fields as Possible

When registering a new user, ask the minimum you need to get you started.

The fewer form fields you can get away with in your registration process, the less likely users will abandon it. Consider what information you absolutely must gather:

  • 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.
  • From a UX perspective, it’s better to have no optional fields. Assuming that if a piece of information is not required there’s no point in wasting a user’s time. You can always ask further information down the line. But if there are still optional fields in your registration form, make sure to clearly highlight them with label Optional:
registration form design
‘How old are you’ is marked as Optional

Login forms vs registration forms

Many sites and apps use almost the same number of input fields (email, username, and password) for login and registration forms and showing the two side by side:

register form vs login form
Bad: two forms are side by side

However, it’s very important to clearly differentiate the registration from the login form and to minimize the chance of users accidentally attempting to log in via the registration form.

For example, Twitter’s login and registration forms do not just look different, but they also have different colors for CTA buttons and proper help text.

twitter example registration form
Good: Twitter login and signup forms

Let Users See Their Password

A common problem during login and registration is mistyping a password. And this is fairly easy to do it because the password field is usually masked (because of security reasons). People might mistype their password, especially on mobile devices.

Many sign-up forms try to prevent mistyping errors by using the “confirm password” field when creating a password:

password confirmation example of registration form
Bad: Two input fields for user password

While the confirm password field seems sensible, using it doesn’t completely solve the problem.

Users make more errors when they can’t see what they’re typing while filling in a form.

Don’t make the user fill in the same field twice! Implementing a ‘show password’ option is a proper way to prevent mistyping errors. You can place a checkbox near the password field. When users click it, it’ll display their input unmasked.

design registration form
Good: ‘Show Password’ as a checkbox

[otw_is sidebar=otw-sidebar-2]

Provide Help

You should clearly identify and explain form field errors. If a field isn’t completed correctly, don’t just tell users they made a mistake. Show them in which field the error occurred, and explain the correct way to fill out the field.

User-friendly Error Messages

For security reasons, your password must be longer than 6 and shorter than 10 characters, contain at least one capital letter, a number and a symbol.

This is a typical password requirement, but demanding users to consider all of the field requirements isn’t a proper way of explaining the problem. Take a cue from Mailchimp and indicate user progress with a “password strength” visual.

user-friendly registration forms
Current password requires ‘one special character’, ‘one number’ and it should be 8 characters.

Real-time Data Validation

Real-time validation immediately informs users about the correctness of the provided data.

This approach allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors. However, form validation shouldn’t only tell users what they did wrong, it should also tell them what they’re doing right. This gives users more confidence to move through the registration form.

registration form design

Real-time validation works especially good for less obvious answers, such as picking a unique username or a strong password. Twitter is an obvious example here. On the screen below you can see that the form informs me that this email is already in use and offer me some options (either to login or recover my password).

twitter example registration-form-2

The challenge of Usernames

If you ask users to create a username during registration, most probably you’re dealing with following difficulties:

  • Since usernames have to be unique, users might need to spend a few minute before they end up with a proper name, because preferred usernames have already been taken by other users.
  • Users end up registering with a brand new username that they hardly remember after a while.

design registration form
Your site or app should allow users to log in with their email address or phone number:

design registration form
Good: Phone or email can be used for username during registration

[otw_is sidebar=otw-sidebar-3]

Allow User to Log in Via Facebook, Twitter or Google

Why force users to create another set of login details when you can let them do single sign on via an external account, such as Facebook, Google or Twitter? This feature can alleviate registration headaches.

design registration form

Comparing to the standard registration with email, it has both pros and cons:

  • Pros: Users don’t have to fill out the registration form, to create another pair of username/password and to verify emails, hence can sign up in like 10 seconds instead of 10 minutes. And most important, users don’t have to remember a new usernames/passwords.
  • Cons: Since the information about the user is loaded automatically it raises a huge privacy concern and not everyone is likely to be happy to share their profile data. For such cases, you should have traditional login system running in parallel.
design registration form
Good: Login via Facebook/Google+/Twitter or use a traditional sign up

Keep Users Signed In When They Register

Common issues with registration are requiring users to log in immediately after registration. This extra step usually frustrates the user.

designing registration form
Bad: Ask user to log in after account activation

You should design the app so that new users stay signed in immediately after registration (unless security is a real issue).

Make Password Recovery Painless

It’s very important that if users do forget their password (and they will) that this is well handled by the login process.

Make it easy for users to reset their password so they don’t abandon your service. As a starter always have a clear ‘Forgotten your password?’ link for your login form and this link should be visible all the time (not just after the incorrectly entered password)

designing registration form
Good: Mailchimp login form has ‘Forgot password?’ link

Bonus. Follow a ‘Try Before You Buy’ Strategy

Users will abandon an app/online service that asks them to provide personal information upfront unless there’s some form of immediate payoff (e.g. ordering a taxi). In particular, services with low brand recognition must clear a higher hurdle when they ask users to register at the start of the experience because forcing registration too early can cause more than 85% of users to abandon the product.

designing registration form
Required upfront registration is a huge barrier to use. Image credit: ThinkWithGoogle

It is better to deliver a limited set of features immediately than nothing at all. Thus, follow a ‘try before you buy’ strategy. Try before you buy strategy is about giving new users the ability to experience your product so that they’ll personally interested in signup. People are more likely to sign up and provide real personal information if they just knew what sort of product and experience they receive.

A try before you buy pattern doesn’t mean you can’t ask a user to create an account. It just means you ask for that after delivering value for the user.

Conclusion

When you strip every barrier away from signing up, what you get is lots of sign-ups. And lots of sign-ups doesn’t translate automatically to the lots of customers. Customers are the result of a series of events. And creating an efficient registration process is just a first step in this direction.

About the author:

This post originally appeared on babich.biz, written by Nick Babich. Nick is a software developer who’s passionate about user experience.

[otw_is sidebar=otw-sidebar-4]

Capture feedback easily. Get more insights and confidence.

Microsurveys by Usersnap

Getting feedback has never been easier and we hope you’ve realized that after reading this article. Let us know what you think, your feedback is important.

And if you’re ready to try out a customer feedback software, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.