11 ms·
My pet peeve is the labeling of these things. 1)I'm going to give you an easy one to start. You see a toggle switch. It is set to on (probably - the little co
by seanhunter 4y ago
My pet peeve is the labeling of these things.
1)I'm going to give you an easy one to start. You see a toggle switch. It is set to on (probably - the little colour bar in the switch is coloured in).
It is labeled "Disable fnurbification".
Okay now what? Does "on" mean I'm going to be fnurbified? Does switching the switch disable the fnurbification so I actually have to switch it to "off"? No that's crazy. "on" means "disabled", cognative dissonance aside.
2) You see a toggle switch. It is set to on like before. It is labeled "Disable fnurbification".
We learned before that "on" meant "disabled", but that filled us with a vague sense of unease. For whatever reason we try toggling the switch. The text changes to just "Fnurbification"
Okay really now what? Is my fnurbification on? You try flicking the switch back. The colour fills in and the label changes to "Disable fnurbification" again. Okay what are we supposed to do?
What's happened is the designer has read a post on medium about accessibility and that screen readers don't read out the colour of the filled in part of a toggle switch, and has decided to help by changing the label when the state of the switch changes.
The problem is now the label could either be describing the current state or be describing what happens when you flip the switch. And there's really no way of knowing. I've seen this very often with the UX for boolean selectors where they use things like buttons rather than toggle switches. Does pressing the button do the thing it says on the label or does the label describe where we are now and pressing the button will reverse that? No way to be sure.
Postscript: Notice that whatever you decide is correct in the second case could change what you would do in the first case if the first type of selector is one that would change label when you toggle it.
- shreyshnaccount 4y agoA checkbox could have the same issues. Both ust represent binary state
- RobMurray 4y agoIt's very common for developers to make accessibility worse by doing things like this. I have seen things where the two states to a screen reader are something like: "disable foo toggle button pressed" and "enable foo toggle button not pressed". Why not just a checkbox labeled "foo"?
- chrismorgan 4y agoRelated reading, if people are wondering about switch accessibility on the web: https://w3c.github.io/aria-practices/#switch https://w3c.github.io/aria-practices/#switch
- deleted 4y ago[deleted]
- Terretta 4y agoBethesda (e.g. Fallout) are masters of the label as current state versus label as next state paradox. On Fallout 76's "PIP Boy" UI, button tips for things that toggle or rotate settings like "(X) Allow Friends Only" arbitrarily mix states and actions, in the same UI! That particular option is on the Private World creator and the only way to figure out which it is is to create a world and see who can join. There are many such examples with several buttons/action/states listed where some work one way and others the other. It's so bananas it's almost endearing.
- koonsolo 4y agoFor the second case the play-pause button has the same problem: what does the 'play' button mean? That it's currently playing, or that when you click it, it will play? Same with paused. Is it paused now or does it pause when I click it?
- xmcqdpt2 4y agoThat one wouldn't be confusing if people didn't attempt to save space by making it one button. The tape recorders, vcr and dvd players I've seen mostly have them on two different buttons: pause which stops the current recording or playback and separate play and record buttons. There is nothing confusing to PLAY / RECORD / STOP. Although I guess sometimes you have a joint pause play button especially on tv remotes and those ARE confusing. ETA: apparently HN doesn't like the pause button emoji so i had to use text.
- Sohcahtoa82 4y ago> ETA: apparently HN doesn't like the pause button emoji so i had to use text. HN doesn't like ANY emojis. Here's a smiling face, crying face, and elephant: You'll have to take my word for it that I actually put them in my comment.
- ilyt 4y agoIn 2000's the "is playing" would be just "button looks pressed in", and same for "is paused", but today designers hate usability.
- saiya-jin 4y agoAnother version of hell is a checkbox being replaced by 2 radio boxes. But on page load none is selected, so UX changed 2-state piece for 3-state one (a small win is if they are at least grouped together so only 1 can be selected).
- temp2022account 4y agoGood design is always hard to find, my personal solution would be a drop-down with the title: "fnurbification" and the options "Enabled" and "Disabled". More systems ought to be built like this, ambiguity is a black check for later economic loss.
- rr888 4y agofnurbification: Off [ O] On
- sinuhe69 4y agoFor me, it’s quite clear in the reading, though. You have to read as it presented (label + switch). For example: vSync ==> [On] vSync [Off] <== I honestly can’t think to read it otherwise. For the negative labeling, it’s of course unfortunate. But it’s in general the case for all negation. Thus, I try to avoid using negation when ever possible.
- Lendal 4y agoYou're mixing two different concepts. One is how to design a graphical gadget, which is a problem for front-end art work. Another is how a boolean variable should be implemented, a problem for your back-end logic. Computer-engineering ancient wisdom says always use positive logic. If you have a choice, never label a boolean something as 'disable', always 'enable'. Use positive logic, avoid negative logic.
- seanhunter 4y agoOf course. I’m not saying it’s good I’m describing stuff that I see widely in apps and sites I use. 3) You see a toggle switch. It is labeled “Fnurbification”. It is set to “off”. You want fnurbification. Do you flip the switch? As we’ve established in 1 & 2 if you know that flipping the switch won’t change the label then clearly the label describes the thing so you should flip it. If on the other hand flipping the switch is going to change the label then we’ve established that the label probably describes the current state. Flipping it would probably change the label to something like “Disable Fnurbification” and turn it off. So you should leave it off so fnurbification remains on. But this is your first time using this app. How do you know whether or not the label is going to change? You could toggle the switch, but what happens if the action of toggling the switch is expensive or safety-critical? 4) Let’s raise the stakes. You see a switch. It is set to off. It says “Nuclear reactor safety protocol”. You want a safe nuclear reactor don’t you? Do you switch on or leave it off?
- ilyt 4y agoThis should be just Fnurbification [ON|off] or Fnurbification [X] Maybe add some indication which is the default. Bonus points for actual context of the function when you hover over it. Checkbox is fine, toggle switch is also fine as meaning is clear in both cases. Every other solution should lead to whoever responsible for it being fired
- 4RealFreedom 4y agoThis can lead to additional problems. Say Fnurbification is a setting in code wrapped in an if block. Great, on or off is easy to follow. Now say the Disable Fnurbification is what is actually in code. Now, when someone has a problem with Fnurbification, you have to map state back and see that the inverse was coded for the IU and follow that down the stack. Don't even get me started on defaults. There is no good/easy answer here.
- jefftk 4y agoThere is an easy answer: "Disable Fnurbification" is not what should be in the code. Present the right interface to the user, and fix the code when practical. Presenting something backwards to the user only makes it harder to fix later.
- 4RealFreedom 4y agoI deal with hundreds of these types of selectors from some inherited code. When a disable changes 2 lines of code to wrap functionality in an if block v adding many scattered if blocks to accommodate the enable case, I'll probably go with the low code solution. If I can easily accommodate enables then sure but it's just not always that easy.
- jefftk 4y agoThis is just about what to call the variable. Instead of: if disable_foo: ... I'm recommending: if not enable_foo: ...
- 4y ago
- sebastianconcpt 4y agoGood point. Knowing how it ended is killing me, quick question, at the end did you got fnurbificated or not?
- shreyshnaccount 4y agoA checkbox could have the same issues. Both just represent binary state
- feintruled 4y agoImagining a meme of the sweating button push guy, only this time it's a single (lit) button and it's marked 'disable self-destruct'
- animuchan 4y agoThis is literally in Brave's settings: you see the "Block sites from autoplaying videos" and next to it, a switch that's turned off. And you think "Okay then, autoplay blocking must be off", but nope! Makes me a little less sane every time I use it, this UI.
- didntreadarticl 4y agoPeople worry too much about fnurbification, I find it doesnt make much difference at the end of the day
- hk1337 4y agoThat's like this function in this legacy code I am working on has an alert function for creating the bootstrap alerts with options like "dismissible_off" and "autohide_off" instead of just "dismissible" and "autohide", also they're just integer values (0 or 1) instead of boolean. I have to think about it way too much when I use it wondering if I have the setting correct.
- hermitcrab 4y agoI'm with you. I rarely know if the label refers to the current state or what will happen if I click it. Very confusing. Checkboxes are much better.
- mmcnl 4y agoFair enough, but this is also true for checkboxes.
- conradludgate 4y agoI used my partners samsung recently. I needed to receive a call on her phone. It was muted and I wanted to turn the volume on. In the settings drop down was a greyed out button with a volume icon and the text "Mute". Does clicking that enable the mute setting? Turns out that just means it is muted. Checking the button made it update the text to "Sound". Such an awful design IMO. It wouldn't be so bad if it was Mute <slider> Sound But that takes up far too much UI space in the settings dropdown intended for quick actions
- topicseed 4y ago200%. I find them "cute" so tried to use them in some internal tools with React. And.... I confused myself on this very exact issue you describe so I changed to a regular checkbox.
- jrs235 4y agoIsn't the 'easy' fix to have the label read "Fnurbification is on" and "Fnurbification is off"? Clarification: the label should toggle when the GUI toggle switch is toggled.
- seanhunter 4y agoFor sure, there are ways to not have it ambiguous. That said, people use this UX pattern all over the place, and sometimes I'm sure on purpose. Istr one iteration of facebook's data privacy and sharing dialogue used to have it. There was a switch called something like "Enable privacy protection" and you see it set to "off". So you switch it "on" and the label changes to "Disable privacy protection". So which one gives me the privacy protection?
- bentcorner 4y agoIMO labels should never change state. If you need explanatory text about what state the user is in, stick it below the checkbox. Privacy protection [ o-- ] Privacy protection is disabled. Other users can blah blah blah Privacy protection [ --o ] Privacy protection is enabled. Other users cannot blah blah blah
- Sohcahtoa82 4y agoI find it very hard to believe that the ambiguity isn't deliberate. I imagine at least 90% of people, upon seeing an option to enable privacy protection, would enable it. But by making the option confusing, you'll end up with people that want it on and inadvertently turn it off. It certainly wouldn't be Facebook's only dark pattern.
- naet 4y agoIt can be ambiguous as to whether the label describes the current state, or the future effect of pushing the toggle.
- IshKebab 4y agoNo, the label should always say what the toggle or checkbox does when it is enabled. If you want to make it extra extra clear (because so many apps have muddied the water by doing it wrong) you should probably put additional small text nearby that changes. Like this: [ ] Foo *Foo is disabled* [X] Foo *Foo is enabled* Also you should not have double-negative check boxes ("disable foo"). I'm not a UI designer but I think this is pretty obvious to anyone that has used bad checkboxes (like OP). (I don't think the problem is unique to slide toggles; I've definitely seen similarly bad checkboxes.)
- deleted 4y ago[deleted]
- somat 4y agoThere are two conflicting schools of thought that I suspect will never reconcile. the people who think the button should show what state it is in. and the people who think the button should show what state it will change to when activated.
- ilyt 4y agoIt's very easy to reconcile. If you have to have inverse logic in UI (which is wrong, but designers gonna design despise logic or usability), you can just have "Enable"/"Disable" but use other hint showing the current state, say paint the disabled ones red and enabled ones green . Non-default state should also be indicated
- mensetmanusman 4y agoAs a user who switches between apps and there isn’t consensus on this… it’s confusing as hell.
- naasking 4y agoFirst, checkboxes and toggles are not buttons, so that's a slightly deceptive way to describe it. If you use "checkbox" instead, it's immediately clear who's right: > and the people who think the [checkbox/toggle] should show what state it will change to when activated These people are wrong. The simplest thing should be the default and this adds extra indirection (projecting future state from current state), therefore it's not the simplest, therefore it's wrong. Unless of course you mean something strange by "activated".
- a9h74j 4y agoWell put. Could adding either the words: "Current state:" or "Action:" clarify this? With toggles, I'd almost rather see them aligned center with explicit state description to either side.
- denton-scratch 4y ago> two conflicting schools Three, apparently: there are the people (such as me) who think the button should "show" what it does when you click it. It shouldn't indicate anything else (except it's enabled/disabled state, i.e. whether you are allowed to click it). Button text should be constant. If you need an indicator, that should be another widget.
- janalsncm 4y agoThis UX headache turns into an evil dark pattern real quick when it’s combined with privacy toggles that are conveniently never defaulted to the way you would want them. The less cynical take is that you only ever interact with privacy controls when they’re wrong, and the subset of those which are confusing are the most salient.
- dspillett 4y ago> privacy toggles that are conveniently never defaulted to the way you would want them Or conveniently defaulted the way you want them, but with wording and other visual clues twisted in such a way to make you question that and maybe accidentally opt in.
- artificialLimbs 4y agoI've been winding down my Facebook over the past year or so. Unliking things, unfriending friends, and deleting posts. If you try to unfollow a page on Facebook, the "Unfollow this page" button is turned off, and you must turn it on/check the button (which changes it from gray to blue) to UNfollow the page. One of the many reasons I've been winding down my Facebook.
- mhitza 4y agoJust the other day I've encountered a cookie modal, where the enabled option was grayed out and when disabled it was colored. Only noticed this because the required cookies toggle was obviously on (though gray in color). For someone in a hurry (like we are all when dismissing those modals), you would expect to gray those out, which would actually make you opt-in to all those advertising cookies. Talk about dark patterns.
- Existenceblinks 4y agoI think it shouldn't include the redundant semantic in the label. [ ] fnurbification [x] fnurbification or [*enabled* | disabled] fnurbification [enabled | *disabled*] fnurbification Light up the active one.
- saagarjha 4y agoCheckboxes stay winning.
- numpad0 4y agoIt's not when desirability of fnurbification negatively correlates to other items, i.e. when following is normal config: [X] perform deconbinaturation [X] disable fnurbification [X] enable entrapollation ... in this case there is a reason to make it a "positive-disable".
- ilyt 4y agoNope, just mark which config is default and add tooltip explaining to user why it might need to be changed. Aiming for all options to be "on" or "off" is some pedantic nightmare that makes settings harder to navigate
- bentcorner 4y ago> Aiming for all options to be "on" or "off" is some pedantic nightmare that makes settings harder to navigate This probably stems from config files or in-app defaults where a feature is default-on and so the existence of a value means something is disabled. And then some dev comes along and mindlessly transcribes a bunch of boolean flags into a settings menu and here we are.
- Existenceblinks 4y agoThe latter generally works for sum type states.
- amelius 4y ago
- i_am_proteus 4y agoConsider the UI design from the perspective of someone whose goal is to make it less obvious for how the user can disable cookies, sorry, fnurbification, while still technically providing the user with the option to do so.
- saxelsen 4y agoI honestly always test this with with video chat Mute buttons. I feel like it is only recently that UX designers designed a way to show that you are muted that is different from the Mute switch, which is a complete guess as to what state you are in.
- seanhunter 4y agoVideo chat mute is one of the worst offenders. If I recall correctly MS Teams behaves the exact opposite of zoom using the same ux.
- climb_stealth 4y agoThank you for putting this into words! It gets worse when it is for handling destructive actions. And it is not clear which way it is or it isn't destroying things. Actual nightmare material.