Home > User Experience > Enhance your forms and improve the users experience with these guidelines | by Reino Viljoen | Oct, 2020

Enhance your forms and improve the users experience with these guidelines | by Reino Viljoen | Oct, 2020

Enhance your forms and improve the users experience with these guidelines | by Reino Viljoen | Oct, 2020


1. Grouping

Related fields should be grouped and structured in a logical manner.

Grouping the fields and ordering them as if you are telling a story will make it easier for the user to understand the information they are asked for — this will limit the times the users question their own answers.

2. Layout

Align the fields vertically in a single column layout — [exceptions]there are cases where side by side is preferred, such as related fields(Country dialing code + telephone number).

The preferred reading pattern for users when scanning the form is the Z-pattern. Because of this, the cognitive load increases in the form that has two columns and thus slows down the comprehension and completion of the form. When the user is confronted with a one column layout, none of these issues exist.

3. Necessities only

Do not ask for information which is not a necessity. If you would like more information, rather ask for this at another point in time, but not when it would hinder the user from completing the form at hand, where that information is not a necessity.

4. Label positioning

Place the field label closer to the associated field and align the label with the text field to the left. The fields should be placed below the labels for better scalability.

5. Field length/width

Use correct field length/width to match the expected answers.

6. Checkbox and radio button positioning

Place checkboxes and radio buttons underneath each other for better readability.

The preferred reading pattern for users when scanning the form is the Z-pattern. Because of this, the cognitive load increases in the form when the information is displayed side by side, as this slows down the comprehension and completion of the form.

When the user is confronted with the information underneath each other, the scalability of the information is easier, and speeds up comprehension and completion of the form.

7. Dropdown select

Avoid multi-select dropdowns when a single select dropdown will do.

8. Pre-warn users

Make sure to warn the user if external content will be required in order to complete the form (e.g. driver’s license, passport, order no, customer id, card details, etc).

9. Placeholders

Use placeholders as hints to the information you are looking for in the field. Avoid using placeholders for complex helper text(see #10) that needs to be visible to the user at all times. This is because placeholder text will disappear once the user starts entering data into the field.

10. Helper text

Helper text should be used when complex data information is required in the field.

Consider changing the label of your field if the helper text becomes too long, in order to be understood by the user. Helper texts should be short.

Helper text should be used:

Helper text should be placed immediately after the label or question being asked.

11. Required & optional information

When selecting to mark fields as optional or required, you need to check which of these would be most valid to the form. If the vast majority of your input fields are “required”, then use “optional” to mark the optional fields. If the vast majority is “optional”, then use “required” to mark the required fields.

Required Fields:

Optional Fields:

12. Field validation

Validate the field as the user types in the information — inline validation.

13. Make it easy to correct errors

14. Button label

Name the button according to its action or purpose.

15. Button design and positioning

Buttons are a vital part of any website and application, as are their positioning and design, here you can find my post regarding the button design and placement.



Source link