Talking about form Design in Web page

Don ' t make users abandon in the one step!—— talk about form design in Web pages

E-commerce sites will encounter users who are often at the end of payment to give up http://www.aliyun.com/zixun/aggregation/17553.html "> Buy goods (abandon in the last step), It is often said that "shopping cart discard (shopping cart abandonment)". In fact, faced with more and more online registration, login information input, users often because of "Forms suck (boring form)" and abandoned the use of the site.

I don't think there are a few websites that don't require user registration or confirmation. The form design, although seemingly simple, is "witnessing" the user Experience "skill" place. The HTML authoritative guide describes the form as follows: "The input elements should be logically organized so that the brain can understand and process information about the field based on the layout of the table." "So, seemingly no technical content of the form, how to guide users, how to enable the brain to quickly capture understanding processing information ...

Table layout

In the book "Web Form design:filling in the blanks", the study found: Eye tracker imaging hotspot map is mainly located on the left.

The time to fill in the form needs to be compressed as much as possible, the information needed to collect is also familiar to the user (for example: Name, address, payment information in the checkout process), the vertical layout of the label and the input box effect is the best (as shown below). Each label and the input frame are tightly connected, and the layout consistency also reduces the visual movement and processing time. The user only needs to move in one direction, that is--down.

The label (label) placed above the edge in the label and the input box adjacent to the user quickly fill in the form. The disadvantage is to increase the vertical space.

In the layout, the best label is bold. This increases the user's visual weight and makes the label more visible. If not bold, the label and input box PK, in the user's view their visual weight is similar.

If the form contains information that is not familiar to the user, or types that are not easy to handle (such as the various information contained in the address), place the left-aligned tab bar on the left side of the input box to make it easier for the user to scan the information. The user only needs to scan up and down to the left of the tab bar on it, and will not be interrupted by the input box. However, the distance between the label and the input box will also prolong the user's search time. Users have to "jump around" between the input box and the tag to find the connection.

The edge of the label (label) on the left is positioned adjacent to the input box, reducing the vertical space. The disadvantage is that the table is less readable.

The relationship between the right-aligned tab bar and the input box is relatively clear (pictured below). However, the efficiency of scanning table-related information is reduced. Our habit is to read from left to right, eyes like left-aligned reading.

Using visual elements

Because the left-aligned horizontal label has many advantages (easy to scan input labels, reduce vertical screen space). Try to fix its flaws: the input box and related tags look incoherent.

One way to do this is to add background colors and lines (as shown in the following illustration):

Different background colors distinguish between labels and input boxes; The horizontal line links the related labels to the input boxes. Although these look good, it can also cause a lot of problems.

Whether it's the midline, the background, or the horizontal line, it distracts the user, making it less easy to focus on important information: tags and input boxes. As the visual guru Edward Tufte said, "The difference in information expression produces an understanding difference." "In other words, visual elements that do not help layout are meaningless." As you can imagine (as shown below), when you scan the left-hand side of the column, the eyes are constantly interrupted by horizontal and background views.

Admittedly, it's not that background colors and lines are never used in form design. When it comes to the information that is useful to the user, the thin and faint background color can be used to distinguish the relevant information effectively. Both lines and background colors can emphasize importance and lead users to interactive behavior.

Primary & Secondary Behavior

First-action buttons, such as "Submit", "save" need to use a heavier visual element representation (such as highlighting colors, bold fonts, adding background color, etc.). To inspire the user to complete the form.

When a form contains multiple interactions, such as "continue" and "return", it is best to reduce the visual weight so that these elements are subordinated. This reduces the risk of user potential operational errors, and can also better navigate the user to complete the operation.

Although the above principles help design a form, it is best to design the content of the form, either through user testing or data analysis (completion rate, error rate, etc.).

The position of the label can be concluded as follows:

1. In order to shorten the time or 2. When the user is familiar with the required content input, the top of the label is aligned with the form

When the vertical space is limited, the right alignment of the label is used

When entering information that is not unfamiliar or needs to be enhanced, use the left alignment of the label



References: http://www.lukew.com/resources/articles/web_forms.html

Source: http://www.zhangyq.com/don-t-make-users-abandon-in-the-first-step-page-form-design/