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 π
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.
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β.
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 π
