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

Question

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).

It see it this way. Play/Pause is more like an 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?

Answer 1

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).

Answer 2

I think you've got it pretty much right in your question.

If the toggle is an action - Play/Pause - then it should show the thing that will happen. So while paused it would show Play and then while playing show Pause.

If the toggle is an option - Shuffle/Linear - then it should show the current state.

How you indicate that to the user that one button is an action and the other is an option I'm not sure...

Answer 3

I would say that it depends on the case, as ChrisF said, it's important to have a distinction between an action button and a state button.

If your button has text, you could change the text to show that clicking it will do something (ex: "Turn shuffle play on"). However, in your case, since it's only an icon, I would go with only a shuffle icon that looks enabled/disabled depending on the state. If it's disabled, then it should be clear to the user that it's straight play. You could light it up or show the button as pressed down.

Consider adding a tooltip on hover to make it even more clear.

Answer 4

I'm surprised to see no mention of the technique used in iOS (and elsewhere), a combined action/state button, where both options are visible, grouped and the active one is clearly highlighted.

Terrible ascii art to demonstrate:

[ ON | off ]

Answer 5

In many cases it might be useful or possible to avoid such buttons.

E.g. in the case of shuffled/regular play: just use a checkbox with a "shuffle" label next to it, and nobody will get confused...

And in the case of a play/shuffle button, it's maybe not necessary to change the label on the button either. You could use a "pressed" button to indicate "playing", and an "up" button to indicate "not playing". Or you could put an indicator somewhere else in the UI of course (that's what my stereo system does...).

It's not because some company starts to use a certain widget that all of a sudden it should be used for everything...

Answer 6

The problem is that in English "on" and "off" are both verbs and adjectives. Therefore, find replacement words that are either verbs or adjectives to label the buttons with:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

Answer 7

I'd stop just short of "don't use them."

I'd suggest toggle buttons are acceptable in the case where there is a clear on and off state. This can occur, for instance, when you have a line of grayed buttons that become colored when you click them.

This is the reason Play/Pause works in many cases. The play button is not so much a toggle between two states as an enable/disable. It turns bright green when on (I'm playing!), it turns gray and shows a || when off (I'm not playing!).

The other buttons do the same, so the consistency adds to the affordance. It's probably also based on our historical perceptions of a tape deck or VCR, which had buttons you pressed in (i.e. on state) or depressed (i.e. off state) and I think this is a great mental model to keep in mind when considering a toggle.

But in any case where they are not simply "activated", where you couldn't replace the toggle with an uglier checkbox, I'd default to "don't use them," for all the reasons already mentioned.

ADDITION

I just noticed today that Evernote has a pretty effective toggle. They took the approach of a mouseover, which actually worked pretty well. Note that this is another case of an on/off style control.

ADDITIONAL ADDITION

I found this interesting switch today and was reminded of this UX Q&A. Note how the state is immediately obvious, and the fact that it's going to switch when you touch it is also made obvious by the textured "handle" (i.e. affordance)--I just know that when I grab that raised knob, it will switch to the opposite side and say the opposite of what it says now; it's just like an airplane lavatory.

So they can be done well.

Answer 8

For the Play/Pause example, I'd show the current state normally and the opposite on mouse-over (when that's appropriate i.e not on touch screens). That item has 2 natural states and no unifying verb. On/Off on the other hand can be simplified to Power with the On state being lit and the off state, well, not.

Answer 9

Short Answer:

Quite a late answer, but I'm surprised no one here pointed this out before -- it is possible for a toggle switch to show its current state and the state to which it will change simply by having text outside the button, instead of on it.

Long Answer:

As dotancohen points out above,

The problem is that in English "on" and "off" are both verbs and adjectives.

Buttons that have text outside of their body use this very fact to their advantage! Read on...

---

Take the iOS switch design:

Let's focus on the state that's blue and says ON for example.

Can you tell if the switch is ON currently, or if it will go on if you move/click/tap the slider? Is the text obvious? Is "ON" here a state(adjective) or action(verb)? Unclear. Is the color of any use to help you decide this? Probably, but not certainly -- iOS users may be habituated to the states of this design, but there's no telling how non-iOS users would interpret this. To see what I mean, take this real life trip-switch, which has the same design as the iOS switch -- can you tell for sure if the trip switch is currently ON?

The switch below is along the lines of the iOS design, but far worse...

...it's not even clear which half the slide/click handle is!

---

On the other hand, the OS X switch design leaves no room for ambiguity:

The question from jensgram's quote...

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?

...never arises here since the button neither says ON nor OFF -- it just stands by itself. Also, there's no confusion about the context of the words ON and OFF -- they are very clearly states (adjectives) since clicking on them (in the normal design) would do nothing!

It may be interesting to note that a modification to this design would allow for the text on the far side of the button to be made click-able/tap-able. If so, the word closer to the switch-handle is the state, while other one is the action, and the roles are reversed when the switch is toggled.

Even so, the user's perspective of the switch isn't altered -- at no point is the user confused about the current state of the switch. In fact, the design could be further enhanced for user friendliness by highlighting the current state:

---

The Windows Metro UI design for the switch goes a step further, and removes the "action" text from the button, and retains just the "state" text:

The color of the button indicates the current state (lit up = ON, as in real life), and the words On/Off underneath the option text reassure the user of the current state.

Answer 10

The label on the toggle button like Play/Pause should not change. The button itself should visually indicate that it is pressed (leaving the label 'Play'). This eliminates all the confusion.

Answer 11

I have been using Toggle Button to "Add" and "Remove" elements to a collection using simple Toggle Button (one with state visible at a time) which had following states.

• ADD (if button wasn't clicked ever)

• REMOVE (if the button was previously clicked and an item was now part of the collection)

BUT this always pinched me as for a novice user (age 50+), it was initially hard to understand what has happened and why is button asking to "Remove" even before I learned that item was now part of the collection. The missing bit in this case was a notification message which would say "Item Successfully Added". I am using a Javascript Based Status Message which appears on the top of screen (using http://twitter.github.com/bootstrap/javascript.html#alerts) but since it was visually displaced from the element of interaction, I only solved a part of the problem for some users.

Another Issue

Your button changes its "Stance" or "Flips its sides" after every click. Sometimes it says "I am the add button" and some times the same button (in the same column among other add buttons) it says "I am remove button". Changing colors help but these are still two opposite roles taken up by one button. NOT SO RIGHT.

My Solution:

My solution to this minor and well discussed issue is to replace the toggle button with something like that.

Button which has Caption "Add" when not clicked After Click, Button replaces itself with a message "Successfully Added" and shows a small 24x24 button which has label "X" and which allows you to cancel your last act which is always "Add". Thus you never click a "Remove" button but only "cancel" your previous "Add Operation". Also you don't need to show a separate "Successfully Added" notification on the page. Down side of this approach is that that you need more space to put "Successfully Added" label and a "Button to Cancel" but this in my opinion is one of the less confusing approaches.