Labels
The Design Need:
The user needs to fill out a form and should be informed about what information has to be entered where.
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
Design Examples:
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
Design Solution:
Labels are used to inform users about what information should be entered where. The primary focus here is to allow users easily to detect which label corresponds to which input field and what is required. When designing an online form and creating input fields and corresponding labels, there are several options for placement and alignment.
A few guidelines to use in your form design
- Above the answer field, left aligned: supports fast performance, but might cause long pages
- Left-aligned at the left of the answer field: use if fast scanning of the available options/questions is most important
- Right-aligned at the left of the answer field: saves vertical space, but can cause problems for people who are dyslexic and doesn’t support fast scanning of the labels
- Response labels to the right of corresponding fields, such as check boxes.
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
When to use:
Every data entry field in a form should be labelled.
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
Why use this solution (rationale):
Form filling can be a hazardous exercise, so it is important to help users to perform it as efficiently as possible. In most cases, the most important task is filling out the information that is requested, rather than scanning through the questions asked. When designing forms the design should focus on the most important user goal while filling out the form.
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
More info elsewhere:
- “Use verbs as labels on buttons” on www.usabilitypost.com http://www.usabilitypost.com/2008/08/30/usability-tip-use-verbs-as-labels-on-buttons/
- “Alignment” on www.formulate.com.au http://formulate.com.au/articles/alignment/
- “Label placement in forms” on www.uxmatters.com
- “Web application form design” on www.lukew.com
- “Right aligned labels” design pattern on http://quince.infragistics.com
- “Left aligned labels” design pattern on http://quince.infragistics.com
Reminder
Don't forget to ask for your invite for our online usability service. Visit UserPlus Advisor to get access.
