Posted in: Uncategorized
UX pointers for forms
- Only use a dropdown if there’s between 8 and 14 choices
- If there’s 15 choices or more, and if the user will know what they want (eg; a Country selector), use a text field with auto-complete
- If they don’t know what they want (eg; a list of qualifications and a user doesn’t really know what to type), then stick with a dropdown.
- 7 or less, use a radio button or checkbox (“combo selection”)
- Dropdowns should have scroll bars (rather than standard HTML dropdowns)
- Dropdowns with multiple selections are good
- Dropdowns should have the name of the dropdown as the default (deselected state). So a dropdown of qualifications should have “Select a Qualification” as the first (unselected) option, or on search forms it should be “No Preference” as the first (unselected) option.
- On search forms, if it’s a combo selection (Eg: Male / Female), you must have a “No preference” option.
- No field should ever have an option already selected. The two exceptions are 1) if the user is able to select ALL options in the dropdown. Eg; selecting “days available”, then the default option should be “All”. 2) If 90% of people will select the option. Eg: “language: English”.
- Never reload a page (eg; search results) immediately after the user selects an option. Let them click “Update” to re-load the page. Dynamic refreshing of results as they select options is fine so long as it’s fast enough
- Use a stepper (+ and – buttons) on number fields where the value a user enters is most likely going to be less than 8
- If search form elements are hidden (Eg: “Advanced Filters”), when the elements are hidden, summarise their selections. Eg: “Show Advanced Filters. Selected: Gender(x), Age Range(x)” and they can click the x to clear that filter from their selection