Six principles of Web design

650) this.width=650; "src=" https://file.mockplus.cn/image/2017/06/9c4ecc11-da81-4e94-a551-140e413bf9b1.jpg "style = "Width:auto;height:auto;" alt= "9c4ecc11-da81-4e94-a551-140e413bf9b1.jpg"/>

With the rapid development of the Internet era, designers are no longer just for the internet to create beautiful beautiful pictures so simple, as a web designer, in addition to basic design skills, but also need to consider some other issues, such as user experience, algorithms, code and so on. User experience design is becoming more and more important today, especially in the design of Web Forms.

The goal of the Web Form design is to design a set of simplest processes that allow the user to be able to get from filling in to clicking the Submit button. From very simple direct forms to fancy, colorful and creative forms, each site presents a form style. Whether it's a login/registration form, a contact form, or other type of form, designers need to keep in mind that the goal of these forms is to win the attention of the user and guide them into filling in the information. Based on years of design experience, Mockplus summarizes the six principles in Web Form design.

(i) Keep eye-catching and concise

We often encounter a problem where a lot of users complain that the registration form requires too much information. If you are designing a website that is looking for ways to increase the number of registered users, you must first ensure that the design forms are as concise and easy to fill as possible. At the same time, the emphasis on the sections and information, in the design can be more prominent way to emphasize.

(ii) Reasonable organization of information

For more complex, filled with more than the form, if the information is not organized, it is easy to appear confusing, so that users in the beginning to create a conflict of feelings, and even choose to give up. Reasonable hierarchical organization information, you can use the box line, space, color, according to different categories of information, attributes and relevance of the division of the block, with a step bar to indicate the current process. Clear browsing line, reasonable label, prompt text and button arrangement, to avoid unnecessary duplication of information, can reduce the user's visual burden and physical burden.

650) this.width=650; "src=" https://file.mockplus.cn/image/2017/06/6e65499e-2203-44d6-a0ad-7a4030847167.jpg "style = "Width:auto;height:auto;" alt= "6e65499e-2203-44d6-a0ad-7a4030847167.jpg"/>

(iii) larger input box

According to the actual user feedback, the form design in the larger text input box, a moderate amount of white space will make people more filled with desire, elegant animation effect can also increase the fun of filling. Designers need to mitigate conflicts between different input elements as they design the form. Bold text prompts the user which areas have been filled out and which areas are empty, and when an input box is activated, it becomes light blue, indicating where the cursor is now located.

(iv) Save time for users

The form that takes a lot of time to fill out is easy to lose patience, the user is lazy and busy, try to delete all unnecessary entries, consider the other than to let the user mechanically through the keyboard to enter data on the form, there is no other better way (such as follow-up investigation) to collect the required information.

(v) The design concept of * * * Service

The end of the form is not submitted, designers in the design of the time need to provide users with the concept of * * * services, forming a process closed-loop, to avoid users jumping in the middle. A good form design, not only need to consider the user to fill in before the guidance, fill in the timely calibration and help, but also need to consider the completion of the entire process experience. Think about what the user was trying to fill out the form, so that he could get the most out of his list as soon as he finished filling out the form. Even if he can't get it for the time being, he needs to tell him the reason and the alternative that can be done.

650) this.width=650; "src=" https://file.mockplus.cn/image/2017/06/5733c89c-f74f-444c-a19a-97178c71d76b.png "style = "Width:auto;height:auto;" alt= "5733c89c-f74f-444c-a19a-97178c71d76b.png"/>

(vi) Providing design care

Under incomplete statistics, about 12% of people in the Internet have either light or heavy colour vision impairment. If you use color as the only element to differentiate between non-clickable text and clickable links, you may have difficulty in using this part of the person. In the process of designing a form, you can make it easier to know which areas are clickable by adding dashes to the linked text, using buttons, or other shapes to distinguish them.

This article is from "Love Design" blog, please be sure to keep this source http://12700524.blog.51cto.com/12690524/1937369

Six principles of Web design