Everything about forms

Do's and Don'ts for a better usability

Mercedes Scenna

The way a form is build can affect your website in multiple ways. Forms are the element which users interact with your site, say a contact form, a comment, during checkout. If the labels, fields and information are not well displayed, it can drive users up to not finishing their task or even leaving the website completely. The gold of forms is always to get the proper and needed information from the user.

Usability, functionality and useful information are key on this matter. Each element on the form is asking for particular information, that affects the kind of input, length and whether you add extra information or not. Based on some researches of the Baymard Institute, you can find next a couple of tips.

INPUT FIELDS

Even form fields ask for different kind of information, there are some things you should take into account when designing your form, and not just layout. Fields should have the length to match the expected information. You can categorize the input according to the information those are trying to get.

  1. Fields with fixed input. Here you know exactly what you have to type, for example birthdays. The length of the input should for the exact amount of characters you are expecting, regardless the other input fields.

  2. Fields with variable input but an average length. Fields like name or email can have different amount of characters but you can set an average on add some characters just in case. It can vary from site to site, but you can put together you own average that is suitable for all and have a consistent visual width of fields.

  3. Fields with variable input but unusual average. Fields which input can vary country to country or unusually long or short. These fields will be the ones left out from your “average length” selection. You will have to decrease or increase accordingly to the expected field, for example a security code on a credit card: its information can vary  but it is expected to be shorter than an e-mail or a full name.

Odoo image and text block

This form is asking for security code with 3 or 4 digits according to the type of credit card. Clearly the input is much longer than that. 

On the other hand, they are doing a good job with descriptions with text and graphics.

DROPDOWN FIELDS

Dropdowns are not always practical even though are widely used for specific types. If you are asking for a gender, there is no point in having a two option dropdown, a select box will be more useful were the user can directly see his options.

Short on options

Dropdowns with only a few options lead to lack of up-front information, it involves the field to open in order to see the options. Alternatives are radio buttons, checkboxes, all options are on sight and gives a better view of the options the user is given.

 

Too many options

On the other hand, options growing up to 30 or 40 can cause a scrolling nightmare, even if they alphabetically ordered. First the users has to figure out the categorization of information the dropdown contains, alphabetically, geographically (for countries), etc. Then start scrolling until finally he can find the correct option

Odoo text and image block

This two examples show the extremes of the bad use in dropdowns. The first one is a scrolling nightmare to find the country on the Mango Store. Even though it is alphabetically order, it leaves a lot of room for improvement.   

The other extreme is having a dropdown for just gender (two) options. It would be much more useful to use radio buttons or a checkbox, showing all options and saving time. 

Odoo image and text block

Don't forget about the descriptions

Last but not least, adding the right information to fields can decrease misinterpretation and possible abandonment. Several field labels ask for specific information that the majority don’t understand. Giving error messages repeatedly can quickly frustrate the user, specially if they don’t know what they are doing wrong.

Field descriptions usually answer this four questions: What is being asked for? What is the right format? Where can I find it? Why is this information required?

 
  1. What is being asked for? If the label itself is hard to understand, the most liekly scenario is that the user doesn’t know what to type in. Technical words, abbreviations, are all very common to find, and some additional description can erase easily some doubts. Common examples: credit card’s security code with inconsistent labeling or abbreviation, address line 1 and 2 with no specificity of the type of data, or general abbreviations like qty for quantity specially if you are dealing with non-native speakers.

  2. What is the right format? Without rules or examples, the user can have one error message after the other. A simple description with an example or some rules if needed can avoid many bouncers. Just like a phone number that can be formated in many different ways: brackets, spaces. Common examples: phone numbers, numeric dates, credit card numbers, passwords.

  3. Where can I find it? If the user has to give some information required from an external source, such as a customer identification, pointing the place where this can be found will save the customer’s time and a likely abandonment. Common examples: credit card’s security code, coupon codes, identification numbers.

  4. Why is it required? When you are asking for personal information, the user may question how will it be used. No one likes spaming by mail or phone. A small explanation why the information is required will avoid insecurities. Common examples: date of birth, phone numbers, “store credit card details” option.

HOW DO I DISPLAY THE DESCRIPTIONS?

The way will vary on the context and information given. As well as the design on your website and on your form, the length of the text will also affect on how you display it.

Inline descriptions

Displayed together with the main label or close to the form field. It will be permanently visible to the user, so to avoid clustering use a light small text, maybe grey, to make it more sutil.

Tooltips

In the shape of an icon or a link, gives in-depth information but only visible when the user hovers or clicks on them. You have to take care for devices with this one: if you use a hover effect, have a fallback for touch-screens.

Dynamic descriptions

When the corresponding field is on focus the information is shown. This option avoids extra unwanted informaltion on the form, is only shown when its needed. When the user click to fill in data, the descriptive info is shown inline.

Placeholders can also work for concrete text, but keep in mind that it will dissapear once the user starts typing.

Odoo CMS - a big picture
For more information, check out the available researches on the Baymard Blog, it has many examples, numbers, and studies that can give more insight on the matter.

About Mercedes Scenna

The sassy frontend skilled/ She does not only coding but also conceptualizing and drawing/ Traveling and photography is her passion.