Toggle Buttons "Turn On" vs "Enable" [duplicate]

Question

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.

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.

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?

---

Update:

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

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.

Answer 1

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)

Answer 2

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.

E.g...

Or you could use sliders and

1. Highlight current state = thumb control

E.g...

Answer 3

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.

Answer 4

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.

Answer 5

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.