FORM DESIGN(Ⅰ)

[former_member638095]

I have always been thinking that the design of collecting effective information is the first problem faced by a UX Designer who wants to help data-driven companies to achieve great goals. Before writing this column, I have used different information interaction design strategies ,GUI, VUI and LOT, to direct the collection of effective information in different periods of time. However,I found the traditional form entry become most common choice.  So I want to write about my accumulated experience in form design in recent columns. If you ever was hesitant about the best displaying location of the labels or required tags in the form, this column may help you think more clearly.

 

Displaying location of the labels in the form

 

 

The label Placement in form:

 

The label is the core component of the form. A good form can be seen as a way of pleasant communication. The label is like a clear and concise question. Some junior designers often hesitate at the location of the label. I'd like to share some tips for them. I have collected some common labels display methods and made some analysis of them. There are four types of connections between labels and the location of the input field.The Figure1 is as follows

 

 

Floating label

Floating label is an interaction design style that is widespread on the mobile device. The label initially appears as a placeholder, and once the user starts typing, the label switches to the top of the input field.

• Pros:  it can effectively reduce the length of the page.


• Cons: the label occupies the position in the input field at the beginning, and users may mistakenly think that the input field has been filled in when they scans the form.

 

The label above input field

The label occupies the top and inside place of the input field. Other text content cannot be preset in the input field, and the available area around the input field is reduced.The label above input field is the most common way of design.

• Pros: < 1 > there is a clear difference between the label and the input field to be entered.                    < 2 > browsing efficiency is the highest.


• Cons: the vertical height of the form increases.

 

Labels to the left of input fields

Labels to the left of input fields is common in desktop-side design.

• Pros: < 1 >there is a distinction between the label and the input field.       < 2 > users can intuitively realize the connection between the label and the input field.


• Cons: users scan group information is not on a straight path, reading efficiency will be reduced. If you cannot control the length of the label, it will lead to an increase in the filling time. This problem will be described specifically later.

 

The label in the input field

There are two ways for labels to interact with each other when they are in an input field. One way is that the tag initially appears as a placeholder. Another way is that the label is fixed in the input field, and the user's input does not affect the label.

Both methods have apparent disadvantages. For example, when the user starts typing, the label disappears. This will increase the pressure on users' short-term memory. Another example is that the label with different length occupies the input field give rise to confusion .People cannot identify the information clearly.

Sometimes we use common icons instead of labels to display simple forms, such as the login registration page. But keep in mind that this is only used for very short and common forms.

 

 

Evaluating the effect of label placement on usability

 

The influence of different label locations on the smoothness of form browsing. I found three groups of common forms as follows.

In the actual design process, labels are often with different string length. sometimes there are big difference between each labels. In dealing with this situation, inexperienced designers always wonder the label should be aligned left or right. I got some result of eye tracking data based on diversity samples (the test subjects include expert users and novice users) for your reference provided by the Matteo Penzo team, as shown below:

 

In figure2[2], the left-aligned label group to the left of the input field is often used on web pages. We may worry about the distance between the label and the input field makes it impossible for the user to deal with their relationship, but the actual results show that the user identify the relationship between them. There is a brief visual pause between the label and the input field. “The general dwell time is 500 ms, a bit of long pause, which means that the users were experiencing heavy cognitive loading.”[3]

 

In figure 3[4], the user's cognitive loading is reduced because of the reduction of the distance between the label and the input field. So there is no visual pause between the label and the text field. “The experimental results show that the time for expert users to scan the tags and text field is 170 ms, while that for novice users is 240 ms.”[5]

 

In figure 4[6], the label right above the input field. The label is closer to the input field, so users can see both the label and the entry field in the middle of the retina. Therefore, it takes the shortest time to scan the labels and input field.

 

 

 

Marking Required Fields in Forms

 

When marking required input field in a form, we often encounter a question: should you mark the required text in the form? If most of the input fields in the form are required to be filled in, do we need to mark them all? If marked, then the number here may be very large. My answer is yes. I will explain reasons later. Designers usually feel that every input field is marked with required filling is repetitive, ugly, and takes up too much space. Especially in long forms, it gives a sense of oppression. So we may use the following strategies to solve these problems:

 

In figure5, There display a strategies that some instructive text at the top of the form to tell the user all input fields are required or all forms are required unless otherwise instructed. Always mark the selected input field. Because usually choose to fill in the input field is the least.

But this kind of solutions has some problems: the user ignores the instructions at the top of the form. Even if users read the guide text, they may forget it. Especially for long forms, the user may be interrupted in the process of filling out or users do not forget the instruction text, but their conscious burden of congnitive load will increase. Because in the process of filling out, they need to remind themselves of the contents of the guidance text, making it more difficult to complete the task.

Therefore, it is a better choice to send a required signal in the required text field.

Generally there are two choices: the asterisk (red or not?) and the word "required" asterisk are widely used on web pages as a solution, so that users are now very familiar with its meaning.

The main advantage is that it saves a lot of space and appears to be distinct from the label text.

 

But should the asterisk be placed before or after the label?

 

In figure 6,There are some different views.Some people think that putting an asterisk in front of the input field is a better way to help the eye locate the required input field when the user only scans the leftmost attribute of the label. Other people think both of them have a little impact on the user's scan results. Here I have done some research and found a reliable answer from some friends in the typesetting industry. In the typesetting industry, an asterisk is usually placed after a label to indicate correction. For example, when sending instant messages or other electronic messages that cannot be modified or withdrawn ,asterisks can be used to indicate typos or misstatements in electronic messages or when you just correct some information but do not submit it ,asterisks can be used to reveal the news.

 

Does the asterisk have to be red?

 

In figure 7,my answer is no. In some design cases, asterisks are not red which still allows users to quickly tell the difference between required and non-required. But red is generally recommended. Because the contrast between that and the text is strong enough. It is important to note that we need to avoid using obscure or low-contrast colors as asterisks. Sometimes visual designers may think that slightly quieter colors is more aesthetically consistent, but low contrast makes usability problems even more serious.

When we use the required text tag to mark the required input field, should we also mark the optional input field?

There is no mandatory requirement here. But selective (optional fields) text can reduce the cognitive burden of users and make the input task a little easier.

 

 

Conclusion

when we design the label location and tag the required text fields in the form, there are a lot of design solutions. Each solution has its advantages and disadvantages. When we are doing the experience design of the form, we should fully evaluate the applicability of each scheme based on current scenario. When you want to apply the form to more devices, or when you have a lot of filling requirements, you should consider using floating label. When you want to make the form suitable for a lot of filling, especially on web, be sure to use an asterisk and put it at the beginning of the label.

In the next article, I will continue to write about the validation logic and help text issues in the form.

Thank you for reading this column.I’m looking forward to your feedback.

 

Reference

[1] 《Web Form Design:Filling in the Blanks》(May 2,2018) By Luke Wroblewski

[2] 《Web Form Design:Filling in the Blanks》(May 2,2018) By Luke Wroblewski

[3] 《Web Form Design:Filling in the Blanks》(May 2,2018) By Luke Wroblewski

[4] 《Web Form Design:Filling in the Blanks》(May 2,2018) By Luke Wroblewski

[5] 《Web Form Design:Filling in the Blanks》(May 2,2018) By Luke Wroblewski

[6] 《Web Form Design:Filling in the Blanks》(May 2,2018) By Luke Wroblewski