When my page has multiple input forms with a range of options from 2 - 10, should i use dropdowns, segmented control, or a mix of both?

Question

I have a form where the user select multiple different inputs. One input might have only 2 options (parent,child), while the next input might have 5 options (age: 0, 1-18, 18-25, 25-55, 55+), etc. These are just examples, but I have dozens of different input forms with varying numbers of options. Generally, I would do a dropdown menu for items with 5+ options and a segmented control for less than 4 options. Given the variety of different inputs, should I switch back and forth between dropdown menus and segmented control depending on the number of options, or should I keep them all as dropdown menus (even if there are only 2 options) to keep the UI consistent?

Answer 1

It's totally fine to use different inputs. Just make sure to sequence inputs logically and match fields to the type and size of the input.

Avoid drop-downs when there are only 2 or 3 options that could be displayed as radio buttons (which require only a single click or tap).

Answer 2

I think you can design beautiful forms even when using a diversity of controls. But indeed, it can be quite tricky to find the balance between the usability and the visual aspect.

There are a few things to keep in mind:

• users don't like forms, so forms must be quick and easy to complete
• users consider beautiful forms to be easier to complete
• users don't know exactly how to complete forms, so they expect guidance (via design or text)

My approach to form design would be:

1. Keep all form fields consistent in their design:

   • same height if possible
   • same width (excepting the checkbox and a few other special controls)
   • same border (even for radio and checkbox groups)
   • same label and description alignment
   • same selection color
   • same error placement and behavior

2. For 3-4 options with short words that translate well in multiple languages, use a segmented control.

3. For 2-5 options with long words, use a radio or checkbox group.

4. For more than 5 options, you can either:

   • use a dropdown field (preferably with search box)
   • create a custom component with 2 columns
   • create a custom field that opens a modal with options and then displays the selection inside the field

5. Use enough empty space between fields.

6. Order the form so that similar fields are one after another (but don't break the overall logic of the form).

7. If the form is too long (more than 6-7 fields), split it into multiple steps.