cross-posted from: programming.dev/post/9907892
Toggles should not exist. They should be check boxes. Checked if “ON”, unchecked if “OFF” with a mouse over tooltip if there is any chance that it’s ambiguous.
Should a toggle button show its current state or the state to which it will change?
Submitted 8 months ago by starman@programming.dev to programming@programming.dev
Comments
calcopiritus@lemmy.world 8 months ago
SmartmanApps@dotnet.social 8 months ago
@calcopiritus @starman
Buttons/switches trigger an immediate action, whereas checkboxes usually do not (such as on a settings page, where no changes are applied unless you click "save").calcopiritus@lemmy.world 8 months ago
Never said nothing about a button. Toggles are just check boxes with a different aspect.
jeremyparker@programming.dev 8 months ago
The case that undermines your point is icon toggles, since they don’t need a label, but a checkbox does. For example, dark mode icon buttons: They usually show sun or moon icons, which hits OP’s point: if your in dark mode, and the button shows a moon, that would make sense – except the button doesn’t put you into dark mode, at that point it puts you into light mode, so, shouldn’t it show the sun?
calcopiritus@lemmy.world 8 months ago
In the specific case of a dark mode, it doesn’t matter since the whole aspect of the app changes. You could not label the individual states and it’d be fine.
Also, as soon as you add another theme it does no longer work, for a theme selector you need a drop-down selector which lists all the themes.
litchralee@sh.itjust.works 8 months ago
I agree with the accepted answer that a toggle button UI – when unadorned with any other indicators – should be avoided due to the ambiguity. The fact that this question is being asked is an indicator of non-uniform consensus.
In American English, the verb “to table” means “to remove from discussion entirely”, which is almost entirely the opposite meaning from English spoken anywhere else in the world, where it means “to bring forward for discussion”. As a result of this US-specific confusion, there’s not much choice besides either clarifying through context or avoiding sentence constructions using that verb, at least when speaking to or with other Americans.
I think the same applies here: the small UI space savings is not worth the inevitable UX confusion this would cause, without modifications.
lolcatnip@reddthat.com 8 months ago
“Sanction” is another great contranym. As far as I know, the meaning doesn’t even depend on dialect, just context.
GreyEyedGhost@lemmy.ca 8 months ago
There are a few words that are their own antonyms. You would think any at all would be too many…
Rentlar@lemmy.ca 8 months ago
My rule is if it’s a Verb, then what it will do: “Enable”, “Join/Leave”, “Turn on/off”
If it’s an adjective, noun or description of a state, then the condition is what is written. ON/OFF, Enabled, Joined/Left.
Phrodo_00@lemmy.world 8 months ago
If it’s a verb it should be a button, not a toggle
Pamasich@kbin.social 8 months ago
Depends on what the purpose of the button is.
A setting should show the current state, but an action (referring to the play button example) should show the state it'll transition to.
abhibeckert@lemmy.world 8 months ago
I disagree. I think both the current state and the state it will change to should be clearly labeled.
For example a good Play/Pause button is always combined with some sort of chart/animation showing that it is currently playing.
nxdefiant@startrek.website 8 months ago
I don’t know what a great one is but I have an example of a terrible one:
the green/black glue gun has the worst on/off switch I’ve ever encountered.
cosmic_skillet@lemmy.ml 8 months ago
Wow that’s terrible design
litchralee@sh.itjust.works 8 months ago
I’ve always wanted a power switch on my hot glue gun but after seeing that, I think I’m now perfectly fine with the existing situation, lest I monkey’s paw my way to an even worse implementation.
nxdefiant@startrek.website 8 months ago
to be fair, it’s a great glue gun, and the newer designs have fixed this issue by adding an indicator light.
Bitrot@lemmy.sdf.org 8 months ago
Typically such a switch would have a ridge on the “on” side to remove that confusion, if they didn’t label it outright. Pity if they neglected that too.
Rhaedas@kbin.social 8 months ago
Or a different "feel" when turned on vs. off (more resistance or something). They spent effort printing all that text to show where the switch was when a universal 0/1 would have made it clear.
I can't think of any example of a button or switch that by itself can be clear if it is engaged or not. A button could be assumed to be on if in, but that isn't always the case, like for example with emergency stops.
jadero@programming.dev 8 months ago
Knowing how a switch works in a circuit and how it’s typically represented in schematics, I would guess that moving the switch toward the body of the gun should be off.
But if actually placing a bet, I’d put my money on it being the other way.
nxdefiant@startrek.website 8 months ago
I carved “On” into mine, it’s exactly opposite of what you described.
AMDmi3@lemmy.world 8 months ago
Neither. A button should show action it performs.
ITGuyLevi@programming.dev 8 months ago
Personal opinion, but it should show a single state and if it is active.
GammaGames@beehaw.org 8 months ago
Why is this 13 year old stack overflow question being reposted
lambda@programming.dev 8 months ago
GammaGames@beehaw.org 8 months ago
That’s fair, I use toggles somewhat regularly in web dev and semantic ui has nice styling for them. Not as fancy as home assistant though, those are very clear!
SmartmanApps@programming.dev 8 months ago
DmMacniel@feddit.de 8 months ago
It should show the current state, just like a checkbox shows if its option is enabled, an input box its current value etc. Everything else doesn’t make sense.
BrianTheeBiscuiteer@lemmy.world 8 months ago
Without seeing an example I would’ve said a button (actual button, not a checkbox or slider) should show the future state. If a button says “Cancel” I would expect the state to go from a pending state to a cancelled state. Same with a button that says “Submit”. So if it’s some kind of toggle, like play/pause, I would think hitting ⏸️ means I’m currently playing and I want to pause.
DmMacniel@feddit.de 8 months ago
Buttons don’t show what is currently happening, but what action, with the provided user input via toggles, input boxes, checkboxes if any, should be taken. In your example, your Cancel Button should Cancel the transaction.
SmartmanApps@programming.dev 8 months ago
This would be correct if the post was about switches (which TBF many people made that mistake, including me initially), but it’s about buttons - buttons should show what action will result from clicking on them. e.g. “Cancel” on a button which is going to cancel your process. For a play/pause button it should show play if you’re paused (if I click on this it will start playing) and pause if you’re playing (if I click on this it will pause).
DmMacniel@feddit.de 8 months ago
oh yeah true, I was thinking of toggle buttons instead of buttons that keep their state/don’t release: like the formatting buttons (bold, italic, underline, …) in a word processor.