7 Tips for making better sign-up forms

Hi there! 👋

It's Victor from user-interface.io with some actionable tips on making your sign-up process a much better experience for your users. As this is a crucial part of the user journey, make sure that you avoid as many mistakes as possible.

This is the first issue of my newsletter, so it would be great if you tell me your thoughts on how it was. You can reply to this letter.

👉 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.

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

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.

​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.

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.

Take a look on how Mailchimp handles this:

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”.

Check if 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.

Don’t forget 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?

That's it for now. Thanks for reading!

Know some other tips? Please, share them with me by replying to this email so that I could share them on my Twitter 🥺

Any feedback is more than welcome!

Cheers,
Victor