For about a year now, we've used toggle buttons on a couple of segments of our site. We try to be very consistent in our user interfaces, always using the same blue button styles for every clickable button.

On/Off Toggle

However, I've become paranoid of the intuitiveness of this button, realizing that there are two possible trains of thought.

"On is highlighted so it must be turned on"

Which is the default expectation.

"On is clickable, which means I must click it to turn it on"

A fair thought, because to perform an action, one usually clicks a blue button labeled with the action they'll be performing.

This lead to a concept, which addressed by two primary concerns. It removed the fact that the both states had the appearance of buttons, and made the blue button consistent with all our other uses.

Confusing Status Toggle

It was then suggested to me that "On" and "Off" are more likely to make sense from a non-technical user standpoint. However to label "Off" does not describe an action, making me think it should be prefixed as "Turn Off" and "Turn On" respectively. That is, until I realized the negative connotations to those phrases.

So my question comes down to, what should I put on the button and it's counterpart?

Am I going backwards with this entire thought process by deviating from what is becoming a standard with On/Off toggles?


Based on the chosen answer bellow, plus a large number of iterations, the following is what I settled on for this use case.

Status Toggle

  1. It maintained consistency with other action buttons.
  2. Color identification on the state helps quickly determine the status.
  3. Strong (active) wording "Running" and "Not Running" help people understand this is the current state over "Enabled" "Disabled" in our testing.
  4. Being verbose and explicit on the action button was necessary, some people still assumed "Disable Cron" on a button meant that cron was disabled, even when it said "Running" in green lettering next to it.

5 Answers 5


I think the major issue is having a single colour for action buttons and nothing explicitly indicating status. Colour is a very strong visual indicator and is more likely to be linked to status than a call to action.

The toggle button is definitely ambiguous. You could use an Apple-style slider


download bmml source – Wireframes created with Balsamiq Mockups

or some other visual indicator with a button in your house colour.


download bmml source

(First attempt with mockups. Hope that's intelligible)

  • 1
    I believe the latter is a good example of making it accessible, since it would make it a bit more clear for people with cognitive disabilities.
    – Gert G
    May 2, 2012 at 18:55

To reduce ambiguity I suggest:

  1. Using the action as the text of the toggle button, make sure the button isn't highlighted.

  2. Highlight the action on mouse over/focus.

  3. Highlight the current state.


enter image description here

Or you could use sliders and

  1. Highlight current state = thumb control


enter image description here

  • 1
    +1 for graphic of sliders and the clear wording: enable and disabled, makes it obvious which active.
    – FrankL
    Jun 21, 2012 at 13:03
  • I guess when the user scans the screen, there is a tendency to read "Enabled" as "Enable". Just a thought! Aug 1, 2014 at 8:02
  • @sudarsanyes That is why I suggested using bright colors to emphasis the active state vs dim colors to indicate the inactive state. Aug 1, 2014 at 19:58

You can replace you on-off-button with simple select with such options:

  • on
  • off

Everyone will understand what option is enabled and everyone knows how to use it.


Having both statuses on the button can cause user confusion -- that's why sliders in iOS work well. The current status is clear and the design of the button affords easily switching to the other status. You could certainly adapt them for your current UI (touch or otherwise) and allow the user to either click or drag the slider to change statuses.

It's also worth doing some research into whether On/Off or Enabled/Disabled makes more sense to your users. On/Off is certainly more simple but Enabled/Disabled can add a slightly more technical flavor to the option. This would be helpful if you have non-technical users adjusting a semi-technical setting; it will help them double check that they're adjusting what they really want to.


Surprised to hear you talk about "non-technical users" being a concern when labelling your buttons as the message you give in the example is:

"Enable the scheduling of automatic routine tasks on your slot" and the message is named Chron.

Perhaps it is worth establishing who exactly you expect to be reading this message. If they are technical enough to understand the dialog then they understand enable/disable. If they are not technical and would prefer on/off then perhaps the dialog message is poor.

When it comes to buttons -

I'd encourage avoiding a slider in a non-touchscreen setting. They don't have the same usability because users aren't sure if they just need to click them, or click and drag them. Touch screen interfaces have a consistent way of interacting with sliders while non touchscreen interfaces don't.

My suggestion would be have a single explicit button which says something like "Automation off" and clicking the button causes it to change to a toggled state with text reading "Automation On". As for how to visually design the toggled state, make the button look inset (like a play button on a very old tape recorder which clicks in and pops out when stopped)

A single button gives a clear interaction. The text gives a clear indication of state. The inset visual on the button makes it clear you are showing the current state rather than the action.

  • 3
    But does "Automation off" mean "Turn automation off" or "Automation is currently off"? The text needs to be unambiguous. Jun 22, 2012 at 20:55
  • I've never used sliders on a non-touchscreen, but I guess that anybody capable of switching on the computer would find it out. Moreover, it's one-time problem (sure, you can forget it when used too rarely, but the cost is a single click once in a blue moon).
    – maaartinus
    May 18, 2014 at 4:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.