Thinking about the necessary options of form interaction design in detail

Every time the page appears a voluminous form, users will start to feel headache, some users will directly choose to give up, and I want to discuss how to face the form when the user directly pay attention to their needs to fill in the required items, reduce unwanted information interference.

&http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp;

What form does the required option appear in today's form?

Here is a survey report on Web Form design, which results from 100 compelling websites.

41% of websites use labels to align to the right (YouTube, Facebook, Metacafe)

30% registration Form using top alignment (Behance.net, Wufoo, Tickspot, Mixx, Dzone)

29% uses the label left alignment (Digg, Ning, wykop.pl, 43things, StudiVZ)

1) Registration

2) Landing

3 Fill in the information (payment, fill in the order, personal information to fill in, etc.)

4) Release

1) with * presentation form

A) * On the left side of the information label

b) * On the right side of the information label and fill information

c) * In the information label and fill in the location of the information

d) * On the right side of the information label

2 Non * required logo

A) non-*icon representation

b No-required option flags (all are required)

c) Callout Non-required option

d) Dark Hints

1 * and non * thinking

A) * As a user habit has been around for many years, now the user only need to see the text box in front of the basic knowledge of the required options, some sites have "* is required to fill in" The description text is also directly hidden. Then the icon that the user doesn't need to think too much is really better than some other non "*" icons that need to simplify the user's thinking.

b Some people will question a form, if all is required, it is necessary to use * to mark out each required? When there is no required sign, most people will have two different understandings, a class of people will think that these are required, and the other kind of people will be understood as a required, then in this case, if the marked must be filled to meet the different groups of thinking.

There are people who will be wondering if most of the items in a form are required to be filled in only a few of them are not required, can we mark the non required fields directly next to the required fields? When most of a page is required, and only a small number of required items, the non-required items if done too weak will cause the whole page can not distinguish between required or not required; and if the required items are too prominent and in turn highlight the page need to weaken the information items, users will instead focus on the items they can fill out, A little counterproductive.

Therefore, I still think that when the form in the page, whether all is required or most of the required items, we still marked with "*", so that all types of users do not produce an understanding of the error.

Of course, the use of different situations is certainly different, for example: User's knowledge when landing, usually when the user entered the entry such as user name, password and other information, and these items are basically required, on the basis of this knowledge, even if not appear * will not cause any understanding of the problem, then as a principle of streamlining, You can usually get rid of *.

c The text box must be filled with dark hints, but also a clear sign must fill in the way, and also very space saving.

But now many sites in the text box to fill in the text box to do other dark hints, this time must fill in a dark hint will be limited to the scope of use. As a required dark hint flag, another two fatal flaw is that when I fill out, I do not know what is required and what is not required, and there is no good solution for Radiobox, checkboxes, and required fields in the dropdown box. Therefore, when you use a required dark prompt, you can use it when the form is a text box, and there are no other dark prompt statements in the text box.

2) * Thinking

A The visual orientation of the user to the form

As you can see from this hotspot diagram, the visual direction of the form category is to extend to the right with the left label as the main. Most users focus on the label location, usually the user fill order is also from top to bottom, from left to right, fewer users will choose the jump-fill mode.

b) * location

From the above user view flow can be seen, * position should be near the label, and can be neatly arranged (this may also need to study) will be more at a glance to show the required fields.

This time as:

When the label is left aligned, * directly appear in front of the label, obviously better, but because the label left-aligned for the form, the label items and fill out the location too far away, may let the user can not figure out which label corresponds to which text box, so this type of label is not very in favor of the appearance.

When the label is right aligned, it appears in the Label and text box, and the individual thinks it's much more comfortable than the previous one. Not only the label items and the * logo and text boxes are very close, but also the position of the * can be aligned in a straight line. If * appears in the back of a text box or other item, the user will have to jump out of sight and be aware of what is required and what must be filled in when it is completed.

Label top alignment, this kind of way, often appears in the width has the limit time, is also the present frequently seen expression way. According to the previous theory, this kind of way for a better view of the display, the individual thought that the label before the * will be better, so that *, label, text box position recently, also make * can be displayed in a straight line.

Of course there is a special case, the table single row has more than one fill, this way * if the location is not appropriate, it is easy to misunderstand the location of *, the following figure:

In this picture, the name before the * is very easy to be misunderstood as a drop-down box out of the *. So this is a good place to avoid such misunderstandings in labels and text boxes.

Although we now think that the label is right aligned, * appears in the Label and text box in a better way, but there will be exceptions, such as when the Radiobox appears in the label and radio, then the following figure:

Summary: The required option is a very small display, but there are a lot of special problems, interaction is let us think about each of the pages of the small link, so that users in the overall page experience to get the best and quickest way to operate. Of course, there are a lot of specific situations, we need to think and consider the place there are many, if you have a lot of ideas can contact us, let us better enrich each blog article.

The next phase of the announcement: details of the design of the report of the error prompted thinking, look forward to your attention.

Source Address: http://ued.ctrip.com/blog/?p=2493