Should a toggle button show its current state or the state to which it will change?

  • I have a quick question about buttons that toggle between two states. (Think Play/Pause, or Shuffle/Regular Play.) As the title says, should the toggle show it's current state or the state to which it will transition?

    I think people are used to the Play/Pause convention. But the Shuffle/Regular play might be more confusing if you show the transition state instead of current. For example, the built-in music player on the Xbox 360 does it this way: when it's in shuffle mode, it shows the icon for direct play and vice versa and it always confuses me (am I in shuffle mode or straight play).

    I see it this way: Play/Pause is more like action as in begin playing or pause playing. Yes behind the scenes it is a state transition but to the user, there is an action. Whereas Shuffle/Straight Play is an option and it's best to show the current state (and possibly have only one icon and change button to show that the option is enabled/disabled). Thoughts?

    What about using a checkbox, especially if the selection between the two options can be summarized in a yes/no question?

    long time ago, but - I'd stay away from these categories (action vs. option). I'm surprised at how often I think these are clear, and "my" users have never thought about them, much less a clear distinction.

    Only a comment but I put the text Mode: in front of all toggle buttons and make them a different color. It is less space than radio buttons. I use it when the toggle needs to be in a certain orders

  • jensgram

    jensgram Correct answer

    11 years ago

    In About Face 2.0 (there is a v3 but I haven't got it) Cooper and Reimann (2003, pp. 341-2) treat this subject under the heading "Flip-flop buttons: A selection idiom to avoid". I strongly suggest to consult this book as I will only present an excerpt:

    Flip-flop button controls are very efficient. They save space by controlling two mutually exclusive options with a single control. The problem with flip-flop controls is that they fail to fulfill the second duty of every control - to inform the user of their current state. If the button says ON when the state is off, it is unclear what the setting is. If it is OFF when the state is off, however, where is the ON button? Don't use them. Not on buttons and no on menus!

    The authors (and I think of these as an authority on the subject) presents two possible solutions: You should either spell the button's action out as a verb phrase (e.g., Switch to portrait mode, thereby sacrificing some of the saved space) or use some other technique entirely (e.g., two radio buttons).

    +1 - This is what my answer would have been.

    I could swear that they say flip-flop buttons are OK when the alternative is really clear. I don't feel like digging up my copy of About Face. What is the opposite of Play? What is the opposite of Pause. Hmm. ;) @jensgram, thanks for including the link to the book. = Helpful.

    @JeromeR They *do* say that a pictorial approach can work, although the picture should *never* be put on a button ... and the functionality can thus be hard to discover. On page 420 they go on and imply that it can sometimes be OK with flip-flop button *provided* that the current state is clear (e.g., minimize/maximize, more/less). So I guess you're right :)

    It's page 445 of About Face 3.

    Thanks for the response validating my instinct. I have About Face 3 and need to go ahead and read it.

    "Switch to Portrait Mode" as tooltip with "Portrait Mode" as button text would help user. If I don't understand the button text, the very next step will be to look for Tooltip

    I hate these buttons.

    We have an industrial control process with flip-flop buttons everywhere. Whenever things are running, they are RED to indicate that it will stop if you push the button. If it's stopped, they are GREEN. It's the most confusing UI I've ever seen. A screen full of red means everything is running smoothly! o_O

    @AndyS: Nope, a screen full of red means "Don't you f*ing touch anything here!" :D

    Relying on red/green alone doesn't make for great accessibility, either.

    While this is a nice answer, with an excellent quotation, it still skirts the question with _"don't use it at all"_.

    @SNag Worse, green means "Go ahead and press me!" -- not exactly what you want when it means to start heavy machinery, either.

    What about checkboxes, do you think they have the same problem_

    @ThomasAhle Provided that the checkbox is labelled "correctly" (i.e., with a label that describes what the checkbox toggles) _and_ the option is a Boolean style choice, I'd say that it is on par with two radio buttons. E.g., toggling "portrait / landscape" does _not_ lend itself to a checkbox since the inverse is never mentioned. "Run at start-up", on the other hand, would work nicely since the checkbox state conveys the choice in either case.

    In the 4th edition the discussion of this type of button is in chapter 21 under "Controls" (I'm using Safari so I don't have the page number). The section is titled "State-switching buttons: an idiom to avoid".

    @AndyS I also work with industrial control systems and the normal convention is that the colours Red / Green show the safety state of plant items. Thus Red means unsafe - eg running or doing stuff, Green means safe - eg not moving.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM