Forms for designing Form become better

Tram Ho

Common mistakes that designers make and how to fix them

Whether it’s a register stream, a multi-view stepper or a pure data entry interface. Form is one of the most important components of a digital product design. This article focuses on the things Dos (should do) and Don’t (should not do) in Form design. Please keep in mind that these are general guidelines only and of course there will be exceptions to all rules.

The form should have 1 column

We often look at the Website in a top-down direction. So having multiple columns breaks the user’s Vertical Momentum.

Label (label) aligned on top

Users often complete a form that has a label aligned to the top at a much higher rate than things with a label aligned to the left. Label’s interpretability when aligned upwards is better than on Mobile. However, consider using the Left-aligned Label for the purpose of importing large data sets with changing options, as the user’s eyes will be easier to scan, the height will be lowered, and the prompt will be filled. The form will be taller when the Label is aligned on top.

Group the Label with its Input closer together

Display the Label and Input closely together and ensure there is enough height between the fields so that the user will not be confused.

Avoid all CAPS LOCK characters (capital letters)

All Caps Lock characters will make it harder to read and eyes harder to see.

Show all options (optional) if the number of options is less than 6

Setting the option in the Drop-down will require the user to click twice to show the list and hide the option. Use an Input Selector (Select Option Element) if there are more than 5 options there. In addition, it is advisable to combine contextual search in the Drop-down if there are more than 25 options. (like the library of Select2 library interface)

Placeholder should not be used as a Label

It’s a great idea to optimize space by using a Placeholder like a Label. However, this causes many Usability issues, which were summarized by Katie Sherwin of Nielsen Norman Group. ( https://www.nngroup.com/articles/form-design-placeholders )

Place checkboxes (and radios) below each other so that the eyes can be easily scanned.

Putting the Checkbox below each other allows the eyes to be easily seen.

Create CTA descriptions (call to action)

It is necessary to specify the Call to action for the display, link or Button.

Identify an Inline error

Shows users where the error occurred and provides a reason.

Use Inline Validation after the user has filled all the fields (unless it helps them faster while processing the Form)

Do not use Inline Validation while the user is typing. Unless it is intended to help users faster, such as in the case of creating a password, username or Message with a count of characters.

Do not hide basic help text

Offer Help text wherever possible. For complex help text, you should consider putting it next to Input while in Focused state.

Differentiate main action from secondary ones

There is a philosophical debate about whether to include secondary (secondary) options.

Using field lengths longer than necessary

Field length should match the length of the answer. Use for fields that have predefined lengths like phone numbers, zip codes …

Remove (*) for required fields and indicate optional fields

The user does not know what is implied in the required field (*). Instead, it is better to indicate to them the options fields.

Related information group

Users often think in batches (batch), and long forms will make them overwhelmed and feel tired. By creating logical groups, users will understand the forms much faster.

Why ask?

Ignore the optional fields and think of more subtle ways to collect user data. Always ask yourself, whether the question should be inferred, postponed or completely excluded from the form.

Data entry is increasingly automated. For example, mobile devices and wearables collect large amounts of data without the user’s awareness. Think about ways you can take advantage of social networking, chat user interfaces, SMS, email, voice, OCR, positioning, fingerprints, biometrics, etc.

Make it fun

Life is short and no one wants to fill out the form. Chat more, humor, gradually Engage with users and do surprises (Aha moment). It is the role of the designer to express their company’s brand and to elicit user emotional response. If it is done right and just make sure you don’t violate the rules listed above then I think the Form completion rate will increase many times over.

Thank you for reading. Please share if you like this translation and please share your thoughts! Hope you like my other translations too.

Source: Andrew Coyle

Share the news now

Source : Viblo