News for hackers. Stuff that matters.
Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by IanCal on Thursday January 19, 2023 @03:51AM (#34438137)
I think a nicer framing is

Should this show the state or the action?

This gets messiest imo when it's a toggleable button like thing, or an unclear link. Buttons seem good candidates for "trigger an action", checkboxes instead suit "this is the state".

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by Gareth321 on Thursday January 19, 2023 @06:45AM (#34439296)
Simple solution: change the label on action.

"Flubber enabled" [toggle ON]

"Flubber disabled" [toggle OFF]

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by dusted on Thursday January 19, 2023 @07:12AM (#34439485)
Flubber enabled [X]

Flubber disabled [ ] <-- Does that mean that flubber is not disabled ?

Never touch the label, and never tell state outside of the checkbox:

Flubber [X] <-- Clearly, flubber is enabled.

Flubber [ ] <-- Obviously, there's no flubber.

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by godelski on Thursday January 19, 2023 @12:48PM (#34443228)
Wouldn't the confusion only exist if it was

Enable Flubber [X]

But not when labeled

Flubber Enabled [X]?

To me there problem here is understanding if the toggle is displaying a state or action because English is limited. But in the past tense version that is far less confusing because it clearly expresses that this is a state and cannot be an action (i.e. "Would you like to Flubber Enabled?" doesn't work nor does "Would you like to Enabled Flubber?" but "Would you like to Enable Flubber?" does). The "ed" matters as well as the word positions. The reason being is that the second word describes the state of the first which is why you can change it. In your example it is easy to understand with the checkbox but the thread at hand is about how toggle switches' visual appearance is confusing so your example is clearly not obvious (otherwise this thread wouldn't be on the front page). The idea of toggling the label means that there are now two indicators of __state__ that should verify one another and thus reduce confusion.

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by a9h74j on Thursday January 19, 2023 @12:59PM (#34443364)
Maybe stop using necessary "preceeding" verbs and actions to indicate state, but use explicit ON or OFF to match the desired result?

It is common in telling someone how to use a UX that they need to "disable" X or Y option, but, again, that is to say that the intended state is on or off.

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by orthoxerox on Thursday January 19, 2023 @07:14AM (#34439501)
"Flubber: disabled [__O] enabled"
Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by 4RealFreedom on Thursday January 19, 2023 @09:28AM (#34440603)
I really like that. Do you know of a site that does this today?
Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by Enginerrrd on Thursday January 19, 2023 @12:25PM (#34442939)
I've definitely seen a couple of cookie toggles that worked this way. But, i can't remember which ones off-hand.
Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by hnburnsy on Thursday January 19, 2023 @12:22PM (#34442892)
love it but you will see dark patterns like...

"UnFlubberize:disabled [__O] enabled"

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by IanCal on Thursday January 19, 2023 @07:04AM (#34439444)
I don't really like this as it's not clear to me until I use it that I see it's a changing label. I don't want to have to interact to discover what will happen if I do.

The toggle being off means it looks like "Flubber disabled: off" or "Flubber disabled: no" but it means "Flubber disabled: yes"

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by angoragoats on Thursday January 19, 2023 @09:01AM (#34440331)
This is the worst possible solution because you're now showing the state and the action simultaneously, arguably making it less clear about the meaning of the toggle.

The ARIA guidelines for switches even have a big warning about not doing this[1].

[1] https://w3c.github.io/aria-practices/#switch

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by fortran77 on Thursday January 19, 2023 @09:41AM (#34440764)
If I saw "Flubber Disabled" with a toggle next to it that was "off", I'd turn it "on" to enable the "Flubber Disabled" feature.
Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by mmis1000 on Thursday January 19, 2023 @06:56AM (#34439383)
I think checkboxes is 'the state to be if I click save'. I don't generally expect checkbox to change the state instantly if I don't click 'submit' or something similar.
Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by IanCal on Thursday January 19, 2023 @07:06AM (#34439454)
Interesting, I don't look at the same way - which is another reminder to me why good UX design is hard as my own interpretation of something as simple as a checkbox isn't universal.

On a similar note, I find it hard when I don't know if I need to save or submit.

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by scotty79 on Thursday January 19, 2023 @10:01AM (#34440998)
I'm also always looking for save button after I check some checkbox. Maybe that's why people move to toggles for changes that are immediate.

However when I make textual change and there's no save button I'm still confused.

There's no standard how to indicate imediate change in textbox.

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by mmis1000 on Thursday January 19, 2023 @10:14AM (#34441157)
I remembered that some sites use a small spinner on the edge of textarea or something similar to indicate "I am uploading your text to cloud / I am saving your text to disk".

I think it's a good design that tell users your changes are persisted "now" ?

And this can be probably applied to all options that take effects instantly.

Re:Ask HN: Why are toggle switches replacing checkboxes? Isn... by scotty79 on Thursday January 19, 2023 @11:11AM (#34441875)
Good idea about small save indicator on every change.

Another idea:

When you start typing textarea visually changes style to indicate editing. Once you leave it it changes style back to indicate that this new content is written.

Optionally additionally while editing small X icon might show up and clicking it might cancel the change instead of saving it.