skip to contenthome
Contact

10 UI/UX tips that you should know - forms

Forms allow you to collect valuable information from users, so you should make them as good as possible πŸ“ˆ

10 UI/UX tips that you should know - forms
This post is the first part of a series of posts in which we will talk about design. The series is about the best practices and tips that you should know to make your UI/UX design better.

Today, we will talk about forms. What is form? Web form is basically a place where user enters data to process a request. Improving your website form design is an effortless way to attract visitors and enhance the user experience. Here you can learn 10 tips, that will help you build better forms to have a reliable relationship with your users. Let's get started!

1. Keep it simple

The simplest, but the most important tip. Please, avoid asking for too much information, that might be useless in the future. Many surveys have reported that 27% of the people leave the form they think is lengthy.

Why do you need the user's name, last name or phone number? You can probably omit even password field (curious, right?).

In this case, it's worth remembering what Hick's lawο»Ώ says:

The time it takes to make a decision increases as the number of alternatives increases.

William Edmund Hick

After all, if you really need a lot of details in your form, consider splitting in into couple of steps - the next point is especially for you πŸ‘‡

2. Build multi-step forms

Splitting your complicated form into multiple steps will increase your form completion rate, trust me. Many users leave automatically when they see a lot of fields to fill.

By using simple, clean design of each step we encourage our users to dive deeper and answer next question.

Progress bar is very important too. When user can see in which point he is, he is more motivated to complete the whole form.

Multi-step forms are like games, when you leave - you lose. Do any of us want to lose?

3. Enable showing password

Do you know that feeling, when you misspell your password? Right, it's very frustrating, but it's so much more irritating when you cannot see where you did a mistake. Why?

Prevent users from having to delete and re-enter the entire password by using established pattern - eye icon or "Show" label, which will show us the password after clicking on them.

4. Avoid reset button

Reset button is, in the most cases, bad idea. If you consider about using it, please, think twice. In reality, this button often hurts users.

Can I ask you something? When was the last time you used such a button on the page? As you can see, it's worthless to put it in a form, because the risk, that user can accidentally hit it, is too high.

Remember, that most users are aware that refreshing the page or just re-entering information will enable them to start over again.

5. Mark the fields

Marking fields is important, because then user can simple judge which field he have to fill. Honestly, it's your choice which fields you mark, you can do it in two ways:

  • mark mandatory fields e.g. by using asterix
  • mark optional fields e.g. by using appropriate label

Although, according to various theories, it's better to tick the optional fields, because in most cases they make up the smaller part of the form. User can easier locate and leave them. It's all your choice!

6. Give user a gift

User should have a clear signal, that he's filling this form for something. Give him a prize!

People always choose more attractive option and when you offer something for their work, they will more likely help you (e.g. by filling your form).

7. Use autofocus

Automatically activated first (or another needed one) field will give a hint to a respondent where he should start.

In addition, we save a respondent from one additional click/tap giving him easy way to start.

You'd be surprised how many people are giving up the form at the start. Counter it! 😎

8. Display appropriate errors

It doesn't matter what type of validation you use (maybe should I make an article about different strategies?), you should always use inline errors.

Always try to explain problem in the clearest way. Common message like: "Something went wrong" says nothing to the average user.

You should use human language, remembering that your end user doesn't have to be an IT person. Help user to understand the error.

9. Choose the right types

Don't use text fields for everything! In HTML we have a lot of fields' typesο»Ώ that can help user to provide answers in the right format.

It's also useful to be able to display the corresponding keyboardο»Ώ when selecting the different types on the user's mobile device.

10. Avoid Z-Pattern

Last but not the least - the Z-Pattern. But, what is it?

The β€œZ-Pattern” is a form of web design in which the human eye tends to travel from the left corner of a rectangular image (like a web page on your computer), then to the right. From there it travels to the lower-left of the visible page, then across to the right again, forming an imaginary β€œZ”.

Postclick dictionary

So, please, avoid it in forms. πŸ˜… Placing fields in something like grid may confuse users, who are not used to such an arrangement. This is also require more "visual fixations"ο»Ώ.

It's better to place them in a simple list. Google's UX researchers foundο»Ώ that placing labels above fields on the left-hand side increased form completion time.

Conclusion

Uff, creating good and accessible forms is not simple, right? I think I've shown you all the most common mistakes and their solutions. What should we talk about in the next article in this series? Let me know if you have any ideas!

Hope you learned something new from this post, that you will use in the future. πŸ’ͺ

See you next time! πŸ‘‹

PS. Please, remember this tips and don't do such things πŸ‘‡

Bartosz Zagrodzki
Written by Bartosz Zagrodzki

Blogger, software engineer and the main coordinator of this blog, he has lots of ideas and won't hesitate to use them! He lives in Poland.

Check my other posts πŸ“š