Say I have some state which the user can toggle, for example [ON] | [OFF] .
Typically, I use ONE switch (BUTTON) and when the thing is ON, the user sees:
LIGHT IS [ON]
When it is OFF they see
LIGHT IS [OFF]
My question is: is it obvious (sensible) that one should click [ON] to turn the light [OFF]?
How do you do it? Any thoughts or ideas appreciated.
I would definitely include the notion of a checkbox-like control if clarity is your concern. This is a widely accepted interface component, that most people understand.
In any case you can make the entire line clickable, so that it toggles when I click the text as well (just like an HTML Label element).
Showing a button with just the text 'ON' might confuse users whether it toggles the light on, or if the current state is 'on'.
I would use a label and an button to show the action.
Light is On - Switch Off?
Clicking that would change both the label and the button to:
Light is Off - Switch On?
This solution clearly states the status and the action available.
An image speaks a thousand words...
Depending on the type of application, displaying a light switch image that you can click to set the state of the field might be more intuitive?
You could then have a lightbulb-on and lightbulb-off image to show state.
Not everyone knows what a checkbox is ;)