Avoid reset and clear buttons
They can increase the risk of accidentally clearing form data.
Inputs
List radio and check boxes vertically
Select the right form element for the right type of information
Types of form fields, format, when to use them
Checkboxes:
- Choosing only one item for a selection: of 2 -10 options
- Ensure labelling shows whether users can select one or multiple options
Radio Buttons:
- Choosing only one item for a selection: of 0 -10 options
- For more than 2 options the buttons should be stacked
- Larger radio buttons are easier to select with a mouse or touch device
Dropdown box:
- To be used if screen space is limited and there are more than 10 options
- They can be difficult to navigate so avoid where possible.
- Add a meaningful default if applicable e.g. United Kingdom for a UX based user
- List options alphabetically to make scanning easier
- Consider a searchable dropdown where possible
Single line text fields:
- Use for short, single line data that only requires basic validation
- If used for email capture ensure validation is in place to only accept email in the correct format
Multi line text fields:
- For longer, free-form text input that could span multiple lines e.g. comments, descriptions etc
- Height can be adjustable
Number fields:
- Use when the input should only be a number e.g. age, quantity etc
Date and time input fields:
- Use a date/calendar picker when selecting a specific date
- Context is important but often best to provide a visual calendar that allows easy navigation between months and years
- Include a visible text field that shows the selected date
- Expected date format should be DD/MM/YYYY
- Restrict available dates if there are valid ranges e.g. no past dates if booking a venue
Time picker:
Use for selecting a specific time e.g. an appointment
Specify whether using a 12 hour (am/pm) or 24 hour format
File upload:
- Tell users what file they are being asked to upload e.g. Upload your results, Photo of your dog
- Make it clear what file types are supported e.g. pdf, jpg, png etc
- State maximum file size
- Confirm that the upload has been successful
- Ensure any error messages clearly state the problem e.g. file type not supported
- Provide visual feedback such as a progress indicator during the upload process
- Allow drag and drop functionality
Labels
- Don’t place labels in the field as this increases user error - places unnecessary burden on short term memory i.e. if user starts to complete the field, deletes the label in the process and then forgets what they are writing
- Use text labels above the field, hint text within
- All form fields should have a label
- Label text should be short, clear and in sentence case
- Clearly communicate any character limits
Buttons
- User verbs on buttons - Sign up. Log in. Save.
- Avoid reset and clear buttons - they can increase the risk of accidentally clearing form data
Field sizing
- Make field widths proportional to the input they take e.g. a postcode field doesn’t need to be as long as comments field
- Form fields should be 100% width for smaller screen sizes
- Field height should be proportional to the amount of text to be entered e.g. a comments field will be higher than a postcode field
