> "A checkbox is a good example. It's pretty obvious."
A check is a tick[1]. On a status page[2] a tick means "working" and a cross means failed. The "pretty obvious" view is that "Muted [x]" has failed in some way. To know any different comes from learning computer UX, the opposite of obvious. (Or is it "X marks the spot", that's the target I should click if I desire "muted"?).
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.
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.
Why are you making this so complicated? The simplest solution is just a button with text on it. But sure, maybe you want a symbol instead, they do look nice and take less space.
So when sound is playing, the button should have a symbol that conveys "mute", like a speaker in a stop symbol. If you hover over it, the tool tip should say "Mute" or something to that effect.
If the button is clicked, then the sound is muted. Now you could change to a symbol that conveys "unmute" like just a speaker symbol. Or you could let go of the whole button concept here because it's pretty clumsy and ambiguous, and just use a toggle switch instead. Could just have the text "Sound on" - "Sound off" on either side, or symbols if you prefer that.
You should never assume that the user knows anything. The UI should convey everything the user needs to know, trying to use some sort of convention doesn't work because there is no convention. Avoid using signal colors because as you alluded to that also gets complicated.
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.