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:
5
-
definitely not the dropdown...– LucianoDec 16, 2022 at 11:15
-
definitely not the toggle...– Luke SawczakDec 16, 2022 at 11:52
-
To use which one, it depends on the situation. but I suggest to use less dropdown.– Shubham TankDec 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 OceanDec 20, 2022 at 7:44
Add a comment
|
4 Answers
Generally speaking, dropdown menus are excellent choices for longer lists because they:
- Can save space.
- 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:
- They are straightforward.
- They require fewer clicks or taps.
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.
-
+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 at 3:23
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.
- 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.
- The third option is the only alternative for this case.
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:
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.
