TeaCup Lab Logo

Guide to Best Practices for Mandatory Fields in Web Forms

Mónica Bohigas
January 16, 2024

Web forms are a fundamental part of the user's online experience. From creating accounts to completing purchases, forms are a crucial tool for collecting information. However, it is essential to design them clearly and effectively, especially when indicating which fields are mandatory and which are not. This aspect can make the difference between a smooth user experience and a frustrating one.

In this guide, we will explore good and bad practices for indicating mandatory fields in web forms, considering User Experience (UX) principles.

Importance of Indicating Mandatory Fields

Before delving into specific practices, it is crucial to understand why indicating mandatory fields in a form is vital.

Essentially, clear indication of mandatory fields in a form significantly contributes to the efficiency of data collection and user satisfaction in the following ways:

  1. Data Entry Efficiency: Signaling mandatory fields allows users to focus directly on providing essential information, streamlining the data entry process. This not only benefits the user by saving time but also improves the overall efficiency of the form.
  2. Error Prevention: Clear indications of mandatory fields reduce the chances of making errors when completing the form. By avoiding the omission of vital information, the need for later corrections is minimized, optimizing the accuracy of collected data.
  3. Alignment with User Expectations: Users often have clear expectations about the information required to complete an action or process. Indicating mandatory fields aligns the form's design with those expectations, building trust and facilitating smooth interaction with the interface.
  4. Facilitates Decision-Making: When users clearly understand which information is crucial, they can make informed decisions about providing specific data. This can be especially valuable in extensive or complex forms, where clarity helps users prioritize necessary information.
  5. Reduced Abandonment Rate: Lack of indication on mandatory fields can lead to frustration and confusion for users, potentially causing them to abandon the form before completion. A transparent and easy-to-understand interface decreases the likelihood of abandonment, thereby increasing form completion rates.
  6. Regulatory Compliance: In some cases, indicating mandatory fields may be a regulatory or legal requirement. Ensuring compliance with these regulations not only avoids potential legal consequences but also demonstrates the company's commitment to ethical and transparent practices.

In summary, clarity in indicating mandatory fields is not only a friendly design practice but also brings tangible benefits to user experience, operational efficiency, and regulatory compliance.

Good Practices for Indicating Mandatory Fields

1. Universal Symbols:

Use universally recognized symbols, such as an asterisk (*), alongside mandatory fields. This allows for quick identification and is widely understood by users.
While more subtle methods, like not activating the continue button until the form is complete, might work for forms with one to three fields, they are not recommended for longer forms as they could create confusion and hinder user progress.

Example: Atida uses the simple yet effective asterisk to mark mandatory fields. It is a visible and clear asterisk.
For example, Carrefour utilizes color and button copy to inform the user that the unfilled field is mandatory. This is a more subtle design, though informative. However, it leaves more room for doubts and user blocks.

2. Explanatory Text:

Accompany mandatory fields with explanatory text near the field or at the beginning of the form. For example, "Fields marked with * are mandatory" or "Please complete all fields marked with *."

Example: In the registration on Renfe.com, the message "Mandatory fields" is displayed next to the registration as a legend to convey to users what the "" means.

3. Colors and Visual Styles (but never as the sole resource):

Use colors or visual styles that notably differentiate mandatory fields from optional ones. For instance, employ a red border or highlighted background for mandatory fields. It is crucial that these visual elements are not the sole indication of a mandatory field, as visual resources alone might be insufficient and open to subjective interpretation.

4. Justify why the field is obligatory

Inform users of why, for what purpose, and how the requested information is required. Help users trust the process.

Example: Spotify does not explicitly indicate which fields are mandatory, but it informs users about the use and why such data is requested ("Why do we need your date of birth?")

Common Mistakes to Avoid

1. Hiding the Indication:

Avoid hiding the indication of mandatory fields, whether by making asterisks barely visible, placing them in an inconspicuous location, or not indicating them at all. This creates confusion and makes it difficult to identify mandatory fields.

Example: El País uses asterisks in its mandatory fields that are barely visible, potentially causing users not to fill in the field.

2. Requesting Too Much Data:

Avoid making too many fields mandatory, as this can overwhelm the user. It is crucial to balance the need for information with the user's experience.

Example: Hipercor requests sensitive personal data in its "purchase without registration" option. This could negatively impact the experience for users intending to perform a quick and registration-free checkout. Additionally, visual indication of mandatory fields is not provided. Only when an incomplete form is submitted does the error message appear.

3. Lack of Consistency:

Maintain consistency in indicating mandatory fields across different sections or forms on the website. Inconsistency can confuse users.

Example: In various sections of Atida's website, asterisks are used to mark mandatory fields. However, other screens lack any indication or symbolization, such as the payment method form. This inconsistency could lead to errors for users.

4. Sole Dependence on Colors:

Do not rely solely on color to indicate mandatory fields, as some users may have difficulty perceiving color. It is essential to use multiple visual signals.

Conclusion

In conclusion, clarity and simplicity are fundamental pillars in web form design. By clearly and effectively indicating mandatory fields, the user experience is significantly improved, and the probability of errors is reduced. By following these best practices and avoiding common mistakes, a more accessible and user-friendly online environment can be created.

Always remember to put the user at the center of the design!

Ready to elevate your user experience? Let's talk!
The answers you are looking for, one click away.
Get in touch ->
TeaCup Lab Logo
TeaCup Lab is a user experience consultancy agency founded in Madrid in 2016. We specialize in User Research & User testing for global brands.
Copyright 2019-2023 TeaCup Consulting SL

Contact us

TeaCup Lab 
Calle Jaén 2, 1ºG
28020, Madrid, Spain
+34 910 59 21 36
hola@teacuplab.com