Whether Website production For APP UI design, forms are one of the most common and important components in the interface. They have a wide range of applications, such as user registration, subscription services, user feedback, questionnaires, business transactions, etc. They are almost everywhere from data input to information search. For designers, front-end developers, we should pay attention to the design of forms as much as possible to make them easier to use. Careful design will greatly increase user experience and interaction efficiency.
In today's article, you will see many practical suggestions on form design, including usability testing, on-site testing, user tracking and user feedback.
1. Clear up the logic and reserve the necessary
Forms are the language of communication with users. Like any dialogue, it should help both parties to complete the communication in a logical way. So you need to do this:
Keep the questions in an intuitive order. You should ask questions logically from the user's point of view, not according to the logic of the program or database. If there is no logic between the questions, they can be arranged in alphabetical order.
Organize options in an intuitive order. For example, when the option is Date, they are in the order of Monday, Tuesday, and Wednesday, rather than out of order.
Always reflect on whether the information obtained from users is necessary and how to use it. This is to eliminate unnecessary options and improve the completion rate.
2. Use single column list layout
The multi list form to be filled in can easily be missed by users and interrupt the filling experience. Users need to fill in the entire table according to the zigzag path, which not only affects the entire writing path, reduces efficiency, but also produces some interference. However, if the single column form is used, this filling path is single, direct, more intuitive and efficient.
3. Reduce the fields and workload that need to be entered
Reducing the number of fields to enter can make your form more concise and reduce the loading time, especially for forms with large amount of information.
Of course, simply reducing the number of input fields is not enough. You should also pay attention to the way, content and workload of users filling in the form. The input content is a highly interactive input mode, with high error rate and high time cost. Therefore, try to reduce the typing of users, and use check boxes, radio buttons, pull-down menus and other options to reduce the probability of user errors.
4. Match the size of input box and content
MARD Research Institute found that if a field is too long or too short compared with the input box, users will doubt whether the content they entered is correct, especially when entering fields such as CVV (credit card verification value).
In order to maintain good usability, you should make the width of the input box match the length of the input content as much as possible. Appropriate reserved space can make users more comfortable.
5. Place the label above the corresponding input box
Is it convenient enough for users to quickly browse the form? If it is difficult for users to quickly browse the form, it will take longer to fill in. Therefore, good looking and filling are the principles of good form design. Matteo Penzo's article has studied how forms and input boxes in forms should be laid out, so that users can browse and fill in better and faster. The conclusion is that the label should be placed above the input box.
If you want users to browse as quickly as possible, arrange the labels and input boxes vertically and align them to the left. Note that this is about quick browsing. The advantage of this layout is that it does not require too much horizontal space. Users only need to browse down, and do not need to scan left and right. This layout is easier to form a responsive UI that is compatible with different screens and different application scenarios.
6. Support flexible and diverse formats
Some fields need users to fill in accurately, but when users are required to enter particularly accurate or specific format content, usability may be a bit problematic. If users are required to input digital content (such as phone numbers), it is better to be flexible and support a variety of input and display methods, so that it is easier for people to view (rather than machines) and prevent errors.
For example, the format of landline telephone is (777) 666 – 5544, which is more convenient for users to view, record and remember.
7. Do not mix placeholders and field labels
Designers often place text placeholders in forms as additional reminders to tell users how to fill in examples. When the user starts typing, the placeholder text disappears.
Some designers will put labels directly in the input box as placeholders to reduce the length and visual confusion of the form. For simple form design, this design has little impact. When the form has a large amount of information and various content types, this design is not suitable. The disadvantages of this design are:
Once the user clicks the input box, the label will disappear, and it is easy for the user to forget to talk about the content and form of input. When users see that the input box is filled with content, they will mistakenly think that this field is filled without input.
If you still need to use placeholders in the form, you can also make them exist as floating labels. Displays the default placeholder, which floats up as a label to remind the user when the user enters.
8. Confuse optional and mandatory fields
As I said before, try to avoid adding optional fields to the form. But if you have to add, you should at least know which fields are optional and which are mandatory. The number of optional fields should be controlled within 1~2, and users should be explicitly informed that they are optional.
9. Do not use the reset button
Reset makes it easy for users to delete everything on the form and start from scratch. This is too risky. In real life, this button will never help users. Instead, it hurts more because of careless touch.
10. Provide high visibility and specific error messages
Ideally, users can complete tasks by filling out forms and uploading them. But in reality, mistakes are inevitable. Therefore, when an error occurs, you should notify the user of what happened in a highly available and visible form. Therefore, the error information you provide should comply with the following rules:
When users enter fields, they should tell them whether the information they fill in is right or wrong in real time, rather than telling them that there is an error after they fill in all the information.
The error message should be clear at a glance, highlighting the color, icon and text. The error message should be close to the input box, not the bottom or top of the form or next to the key.
If the input format is specific, it should be declared in advance.
After an error occurs, do not empty the completed form.
summary
When filling out forms, users' hesitation is inevitable. We should try our best to make this process convenient and easy. We should make formal design an advantage rather than a disadvantage. An excellent form is characterized by highly targeted form design, thoughtful details and experience, continuous improvement and adjustment, efficient and fast submission, and smooth process.
