Still waiting for any company to implement this: obvious and unmistakable mute audio/disable video buttons
Meanwhile Google: what if we play with buttons’s shapes? You are solving the wrong problem!
@nikitonsky ugghh yes. I keep getting confused over whether such toggle buttons should display current status, or the status you want to go to. I like the idea in your image.
@nikitonsky I recall this being a huge problem when I worked at Signal. It was ALWAYS confusing.
@nikitonsky Every Google interface element is styled with border-radius:Math.random();
@nikitonsky I absolutely hate the Google meet ui it’s so frustrating and to be honest breaks so often for me
@nikitonsky these buttons look grayed-out
@nikitonsky @puresick
It's what we called "the play/pause problem" at a company I worked for. Do you display the function it will perform (next state) or do you display the state it currently is in?
I like your solution of displaying both
@claudius @nikitonsky @puresick AH! now i know the name for it.(airplane mode is its own criminal category!) So how did the internal reasoning go, and was the team hell bent on one of the two only?
@clusterfcku @nikitonsky @puresick I think we just didn't work on that aspect a lot. We basically argued which way to go. But it was also a couple of years ago.
@nikitonsky Are these meant to be an example of unmistakable buttons? I find them completely ambiguous.
@MisterMoo why? what are at least two interpretations?
@nikitonsky @MisterMoo if i slide it left i still don't know what happens, and the current mode is implied not explicit. "Sliding it turns on so must be off now". But if they were not ovally connected it would be better. Like a pair of radio buttons each. Coloring and graphics are fine imo. (Only because you asked)
@clusterfcku @nikitonsky Thanks, agreed. This isn't an intellectual thing. I just didn't find it intuitive when I saw it this morning.
@clusterfcku @MisterMoo so is it that control itself is unclear to you? I am really curious
@nikitonsky @clusterfcku The most common way to do this kind of toggle is to use color to identify when something is active. Your icons for 'off' and 'on' are gray, with only luminance to distinguish them. You're asking people to intuitively understand that the brighter icon means it's on. That's going to be a leap for some people. I'd be curious what this would look like without the 'off' icons in the slider space, and instead having that area be filled in green.
@MisterMoo @clusterfcku yes, colors is something I didn’t spend much time on, just copied Google Meet design. Could be tuned
@nikitonsky @MisterMoo indeed i am not criticizing, but share "gut reaction" thoughts because that's what matters here. More than once did i press the bright red button with intent to unmute and of course that ended the call instead...! If i press the brighter microphone and slide it left, do i get what's bright on top or what's going under the slider. It shows mic is on, and slide to mute, or tap to make mic on and slide over mute to make mute go away?
@nikitonsky These controls look disabled to me out of context, but I agree this problem needs solving, and switches are clearer. I always prefer a control with a steady label that also shows its state to one that changes its label with its state such that you're not sure if it's showing the current state or the effect of the next click.
@malwareminigun @KirillOsenkov @frameworkcomputer do you have a screenshot?
@nikitonsky @KirillOsenkov @frameworkcomputer no, this is a hardware thing:
@malwareminigun cool! Not clear which side is on and which is off though, but maybe there’s a LED indicator or smth?
@nikitonsky when the switches are off they are red. Not an LED, just colored plastic
@malwareminigun Nice! I would’ve made them both go in the same direction, but otherwise it’s great!
@nikitonsky The dentist chair, rectangle fish, and red mushroom top icons are not necessarily obvious. You know what is obvious... the language we learned when growing up and has a documented structure of meaning. Tons of usability studies show that actual language increases cognitive ease. https://bookofadamz.com/general-user-experience-design-guidance/#labelbuttons #UX #Usability
@Adam @nikitonsky it depends on the situation and/or the user.
Sometimes text, sometimes icons, sometimes an icon together with text is the most recognisable. It's not "one size fits all".
@ianp5a @nikitonsky I'm saying on average, according to all data I've seen, people understand words they learned as children better than foreign symbols that can't be found in a dictionary for their native structured language. Do you have any published data that suggests otherwise for the majority of humans?
@Adam @nikitonsky I do agree sometimes words are better. Especially with operations not easily described visually. There are many cases where visual operations could work better for a broader range of people. Think: Up, Down as arrows. Etc.
I'd avoid use of ’average’ here though. Out of 100 people, only 1 might be average.
@nikitonsky @ianp5a I've been on MANY video conference calls where people have no idea what the icons mean. Do you have any published data that backs up your position? You've read this study, right? https://www.nngroup.com/articles/computer-skill-levels/
@nikitonsky @ianp5a Yes, people have literally called it a "dentist chair" icon, and I've had to describe "the rectangle with a triangle on the right side".
@Adam @ianp5a I think there’s a distinction here. Some things have very well understood icons. Some don’t. Icons are fine for the first type, I think. But the second time is a constant source of entertainment for me:
https://grumpy.website/1333
https://grumpy.website/1117
https://grumpy.website/1192
https://grumpy.website/449
https://grumpy.website/275
https://grumpy.website/397
@nikitonsky Yes, but the number of very well understood icons is very small. There's a bunch of studies and examples here: https://bookofadamz.com/general-user-experience-design-guidance/#labelbuttons
Even the Google translate app found a 25% increase in usage by labeling the dentist chair icon.
@Adam sure, labels don’t hurt
@nikitonsky Thanks for those humorous bad UI designs! :D Ha!
@nikitonsky Here's an example that I implemented on my self-hosted Jitsi video conferencing server. I was getting pretty annoyed that literally every call involved someone asking "How do I share my screen" or "How do I end the call" since all of the toolbar icons at the bottom were previously unintelligible to the majority of users. My modifications seen below instantly made it much easier for everyone and the time wasted by people trying to translate icons has been reduced to almost zero. #UX
@Adam @nikitonsky that you’ve made the icon represent state and the text represent action is baffling, this was way harder for me to interpret
@brhfl Zoom labels their buttons about the same way. The language is actually the same as what screen readers use for accessibility. It displays whatever language the user selects from the Jitsi project translations as well. Would you describe the state instead? How would users know what pressing the button does then?
@Adam zoom’s ui is pretty miserable, imo! and it’s on-screen text does not line up 1:1 with the text offered to screen readers; this makes my life hell every time i have to do §508 work on zoom training materials
@nikitonsky How about just having a checkbox next to an icon?
@nikitonsky Wait? You think having UI/UX that is obvious and unmistakable is desirable? What is wrong with you... Are you some weird anti-ableist freak?
@nikitonsky I swear this used to be a thing but then they "revamped" the UI and just made it objectively worse