3 ms·

Binary toggles are everywhere in web UX. They are almost always used where a simple dropdown menu with WORDS indicating the chosen state would be better. Howeve

Binary toggles are everywhere in web UX. They are almost always used where a simple dropdown menu with WORDS indicating the chosen state would be better. However designers hate that because then they can't write fancy animations on creamy toggle widgets. A dropdown with the words enabled/disabled indicating the state will always be better than a toggle with some subtle animation and colour signalling the state.

aembleton 3y ago
Why is it better to use a dropdown? A drop down doesn't show me all of the options until I click on it; so I have to perform an action to see what my options are, rather than having them presented in front of me. They're fine if there's going to be loads of options such as country name, but if its left handed or right handed, I just want to see a toggle/radio button that lets me switch and makes it clear which state its currently in.
- injidup 3y ago
  The problem is that you don't know if ``on`` mapped to what you think it does. https://i.imgur.com/cflIbUv.png https://i.imgur.com/cflIbUv.png for example. Light grey is disabled. Light blue is enabled. It's not accessible. It's not obvious. It's not great for colour blind people. It's probably in this case a deliberate dark pattern. The only case where a toggle is ok is if the word for the each state is to the left and right of the toggle. https://i.imgur.com/skPP5Cu.png https://i.imgur.com/skPP5Cu.png
  - aembleton 3y ago
    I agree, for on/off a checkbox would work better
    - chefandy 3y ago
      Somtimes. Checkboxes work for "yes" or "no", but they're not idiomatic for other "a" vs "b" selections.
      - injidup 3y ago
        A checkbox should always have a label which should always be a question. The checkbox should be a tick not a cross. Then there is not ambiguity. Toggle switches should have two labels to the left AND right which are binary enumerations. yes (O----) no vanilla (----O) chocolate off(O----) on The problem is that designers with their bias towards animation and colors get it wrong. They do things like Turn on? (O----) And then toggle the color of the background between two different pastel shades which is aesthetically pleasing to the eye but delivers you halfway towards a reactor pile meltdown when the operator gets it wrong.
        chefandy 3y ago
        Bad design != Design. UI design is a communication medium, like technical writing. Within a weekend of fiddling, damn near anyone can operate the tools to assemble interfaces, but that does not mean they are interface designers. Failing to use color to appropriately communicate actions or state and thoughtlessly applied labeling are the actions of graphic designers trying to make things look pretty, or developers do to make things look 'designed.' That happens all the time and is no more an indictment of UI design than wordpress sites running janky homespun themes made from copy-and-pasted tutorial code are an indictment of web development.
        injidup 3y ago
        > Failing to use color to appropriate communicate actions or state .... No no no and no again! Do not use color to to communicate actions or state unless that color can be used to statically differentiate between another color that is present in the UI at the same point in time. This is why syntax highlighting in code editors works because there is a state boundary between a word in one color and a word in another. It is why colors for toggle sliders indicating off and on do not work. What color is 'off' or 'go' or 'enable' or 'disable' or 'allow'. An animation of any type does not help and only adds CPU overhead and UI slowdown. Animations can be useful only if they assist in disambiguating a transition between states. For example transfer of an item to a different position in a list. If the item animates across the screen the eye is guided to the new position. A toggle slider does not have this issue and should transfer to the new state immediately and the most important design question is how to interpret the current state of the toggle not the animation between the two state.
deleted 3y ago
[deleted]
chefandy 3y ago
Do you have any support for anything you've said that isn't based entirely on your own assumptions and feelings about designers? > A dropdown with the words enabled/disabled indicating the state will always be better than a toggle with some subtle animation and colour signalling the state. Oh yeah way better except for not being able to see all of your options or even how many options there are without interacting with it, at least double the number of keystrokes to operate, more cognitive load to parse and operate, not being idiomatic for the interaction, etc. etc. etc. There are lots of uses that dropdowns work better for, but saying they're simply better is asinine.

aembleton 3y ago

Why is it better to use a dropdown? A drop down doesn't show me all of the options until I click on it; so I have to perform an action to see what my options are, rather than having them presented in front of me. They're fine if there's going to be loads of options such as country name, but if its left handed or right handed, I just want to see a toggle/radio button that lets me switch and makes it clear which state its currently in.

injidup 3y ago
The problem is that you don't know if ``on`` mapped to what you think it does. https://i.imgur.com/cflIbUv.png https://i.imgur.com/cflIbUv.png for example. Light grey is disabled. Light blue is enabled. It's not accessible. It's not obvious. It's not great for colour blind people. It's probably in this case a deliberate dark pattern. The only case where a toggle is ok is if the word for the each state is to the left and right of the toggle. https://i.imgur.com/skPP5Cu.png https://i.imgur.com/skPP5Cu.png
- aembleton 3y ago
  I agree, for on/off a checkbox would work better
  - chefandy 3y ago
    Somtimes. Checkboxes work for "yes" or "no", but they're not idiomatic for other "a" vs "b" selections.
    - injidup 3y ago
      A checkbox should always have a label which should always be a question. The checkbox should be a tick not a cross. Then there is not ambiguity. Toggle switches should have two labels to the left AND right which are binary enumerations. yes (O----) no vanilla (----O) chocolate off(O----) on The problem is that designers with their bias towards animation and colors get it wrong. They do things like Turn on? (O----) And then toggle the color of the background between two different pastel shades which is aesthetically pleasing to the eye but delivers you halfway towards a reactor pile meltdown when the operator gets it wrong.
      - chefandy 3y ago
        Bad design != Design. UI design is a communication medium, like technical writing. Within a weekend of fiddling, damn near anyone can operate the tools to assemble interfaces, but that does not mean they are interface designers. Failing to use color to appropriately communicate actions or state and thoughtlessly applied labeling are the actions of graphic designers trying to make things look pretty, or developers do to make things look 'designed.' That happens all the time and is no more an indictment of UI design than wordpress sites running janky homespun themes made from copy-and-pasted tutorial code are an indictment of web development.
        injidup 3y ago
        > Failing to use color to appropriate communicate actions or state .... No no no and no again! Do not use color to to communicate actions or state unless that color can be used to statically differentiate between another color that is present in the UI at the same point in time. This is why syntax highlighting in code editors works because there is a state boundary between a word in one color and a word in another. It is why colors for toggle sliders indicating off and on do not work. What color is 'off' or 'go' or 'enable' or 'disable' or 'allow'. An animation of any type does not help and only adds CPU overhead and UI slowdown. Animations can be useful only if they assist in disambiguating a transition between states. For example transfer of an item to a different position in a list. If the item animates across the screen the eye is guided to the new position. A toggle slider does not have this issue and should transfer to the new state immediately and the most important design question is how to interpret the current state of the toggle not the animation between the two state.

deleted 3y ago

[deleted]

chefandy 3y ago

Do you have any support for anything you've said that isn't based entirely on your own assumptions and feelings about designers? > A dropdown with the words enabled/disabled indicating the state will always be better than a toggle with some subtle animation and colour signalling the state. Oh yeah way better except for not being able to see all of your options or even how many options there are without interacting with it, at least double the number of keystrokes to operate, more cognitive load to parse and operate, not being idiomatic for the interaction, etc. etc. etc. There are lots of uses that dropdowns work better for, but saying they're simply better is asinine.