Web Design tips: Web page form design experience sharing

Article Description: 10 things each designer must know about a form.

There are a lot of poorly designed forms, and forms are essential, whether you like them or not. Joe Leech (Cxpartners is responsible for the user experience) will introduce some of its experience with form design.

It is estimated that nothing more than the form of the designer to vent. Does the form not necessarily allow the (designer) to be creative or can it be? We may need to look at the basic level, re-examine the form, and understand the form-the dialogue between the user and the software.

Forget about switching Ah, click on something, the most rich interaction that our digital designer (I think should be a designer who relies on computer design) will face. The next time you're dealing with a form, don't think it's about applying a nice CSS or adding a nice jquery effect. The form design of the water is very deep.

I've done hundreds of form user tests, designed some very complex forms for insurance companies, vacation bookings, and much more. Maybe one of the forms you used recently was designed by me.

Here are some lessons I'd like to learn before I start designing forms.

1. Do not mark required fields

Do you know that a small asterisk (*) indicates a required field? I've seen it many times since this user test failed. As a concept, required fields have little meaning and are equivalent offline (this concept). For developers, this is good, and they provide a good black-and-white way to do it. The asterisk and required fields (which cause the form to complete) failed because he was an act that required learning. The typical behavior I see in user tests is that the user fills out the form on the form, ends when something stops them or they touch a button.

The solution is simple, optional field tags, quality users need to stop and think about whether to fill in the fields at the mark.

Translator Note: From the original comments, this paragraph is a very controversial place: is a required field tag or a required field marker?

The author of this article is somewhat strange in grammar and in terms coupled with the lack of necessary examples, the translation (although Chinese) is not shunliu, and I personally feel that the author's conclusions should be correct and reasonable (after all, a lot of actual user tests are more reliable than designer or developer meditation), but The reasons for the elaboration of a bit thin, it may be because of their own (the translator) in this regard is not deep understanding. According to the author's explanation, pure use (red *) asterisk annotation required fields have a certain cost of learning, will allow users to learn the burden, but increase the chance of error.

"The concept of required options is similar to offline concept," I think, meaning: we usually visit the Web page, basically is in the online state (although HTML5 have offline access) (we do not need to specifically on the page to get a symbol (eg.) ※ The current page is online), so, for Web pages, the concept of off-line is not very meaningful; Similarly, form options are basically required to fill out, and deliberately use a symbol to mark this must be filled with no significant meaning of the concept.

We may be too much in the perspective of developers and software testers to look at form design, as mentioned above "Black and white developer", because I am also a developer, so for "asterisk is required, no asterisk to fill in" is easy to understand, but the actual user is this kind of thinking habit, is this thought? Software testers also use forms as extreme users of evil (not the best users mentioned above), and some perceptions of their own perspective do give us a lasting misconception about forms.

As for the final user form complete termination I think it might just mean: For most normal users, the form filling behavior terminates as passive blocking or active click buttons. The so-called passive block may include immediate error submission, and active Click button may include click button submission. To find the case, I went to the Penguin Micro-Blog Binding registration page, found that its form so that the options are not required fields, all the required prompts appear at the time of the form submission (that is, "the user touched a button," "Some of the blocking of events"), which I am more agree with- Relative to some backward (refers to the registration of the interaction) of Ctrip, reviews, such as Ctrip registered each must be filled, red asterisk is obviously redundant; for empty must fill in the immediate reminder easy to interrupt user operation, is actually slightly behind the trend can further optimize the experience.

The following two screenshots take the Tencent Weibo registration page as an example: to prevent users from filling out the form, and "Do not mark required fields."

All fields here are mandatory.

[1] [2] [3] [4] Next page