Check out this list of top 10 mistakes that people make when designing sign-up forms and follow the UI tips to avoid them.

A sign-up form is a barrier between users and your web application. That’s why it’s crucial to make it as easy to use as possible.

1. Don’t ask too much

Avoid asking for too much information when the user signs up. Life is too short to spend it filling out forms. Ask only for essential information.

You probably don’t need the user’s phone number, first and last name. You can even omit the password field! Instead, you can auto-generate it and email it to the user.

If, for some reason, you need more information, try to explain why you ask it. That will give users some assurance.

If the form is too large, consider breaking it into a few smaller forms.

UI tip #1. A screenshot that shows a long and short sign-up forms

2. Autofocus the first field

If there is no autofocus, users have to move the mouse and make an extra click.

A good practice is autofocusing the first input. Not only in sign-up forms but in most other forms too.

UI tip #2. A screenshot of two sign-up forms. The second form has the first input autofocused

3. Let users see the passwords they type

When users make a mistake in the password field, they might want to check what they’ve typed and correct a character or two rather than retyping the password anew.

A small eye icon is an established pattern and is easily recognizable. Also, instead of the icon, you can use the Show label.

UI tip #3. A screenshot of two sign-up forms. The second form features the Eye icon to unveil the password

4. Show your password rules

Show password requirements right away. Don’t wait till the user clicks the Sign up button and sees the validation errors.

A good example is the Mailchimp form. Once the password a user enters conforms to a requirement, this requirement greys out.

A screenshot of Mailchimp sign up form.

5. Encourage users as they proceed

It might not be necessary for small sign-up forms. But if a form consists of dozens of inputs, it is a good idea to display a green tick next to correctly filled out fields.

Imagine you have a checkout form that has a credit card number field. It’s easy to make a mistake there. Even if the user has filled 16 digits, the number still might be incorrect. Add a nice green tick to indicate that everything is fine.

A screenshot of a form with green ticks next to correctly filled out fields

6. Avoid usernames, use emails

It’s hard to remember usernames for every single service you use. Email is a much more convenient way. What’s more, it spares the user from annoying “already taken” errors.

A screenshot of two forms: one with the username field, the other with the email field

7. Don’t erase credentials after unsuccessful sign-in attempts

Don’t make users re-type their credentials over and over again. Even for the password input, you should have a way to reveal its value so that users can fix a small TYPO in it.

Security considerations: it’s the job of the server to prevent password brute force, not of the interface.

A screenshot of two forms: the left one makes the user to re-type credential, the one on the right does not

8. Auto-fill the forgot password page

When you forward users to the restore password page, it is humane to auto-fill the email address so that they don’t have to type it again.

9. Add the Caps Lock alert

A small but handy feature that makes the user experience better. Simply alert users when they have caps lock enabled.

A screenshot of two forms: the right one shows the caps lock alert, the one on the left does not

10. Use correct input type

If your form includes such fields as email address or phone number, don’t forget to define the proper HTML input type. If you don’t, users will have to switch the keyboard type manually.

A screenshot of two mobile apps with screen keyboard open: the left one shows caps, the right one shows lower-case letters

About the author:
Victor Ponamariov, a web developer who fell in love with user interfaces. He published a book with 100 practical UI/UX tips where he shares his experience.

Read also:




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit