Size the size of your fields according to the length of the expected response! Thus, for the entry of a postal code, shorten the field, this will give implicit information to the user that the field must contain only 5 digits. # 5. Indicate the required fields It seems obvious, but the errors generated by these missing indications cause great frustration among your users! The * symbol is well integrated, but must be positioned at the label level. The legend associated with the symbol used must be positioned at the beginning of the form and not at the end.

Avoid using color to Luxembourg Phone Number List required fields from others (if you are color blind you will not see the difference). error management Here, the form chose to use color to distinguish fields, but it explains to users what to insert in each field separately. And, if your forms have more required fields than the reverse, don’t hesitate to indicate that a field is optional . Information redundancy is useful for distracted users. # 6. Use simple captcha functions! The Recaptcha Google is now the most ergonomic solution. This prevents the user from tearing their hair out of a captcha that they have to type twenty different times.

But, generally speaking, if you can avoid it, don’t use a captcha. Numerous studies demonstrate the very negative impact of captcha on conversion rates. # 7. If you use long drop-down lists, always offer an autocomplete function The user directly accesses the desired label by simply entering the first letters of his selection . This function is thus very efficient for the choice of a country / language (especially when the alphabetical order is not respected).

The Choice Of Clickable Images Is Often

You can see an example of an autocomplete function below: The auto-completion function for its forms # 8. Remove unnecessary fields! Each additional field decreases your conversion rate. The forms that convert the best are the ones with the fewest fields (as long as you follow all the other rules in this article as well). Manage errors and validations efficiently # 1. Indicate errors in the field itself and explicitly The mention “your form is incorrect” is extremely annoying. Inwardly, you say to yourself: “yes, ok, but where ?! “.


The error message should be located at the error level , with an explicit message like “Your email address is incorrect.” “. Ideally, set up real-time validation of form fields: each time the user moves to the next field, the previous field shows a validation checkmark or displays the error message. # 2. Highlight the field that is being entered You can change the border color of the form, put a colored background on the whole line,…

This visual indicator is particularly useful for multitasking users. # 3. Use visible helpers and captions In some cases, the captions of the fields must be made explicit . When it comes to downloading a document , explicitly mention the permitted formats and the maximum weight. When it comes to a request that is complex, give examples . This message must be close to the field in question, and must not require opening a new page (or looking like a link), the user may then be afraid of losing the entry already made if he is redirected to a new page (the user cannot assume that the link you provide opens in a pop-in or in a new tab).

Use Images To Replace Alternatives

Use visible helpers and captions with precise action buttons It is always recommended to enter specific action verbs for buttons on a form. # 4. Do not create overly rigid validation conditions! Thus, for the telephone numbers, do not force the entry with a format of the type “+ 33612…”, but use programming rules making it possible to understand the different response formats . # 5. Stop asking for fields to be entered twice Think a form that asks you for your password or email address twice is well designed?

No, it is thus much easier in the case of passwords to offer a function for viewing them in clear. # 6. Allow pre-filling of forms With the AutoFill function , users use the functions of their browser or password manager. According to Google , it helps your users complete your forms 30% faster. Optimize your forms for mobile In mobility, the user is like an apnea swimmer , while he has an oxygen cylinder when he is facing a desktop screen.

His fingers are stiff, he’s in a hurry, and he’s struggling to juggle different applications. Also, a user will never thank you enough for making a form perfectly adapted for mobile and limiting the use of the keyboard as much as possible. # 1. Design your forms in mobile first The mobile first approach is key to guaranteeing efficiency when on the move. It is always easier to then decline for desktop than to switch to mobile after having created a desktop form. # 2. Avoid drop-down lists as much as possible Even more on mobile, dropdowns on mobile are difficult to use.

Leave a Reply

Your email address will not be published.