- For small inline forms
Other Recommendations
Labels
- Use uppercase bold fonts for input field labels (uppercase for Colibri)
- Use <label> tags to associate labels with inputs
- Do not put labels/hints inside fields on web forms, put it outside
- Consistent use of colons at the ends of labels (no colons)
- Consistent use of sentence ("Sentence case") or title case ("Title Case") (uppercase for Colibri)
- Required field indicator: Use the alt-text ‘required’;
- Always indicate required + miss for optional
- If all fields are required don't mark them
- Use the tabindex attribute to provide a “tabbing” path
- Provide hints with a secondary/non intrusive style
Fields
- Use fixed lengths for predefined fields or use 100% within the container (the container can have a fixed width)
- Field lengths can provide valuable affordances (ex. credit card, telephone, etc.)
- Random field lengths may add visual noise to a form
- Make the default value for a drop-down list box the label
- Label the button with what it does
- Primary / Secondary Actions
- Primary actions: the most important action on the form (completion) (“Submit”, “Save”, or “Continue”)
- Secondary actions: are less utilized and most often allow people to retract the data they’ve entered (“Cancel”, “Reset”, or “Go Back”)
- Make sure that the SUBMIT button cannot be confused with destructive buttons
Errors / Success
- Clearly communicate the error that occurred
- Top placement, visual contrast
- After successful form completion confirm success
Other Considerations
Terminology
- Label: the text that stands for a question ("Phone")
- Hint/Description: an extra piece of text that helps to explain the label ("(XXX) XXXX - XXXX")
- Default: a value that is already entered for the user ("(990) 8972 - 1234")
Conclusions
- Users often abandon forms or lie on them because of:
- Questions that they don’t understand
- Questions that they have no answer for
- Intrusive questions that are inappropriate to the task
- Validations that refuse their preferred or correct answer
Resources