Design thinking for developers, forms design is more beautiful

Programmers are usually people who do not have good sense of design. Therefore, Techtalk will introduce some perspectives and knowledge about this field to help us improve the ability to apply design concepts into products! Let's see it.

Common designers and remedies

From signup flow, a multi-view stepper, to monotonous data entry interface, the form is one of the most important components of digital product design. This article focuses on the principles that should and should not be in the form design. Remember, these are just common ground and there are always exceptions to every rule.

The form should only have 1 line

Too many columns will break the user's "momentum".
Too many columns will break the user's "momentum".

Label above

Users complete the above form of labels at a much faster rate than the left label. The label can also work more efficiently on mobile. However, when entering data-set data with variable customization, you should consider using the left label because these labels are easier to scan, have lower altitude, and suggest more consideration than the above label.
Users complete the above form of labels at a much faster rate than the left label. The label can also work more efficiently on mobile. However, when entering data-set data with variable customization, you should consider using the left label because these labels are easier to scan, have lower altitude, and suggest more consideration than the above label.

Group labels with their input

Display labels and input close to each other, and ensure sufficient height between input fields so as not to confuse users.
Display labels and input close to each other, and ensure sufficient height between input fields so as not to confuse users.

Avoid complete capitalization

All caps are difficult to read and scan
All caps are difficult to read and scan

Show all options if only under 6

Setting the option to drop-down requires the user to click twice. Use input selector if there are fewer than 5 options. Combined with text search right in the drop-down if there are more than 25 options.
Setting the option to drop-down requires the user to click twice. Use input selector if there are fewer than 5 options. Combined with text search right in the drop-down if there are more than 25 options.

Avoid using placeholder text as labels

Setting the option to drop-down requires the user to click twice. Use input selector if there are fewer than 5 options. Combined with text search right in the drop-down if there are more than 25 options.
Setting the option to drop-down requires the user to click twice. Use input selector if there are fewer than 5 options. Combined with text search right in the drop-down if there are more than 25 options.

Avoid using placeholder text as labels

The optimal space from using placeholder text to labels is extremely tempting, but will cause many problems during use that you can learn more here.
The optimal space from using placeholder text to labels is extremely tempting, but will cause many problems during use.

Put checkboxes (and radios) from top to bottom for easy scanning

CTA (Call to action) is clear

Displays internal errors

Use only inline validation after the user has finished typing (unless that information is useful in the input process)

Do not confirm when the user is still typing if it is not very useful (as in the case of creating a username and message with a character counter)
Do not confirm when the user is still typing if it is not very useful (as in the case of creating a username and message with a character counter)

Don't hide the basic help text

Clearly see the basic help text whenever possible. For complex sections, place next to the input.
Clearly see the basic help text whenever possible. For complex sections, place next to the input.

Distinguish clear main actions and extra actions

Express data entry requirements right in the input field

The length of the input field represents the required length of the answer. Apply this rule to input fields that have a specified number of characters such as phone numbers, zip codes, ...
The length of the input field represents the required length of the answer. Apply this rule to input fields that have a specified number of characters such as phone numbers, zip codes, …

Uncheck the * and specify fields that are not required

Users do not always understand what a (*) sign means. Instead, just point out the best
Users do not always understand what a (*) sign means. Instead, just point out the best

Group of similar information

Users look in groups, and long forms can be overwhelming. By creating logical groups, users can fill in forms faster and with fewer errors.
Users look in groups, and long forms can be overwhelming. By creating logical groups, users can fill in forms faster and with fewer errors.

Asking for what?

Discard non-mandatory fields and find other ways to collect data. Test types are also a good way with high response rates to replace questions. Moreover, automatic analysis data and social channels, conversion UI, SMS, email, voice, ORN, location, fingerprints, etc. are gradually becoming the statistical channel of modern times.

Make it fun

Life is short. Nobody wants to sit down and fill a long, long form. Be so close, funny, strong in contact. Do something no one expected. The role of a designer is to show the company's brand in a way that elicits emotional reactions from users. If done properly, you will be able to increase the completion rate (should still follow the rules above).

ITZone via uxdesign

Share the news now