Consistency in Required Fields: An Emphasis on the Convention of the Asterisk
Date
Category
UX/UI Design
In my recent experience as a consultant for a software development company—whose name I cannot disclose due to confidentiality policies—I encountered a dilemma that highlights a common debate in user interface design: the signaling of required fields in forms. The product managers (PMs) at the company proposed a shift to a more conspicuous marker than the conventional asterisk (*) for mandatory fields, arguing that it would be more effective in drawing user attention. This proposition led me to conduct thorough research and reflect on the importance of adhering to usability heuristics, particularly “consistency and standards.”
Consistency and Standards in UI Design
The “consistency and standards” heuristic, formulated by Jakob Nielsen and Rolf Molich, is fundamental in UI/UX design. This heuristic emphasizes that a system must maintain consistency in the use of terms, icons, and behaviors. Consistency in the interface allows users to have an intuitive experience as they can apply prior knowledge from other interfaces without facing a learning curve with each new application. This is particularly relevant for required field markers, where the asterisk (*) has become a de facto standard in the industry.
The Asterisk (*) in Recognized Design Systems
The adoption of the asterisk as an indicator of a required field is ubiquitous in the most influential and widely adopted design systems, such as Google’s Material Design, Salesforce’s Lightning Design System, and Apple’s Human Interface Guidelines. These systems choose the asterisk for its discreet yet effective visibility, ensuring that users can easily identify the requirements of the form without it visually overwhelming the interface.
Required fields in Google's Material Design
In Google’s Material Design, an asterisk (*) is placed at the end of field labels to indicate that they are required, making it immediately clear which fields need to be filled out. Additionally, including the asterisk in the accessibility label is recommended to enhance the experience for users relying on assistive technologies. This practice boosts both usability and accessibility, aligning with recognized standards to create clear and consistent interfaces.
Required fields in Salesforce Lightning Design System
Similar to Google’s Material Design, Salesforce uses the conventional asterisk (*) to denote required fields. This is done to maintain consistency across platforms and to help users easily identify required fields without confusion. The choice of an asterisk is in line with widespread design practices and supports a simple user experience by leveraging familiar visual cues. Salesforce’s implementation emphasises clarity and accessibility, ensuring that all users, including those using assistive technologies, can navigate and interact with forms effectively.
For more information, Salesforce guidelines on this topic can be found directly in the Lightning Design System documentation.
Required fields in Primer Design System
In Primer’s design system (GitHub), required fields are clearly marked with a visual indicator, such as an asterisk, to denote that they are mandatory. The “required” property is added to input components to ensure the field must be filled out before the form can be submitted
Required fields in Dell Design System
In the Dell Design System, required fields in forms are indicated with a label that includes a visible red asterisk next to the field name. This highlights the necessity for users to fill out these fields before submitting the form. The system also emphasizes best practices to ensure that forms are accessible and understandable, clearly marking mandatory fields for users.
Advantages of Using the Asterisk (*)
In addition to its standardization, the asterisk offers several practical advantages over other symbols:
- Universal Recognition: Most users are already familiar with the asterisk as a requirement indicator, which reduces confusion and improves user efficiency when filling out forms.
- Effective Minimalism: Its simple and small design prevents distraction, keeping the user’s focus on data entry, which is essential in interfaces oriented towards efficiency and functionality.
- Design Flexibility: The asterisk can be easily integrated into any design scheme without aesthetic conflicts, which is a greater challenge with larger or more intrusive design symbols.
Conclusion
In conclusion, while the PMs’ proposal at my client’s company sought to innovate in signaling the importance of certain data, research and reflection on usability heuristics and industry standards led me to advocate for the use of the asterisk. This approach not only aligns our product with established practices but also respects usability principles that ensure a coherent and accessible user experience. In UX/UI design, often the traditional, if based on a logical and proven convention, can be more beneficial than novelty for novelty’s sake.
References*
- Nielsen, Jakob, and Rolf Molich. “Ten Usability Heuristics.” Nielsen Norman Group. Available at: Ten Usability Heuristics – Nielsen Norman Group
- “Form fields — Required vs Optional.” UX Collective. Available at: Required vs Optional – UX Collective
- “Material Design Text Fields.” Google Material Design. Available at: Text Fields – Material Design.
- “Web Accessibility Criteria – Required Fields.” California State University, Northridge. Available at: Web Accessibility Criteria – CSUN
- “Rethinking the Red ‘Required’ Asterisk for Better Form UX.” Fusionbox. Available at: Rethinking Required Asterisk – Fusionbox
- “Using asterisk (*) vs required.” User Experience Stack Exchange. Available at: Asterisk vs Required – User Experience Stack Exchange.
- “Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions.” Smashing Magazine.
- “User Interface Design and UX Design: 80+ Important Research Papers Covering Peer-Reviewed and Informal Studies.” Interaction Design Foundation. Available at: UI/UX Design Research Papers – Interaction Design Foundation.