4
0 Comments

7 Tips for making better sign-up forms

Hi there! 👋

Wanted to share few quick tips for making your sign-up forms better!

👉 Most of the tips revolve around this single rule: the less effort for the user, the better.

Require fewer fields

You probably don't need the first name, last name, or phone number.

The most frequent and redundant is password confirmation. In case the user makes a typo, there should be a page for resetting the user password.

Fewer Inputs

For sure, you don't want your sign up form to look something like this 😱

Bad Form

Use social authentication

Half of the users in my previous product signed up via Google. The number varies from product to product, but it’s evident that lots of people use social platforms.

Depending on the type of your product, you might prioritize which one should go first.

E.g., for tech products, you might want to have GitHub, while for Twitter analytics - a Twitter login.

Social

Autofocus first input

Again, we’re trying to reduce the effort user should make. It’s a small but beneficial feature that saves the user a click/touch.

Autofocus

Show password requirements explicitly

I noticed that it's a widespread mistake to show password errors only when the user hits the submit button.

Even if the only rule you have is something like "six characters minimum" you should show the hint right away.

If you have complex rules, then there should be a list of hints that turn green when the user passes a requirement.

Password Requirements

Take a look at how Mailchimp handles this:

Mailchimp

Mind your text

Don’t use the sign in and sign up together since it’s hard to distinguish them.

Don’t use technical labels, like “Submit”. It’d be much better to have something like “create account”.

Text

Check if the email is taken before submit

Validate email input asynchronously to check if it’s already taken. When the user switches to the password input, you have plenty of time to check if the email has already been registered.

Email Validation

Don’t forget the show/hide button for password input

Imagine your site is used by someone who has written down their password on a paper and then slowly enters it being afraid to make a mistake?

ShowHide

That's it!

Want to get more tips like this? Subscribe to my newsletter 😇

on March 17, 2021