9

So I've been tasked to find a way to "pretty up" an originally checkbox-based interface and in the process of doing so I've mocked up three designs (seen below). From top to bottom we've got a toggle, a checkbox, and a switch design stolen wholeheartedly from Microsoft's UX guidelines.

Mockup designs

The initial design I was handed was the top toggle switch except the off state was the same blue as the active state. This was deemed confusing and so the original suggestion to fix it was to instead have the "on" state be green and the "off" state be red; that works but comes with a host of other usability issues such as how it means using colors which are reserved for other, very specific classes of actions in the application, so I'd like to avoid that if possible. The gray color here is my compromise to avoid the red/green toggle switch but the color

Realistically any instance which uses a toggle like this should really be a checkbox or a select box, but since those aren't "pretty" enough those options have been dismissed. So I'm basically running out of (good) ideas here--can someone point me to alternatives?

  • Your ideas look pretty good. For some other ideas check out some of the graphics here: images from Google for toggle switch – Happy Coder Jun 5 '15 at 16:06
  • Give the first one a try, but without generic “Yes” and “No”. Use “Locked”/“Unlocked” and “Unavailable”/“Available” instead. You can do the same with the third one if you add a left and a right-hand label to the switches. – Crissov Jun 5 '15 at 16:13
  • Related, might be duplicate: ux.stackexchange.com/questions/1318/… – Bowen Jun 5 '15 at 23:24
  • The toggles you present are less than ideal because it's not clear which is the active/inactive state, especially for the available one. Is grey active or nonactive? plainclothes's examples below are much clearer. – curiousdannii Jun 6 '15 at 2:09
9

The checkbox is not dead

To your point, a checkbox is perfectly suited to this purpose. In your example, it's not handled with any finesse but it does get the point across. A good UI designer can help you not only "pretty up" your checkbox, but also reduce the friction of interacting with them.

The toggle ain't bad either

You have to change your thinking a bit to get toggles right. It really is a physical-to-mobile-to-desktop situation. Let's face it, many people interact with their phones more than their desktop computers (at least in a thoughtful way). They're starting to get used to these toggle things that are on every mobile OS.

Toggles can be implemented in three distinct ways:

  1. Purely as indicators, with the text adjacent (like Microsoft's spec). I think this is more like a bad checkbox than a good toggle.
  2. Boolean indicators with explicit values. This is where you have a label, a toggle, and yes/no or on/off as a sort of sliding button on the toggle.
  3. Segmented buttons. Everything the user needs to know is in the toggle, they just click on the value they want.

Advantage toggle?

Solutions 2 and 3 above actually have one advantage over checkboxes: The toggle explicitly states a negative value, no interpretation required. With a checkbox it is implied, however clear that implication may seem to you and I.

The other traditional control that matches this advantage is radio buttons for each setting indicating yes/no. That's not commonly done and doesn't look very "pretty", but the value is clear.

Examples

I think all of these are perfectly valid. See my next point for finding the right one.

enter image description here

Respect the user

Try out some options on representative users (not internal clients ;-) and see what they respond too. Ultimately, that's the only right answer.

For further examples, ask Google about "boolean switch ui".

  • Ideally these WOULD be checkboxes instead of toggles--toggles are something I personally would reserve for toggling states and not to denote boolean values as part of complex forms. But that's not really "pretty"/"GUI" enough so I'm trying to find a one-size-fits-all solution. The radio buttons was suggested earlier but that route has got its own issues. I think just trying to dress up checkboxes is the only realistic way to go here, and hope that'll turn out better. Thanks! – moberemk Jun 5 '15 at 19:03
  • Isn't toggling a state just a boolean value? It's just a true/false setting for a particular property, right? – plainclothes Jun 5 '15 at 19:13
  • One thought on the prettification of checkboxes ... how about some of that fancy Material Design reactive controls mojo? I find it totally addictive! – plainclothes Jun 5 '15 at 19:16
  • ^ BTW, that link only works in Chrome for me. Google fan boys only, I guess. No Firefox love. – plainclothes Jun 5 '15 at 19:17
  • I think "Locked: Yes|No" seems to come naturally, when visually reading. Not sure about the red color though. That would depend on the use case I guess. – harsimranb Jun 5 '15 at 21:40
1

Here's a toggle that's just slightly different from your options:

enter image description here

The difference being that the only text that is visible is the current state. This changes the mind's dialogue from:

Oh, a toggle. I see "yes" and "no", but it looks like the "yes" is colored a bit more vividly so I'm going to conclude that it showing "yes".

To this:

Oh, a toggle. I see "yes". Must be on yes.

  • 2
    There's a big problem with this solution (it plagued iOS): It gives you current status, but where do you click to switch it ... I know the answer, but does the user have to think about it? – plainclothes Jun 5 '15 at 20:46
  • 1
    Take a look at where Apple was in iOS 6 vs now in iOS 8. – plainclothes Jun 5 '15 at 20:50
  • 1
    Not intuitive at all. – Deer Hunter Jun 5 '15 at 21:26
  • @plainclothes good point.. Would that be true for any toggle where there is plenty of space for both the "on" and "off" sides (like the ones in the OP and your answer)? The new iOS toggle is small enough that the entire toggle is one place to click so it doesn't run into that issue. – Sentient Jun 5 '15 at 21:53
  • 2
    I've seen enough toggles where the display is "this is what clicking will change the option to" rather than "this is what the option is currently set to" that I'm not sure this would be obvious. – Hurkyl Jun 6 '15 at 1:16
0

The checkbox is SIGNIFICANTLY better in terms of familiarity/usability. Use checkboxes and make it as aesthetically pleasing as possible. One option is to reinforce the checkbox state by coloring the whole item when in the checked state:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    "The checkbox is SIGNIFICANTLY better" < I think that's highly debatable today. Can you reference anything (recent) that clearly gives checkboxes the upper hand? – plainclothes Jun 5 '15 at 20:04
  • @plainclothes TBH my claim is based on anecdotal evidence, but I've seen such a high percentage of people (still) confused by checkbox substitutes I feel confident making that claim. – obelia Jun 5 '15 at 20:11
  • Interesting. I've seen very high success rates with toggles in non-technical hands. My anecdotal, non A/B impression: faster than I've seen with checkbox config panels. As with everything, it's all up to the user ;-) – plainclothes Jun 5 '15 at 20:24
0

Interesting question. As some of the other users i think checkboxes are appropriate to your purpose. For the "Locked/Unlocked" option i'd try to use an image with a two state lock, one locked and one unlocked.

  • The lock idea is interesting, but it only applies to one setting out of presumably many. Do you think that would pose a UI problem? – plainclothes Jun 5 '15 at 22:29
  • Well of course it would be appropriate only for limited cases. If used in wrong context it might confuse users. – storm87 Jun 6 '15 at 11:47
0

It is pretty confusing to grasp, and then remember de color codes... Why not use physical analogy from safety switches and safety covers?such as... Cover down means "locked", and it is really locked LOL... enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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