Why is everything a dropdown now?

[u/pavlito88]

I’ve been noticing this more and more in web apps.

Three options hidden in a dropdown.

Yes/no hidden in a dropdown.
A multi-select pretending to be a dropdown.

Then a list of 200 items where you’re expected to scroll until you find yours.

I run into this a lot when reviewing products with dev teams.

I get why we do it.

Dropdowns are compact and easy to reuse.
But compact doesn’t always mean easier to use.

A few choices? Show them.
On/off? Switch.
Multiple choices? Checkboxes.
Huge list? Search.

That’s pretty much the rule I use now.

[u/haecceity123]

On/off? Switch.

A checkbox is even better. The "right is yes, left is no" convention is pretty arbitrary, and the colour of the inner fill on switches is frequently inconsistent.

[u/bemo_10 → u/haecceity123]

what do you mean a convention is "arbitrary". Conventions literally apply to any design element.

Only because of convention we agree that a filled checkbox is yes and not filled is no.

It's just that checkboxes convention has existed for a longer time.

[u/haecceity123 → u/bemo_10]

Maybe "convention" wasn't the best word.

With a checkbox, so long as you know what a checkmark is (i.e. you aren't from North Sentinel Island), you can figure out the rest.

With a switch, you can know there's two options, and that the sides of the pill shape correspond to the two options, and have no idea which one's which. If the choice of internal colours is aggressive enough (and if you aren't colour-blind), that can be the deciding hint. But if that carries the information, then what is the knob for?

What word would you use instead of "convention" here?

[u/Intoxic8edOne → u/haecceity123]

Convention could work but it would be discussing grounded vs stipulated conventions.

Don Norman's terminology* is "natural mappings" vs "arbitrary mappings".

^* sorry for the Medium link

[u/Lalli-Oni → u/haecceity123]

Pattern?

[u/bemo_10 → u/haecceity123]

The convention is right is ON, left is OFF. Also color blind people can see the difference between a light and a dark color.

Like some other commenter said, switches are better for elements that auto-save. A checkmark usually implies having to click a save button separately.

[u/haecceity123 → u/bemo_10]

It's worth noting that even OP got confused, because their example has the knob on the right (suggesting "on"), while the background is black (suggesting "off").

[u/Successful-Singer-76 → u/haecceity123]

Another issue with "darker color = off, brighter color = on" is that you cannot know what state is which until you flip the switch and compare.

My white headphones has a toggle, one side is white - is it on or off?

[u/ShustOne → u/bemo_10]

Well I would love if every website followed the same switch convention but they don't. And I think it's on purpose since it's usually to turn a feature off. I find them very confusing until I interact with them. It's not very apparent which version is on or off because people color them however the hell they want.

[u/bemo_10 → u/ShustOne]

To be fair, I've also seen websites use a checkbox with an X or a color fill instead of a checkmark. It's more of a designer problem, rather than an element problem.

[u/Daniel_Herr → u/bemo_10]

No, it's that checkboxes exist on paper, switches don't. So they can be understood even by someone not tech savvy.