We can all agree on the fact that nobody likes filling out forms. This may often be the most frustrating part of an experience for users.
However, on the business side, a form is one of the most valuable assets used to collect data and interact with users. This is why creating forms that respect good User Experience practices is essential to creating intuitive forms and building a positive relationship between users and a brand.
So here are 15 Bad versus Good UX practices for mobile forms (non-exhaustive list):
1 – Position the labels above the fields
This is one of the most controversial topics in form design. However, studies prove that labels above inputs are more efficient by minimising errors.
2 – Structure the form in one single column
The main reason for this recommendation is that users often interpret different fields inconsistently if they are split into two columns. Their eyes will scan the page in Z-shape which will reduce comprehension speed and make completion more difficult.
3 – Use visual proximity
Position the label and the input close enough and use a higher space between the different fields to help the user understand which label goes with which field.
4 – Mention the optional fields rather than the mandatory ones
A study shows that users are giving more information than required when mandatory / optional fields are not specified. If you explicitly mention each field that is required, you will often only have these ones filled in.
5 – Force input type
With minimal effort you can implement field types and have a huge positive impact on how the user interacts with your form.
They are useful for 3 reasons:
– They allow to match the keypad with the format of the desired data on mobile (numbers only, email field…)
– They allow the browser to automatically fill the fields with previously used data.
– They prevent errors (especially on the email format).
There is a list of the different standard inputs in HTML5:
– input type=”text” displays the normal mobile device keyboard
– input type=”email” displays the normal keyboard plus ‘@’ and ‘.com’
– input type=”tel” displays the numeric 0-9 keypad
– input type=”number” displays a keyboard with numbers and symbols
– input type=”password” this hides characters as they’re typed in the field
– input type=”date” this displays the mobile’s date selector
– input type=”datetime” this displays the mobile’s date and time selector
– input type=”month” this displays the mobile’s month/year selector
6 – Simplify your forms!
The best way to avoid mistakes is to simplify your form and reduce the number of fields as much as possible. For example, one field for the user’s address should be enough compared to the commun 6-7 fields for each element of the address. This will avoid typing errors and provide a better user experience.
7 – Use masks
It is important to guide your users as much as possible, which is why I recommend that you use masks for certain fields.
Masks are useful for showing a specific expected format of data. They are often used for credit cards or phone number fields.
8 – Use the autofocus mode
Autofocus allows two things:
On desktop and mobile, it triggers the focus mode on a part of the form and clarifies in which field the user needs to enter information.
On mobile, it keeps the field that is in use above the keyboard.
Additional tip: On certain mobile phones, autofocus can trigger a zoom-in and may sometimes break your layout. You can disable it using the function “user-scalable = no”.
9 – Avoid generic copy in your CTA
Avoid the word send or submit for the call-to-action and give a precise name to the action the user is about to perform, such as “create my account”, “send my message”, etc.
10 – Display clear error messages and solutions
Do not tell the user that the data is invalid without telling him why! Invalid domain name? Username not recognised in the database? Clarification is essential to avoid errors as much as possible.
11 – Use the average expected input length to define field size
The content size can be an easy indicator of the field side.
12 – Keep it simple
Keep your forms short and simple. Collect only necessary data and avoid duplicating input fields in the name of verification (e.g Instead of duplicating the password field, allow users to view the password they have chosen to create).
13 – Do not insert valuable information in the input
Placeholders in inputs tend to make users notice them less than fields without placeholders. Also, they are more likely to be frustrating than useful in the input as placeholders disappear when selecting the field.
14. Differentiate primary from secondary actions
Your form may have several action buttons. In most cases, users see two options: one is the user’s primary task and the other is a secondary task. However, it is important to differentiate them so that the user can quickly identify the main button.
15 – Add human interactions
Add human interactions to the copy of your forms to make them more appealing and create an emotional response.
I hope this list will help you design better forms and I would love to hear any additional best practice you may know about forms.
See you soon for another article 🙂