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

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


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

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.

Real Life Switches

Long Answer:

As dotancohen points out:

The problem is that in English “on” and “off” are both adverbs and adjectives.

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

Take the iOS switch design:

iOS On-Off Switch

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?

Ambiguous Trip Switch

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

Ambiguous On-Off Switch

…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:

Unambiguous On-Off Switch

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.

Modded On-Off Switch

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:

Highlighted On-Off Switch

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:

Win8 On-Off Switch

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.

Whatever you decide – please don’t do what twitter does.

Aargh don't change the button when I'm about to click it!

Related Solutions

Calculate the sum with minimum usage of numbers

Here's a hint: 23 : 11 + 11+ 1 ( 3 magic numbers) 120: 110+ 10 (2 magic numbers) The highest digit in the target number is the answer, since you need exactly k magic numbers (all having 1 in the relevant position) in order for the sum to contain the digit k. So...

Why not drop the “auto” keyword? [duplicate]

Your proposal would be rejected on the basis of backward compatibility alone. But let's say for the sake of argument that the standards committee like your idea. You don't take into account the numerous ways you can initialize a variable widget w; // (a) widget...

Recursive to iterative using a systematic method [closed]

So, to restate the question. We have a function f, in our case fac. def fac(n): if n==0: return 1 else: return n*fac(n-1) It is implemented recursively. We want to implement a function facOpt that does the same thing but iteratively. fac is written almost in...

How can I match values in one file to ranges from another?

if the data file sizes are not huge, there is a simpler way $ join input1 input2 | awk '$5<$4 && $3<$5 {print $2, $5-$3+1}' B100002 32 B100043 15 B123465 3 This Perl code seems to solve your problem It is a common idiom: to load the entire...

Javascript difference between “=” and “===” [duplicate]

You need to use == or === for equality checking. = is the assignment operator. You can read about assignment operators here on MDN. As a quick reference as you are learning JS: = assignment operator == equal to === equal value and equal type != not equal !==...

Compiler complains about misplaced else [closed]

Your compiler complains about an misplaced else because, well, there is an else without a preceding if: // ... for (j=1; j<n-i; j++) { if(a[j]<=a[j+1]) { // ... } // END OF IF } // END OF FOR else { continue; } // ... The else in your code does not follow...

Bootstrap – custom alerts with progress bar

/* !important are just used to overide the bootstrap css in the snippet */ .alertContainer { border-radius: 0 !important; border-width: 0 !important; padding: 0 !important; height: auto !important; position: absolute !important; bottom: 15px !important; left:...

How to Garbage Collect an external Javascript load?

Yes, s.onload = null is useful and will garbage collect! As of 2019, it is not possible to explicitly or programmatically trigger garbage collection in JavaScript. That means it collects when it wants. Although there is cases where setting to null may do a GC...

Math programming with python

At first, what you are looking for is the modulo operator and the function math.floor() Modulo from wikipedia: In computing, the modulo operation finds the remainder after division of one number by another (sometimes called modulus). for example: 12%12=0...

Android slide over letters to create a word [closed]

Here some advice you can use: First for each cell you can create an object that represents the state of that cell: class Cell { char mChar; int row,column; boolean isSelected; } then you can create a 2D array of your cells Cell[][] mTable = ... For views you...

Sum two integers in Java

You reused the x and y variable names (hence the variable x is already defined in method main error), and forgot to assign the ints read from the Scanner to the x and y variables. Besides, there's no need to create two Scanner objects. public static void...

Extend three classes that implements an interface in Java

Using this simplified implementation of the library, using method() instead of M(): interface IFC { void method(); } class A implements IFC { public void method() { System.out.println("method in A"); }; } As akuzminykh mentions in their comment You'd write a...

How to set the stream content in PHPExcel? [closed]

Okey, First thing first PHPExcel_Worksheet_MemoryDrawing() can't solve your problem if you insist to use stream content and pass that to your worksheet your PDF will not render your image. But you can use `PHPExcel_Worksheet_Drawing()' if you want to render...

How to remove all files from a directory?

Linux does not use extensions. It is up to the creator of the file to decide whether the name should have an extension. Linux looks at the first few bytes to figure out what kind of file it is dealing with. To remove all non-hidden files* in a directory use: rm...

Hacker used picture upload to get PHP code into my site

Client side validation The validation code you have provided is in JavaScript. That suggests it is code that you use to do the validation on the client. Rule number one of securing webapps is to never trust the client. The client is under the full control of...