12 ms·

Should toggle button show its current state or the state to which it'll change? (2010)

442 points by wscourge 3y ago

macspoofing 3y ago
Current state. Always current state.
jonplackett 3y ago
I demand EU legislation!
BLKNSLVR 3y ago
I agree with the conclusion, but would like to add that it should be obvious what the current state is, and what the state will change to when the toggle is changed; too often I have to change it in order to work out that I didn't need to change it. The point about play/pause is really interesting because it goes against the conclusion. However, it's following physical precedent that's well understood. It's also (usually) obvious when music or a movie is playing, so the button icon wouldn't even need to change for the user to understand what pressing it will do. This stands it separately to the toggle question, I think. Back to toggles and UIs, changing the colour of the toggle from light grey to slightly lighter grey is unhelpful in the extreme. Give me labels. If labels don't fit your motif then get better designers.
- Fluorescence 3y ago
  > However, it's following physical precedent that's well understood The physical precedent would be to show the behaviour as the button image (play) and then the depressed/undepressed visual state would show if the behaviour was active or not. Software designers didn't follow this and invented swapping between the play/pause icons causing this new confusion. Not for any user friendly reason, more because skeuomorphic 3d buttons went out of fashion. > It's also (usually) obvious The only virtue of indicating the state at all is for when you have a problem. Very common for audio at least (muted sound, unplugged headphones, linux audio drivers have become borked again... sigh). I still get that twang of cognitive dissonance when I see play/pause buttons and have to think about it and might just double toggle it anyway when I've got an issue because I can't be 100% sure what a pause button means.
- chatmasta 3y ago
  > it should be obvious what the current state is Yeah, I don't need to know which direction of my light switch means "on" (and in fact I don't know), because I can see whether the lights are on.
  - xamde 3y ago
    Unless there is an issue with either the light source or the power source. Muted/unmuted is also a pair where unmuted often does not equal "we can hear you"
- crazygringo 3y ago
  > Give me labels. If labels don't fit your motif then get better designers. That's unhelpful and unreasonable, particularly on mobile. There's no room on Spotify for labels behind every button, for instance. Not if you want room to show the cover art, which I do. It's not a question about "better designers" -- space constraints are real, and sometimes you really need things available at a single tap. I don't want shuffle to be buried behind a pop-up menu.
  - sitzkrieg 3y ago
    have you tried to use spotify with a screen reader lately?
    - crazygringo 3y ago
      Not being vision-impaired, no. Can you elaborate what your point is, since not having done so, I can't begin to guess?
  - IggleSniggle 3y ago
    I just opened Spotify on my iPhone mini, just to check, and I really have to disagree. Spotify has TONS of wasted space. Even when you do want to pull up the "extra" menus (which is frequent for me, since it seems like that's the only place to get to the album for a given song), they practically throw the space away. The hamburger menu can only fit two items on its list of 10, because they waste so much space. I'm sorry, but 10 options can easily all be visible simultaneously while still showing the current context of that menu (the song). But that ethos abounds. They hid all the controls, and make many of the controls that they do show ambiguous. Am I going to be shuffle-play on the queue? Is my queue currently autogenerating songs at its end or is it going to stop at the end of queue? And long presses / hovers provide zero extra information for what the unlabeled buttons mean / do. I'm pretty satisfied with Spotify UI on the whole, mostly because of how easy they make it to toss the currently playing song around to different devices and they handle shared control well, but I do wish it didn't require three taps and a scroll (in a context where it's not even obvious that scrolling is possible, because the list is so sparse that it doesn't look like there are any more items at the end) to get to an album, which is almost always the context in which I want to listen to a search result.
Waterluvian 3y ago
I can’t find it but one of my favourite designs was a switch with a “light” beside it that lit up when the state was “on.” The best thing was that it also solved the latency of an async operation. You’d click the switch which toggled, and then some moment later the light came on. It felt incredibly satisfying and gave confidence that yes, this interaction has done something.
- vsnf 3y ago
  Without seeing the design in question, I think this still demonstrates the ambiguity the post is discussing. Is the icon what will happen, or what is currently happening? Is it the state, or is it the action? Maybe this particular design was unambiguous, but the description of it isn't.
  - robinsonb5 3y ago
    If the light is beside the switch (rather than being the switch) then I'd say it clearly and unambiguously indicates the current state of whatever the switch operates? (A light also has the advantage of being a skeuomorph - much as those are now out of fashion - we all know how to interpret indicator lights in the real world.)
    - Waterluvian 3y ago
      > A light also has the advantage of being a skeuomorph Unless you’re my TV and it’s completely backwards for some reason.
      - Sindisil 3y ago
        The standby light on a TV in on for standby and off when viewing because a) it could be distracting and annoying for the extra LED to be shining while viewing in a darkened room, and b) the "on" state should be pretty obvious because of the stuff on the screen.
        3y ago
laserbeam 3y ago
The link should include a year in parantheses, as it's a 13 year old question.
- mapreduce 3y ago
  It has answers as recent as 2022 though and it could get more answers now that it is on HN. What's the accepted practice for putting year in parentheses for links like this that contain user-written content that could be much more recent than when the link was created?
  - mhb 3y ago
    > What's the accepted practice How about (2002-?)
derekp7 3y ago
This has been really frustrating to me lately with Microsoft Teams. If I'm in their app, the mute button is a microphone with a line through it (if mute is activated, i.e. if the mic is off). And the icon changes to a microphone without the slash over it to indicate that you are no longer muted. Makes sense. But if I join using the phone app on my phone, the same microphone with a line through it (that means you are muted on Teams) indicates that you are currently NOT muted, but you can use that button to activate mute. After pressing it, the icon is still a mic with the line, but it changes to a filled in background (reverse video). Is this because in one case, that button is a "mic on" button, but in the other it is a "mute on" button, using the same icon? And the button still does an OK job of indicating what state you are currently in, as long as you know what the button looks like in the opposite state (I always have to toggle the mute button a couple times to observe what paradigm the given app is using). I wonder if this is the price we pay for "flat UI", where designers are still figuring out design elements without a real-world reference to look back on.
- Kuraj 3y ago
  Man... That's one button where you really DON'T want to be confused
  - m463 3y ago
    I have a hardware button on my headset mic. Wish there were a hardware button for "accept cookie" or "yes send me email offers" dialogs to conquer the not clearness.
  - khana 3y ago
    [dead]
- the_other 3y ago
  There's a pretty interesting (to me) aspect of the mic indicator/controller problem: without direct visual feedback, you can't tell what mode your mic is in until _other people_ respond, or don't. It's a very laggy tool in terms of feedback even when it's "on". In fact, you often need to test it two or three times to be sure, because your fellow meeting members might have frozen, might just be thinking before they respond, etc It's quite different from, say, dark mode, which is pretty obvious when toggled on/off. So the feature benefits a lot from a visual indicator of current state regardless what you choose to do for the button. It's unsurprising people try to smudge the "state" and "control" together, for the mic more than many other controls.
6510 3y ago
I do keep doing it myself but combining multiple things into one button is a bad idea. What if the toggle action is just slightly delayed? What if the system is frozen, do you press toggle again? when do you know your click didn't register? Was freezing not annoying enough by it self?
- InCityDreams 3y ago
  Are you a British Postmaster?
knallfrosch 3y ago
The solution that reliably works are lots of switches on the same screen. The user extrapolates from a single known state. Mobile users might be confused about whether Auto-Rotate is on, but they do know whether Airplane mode is on.
- maicro 3y ago
  Mobile users shouldn't be confused about whether Auto-Rotate is on, because Auto-Rotate should always be off. /rant
mhb 3y ago
Using words often works. But let me chime in with some outrage about the icons on an Android tablet - a triangle, circle and square with no discoverability and no ability to add text to icons on the home screen? WTF?
- freitzkriesler2 3y ago
  Can you clarify what you mean for discoverability? As for the 2nd one, I would download a different launcher. I know Nova lets you do that.
  - mhb 3y ago
    I mean that it's impossible to discover what will happen when I push on them before I do it. I'll take a look at Nova. Thanks.
    - freitzkriesler2 3y ago
      Ah yeah I know what you mean. For what it is worth, they've been pushing a new gestures system that supercedes the old tool belt buttons. Not sure your tablet has that. And you probably know now, but just in case Triangle: back Circle: close Square: task manager
- teddyh 3y ago
  Sometimes called “Mystery meat navigation”.
- lupire 3y ago
  It takes 1 day to learn, to avoid years of extra clutter on the screen. But an option or a long press tooltip would be nice for special cases.
  - CamperBob2 3y ago
    Legibility isn't clutter. We moved away from hieroglyphics a long time ago because alphanumeric characters are objectively better.
deleted 3y ago
[deleted]
wodenokoto 3y ago
In defense of the ambiguity of digital toggles, I’d like to add that this is unsolved on most, if not all, physical light switches in homes and offices. Despite having existed for more than 50 years and most people are using multiple toggles a day with its labels, most people are unaware of the meaning of power symbol (https://en.m.wikipedia.org/wiki/Power_symbol https://en.m.wikipedia.org/wiki/Power_symbol)
- master-lincoln 3y ago
  Really? For me this always made intuitive sense reading it as one and zero, where zero would be off.
  - wodenokoto 3y ago
    You probably also work in IT and might even now what binary is not to mention what boolean means.
    - master-lincoln 3y ago
      fair point
  - CalRobert 3y ago
    It always seemed backwards to me, since a circle should represent a closed circuit
    - lupire 3y ago
      An open circuit would then be a C not a |
      - crazygringo 3y ago
        Those wouldn't be easily distinguishable though.
  - kragen 3y ago
resters 3y ago
A toggle button should show its current state. A checkbox is a good example. Muted [] vs Muted [x] It's pretty obvious. What gets tricky is when designers create UI that does not have as clear a connection between the word used and the visual design, such as: Mute Off [---( )] Mute On [( )---] I have no idea what either of these mean because they include the action in the description of the state.
- croes 3y ago
  A checkbox show both, the current state and the possibility in form of a simple yes/no option. A toggle button is confusing because I don't know the designers intention unless the button shows both options beside it Mute On[---()]Off
- sfn42 3y ago
  "Mute" "Unmute" I want a button to tell me what it does if I click it. If you want to show the current status that is a different thing, not a button. A button exists to be clicked, it should communicate what it will do if you click it.
  - NegativeK 3y ago
    Verbs, not nouns. Which means making sure that the verb form doesn't sound like the noun form.
  - navjack27 3y ago
    So, while the button is not interacted with (unmuted) and not hovered over you would like a mute button to be what? Would you like it to be black and white with a microphone symbol where the microphone is white and the background is black? When you hover your mouse over it should a no symbol in red appear over it which could appear black for color blind? When you toggle this mute button should that no symbol stay on the icon and invert all of the colors so now the background is white the microphone is black and the no symbol is white? I'm really confused by the concept of a button showing me what a button should do All of the time because if that button is showing me what the button should do then that button is indicating to me that that button is doing what that button is doing not what the button should be doing. That's why there is a hover over state if you're using a mouse things become more complicated when you're using touch which is why I think the button should not communicate what the button should do when interacted with but the current state.
serf 3y ago
I just want it to mimic the physical thing if it's going to mimic something at all. A push button toggle stays clicked in, or better yet clicked in and illuminated, to indicate that it's on. a traditional 2 way toggle exposes the state that its' in by the position of the knob relative to center. I mean anyone can flip states around behind the scenes, but if we're talking about a switch/wires/battery/light it all works out as supposed. Let's follow that example.
thinkmassive 3y ago
The Tesla app is horrible about this. What does a greyish padlock icon indicate? Let me tap it twice to cycle through states, then I’ll click once more if the original state needed to be toggled. If there’s any delay in the car’s response, prepare to complete another lock/unlock cycle, more slowly this time to be certain.
- tshaddox 3y ago
  It’s also inconsistent. From what I remember, the padlock toggle shows the current state (an unlatched padlock means the doors are unlocked, and pressing it will lock the doors), but the trunk button shows the opposite (an open trunk means the trunk is closed, and pressing it will open the trunk).
Agraillo 3y ago
The designers of everyday things also fall into this trap. My favorite example is the hammer drill, this kind should had the mode switch. I have a very decent device but implementing the same problem on/off approach showing and hiding the state. I almost always pause before choosing the right one. The example of the better design (mention in the stackexchange answers) is visible at the hammer drill polish wiki page: https://pl.wikipedia.org/wiki/Wiertarka_udarowa https://pl.wikipedia.org/wiki/Wiertarka_udarowa
- sojournerc 3y ago
  I have a welding mask with a "grind" mode that has the same issue. Not exactly something you want to get wrong when welding.
rjmunro 3y ago
The absolute worst example of this I have seen is the Tesla dashboard screen UI. It shows a car with labels on it, not buttons, that say "Open". That unambiguously means that the particular part is open. But that's not what it means. The labels are in fact buttons to open the parts, and you have no way of knowing.
- ljsprague 3y ago
  Is this peculiar to English? For instance, in Spanish, the verb and the adjective would be different words.
  - bckygldstn 3y ago
    Yes, it is unfortunate that in English the imperative conjugation ("open this door") is typically the same as the present participle verbal adjective ("this door is open"). In English you can also form an adjective from the past participle ("this door is opened"). Using "opened" resolves the ambiguity in one direction only: when you want the adjective. But when you want the verb you'd have to add context: perhaps "tap to open".
- dhc02 3y ago
  Yes! I was just driving a borrowed Tesla this weekend and several times I had a moment of confusion/panic because I thought the trunks were both open.
- actionfromafar 3y ago
  Can someone make a car which has none of the complicated stuff? List of features I want: - automatic transmission (if ICE) - bluetooth and FM radio - no self steering - cruise control with "follow speed" - not-batshit-insane self-brake-system (use whatever Volvo uses, it works!) - good airbags and decent structural integrity - classic sedan height
  - furyofantares 3y ago
    No, you can't get a car with exactly the feature set you specifically want and nothing more. This is because other people want a different feature set. It's even true of things that are vastly less expensive to produce than a car.
signaru 3y ago
It is forgivable if the wrong choice is not so harmful (e.g. play/pause a video) and the effect is reversible. There's an e-commerce website I use that has an option to post product reviews as anonymous with a "slide toggle" typical of mobile devices. The only feedback is after the review gets posted which cannot be undone. I just learned by experience, but it is always confusing to interpret.
bee_rider 3y ago
RIP Checkbox, 1990-2009, you were perfect and unambiguous but for some reason smartphone designers hated you.
- _0ffh 3y ago
  Right, or use a 3D look or colour or backlight effect to indicate when a toggle is active.
- denton-scratch 3y ago
  I agree that checkboxes are perfect; but that's because I never try to fill forms on a smartphone. Native browser checkboxes are often unusable on smartphones; too small to hit with a thumb.
  - bee_rider 3y ago
    True. It seems like an odd historical problem though. We could just render checkboxes bigger or with more white space around them, and make the touch area bigger in any case.
    - denton-scratch 3y ago
      Sure, you clould just fix checkboxes. But then you have to deal with select boxes, which also work badly on smartphones. Then you have the modern smartphone-driven practice of using multipart forms, with one field on each part. You can't see the whole form at once; you eventually find out that the very last field is a date-field with three badly-behaved drop-downs that you can't interact with. I just don't try to fill forms on my smartphone. In fact I only use it as a (shock!) phone.
  - lowboy 3y ago
    The checkbox label is often my thumb’s target. A pox on the house of any dev who doesn’t properly use a _for_ attribute.
  - mywittyname 3y ago
    Properly designed, the tapping/clicking the text should also trigger the checkbox.
rconti 3y ago
There are a number of ways to get this wrong. The shuffle button in Spotify on our Tesla is a grey color, and you have to wonder if it's dark ENOUGH a grey to indicate that it's on, or a light grey to indicate that it's off. So then you go to toggle it on and off to see the state change, but actually it's buggy so it doesn't do anything. When you finally get it to toggle on, you realize the shuffle lines turn GREEN, not dark grey like most of the controls. facepalm
- qingcharles 3y ago
  Also, the problem with buttons like this is that the shade of grey depends on the angle you're looking at the screen, so you end up moving your head around trying to figure out if it is actually on or off.
- 1letterunixname 3y ago
  Some UI designers do not understand design, e.g., affordances.
- lamp_book 3y ago
  Worse yet, Spotify abruptly added a third option, Smart Shuffle, to their shuffle sometime in the past year or so. So now you gotta hit the button twice to go from shuffle to no shuffle, and once to go no shuffle to shuffle. This is for their mobile and desktop apps I mean. They gotta have some of the worst UX of newer consumer tech companies.
lopkeny12ko 3y ago
Why not just use a checkbox? Is anyone here a designer with a serious answer to this?
- bandergirl 3y ago
  Cuz they ugly The dribblization of UI lead to a bunch of people trying to make things pretty for their own benefit. Then they look at it in Figma and it looks absolutely stunning. Never mind that actually needs to be understood and used by someone, that’s irrelevant. Just today I saw a HSL color slider on Twitter that was a single hue slider with two half-arc sliders on the main slider’s handle: one above for saturation, one below for lightness. It sounds like a joke but… https://twitter.com/jh3yy/status/1756429165803246028 https://twitter.com/jh3yy/status/1756429165803246028
- tweakimp 3y ago
  I think toggle switches are newer and therefore designers think they are more fancy to use.
- koito17 3y ago
  I am not a designer, but I've always heard that the difference between checkboxes and toggles is that toggles are expected to immediately produce side effects whereas checkboxes aren't. That is to say, clicking on a checkbox shouldn't immediately mutate some state, whereas activating a toggle should.
- datavirtue 3y ago
  No such thing as a "designer." They are less credentialed than a "software engineer."
syngrog66 3y ago
show an arrow from Now to Next state kids: get off my lawn. lol
taeric 3y ago
I'm surprised we are still iterating on ideas like this, to be honest. Seems flight decks have been rather successful on complicated dashboards for a long time. Same with boats. Why can we take approximately no lessons from them?
- sitzkrieg 3y ago
  overpriced ux designers
- spyke112 3y ago
  Perhaps what we do on a pc is not really that complicated or critical compared to flying a plane or steering an oil tanker. Just a thought.
  - taeric 3y ago
    I mean, sure? But, to that point, why discuss the conventions? If the goal is to have a predictable interface, it seems fair and in scope to study larger interfaces that people have to read quickly.
    - spyke112 3y ago
      Don’t get me wrong I actually agree with you. I’d also love to have more consistent ui’s, but at the same time I get why the business wants to differentiate it self from the competition by not having a super effective “boring” ui. What I’m getting at is that it’s a lot more nuanced than what I as a software developer might like.
  - deleted 3y ago
    [deleted]
- ZitchDog 3y ago
  The interfaces you are talking about require years of training, study and passing multiple tests to demonstrate proficiency. In software UX we are talking about discoverability and approachability for the untrained operator.
sponaugle 3y ago
I have some old NASA push button switches that have two bulbs in them. When the switch is off both lights are off, when you click the switch the yellow bulb comes on and lights up the switch, and when the device you turned on actually turns on a green light turns on ( and the yellow turns off ). The idea is you push the button and the yellow state is the confirmation that you toggled the switch, but the green is the confirmation that the action you wanted occurred. Kind of an interesting 'state feedback' mechanism.
- 2OEH8eoCRo0 3y ago
  I like it. Why doesn't our "industry" look at aviation/military more often where miscommunication gets people killed.
  - ajmurmann 3y ago
    I think the answer is that "looking pleasant" is much more of a goal for commercial software. In usability terms the much denser GUIs of the 90s were arguable better in some ways than what we frequently see today, especially for power users.
    - kfarr 3y ago
      Yes just like the design of car infotainment systems -- looking good resulted in the touch screen era. Luckily we're finally realizing our mistake and a few automakers are putting old school knobs back in.
  - deleted 3y ago
    [deleted]
- kqr 3y ago
  This is a good one, and also what airplanes do[1]. These problems are solved by people who care a lot about usability, but computer people are slow to pick up this sort of stuff from other fields. Labels outside the switch also work.[2] [1]: https://my737ng.com/wp-content/uploads/2014/08/cp_mcp_header-1024x568.jpg https://my737ng.com/wp-content/uploads/2014/08/cp_mcp_header... [2]: https://i.pinimg.com/originals/2c/37/0a/2c370a3f4018cfa9c3ef7720454414e4.jpg https://i.pinimg.com/originals/2c/37/0a/2c370a3f4018cfa9c3ef...
mjamesaustin 3y ago
For an interface with hover interaction, a toggle button should show its current state by default and then on hover show the state it will switch to. This design pattern affords discoverability through safe interaction with the element. Unfortunately that design pattern fails for touch interfaces, which increasingly are our primary method of interaction.
wforfang 3y ago
Tesla makes this mistake with their ambiguous "lock" button on the iOS app. The button toggles between an open/closed padlock icon. I often lock the doors remotely and since I can't physically see the car to confirm, I get paranoid about whether the icon is representing state or action.
lxe 3y ago
We had radio buttons forever, but no, let's complicate things.
Macha 3y ago
This is a problem for forms where companies are legally required to follow the users instructions but may not want to. I find myself not trusting them to not pick deliberately unintuitive interpretations. Think the kind of designer that comes up with "check this box to receive transactional emails but not marketing emails", when an unchecked box leads to marketing and transactional emails.
alpaca128 3y ago
The only two good suggestions I saw were radio buttons as well as toggles with labels on the left & right (so basically two merged radio buttons). I think the play/pause button in media apps is an acceptable exception simply because it's obvious whether it's playing or not - you could even use it without recognizing the symbol, if music is playing you know a click will pause it.
apapapa 3y ago
I don't know how developers manage to make simple toggle switches confusing and it makes me scared of their code but sometimes I think it's done on purpose as a dark pattern (when you unsubscribe to spam for example)
- datavirtue 3y ago
  Unsubscribe....lol Inbox rule: body:"unsubscribe" -> move to Delete.
  - apapapa 3y ago
    That's a good one
User23 3y ago
UX novelty for its own sake is annoying. Just use a checkbox.
1970-01-01 3y ago
There should be no ambiguity here! A toggle button is an analogue for a physical switch. Unless the switch state is dependent on other switches, it must always display its current state. i.e. ENABLED is always true unless POWER is OFF.
- kortex 3y ago
  There is ambiguity in the physical world. Some audio equipment have what's called a ground lift. It physically disconnects the ground conductor between two devices, and it's usually a single push-toggle in/out button. I've seen some devices with "Ground On/Off" - does that mean grounded (not lifted) or not grounded (lifted)? IIRC one of the DI boxes I've used is the opposite of what you'd expect - "Off" means lift is off, meaning ground loop is connected. The sensible devices have two states "Lift/Gnd".
  - 1970-01-01 3y ago
    That is a poor design choice. VERB STATE TRUE is standard for every toggle switch on all my hardware, including prosumer amps. Changing this can be deadly, and was found to be part of the reason for the 737 MAX going down in 2019: https://www.seattletimes.com/business/boeing-aerospace/boeing-altered-key-switches-in-737-max-cockpit-limiting-ability-to-shut-off-mcas/ https://www.seattletimes.com/business/boeing-aerospace/boein...
ww520 3y ago
I usually make a toggle button reflects its current state and shows the next state in some other way, like in the hover over tooltip or small subscript text. That means a toggle updates two things, the button itself and the tooltip.
mrighele 3y ago
The main issue with toggle buttons is that you have an object that at the same contain the state of the system and the action to change it. The consequence is that it is not clear if the "ON" that you see on it is the current state (so pressing on it will turn it to "OFF"), or the action that you will invoke when you press it. The solution is to separate (part of) state and action, and this can be done in a few ways. One possibility is to do like one of the answers in the link suggests, and write the label _outside_ the button. If you don't have a switch but a toggle button (like the teams example in some other comment), leave the icon alone, and change some other properties of the button (for example leaving it pressed to signal the "ON" state, like it has been done for decades without any issue....)
- vleaflet 3y ago
  System sound properties in Windows 11 has an option "Allow apps and Windows to use this device for audio" and a button labeled "Don't allow" next to it. So what is the current state? I have no idea.
tootie 3y ago
The top answer references About Face 2.0 which I read at the time and it's still probably the best book on user experience design. I think there's newer editions, but the principles it laid out were really the fundaments that I still live by.
brudgers 3y ago
Yes. Or both...like a real world toggle switch. Or have user configurable behavior (an idea that seems to be mostly out of fashion among designers...get off my lawn).
continuational 3y ago
I think the iOS switch controls are pretty easy to read, even though the only real clue to the state is that off is gray and on is colored.
SkyMarshal 3y ago
Should show both, just as analog switches do. You want it to clearly unmistakably show the current state, but also the state to which it will change. Apple has really nailed that with its sideways slider toggles. You can clearly see where the toggle is currently, what it will change to, and whether the current setting has made some feature active (blue background inside the slider) or inactive (grey background inside the slider).
johnea 3y ago
It should display the current state, of course. Because when it's not being clicked, it is a status indicator...
croes 3y ago
>Flip-flop button controls are very efficient.They save space by controlling two mutually exclusive options with a single control. Compared to what? Definitely not a checkbox. The problem of a checkbox is just it's not very visually appealing but pretty good on carrying zhe necessary information.
pcwelder 3y ago
The second answer is the only correct solution.
DanHulton 3y ago
Easy. It should be a checkbox. (If checkboxes are unavailable in your design system, you should have an unambiguous label next to it saying "On" or "Off", or better, describing the current state of the system in the terminology of the system, like "Background Noise Cancellation Enabled". But having a control label and a status label _should_ be a clue that you should just be using a checkbox.)
unsupp0rted 3y ago
When disambiguation matters, I always default to a label that says “press to ~”.
MattGrommes 3y ago
One of the worst cases of this is the 'Airplane mode' toggle on a Kindle. Airplane mode turns off wifi but the icon is an airplane that says 'On' when airplane mode is on. When you click it, it turns to 'Off'. But what you really want to do is turn the wifi off and on, which is the opposite of the icon. 'On' means the wifi is off, 'Off' means the wifi is on. Terrible.
- zamadatix 3y ago
  Airplane mode status and Wi-Fi status are separate statuses. Airplane mode can be on and it tells you nothing one way or the other about the actual state of Wi-Fi. This ultimately comes down to some Kindles being like phones and having more than 1 radio where you may want airplane mode on except for the Wi-Fi radio if you plan on using in flight Wi-Fi. Airplane mode is a convenience to conserve battery during a flight. If you judge it by how well it acts as a universal radios on/off switch it will measure accordingly.
thih9 3y ago
It also works if the button is not labeled, as long as the state is clearly visible in the environment and the link is clear. Consider the light switch - if there’s just one, it’s the best UI ever. You know what to do to turn the lights off, just flip the closest switch. Obviously if there’s more than one then it’s the worst UI ever. Another example, a smartphone’s side button (screen on/off).
layer8 3y ago
This wasn’t an issue when buttons were 3D. They had an icon (or text) indicating what they activate, and were rendered depressed when active and raised when inactive. Some color could optionally be added to the icon to reinforce the active state.
brianstorms 3y ago
Any Tesla owner can relate to this, given the wide variety (read: no consistency, no standards) of toggle buttons the car's UI utilizes. For one, the HVAC. One button, showing temperature, which upon touched the system will react differently to depending on how you touch it and for how long. Touch it briefly, you get a little popup. Touch it slightly longer, and (hopefully, not guaranteed though) you get a bigger panel with full HVAC controls. Touch and hold for a couple seconds, and (hopefully, not guaranteed though) you turn off the HVAC if it's on. ALL WHILE YOU ARE DRIVING AND SUPPOSED TO WATCH THE ROAD. And if your hand/eye coordination is slightly off (and hey, when you're driving, going over bumps, etc, it very likely is) if you mis-aim by even a millimeter, you may touch another button and not realize it and do something unintended. Another disaster: Tesla's entire connect-a-Bluetooth-device UX is one of the worst mishmashes of disastrous UI design I have ever seen in a shipping product, at least the 2012-2022 Model S implementation. Just one example, a button label down at the bottom right that still says "Connect" long after the device is already connected, but meanwhile elsewhere on the opposite side of screen, up top at the left, that says "Connecting..." then indicates the connection is made. All this in a UI that you only have a split second to glance at because it's in a CAR and you very well might be DRIVING. The Tesla Bluetooth UI could fill an entire chapter of a book on UI, it is so magnificently bad. Maybe I should write it.
- sgustard 3y ago
  Tesla's mobile app features inconsistent toggles right next to each other! - A closed padlock means the doors are locked. Tapping it unlocks the doors. - The word "Open" on the trunk means the trunk is closed. Tapping it opens the trunk.
  - brianstorms 3y ago
    Yes, so true! The inconsistencies and non-standardization continues in Tesla's mobile app. There are many other examples there too.
  - uptime 3y ago
    Yes, so bad. Those buttons do a poor job of allowing action and showing state at the same time - they only use one property (icon no color or slash etc.) Also click-and-hold with or without haptics is not obvious. I was stabbing at the Tesla screen to activate defrost in a snow storm. I had to call the owner to figure out why it would not activate. I really like the 3 but you cant just hop in and go without some prep.
avgcorrection 3y ago
Not directly related but Bitbucket cloud has made some recent update where they started prioritizing reviewers over submitters in pull requests. One change is that you by default get the “I’m reviewing” filter turned on by default. Which I have to turn off most of the time. Anyway, sometimes I try to turn it off but then it is toggled (it was off). What’s going on? Well, the normal interface is that it’s a combobox where no-text means no filter—that’s where the I’m Reviewing by-default resides. But on a slightly different pull request view—which looks almost the same—the UI element is the same kind of thing... except here the combobox gets a black background when toggled! And the default is to show some option like I’m Reviewing but on a white background, which means not-toggled…
e40 3y ago
Google's Youtube TV. The UI infuriates me. To this day I can't remember which state the toggle is in. I do know it's the opposite to every other app on my Apple TV.
ok123456 3y ago
Use a skeuomorphic toggle switch modeled off a PDP-8/e panel toggle switch.
riwsky 3y ago
I go back and forth on this one
mathgradthrow 3y ago
In means yes out means no, avoid double negatives.
p1mrx 3y ago
When I designed a lock/unlock button for my app, I added an arrow to indicate what action occurs when you click the button: https://www.youtube.com/watch?v=9MZmwkn-2rw&t=117s https://www.youtube.com/watch?v=9MZmwkn-2rw&t=117s For an unmute button, you could have a microphone with a line through it, and an arrowhead indicating that clicking the button will remove the line. Then the mute button could show a microphone with an arrowhead pointing inward from the corner, indicating that a line will be drawn.
mark_undoio 3y ago
I once worked on an Optical Image Stabilisation system for mobile phones. I'd updated the stock Android camera app to show some icons from marketing for when the shake compensation was on / off. The icon for when compensation was on was a shaky camera. When it was off, it was a shaky camera with a line through it... Except, we asked, wouldn't the other way round make more sense? Doesn't line through shaky camera suggest we're removing the shake? We ended up using the icons and just colouring them green for "on" and red for "off" and hoping people would figure out what we meant. And, yes, that would still be unhelpful for colour blind users! User interfaces are hard.
- ClassyJacket 3y ago
  This is why this kind of thing should have text (with or without an icon). Just tell me what you're trying to communicate. Yeah I know you have to translate it for other languages, but Microsoft, Samsung, et cetera should be able to afford that. I hate that Windows 11 has regressed on this.
Razengan 3y ago
This has been one of my biggest eternal dilemmas in UI/UX/programming! • The ideal would be to show both states: "Muted → Unmute" on the button label. Click it and it becomes "Unmuted → Mute". If there isn't enough space, maybe just add a " → " at the end to denote that the displayed state will change to something else when you click on it. • Or just make it look like a physical electric switch with "On" & "Off" printed on opposite sides. • or a hover effect: "Muted" or [Crossed Microphone Icon] becomes "Unmute" / [Microphone Icon] when you hover the mouse or hold the finger on it. The icon should also change color between red/green or dim/lit to further emphasize the actual state.
wmidwestranger 3y ago
There doesn't need to be an either/or if you give the toggle twice the space, just like a physical toggle. With the added space, you can show the states are related, which state is currently selected, and which alternate state will become current after the change. The real problem seems to be nobody cares about actual ui-design for human use but something that'll look good when you show the boss.
wly_cdgr 3y ago
We should use the world's national emergency alert systems to conduct a poll of as large a percentage of the world population as possible, and whichever option wins the poll, we should go with that one. Of course, no one will agree about which state is which,...
low_tech_punk 3y ago
False dichotomy. Toggle buttons should show both and visually indicate the state by proximity cue. But there is usability vs aesthetics trade off. I think Microsoft design systems (seen in Windows, Edge, Office products) only shows the active state probably because it’s easier to align toggle buttons flush when text is only on one side. If you display texts on both sides, the unpredictable text length would make the button area difficult to align.
Nifty3929 3y ago
Another issue with toggles is idempotency. If I click the button, there is always some lag and some chance that the underlying system state has not changed. I might want to click the button again to reinforce my desired change, but with a toggle there's not really a way to do that. If I click it again, the system would likely revert back to it's original undesired state. Like when you want to copy something, but Ctrl-C is unreliable, so you Ctrl-C,C,C,C to make extra sure. I want one button for each state, so that I can click it several times if required.
DigitallyFidget 3y ago
It should always show its current state. If a button is doubling as a status display, it needs to display current status, that's the entire point of a button doubling as displaying information. Would you flip a breaker to the "ON" position in order to turn it off, or would you expect the breaker to display its current state of being ON/OFF?
swingingFlyFish 3y ago
When you save something for example to a folder. Is the save icon coloured or not? This is isn't rocket science. It should show it's current state.

442 points by wscourge 3y ago

macspoofing 3y ago

Current state. Always current state.

jonplackett 3y ago

I demand EU legislation!

BLKNSLVR 3y ago

I agree with the conclusion, but would like to add that it should be obvious what the current state is, and what the state will change to when the toggle is changed; too often I have to change it in order to work out that I didn't need to change it. The point about play/pause is really interesting because it goes against the conclusion. However, it's following physical precedent that's well understood. It's also (usually) obvious when music or a movie is playing, so the button icon wouldn't even need to change for the user to understand what pressing it will do. This stands it separately to the toggle question, I think. Back to toggles and UIs, changing the colour of the toggle from light grey to slightly lighter grey is unhelpful in the extreme. Give me labels. If labels don't fit your motif then get better designers.

Fluorescence 3y ago
> However, it's following physical precedent that's well understood The physical precedent would be to show the behaviour as the button image (play) and then the depressed/undepressed visual state would show if the behaviour was active or not. Software designers didn't follow this and invented swapping between the play/pause icons causing this new confusion. Not for any user friendly reason, more because skeuomorphic 3d buttons went out of fashion. > It's also (usually) obvious The only virtue of indicating the state at all is for when you have a problem. Very common for audio at least (muted sound, unplugged headphones, linux audio drivers have become borked again... sigh). I still get that twang of cognitive dissonance when I see play/pause buttons and have to think about it and might just double toggle it anyway when I've got an issue because I can't be 100% sure what a pause button means.
chatmasta 3y ago
> it should be obvious what the current state is Yeah, I don't need to know which direction of my light switch means "on" (and in fact I don't know), because I can see whether the lights are on.
- xamde 3y ago
  Unless there is an issue with either the light source or the power source. Muted/unmuted is also a pair where unmuted often does not equal "we can hear you"
crazygringo 3y ago
> Give me labels. If labels don't fit your motif then get better designers. That's unhelpful and unreasonable, particularly on mobile. There's no room on Spotify for labels behind every button, for instance. Not if you want room to show the cover art, which I do. It's not a question about "better designers" -- space constraints are real, and sometimes you really need things available at a single tap. I don't want shuffle to be buried behind a pop-up menu.
- sitzkrieg 3y ago
  have you tried to use spotify with a screen reader lately?
  - crazygringo 3y ago
    Not being vision-impaired, no. Can you elaborate what your point is, since not having done so, I can't begin to guess?
- IggleSniggle 3y ago
  I just opened Spotify on my iPhone mini, just to check, and I really have to disagree. Spotify has TONS of wasted space. Even when you do want to pull up the "extra" menus (which is frequent for me, since it seems like that's the only place to get to the album for a given song), they practically throw the space away. The hamburger menu can only fit two items on its list of 10, because they waste so much space. I'm sorry, but 10 options can easily all be visible simultaneously while still showing the current context of that menu (the song). But that ethos abounds. They hid all the controls, and make many of the controls that they do show ambiguous. Am I going to be shuffle-play on the queue? Is my queue currently autogenerating songs at its end or is it going to stop at the end of queue? And long presses / hovers provide zero extra information for what the unlabeled buttons mean / do. I'm pretty satisfied with Spotify UI on the whole, mostly because of how easy they make it to toss the currently playing song around to different devices and they handle shared control well, but I do wish it didn't require three taps and a scroll (in a context where it's not even obvious that scrolling is possible, because the list is so sparse that it doesn't look like there are any more items at the end) to get to an album, which is almost always the context in which I want to listen to a search result.

Waterluvian 3y ago

I can’t find it but one of my favourite designs was a switch with a “light” beside it that lit up when the state was “on.” The best thing was that it also solved the latency of an async operation. You’d click the switch which toggled, and then some moment later the light came on. It felt incredibly satisfying and gave confidence that yes, this interaction has done something.

vsnf 3y ago
Without seeing the design in question, I think this still demonstrates the ambiguity the post is discussing. Is the icon what will happen, or what is currently happening? Is it the state, or is it the action? Maybe this particular design was unambiguous, but the description of it isn't.
- robinsonb5 3y ago
  If the light is beside the switch (rather than being the switch) then I'd say it clearly and unambiguously indicates the current state of whatever the switch operates? (A light also has the advantage of being a skeuomorph - much as those are now out of fashion - we all know how to interpret indicator lights in the real world.)
  - Waterluvian 3y ago
    > A light also has the advantage of being a skeuomorph Unless you’re my TV and it’s completely backwards for some reason.
    - Sindisil 3y ago
      The standby light on a TV in on for standby and off when viewing because a) it could be distracting and annoying for the extra LED to be shining while viewing in a darkened room, and b) the "on" state should be pretty obvious because of the stuff on the screen.
      - 3y ago

laserbeam 3y ago

The link should include a year in parantheses, as it's a 13 year old question.

mapreduce 3y ago
It has answers as recent as 2022 though and it could get more answers now that it is on HN. What's the accepted practice for putting year in parentheses for links like this that contain user-written content that could be much more recent than when the link was created?
- mhb 3y ago
  > What's the accepted practice How about (2002-?)

derekp7 3y ago

This has been really frustrating to me lately with Microsoft Teams. If I'm in their app, the mute button is a microphone with a line through it (if mute is activated, i.e. if the mic is off). And the icon changes to a microphone without the slash over it to indicate that you are no longer muted. Makes sense. But if I join using the phone app on my phone, the same microphone with a line through it (that means you are muted on Teams) indicates that you are currently NOT muted, but you can use that button to activate mute. After pressing it, the icon is still a mic with the line, but it changes to a filled in background (reverse video). Is this because in one case, that button is a "mic on" button, but in the other it is a "mute on" button, using the same icon? And the button still does an OK job of indicating what state you are currently in, as long as you know what the button looks like in the opposite state (I always have to toggle the mute button a couple times to observe what paradigm the given app is using). I wonder if this is the price we pay for "flat UI", where designers are still figuring out design elements without a real-world reference to look back on.

Kuraj 3y ago
Man... That's one button where you really DON'T want to be confused
- m463 3y ago
  I have a hardware button on my headset mic. Wish there were a hardware button for "accept cookie" or "yes send me email offers" dialogs to conquer the not clearness.
- khana 3y ago
  [dead]
the_other 3y ago
There's a pretty interesting (to me) aspect of the mic indicator/controller problem: without direct visual feedback, you can't tell what mode your mic is in until _other people_ respond, or don't. It's a very laggy tool in terms of feedback even when it's "on". In fact, you often need to test it two or three times to be sure, because your fellow meeting members might have frozen, might just be thinking before they respond, etc It's quite different from, say, dark mode, which is pretty obvious when toggled on/off. So the feature benefits a lot from a visual indicator of current state regardless what you choose to do for the button. It's unsurprising people try to smudge the "state" and "control" together, for the mic more than many other controls.

6510 3y ago

I do keep doing it myself but combining multiple things into one button is a bad idea. What if the toggle action is just slightly delayed? What if the system is frozen, do you press toggle again? when do you know your click didn't register? Was freezing not annoying enough by it self?

InCityDreams 3y ago
Are you a British Postmaster?

knallfrosch 3y ago

The solution that reliably works are lots of switches on the same screen. The user extrapolates from a single known state. Mobile users might be confused about whether Auto-Rotate is on, but they do know whether Airplane mode is on.

maicro 3y ago
Mobile users shouldn't be confused about whether Auto-Rotate is on, because Auto-Rotate should always be off. /rant

mhb 3y ago

Using words often works. But let me chime in with some outrage about the icons on an Android tablet - a triangle, circle and square with no discoverability and no ability to add text to icons on the home screen? WTF?

freitzkriesler2 3y ago
Can you clarify what you mean for discoverability? As for the 2nd one, I would download a different launcher. I know Nova lets you do that.
- mhb 3y ago
  I mean that it's impossible to discover what will happen when I push on them before I do it. I'll take a look at Nova. Thanks.
  - freitzkriesler2 3y ago
    Ah yeah I know what you mean. For what it is worth, they've been pushing a new gestures system that supercedes the old tool belt buttons. Not sure your tablet has that. And you probably know now, but just in case Triangle: back Circle: close Square: task manager
teddyh 3y ago
Sometimes called “Mystery meat navigation”.
lupire 3y ago
It takes 1 day to learn, to avoid years of extra clutter on the screen. But an option or a long press tooltip would be nice for special cases.
- CamperBob2 3y ago
  Legibility isn't clutter. We moved away from hieroglyphics a long time ago because alphanumeric characters are objectively better.

deleted 3y ago

[deleted]

wodenokoto 3y ago

In defense of the ambiguity of digital toggles, I’d like to add that this is unsolved on most, if not all, physical light switches in homes and offices. Despite having existed for more than 50 years and most people are using multiple toggles a day with its labels, most people are unaware of the meaning of power symbol (https://en.m.wikipedia.org/wiki/Power_symbol https://en.m.wikipedia.org/wiki/Power_symbol)

master-lincoln 3y ago
Really? For me this always made intuitive sense reading it as one and zero, where zero would be off.
- wodenokoto 3y ago
  You probably also work in IT and might even now what binary is not to mention what boolean means.
  - master-lincoln 3y ago
    fair point
- CalRobert 3y ago
  It always seemed backwards to me, since a circle should represent a closed circuit
  - lupire 3y ago
    An open circuit would then be a C not a |
    - crazygringo 3y ago
      Those wouldn't be easily distinguishable though.
- kragen 3y ago

resters 3y ago

A toggle button should show its current state. A checkbox is a good example. Muted [] vs Muted [x] It's pretty obvious. What gets tricky is when designers create UI that does not have as clear a connection between the word used and the visual design, such as: Mute Off [---( )] Mute On [( )---] I have no idea what either of these mean because they include the action in the description of the state.

croes 3y ago
A checkbox show both, the current state and the possibility in form of a simple yes/no option. A toggle button is confusing because I don't know the designers intention unless the button shows both options beside it Mute On[---()]Off
sfn42 3y ago
"Mute" "Unmute" I want a button to tell me what it does if I click it. If you want to show the current status that is a different thing, not a button. A button exists to be clicked, it should communicate what it will do if you click it.
- NegativeK 3y ago
  Verbs, not nouns. Which means making sure that the verb form doesn't sound like the noun form.
- navjack27 3y ago
  So, while the button is not interacted with (unmuted) and not hovered over you would like a mute button to be what? Would you like it to be black and white with a microphone symbol where the microphone is white and the background is black? When you hover your mouse over it should a no symbol in red appear over it which could appear black for color blind? When you toggle this mute button should that no symbol stay on the icon and invert all of the colors so now the background is white the microphone is black and the no symbol is white? I'm really confused by the concept of a button showing me what a button should do All of the time because if that button is showing me what the button should do then that button is indicating to me that that button is doing what that button is doing not what the button should be doing. That's why there is a hover over state if you're using a mouse things become more complicated when you're using touch which is why I think the button should not communicate what the button should do when interacted with but the current state.

serf 3y ago

I just want it to mimic the physical thing if it's going to mimic something at all. A push button toggle stays clicked in, or better yet clicked in and illuminated, to indicate that it's on. a traditional 2 way toggle exposes the state that its' in by the position of the knob relative to center. I mean anyone can flip states around behind the scenes, but if we're talking about a switch/wires/battery/light it all works out as supposed. Let's follow that example.

thinkmassive 3y ago

The Tesla app is horrible about this. What does a greyish padlock icon indicate? Let me tap it twice to cycle through states, then I’ll click once more if the original state needed to be toggled. If there’s any delay in the car’s response, prepare to complete another lock/unlock cycle, more slowly this time to be certain.

tshaddox 3y ago
It’s also inconsistent. From what I remember, the padlock toggle shows the current state (an unlatched padlock means the doors are unlocked, and pressing it will lock the doors), but the trunk button shows the opposite (an open trunk means the trunk is closed, and pressing it will open the trunk).

Agraillo 3y ago

The designers of everyday things also fall into this trap. My favorite example is the hammer drill, this kind should had the mode switch. I have a very decent device but implementing the same problem on/off approach showing and hiding the state. I almost always pause before choosing the right one. The example of the better design (mention in the stackexchange answers) is visible at the hammer drill polish wiki page: https://pl.wikipedia.org/wiki/Wiertarka_udarowa https://pl.wikipedia.org/wiki/Wiertarka_udarowa

sojournerc 3y ago
I have a welding mask with a "grind" mode that has the same issue. Not exactly something you want to get wrong when welding.

rjmunro 3y ago

The absolute worst example of this I have seen is the Tesla dashboard screen UI. It shows a car with labels on it, not buttons, that say "Open". That unambiguously means that the particular part is open. But that's not what it means. The labels are in fact buttons to open the parts, and you have no way of knowing.

ljsprague 3y ago
Is this peculiar to English? For instance, in Spanish, the verb and the adjective would be different words.
- bckygldstn 3y ago
  Yes, it is unfortunate that in English the imperative conjugation ("open this door") is typically the same as the present participle verbal adjective ("this door is open"). In English you can also form an adjective from the past participle ("this door is opened"). Using "opened" resolves the ambiguity in one direction only: when you want the adjective. But when you want the verb you'd have to add context: perhaps "tap to open".
dhc02 3y ago
Yes! I was just driving a borrowed Tesla this weekend and several times I had a moment of confusion/panic because I thought the trunks were both open.
actionfromafar 3y ago
Can someone make a car which has none of the complicated stuff? List of features I want: - automatic transmission (if ICE) - bluetooth and FM radio - no self steering - cruise control with "follow speed" - not-batshit-insane self-brake-system (use whatever Volvo uses, it works!) - good airbags and decent structural integrity - classic sedan height
- furyofantares 3y ago
  No, you can't get a car with exactly the feature set you specifically want and nothing more. This is because other people want a different feature set. It's even true of things that are vastly less expensive to produce than a car.

signaru 3y ago

It is forgivable if the wrong choice is not so harmful (e.g. play/pause a video) and the effect is reversible. There's an e-commerce website I use that has an option to post product reviews as anonymous with a "slide toggle" typical of mobile devices. The only feedback is after the review gets posted which cannot be undone. I just learned by experience, but it is always confusing to interpret.

bee_rider 3y ago

RIP Checkbox, 1990-2009, you were perfect and unambiguous but for some reason smartphone designers hated you.

_0ffh 3y ago
Right, or use a 3D look or colour or backlight effect to indicate when a toggle is active.
denton-scratch 3y ago
I agree that checkboxes are perfect; but that's because I never try to fill forms on a smartphone. Native browser checkboxes are often unusable on smartphones; too small to hit with a thumb.
- bee_rider 3y ago
  True. It seems like an odd historical problem though. We could just render checkboxes bigger or with more white space around them, and make the touch area bigger in any case.
  - denton-scratch 3y ago
    Sure, you clould just fix checkboxes. But then you have to deal with select boxes, which also work badly on smartphones. Then you have the modern smartphone-driven practice of using multipart forms, with one field on each part. You can't see the whole form at once; you eventually find out that the very last field is a date-field with three badly-behaved drop-downs that you can't interact with. I just don't try to fill forms on my smartphone. In fact I only use it as a (shock!) phone.
- lowboy 3y ago
  The checkbox label is often my thumb’s target. A pox on the house of any dev who doesn’t properly use a _for_ attribute.
- mywittyname 3y ago
  Properly designed, the tapping/clicking the text should also trigger the checkbox.

rconti 3y ago

There are a number of ways to get this wrong. The shuffle button in Spotify on our Tesla is a grey color, and you have to wonder if it's dark ENOUGH a grey to indicate that it's on, or a light grey to indicate that it's off. So then you go to toggle it on and off to see the state change, but actually it's buggy so it doesn't do anything. When you finally get it to toggle on, you realize the shuffle lines turn GREEN, not dark grey like most of the controls. facepalm

qingcharles 3y ago
Also, the problem with buttons like this is that the shade of grey depends on the angle you're looking at the screen, so you end up moving your head around trying to figure out if it is actually on or off.
1letterunixname 3y ago
Some UI designers do not understand design, e.g., affordances.
lamp_book 3y ago
Worse yet, Spotify abruptly added a third option, Smart Shuffle, to their shuffle sometime in the past year or so. So now you gotta hit the button twice to go from shuffle to no shuffle, and once to go no shuffle to shuffle. This is for their mobile and desktop apps I mean. They gotta have some of the worst UX of newer consumer tech companies.

lopkeny12ko 3y ago

Why not just use a checkbox? Is anyone here a designer with a serious answer to this?

bandergirl 3y ago
Cuz they ugly The dribblization of UI lead to a bunch of people trying to make things pretty for their own benefit. Then they look at it in Figma and it looks absolutely stunning. Never mind that actually needs to be understood and used by someone, that’s irrelevant. Just today I saw a HSL color slider on Twitter that was a single hue slider with two half-arc sliders on the main slider’s handle: one above for saturation, one below for lightness. It sounds like a joke but… https://twitter.com/jh3yy/status/1756429165803246028 https://twitter.com/jh3yy/status/1756429165803246028
tweakimp 3y ago
I think toggle switches are newer and therefore designers think they are more fancy to use.
koito17 3y ago
I am not a designer, but I've always heard that the difference between checkboxes and toggles is that toggles are expected to immediately produce side effects whereas checkboxes aren't. That is to say, clicking on a checkbox shouldn't immediately mutate some state, whereas activating a toggle should.
datavirtue 3y ago
No such thing as a "designer." They are less credentialed than a "software engineer."

syngrog66 3y ago

show an arrow from Now to Next state kids: get off my lawn. lol

taeric 3y ago

I'm surprised we are still iterating on ideas like this, to be honest. Seems flight decks have been rather successful on complicated dashboards for a long time. Same with boats. Why can we take approximately no lessons from them?

sitzkrieg 3y ago
overpriced ux designers
spyke112 3y ago
Perhaps what we do on a pc is not really that complicated or critical compared to flying a plane or steering an oil tanker. Just a thought.
- taeric 3y ago
  I mean, sure? But, to that point, why discuss the conventions? If the goal is to have a predictable interface, it seems fair and in scope to study larger interfaces that people have to read quickly.
  - spyke112 3y ago
    Don’t get me wrong I actually agree with you. I’d also love to have more consistent ui’s, but at the same time I get why the business wants to differentiate it self from the competition by not having a super effective “boring” ui. What I’m getting at is that it’s a lot more nuanced than what I as a software developer might like.
- deleted 3y ago
  [deleted]
ZitchDog 3y ago
The interfaces you are talking about require years of training, study and passing multiple tests to demonstrate proficiency. In software UX we are talking about discoverability and approachability for the untrained operator.

sponaugle 3y ago

I have some old NASA push button switches that have two bulbs in them. When the switch is off both lights are off, when you click the switch the yellow bulb comes on and lights up the switch, and when the device you turned on actually turns on a green light turns on ( and the yellow turns off ). The idea is you push the button and the yellow state is the confirmation that you toggled the switch, but the green is the confirmation that the action you wanted occurred. Kind of an interesting 'state feedback' mechanism.

2OEH8eoCRo0 3y ago
I like it. Why doesn't our "industry" look at aviation/military more often where miscommunication gets people killed.
- ajmurmann 3y ago
  I think the answer is that "looking pleasant" is much more of a goal for commercial software. In usability terms the much denser GUIs of the 90s were arguable better in some ways than what we frequently see today, especially for power users.
  - kfarr 3y ago
    Yes just like the design of car infotainment systems -- looking good resulted in the touch screen era. Luckily we're finally realizing our mistake and a few automakers are putting old school knobs back in.
- deleted 3y ago
  [deleted]
kqr 3y ago
This is a good one, and also what airplanes do[1]. These problems are solved by people who care a lot about usability, but computer people are slow to pick up this sort of stuff from other fields. Labels outside the switch also work.[2] [1]: https://my737ng.com/wp-content/uploads/2014/08/cp_mcp_header-1024x568.jpg https://my737ng.com/wp-content/uploads/2014/08/cp_mcp_header... [2]: https://i.pinimg.com/originals/2c/37/0a/2c370a3f4018cfa9c3ef7720454414e4.jpg https://i.pinimg.com/originals/2c/37/0a/2c370a3f4018cfa9c3ef...

mjamesaustin 3y ago

For an interface with hover interaction, a toggle button should show its current state by default and then on hover show the state it will switch to. This design pattern affords discoverability through safe interaction with the element. Unfortunately that design pattern fails for touch interfaces, which increasingly are our primary method of interaction.

wforfang 3y ago

Tesla makes this mistake with their ambiguous "lock" button on the iOS app. The button toggles between an open/closed padlock icon. I often lock the doors remotely and since I can't physically see the car to confirm, I get paranoid about whether the icon is representing state or action.

lxe 3y ago

We had radio buttons forever, but no, let's complicate things.

Macha 3y ago

This is a problem for forms where companies are legally required to follow the users instructions but may not want to. I find myself not trusting them to not pick deliberately unintuitive interpretations. Think the kind of designer that comes up with "check this box to receive transactional emails but not marketing emails", when an unchecked box leads to marketing and transactional emails.

alpaca128 3y ago

The only two good suggestions I saw were radio buttons as well as toggles with labels on the left & right (so basically two merged radio buttons). I think the play/pause button in media apps is an acceptable exception simply because it's obvious whether it's playing or not - you could even use it without recognizing the symbol, if music is playing you know a click will pause it.

apapapa 3y ago

I don't know how developers manage to make simple toggle switches confusing and it makes me scared of their code but sometimes I think it's done on purpose as a dark pattern (when you unsubscribe to spam for example)

datavirtue 3y ago
Unsubscribe....lol Inbox rule: body:"unsubscribe" -> move to Delete.
- apapapa 3y ago
  That's a good one

User23 3y ago

UX novelty for its own sake is annoying. Just use a checkbox.

1970-01-01 3y ago

There should be no ambiguity here! A toggle button is an analogue for a physical switch. Unless the switch state is dependent on other switches, it must always display its current state. i.e. ENABLED is always true unless POWER is OFF.

kortex 3y ago
There is ambiguity in the physical world. Some audio equipment have what's called a ground lift. It physically disconnects the ground conductor between two devices, and it's usually a single push-toggle in/out button. I've seen some devices with "Ground On/Off" - does that mean grounded (not lifted) or not grounded (lifted)? IIRC one of the DI boxes I've used is the opposite of what you'd expect - "Off" means lift is off, meaning ground loop is connected. The sensible devices have two states "Lift/Gnd".
- 1970-01-01 3y ago
  That is a poor design choice. VERB STATE TRUE is standard for every toggle switch on all my hardware, including prosumer amps. Changing this can be deadly, and was found to be part of the reason for the 737 MAX going down in 2019: https://www.seattletimes.com/business/boeing-aerospace/boeing-altered-key-switches-in-737-max-cockpit-limiting-ability-to-shut-off-mcas/ https://www.seattletimes.com/business/boeing-aerospace/boein...

ww520 3y ago

I usually make a toggle button reflects its current state and shows the next state in some other way, like in the hover over tooltip or small subscript text. That means a toggle updates two things, the button itself and the tooltip.

mrighele 3y ago

The main issue with toggle buttons is that you have an object that at the same contain the state of the system and the action to change it. The consequence is that it is not clear if the "ON" that you see on it is the current state (so pressing on it will turn it to "OFF"), or the action that you will invoke when you press it. The solution is to separate (part of) state and action, and this can be done in a few ways. One possibility is to do like one of the answers in the link suggests, and write the label _outside_ the button. If you don't have a switch but a toggle button (like the teams example in some other comment), leave the icon alone, and change some other properties of the button (for example leaving it pressed to signal the "ON" state, like it has been done for decades without any issue....)

vleaflet 3y ago
System sound properties in Windows 11 has an option "Allow apps and Windows to use this device for audio" and a button labeled "Don't allow" next to it. So what is the current state? I have no idea.

tootie 3y ago

The top answer references About Face 2.0 which I read at the time and it's still probably the best book on user experience design. I think there's newer editions, but the principles it laid out were really the fundaments that I still live by.

brudgers 3y ago

Yes. Or both...like a real world toggle switch. Or have user configurable behavior (an idea that seems to be mostly out of fashion among designers...get off my lawn).

continuational 3y ago

I think the iOS switch controls are pretty easy to read, even though the only real clue to the state is that off is gray and on is colored.

SkyMarshal 3y ago

Should show both, just as analog switches do. You want it to clearly unmistakably show the current state, but also the state to which it will change. Apple has really nailed that with its sideways slider toggles. You can clearly see where the toggle is currently, what it will change to, and whether the current setting has made some feature active (blue background inside the slider) or inactive (grey background inside the slider).

johnea 3y ago

It should display the current state, of course. Because when it's not being clicked, it is a status indicator...

croes 3y ago

>Flip-flop button controls are very efficient.They save space by controlling two mutually exclusive options with a single control. Compared to what? Definitely not a checkbox. The problem of a checkbox is just it's not very visually appealing but pretty good on carrying zhe necessary information.

pcwelder 3y ago

The second answer is the only correct solution.

DanHulton 3y ago

Easy. It should be a checkbox. (If checkboxes are unavailable in your design system, you should have an unambiguous label next to it saying "On" or "Off", or better, describing the current state of the system in the terminology of the system, like "Background Noise Cancellation Enabled". But having a control label and a status label _should_ be a clue that you should just be using a checkbox.)

unsupp0rted 3y ago

When disambiguation matters, I always default to a label that says “press to ~”.

MattGrommes 3y ago

One of the worst cases of this is the 'Airplane mode' toggle on a Kindle. Airplane mode turns off wifi but the icon is an airplane that says 'On' when airplane mode is on. When you click it, it turns to 'Off'. But what you really want to do is turn the wifi off and on, which is the opposite of the icon. 'On' means the wifi is off, 'Off' means the wifi is on. Terrible.

zamadatix 3y ago
Airplane mode status and Wi-Fi status are separate statuses. Airplane mode can be on and it tells you nothing one way or the other about the actual state of Wi-Fi. This ultimately comes down to some Kindles being like phones and having more than 1 radio where you may want airplane mode on except for the Wi-Fi radio if you plan on using in flight Wi-Fi. Airplane mode is a convenience to conserve battery during a flight. If you judge it by how well it acts as a universal radios on/off switch it will measure accordingly.

thih9 3y ago

It also works if the button is not labeled, as long as the state is clearly visible in the environment and the link is clear. Consider the light switch - if there’s just one, it’s the best UI ever. You know what to do to turn the lights off, just flip the closest switch. Obviously if there’s more than one then it’s the worst UI ever. Another example, a smartphone’s side button (screen on/off).

layer8 3y ago

This wasn’t an issue when buttons were 3D. They had an icon (or text) indicating what they activate, and were rendered depressed when active and raised when inactive. Some color could optionally be added to the icon to reinforce the active state.

brianstorms 3y ago

Any Tesla owner can relate to this, given the wide variety (read: no consistency, no standards) of toggle buttons the car's UI utilizes. For one, the HVAC. One button, showing temperature, which upon touched the system will react differently to depending on how you touch it and for how long. Touch it briefly, you get a little popup. Touch it slightly longer, and (hopefully, not guaranteed though) you get a bigger panel with full HVAC controls. Touch and hold for a couple seconds, and (hopefully, not guaranteed though) you turn off the HVAC if it's on. ALL WHILE YOU ARE DRIVING AND SUPPOSED TO WATCH THE ROAD. And if your hand/eye coordination is slightly off (and hey, when you're driving, going over bumps, etc, it very likely is) if you mis-aim by even a millimeter, you may touch another button and not realize it and do something unintended. Another disaster: Tesla's entire connect-a-Bluetooth-device UX is one of the worst mishmashes of disastrous UI design I have ever seen in a shipping product, at least the 2012-2022 Model S implementation. Just one example, a button label down at the bottom right that still says "Connect" long after the device is already connected, but meanwhile elsewhere on the opposite side of screen, up top at the left, that says "Connecting..." then indicates the connection is made. All this in a UI that you only have a split second to glance at because it's in a CAR and you very well might be DRIVING. The Tesla Bluetooth UI could fill an entire chapter of a book on UI, it is so magnificently bad. Maybe I should write it.

sgustard 3y ago
Tesla's mobile app features inconsistent toggles right next to each other! - A closed padlock means the doors are locked. Tapping it unlocks the doors. - The word "Open" on the trunk means the trunk is closed. Tapping it opens the trunk.
- brianstorms 3y ago
  Yes, so true! The inconsistencies and non-standardization continues in Tesla's mobile app. There are many other examples there too.
- uptime 3y ago
  Yes, so bad. Those buttons do a poor job of allowing action and showing state at the same time - they only use one property (icon no color or slash etc.) Also click-and-hold with or without haptics is not obvious. I was stabbing at the Tesla screen to activate defrost in a snow storm. I had to call the owner to figure out why it would not activate. I really like the 3 but you cant just hop in and go without some prep.

avgcorrection 3y ago

Not directly related but Bitbucket cloud has made some recent update where they started prioritizing reviewers over submitters in pull requests. One change is that you by default get the “I’m reviewing” filter turned on by default. Which I have to turn off most of the time. Anyway, sometimes I try to turn it off but then it is toggled (it was off). What’s going on? Well, the normal interface is that it’s a combobox where no-text means no filter—that’s where the I’m Reviewing by-default resides. But on a slightly different pull request view—which looks almost the same—the UI element is the same kind of thing... except here the combobox gets a black background when toggled! And the default is to show some option like I’m Reviewing but on a white background, which means not-toggled…

e40 3y ago

Google's Youtube TV. The UI infuriates me. To this day I can't remember which state the toggle is in. I do know it's the opposite to every other app on my Apple TV.

ok123456 3y ago

Use a skeuomorphic toggle switch modeled off a PDP-8/e panel toggle switch.

riwsky 3y ago

I go back and forth on this one

mathgradthrow 3y ago

In means yes out means no, avoid double negatives.

p1mrx 3y ago

When I designed a lock/unlock button for my app, I added an arrow to indicate what action occurs when you click the button: https://www.youtube.com/watch?v=9MZmwkn-2rw&t=117s https://www.youtube.com/watch?v=9MZmwkn-2rw&t=117s For an unmute button, you could have a microphone with a line through it, and an arrowhead indicating that clicking the button will remove the line. Then the mute button could show a microphone with an arrowhead pointing inward from the corner, indicating that a line will be drawn.

mark_undoio 3y ago

I once worked on an Optical Image Stabilisation system for mobile phones. I'd updated the stock Android camera app to show some icons from marketing for when the shake compensation was on / off. The icon for when compensation was on was a shaky camera. When it was off, it was a shaky camera with a line through it... Except, we asked, wouldn't the other way round make more sense? Doesn't line through shaky camera suggest we're removing the shake? We ended up using the icons and just colouring them green for "on" and red for "off" and hoping people would figure out what we meant. And, yes, that would still be unhelpful for colour blind users! User interfaces are hard.

ClassyJacket 3y ago
This is why this kind of thing should have text (with or without an icon). Just tell me what you're trying to communicate. Yeah I know you have to translate it for other languages, but Microsoft, Samsung, et cetera should be able to afford that. I hate that Windows 11 has regressed on this.

Razengan 3y ago

This has been one of my biggest eternal dilemmas in UI/UX/programming! • The ideal would be to show both states: "Muted → Unmute" on the button label. Click it and it becomes "Unmuted → Mute". If there isn't enough space, maybe just add a " → " at the end to denote that the displayed state will change to something else when you click on it. • Or just make it look like a physical electric switch with "On" & "Off" printed on opposite sides. • or a hover effect: "Muted" or [Crossed Microphone Icon] becomes "Unmute" / [Microphone Icon] when you hover the mouse or hold the finger on it. The icon should also change color between red/green or dim/lit to further emphasize the actual state.

wmidwestranger 3y ago

There doesn't need to be an either/or if you give the toggle twice the space, just like a physical toggle. With the added space, you can show the states are related, which state is currently selected, and which alternate state will become current after the change. The real problem seems to be nobody cares about actual ui-design for human use but something that'll look good when you show the boss.

wly_cdgr 3y ago

We should use the world's national emergency alert systems to conduct a poll of as large a percentage of the world population as possible, and whichever option wins the poll, we should go with that one. Of course, no one will agree about which state is which,...

low_tech_punk 3y ago

False dichotomy. Toggle buttons should show both and visually indicate the state by proximity cue. But there is usability vs aesthetics trade off. I think Microsoft design systems (seen in Windows, Edge, Office products) only shows the active state probably because it’s easier to align toggle buttons flush when text is only on one side. If you display texts on both sides, the unpredictable text length would make the button area difficult to align.

Nifty3929 3y ago

Another issue with toggles is idempotency. If I click the button, there is always some lag and some chance that the underlying system state has not changed. I might want to click the button again to reinforce my desired change, but with a toggle there's not really a way to do that. If I click it again, the system would likely revert back to it's original undesired state. Like when you want to copy something, but Ctrl-C is unreliable, so you Ctrl-C,C,C,C to make extra sure. I want one button for each state, so that I can click it several times if required.

DigitallyFidget 3y ago

It should always show its current state. If a button is doubling as a status display, it needs to display current status, that's the entire point of a button doubling as displaying information. Would you flip a breaker to the "ON" position in order to turn it off, or would you expect the breaker to display its current state of being ON/OFF?

swingingFlyFish 3y ago

When you save something for example to a folder. Is the save icon coloured or not? This is isn't rocket science. It should show it's current state.