Flip-flop buttons

Technically known as "State-switch buttons", you can still find the 20-year-old problem in today's UIs! From confusing mute buttons to browser extensions, state-switch buttons continue to confuse users.

The problem occurs when a button tries to serve BOTH as a state indicator AND a state-switching control. In the case of extensions, the user don't know whether that icon is just showing "Pinned" or is actually a button indicating "Pin".

Flip-flop buttons, scene 1.

Flip-flop buttons, scene 2.

Flip-flop buttons, scene 3.

▶️ More info:

State-Switch Controls: The Infamous Case of the "Mute" Button
Cooper, Alan, et al. About face: the essentials of interaction design. John Wiley & Sons, 2014. (Ch. 21)