A brief discussion on Web-page production design of website form

web| Design | Web page

The input box should be logically divided into groups so that the brain can handle the relationship between the large heaps of regions well. "– the HTML authoritative guide "

Web applications always use forms to process data entry and configuration, but not all forms remain consistent. The alignment of the input area, the respective label (label), mode of operation, and the surrounding visual elements will affect the user's behavior more or less.

Form layout

Considering that the user should be able to complete the form as short as possible, and the collected data are familiar to the user (such as name, address, billing information, etc.), vertical alignment of the label and the input box can be said to be the best. The vertical alignment of each pair of labels and input boxes gives a sense of closeness, and consistent left alignment reduces eye movement and processing time. The user only needs to move in one Direction:

In this layout, the use of bold labels is recommended, which can increase their visual weight and increase their visibility. If not bold, from the user's point of view, the label and the text of the input box is almost the same.

If the data on a form is not familiar or logically grouped (such as multiple parts of an address), a left-aligned label can easily browse through the information in the form. Users only need to look up and down to the left side of the label on it, and will not be interrupted by the input box ideas. As a result, the distance between the label and its corresponding input box is usually elongated by longer labels, which may affect the time it is to fill out the form. Users must jump around and back to find two corresponding labels and input boxes.

An alternative scenario is created, with the label aligned to the right, making the link between the label and the input box tighter. The result, however, is that the ragged margins and labels on the left make it difficult for users to quickly retrieve what the form wants to fill out. In Western countries, people are accustomed to writing from left to right, so this right-aligned layout creates dyslexia for users.

With the help of visual elements

Because of the benefits of the label left align layout (easy to retrieve and reduce the vertical height), it is tempting to try to correct its main disadvantage (separation of labels and input boxes).

One solution is to add a background color and a split line, and a different background color produces a column of vertical labels and a column of vertical input boxes, with each set of labels and input boxes separated by clear horizontal lines. Although this sounds good, there are still problems.

Comparing the previous form (the user's subjective visual distinction ), this adds 15 visual elements: The middle line, a cell with a background color, and horizontal lines. These elements shift the user's gaze, making it difficult for users to focus on important elements such as tags and input boxes. As Edward Tufte points out : "There is a difference in the information itself, which inevitably produces sensory differences." "In other words, any visual element that is useless to the layout will constantly disrupt the layout." When you try to browse to the left side of the tag you can see that your eyes are always interrupted, stopping to think about the horizontal line, cell, and background color.

Of course this does not mean giving up background colors and lines. They are useful for dividing the relevant area information. such as a thin horizontal line or a shallow background color, can be visually combined with the relevant data. Background colors and lines are especially effective for distinguishing the primary action buttons of a form.

Primary and secondary operation

The primary operation of a form (usually "submit" or "save") requires a stronger visual weight (in the example above, a lighter tone, coarse font, background color, and so on). This is equivalent to giving the user a hint: You have/are about to finish filling out the form.

When a form has multiple operations, such as "continue" and "return", it is necessary to mitigate the visual weight of secondary operations. This minimizes the risk of user potential operational errors.

While the above content allows you to design your form, the combination layout, visual elements, and content still require user testing and data analysis (completion evaluation, error reporting, etc.).

More details and examples in the Web application Form design Expanded.
Junchen translation from Lukew ' s functioning Form

Lukew uses two diagrams in his Web application form Design Expanded to illustrate how to properly differentiate between logical areas of the form and primary and secondary operations. The article will not be translated. Look at the picture more clearly.

Excellent form design makes the user have a kind of impulse to fill in, and can reduce the user's error rate to the maximum.

When browsing a Web site, you must have encountered a Web form: A drop-down box (select) that contains more than 100 countries, a date drop-down box with 31 options, and so on, which often frustrate people. Web Forms Drop Text messages (such as labels and other hints) and submit buttons, and also include five elements: a drop-down box (select), radio button (radio), check box (checkbox), input box (input), and hyperlinks.

The following is an example of a hotel reservation to describe the process of reasonably selecting a FORM element during the form design process.

Example

In the example of this article, you want to get the following data from the user:

• Name
• Number
• Hotel Name
• Room type (single, double)
• Credit card Type

First step: Determine the main purpose of the page

First think about why you should let the user choose (using Select)? is the page navigation? Or is it collecting information?

As a drop-down box for navigation

Using the dropdown box to do navigation, the jump between the pages can save a lot of page space. and increase the amount of information (the number of options) without changing the visual size. But the dropdown box still has a lot of limitations:

• The dropdown box hides the option, and unless it is an advanced user or is not available, he will expand the Drop-down box to read and make a decision;
• Hyperlinks only need to be ordered, and the dropdown box needs more action;
• A well designed list of hyperlinks that is easier to read than a drop-down box;
• If the number of options is large, the user must pull the scroll bar;

Drop-down box to gather information

In most cases, the form is used to gather information. For example, you ask a question to a user, and the question has a limited answer (such as a credit card type). How can the design be well presented with these answers? and reduce users ' chances of making mistakes?

Step Two: Answer 6 questions

Before you choose to use an input or Drop-down box, answer the following 6 questions:

1. Is it more natural to enter an answer than to choose an answer?

Personal information, such as name, address, birthday and so on, we are familiar with the information, using the way of input collection is more natural and simpler than using the method of selection. You cannot choose a name. In this case, the name and number of people are recommended for use in the input box.

2. Is the answer easy to lose?

Error-prone information, you can not use the input box to collect. For example, in this case, the hotel name, room type, instead, you can use hyperlinks, radio buttons, check boxes.

3. Does the user need to browse through all the options to understand the problem?

For example, in this case, the question of "room type" is difficult to judge without first browsing through all the options. In this case, it is recommended that you use radio buttons or check boxes as appropriate.

4. How many options are there?

The scroll bar is a long-standing problem. If the dropdown box has a lot of options, it is likely to cause the page to scroll, the dropdown box to choose, and scroll. In general, with 4 options and 4 or less options, using radio buttons or check boxes is much better than using a drop-down box.

5. Can users select multiple items at the same time?

Generally, if a user can select multiple items at the same time, the check box is recommended. To prevent users from not knowing the check box or not to specify otherwise, you can sometimes add a "any" option based on the radio button. For example, the "room type" in this example.

6. Do the options look different?

such as "credit card Type", "Visa", "MasterCard" and so easy to distinguish. But for "number", suppose 01-10, a total of two characters, using the dropdown box is not conducive to browsing (Scan). Chain hotels usually have similar names, so similar parts can be abbreviated and used to differentiate between the names. You can also use the form of hyperlinks to avoid this problem.

After the above six questions are resolved, you can list a form (Link to Flickr)and then balance the selection to determine which information is used in which form of presentation.

Step three: The overall effect and local adjustment of the form

Although the above 6 areas are filtered, you need to adjust the form as a whole and locally. Mainly in the following three areas:

Avoid too many kinds of form elements

According to the second step, we get the "best" option, as follows:

• Name: Input Box
• Number: Input Box
• Hotel Name: Hyperlink
• Room type (single, double): radio button with any option
• Credit card type: drop down box

Found the problem? There are too many forms, and the input box is also a hyperlink. It's time to go back and see if there's a reasonable alternative.

Streamline and read the options

The principle of the dropdown box is to make the user browsing options more convenient, not a fee for the eyes, not wrong. For radio, check options, reduce the number of options, but also use a short phrase as an option.

Note the order and default values of the options

Give an option a logical order, such as by first letter, by initials. The default values are then determined according to the general situation.

Fourth step: Consider ease of use (accessibility)

You can refer to Web Content Accessibility Guide 1.0

Web forms have a limited selection of elements, but it's not easy to do well.

This section refers to:
Should I use a drop-down? Four steps for choosing form elements on the Web
Translation finishing.