Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize the interactive design of the form on the web side of the website". In the daily operation, I believe that many people have doubts about how to realize the interactive design of the form on the web side of the website. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "how to realize the interactive design of the form on the web side of the website". Next, please follow the editor to study!

Whenever there is a generous form on the page, users will begin to feel a headache, and some users will directly choose to give up, and what I want to discuss is how to get users to pay direct attention to the required items they need to fill in when dealing with the form. reduce the interference of unwanted information.

In what form do required options appear in today's forms?

1. The performance category of the form information

The following is a survey of web form design, based on the results of 100 high-profile websites.

41% of websites use tag right alignment (YouTube, Facebook, Metacafe)

30% of registration forms use top alignment (Behance.net, Wufoo, Tickspot, Mixx, DZone)

29% use left-aligned tags ((Digg, Ning, Wykop.pl, 43things, StudiVZ)

2. The scope of application of the form

1) Registration

2) Log in

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

4) publish

3. Required display form

1) in the form of * presentation

A) * on the left side of the information label

B) * on the right side of the information label and fill in the information

C) * position in the middle of the information label and filling in the information

D) * on the right side of the information label

2) not * required flag

A) non-* icon expression

B) No required option flag (all required)

C) dimensioning is not required

D) implicit hint

4. In-depth thinking of required options

1) thinking about * and non *

A) * as a user habit has existed for many years, now users only need to see the * in front of the text box to know that it is a required option, and some websites have directly hidden words such as "* is required". So for this icon, which users don't need to think much about, it is indeed better than some other non-"*" icon for forms that need to simplify their thinking.

B) some people will question a form, if it is all required, is it necessary to use * to mark each required item? When there is no required mark, most people will have two different understandings, one will think that these are required, while the other will understand that these are all non-required, so in this case, if you mark the required items, you can satisfy the thinking of different people.

Others may wonder whether we can mark non-required items directly next to non-required items when most of the items in a form are required and only a few are non-required. When most of a page is required, and there are only a few non-required items, if the non-required items are too weak, the whole page will not be able to distinguish between required and non-required items; and if the non-required items are too prominent, it will in turn highlight the information items on the page that need to be weakened. instead, users will focus on the items they can fill or not, which is a bit counterproductive.

Therefore, I still think that when all the forms on the page are required or most of them are required, we should mark them with "*" so that all kinds of users will not make understandable errors.

Of course, the application is different in different situations, for example: the user's knowledge when logging in, usually the user enters items such as user name, password and other information when logging in, and these items are basically required, on the basis of this understanding, even if it does not appear * will not cause any understanding problems, then as a principle of simplification, it can usually be removed.

C) the hint of the required items in the text box is also a way to clearly mark the required items, and it also saves space.

But now many websites make other hints about how to fill in the text box in the text box, so the required hints will be relatively limited. As a required hint, two other fatal flaws are that when I complete it, I don't know what is required and what is not required, and there is no good solution for radiobox, checkbox, and drop-down boxes. Therefore, when using a required hint, it can also be used when the form is a text box and there are no other implicit prompt statements in the text box.

2) * thinking

A) the user's visual direction towards the form

As can be seen from this heat map, the visual direction of the form category is mainly extended to the right with the left label. Most users are concentrated in the label location, usually users fill in the order from top to bottom, from left to right, fewer users will choose to skip the filling mode.

B) * location

As can be seen from the above user's eye stream, the location of * should be near the label, and being able to arrange it neatly (which may need to be studied) will show the required items more clearly.

At this time as:

When the label is aligned to the left, * it appears directly in front of the tag, which is obviously better, but because the left alignment of the label is too far away from the position of the label item and the filling item for the form, it may make the user confused about which tag corresponds to which text box, so this kind of label is not approved of.

Then when the label is right-aligned, * appears in the label and text box, which I think is much more comfortable than the previous one. Not only make the label item and * flag and text box are very close, but also the position of * can be aligned in a straight line. If * appears at the back of a text box or other item, users will have to jump in their eyes, and they will not realize what is required and what is not required until they have completed it.

Label top alignment, this way, often occurs when the width is limited, and it is also a common way of expression at present. According to the previous theory, in order to better display the line of sight, I think it would be better to have * in front of the label, so that the position of *, label, text box is nearest, and * can be displayed in a straight line.

Of course, there is another special case, that is, there are multiple filling items on a line of the form. In this way, if the position is inappropriate, it is easy to be misunderstood, as shown in the following figure:

In this picture, the * in front of the name can easily be misunderstood as a drop-down box. So at this time * position if in the label and text box can well avoid this kind of misunderstanding.

Currently, we think that it is better to align tags to the right, and * appears in tags and text boxes, but there are also special cases. For example, when radiobox appears, if * appears in tags and radio, it will look like the following figure:

At this point, the study on "how to realize the interactive design of web-side forms on the website" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.