1

What is the best method to choose between two options - toggle, dropdown, radio or segmented button? For example, the two options I have are 1. horizontal 2. vertical They are mutually exclusive.

Eg:

enter image description here

6
  • definitely not the dropdown...
    – Luciano
    Dec 16, 2022 at 11:15
  • 1
    definitely not the toggle... Dec 16, 2022 at 11:52
  • To use which one, it depends on the situation. but I suggest to use less dropdown. Dec 16, 2022 at 12:10
  • These different types of selection control have both generic and specific use cases, which makes them more suitable than the others in certain situations. If you could provide some more information about your particular scenario I think you will get an answer that fits with your requirements.
    – Michael Lai
    Dec 19, 2022 at 22:29
  • Need more context for your question. If I'd really have to choose. would go for option 3
    – Blue Ocean
    Dec 20, 2022 at 7:44

4 Answers 4

3

Generally speaking, dropdown menus are excellent choices for longer lists because they:

  1. Can save space.
  2. Don’t overwhelm users.

However, dropdown menus are too complicated if users have to select one of two options.

Radio buttons and toggles work great if the user has to make a single selection of four options or less because:

  1. They are straightforward.
  2. They require fewer clicks or taps.

enter image description here

1

Problem with Option 3 can be the uncertainty in which one is marked? Here in the example it looks like The Blue thick coloured option is marked. Do I click on Vertical to choose it, then? Not a problem in this design (if I am correct, that is) but certainly a common problem with this type of interaction.

1
  • +100 if I could. Simple color differentiation is not inherently clear. When there are 3 items and two are one color and one is the other color and they are mutually exclusive then it works great. But when it is just two options, neither one is inherently obvious to anyone except the graphic designer. After all, sometimes "grayed out" and "dark" could be considered the same, so why should "dark" mean "selected"? May 10, 2023 at 3:23
1

Of all the options, only the third is suitable, and here's why.

  • In the first case, the number of elements is very small for the formation of a dropdown, in this case it is better to use a list with radio buttons.

enter image description here

  • In the second, we can refer to quite an authoritative Google Material Design guide. They write that using one toggle for two different values leads to poor user experience.

enter image description here

  • The third option is the only alternative for this case.
0

The issue is greater than "two options". ...more on that later.

The specific example includes two options which are horizontal and vertical. And they are similar and exclusive, but not bi-polar.

Therefore option 3 is best suited:

push button toggle

Or Radio buttons, which is essentially the same conceptually but require less programming and graphic development.

0 Horizonal   O Vertical

When choosing a selection control consider:

Homogeneity: the similarity/interrelationship of the options,

Volume: the number of options to mentally process, and

Limitation: the number to be selected.

 

Switch toggles (option 2 in question) work well for bi-polar options (as in on/off, enabled/disabled, opened/closed).

Push-button toggles (option 3 in question) for two similar, exclusive options (although not bi-polar).

Radios for single selection from varied options.

Check-boxes for multiple selection from several varied options.

Single select drop-downs for single selection from numerous—although still limited*—varied options.

And multiple selection drop-downs for multiple selection from numerous—again, limited*—varied options.

 

*Single lists having a great number of options are hard to use, and indicate lack of data analysis. Reevaluate and subdivide long lists into smaller, related groupings, or if homogeneous, use a search/predictive-type control.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.