Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?


Update:

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.
share|improve this question
3  
That's the problem with trying to be "cute" or "advanced" and using graphics on controls. –  dnbrv Apr 29 '12 at 17:40
5  
Only partially related, but you may find it interesting: Should a toggle button show its current state or the state to which it will change? –  jensgram Jun 21 '12 at 11:24
1  
is it possible to blur the text of the non-active state? –  zzzzBov Jun 21 '12 at 15:56
    
I don't think this is a duplicate. This question is about what the buttons should be named. The other is about which should be highlighted. –  3nafish Oct 10 '13 at 1:37
add comment

marked as duplicate by greenforest, Charles Wesley, kontur, ChrisF, Matt Obee Oct 9 '13 at 8:23

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

5 Answers

up vote 21 down vote accepted

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

mockup

download bmml source

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

share|improve this answer
    
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 '12 at 18:55
    
+1 for the mockups andthe interesting feedback idea. –  Lisa Tweedie Jun 22 '12 at 20:35
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
2  
But does "Automation off" mean "Turn automation off" or "Automation is currently off"? The text needs to be unambiguous. –  Andrew Leach Jun 22 '12 at 20:55
add comment

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

enter image description here

Or you could use sliders and

  1. Highlight current state = thumb control

E.g...

enter image description here

share|improve this answer
1  
+1 for graphic of sliders and the clear wording: enable and disabled, makes it obvious which active. –  FrankL Jun 21 '12 at 13:03
add comment

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