gui design – Ought to a toggle button present its present state or the state to which it can change?
Brief Reply:
Fairly a late reply, however I am stunned nobody right here pointed this out earlier than — it’s potential for a toggle swap to indicate its present state and the state to which it can change merely by having textual content exterior the button, as an alternative of on it.
Lengthy Reply:
As dotancohen factors out:
The issue is that in English “on” and “off” are each adverbs and adjectives.
Buttons which have textual content exterior of their physique use this actual fact to their benefit! Learn on…
Take the iOS swap design:
Let’s deal with the state that is blue and says ON for instance.
Are you able to inform if the swap is ON presently, or if it can go on when you transfer/click on/faucet the slider? Is the textual content apparent? Is “ON” right here a state(adjective) or motion(verb)? Unclear. Is the colour of any use that can assist you resolve this? Most likely, however not definitely — iOS customers could also be habituated to the states of this design, however there is not any telling how non-iOS customers would interpret this. To see what I imply, take this actual life trip-switch, which has the identical design because the iOS swap — are you able to inform for certain if the journey swap is presently ON?
The swap beneath is alongside the strains of the iOS design, however far worse…
…it is not even clear which half the slide/click on deal with is!
Then again, the OS X swap design leaves no room for ambiguity:
The query from jensgram’s quote…
If the button says ON when the state is off, it’s unclear what the setting is. Whether it is OFF when the state is off, nevertheless, the place is the ON button?
…by no means arises right here because the button neither says ON nor OFF — it simply stands by itself. Additionally, there is not any confusion in regards to the context of the phrases ON and OFF — they’re very clearly states (adjectives) since clicking on them (within the regular design) would do nothing!
It might be fascinating to notice {that a} modification to this design would enable for the textual content on the far facet of the button to be made click-able/tap-able. If that’s the case, the phrase nearer to the switch-handle is the state, whereas different one is the motion, and the roles are reversed when the swap is toggled.
Even so, the consumer’s perspective of the swap is not altered — at no level is the consumer confused in regards to the present state of the swap. In truth, the design could possibly be additional enhanced for consumer friendliness by highlighting the present state:
The Home windows Metro UI design for the swap goes a step additional, and removes the “motion” textual content from the button, and retains simply the “state” textual content:
The colour of the button signifies the present state (lit up = ON, as in actual life), and the phrases On/Off beneath the choice textual content reassure the consumer of the present state.