10

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?

Improve this question
4
  • 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, 2015 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, 2015 at 16:13
  • Related, might be duplicate: ux.stackexchange.com/questions/1318/…
    – Bowen
    Jun 5, 2015 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, 2015 at 2:09

5 Answers 5

Reset to default
10

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

Improve this answer
9
  • 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, 2015 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, 2015 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, 2015 at 19:16
  • ^ BTW, that link only works in Chrome for me. Google fan boys only, I guess. No Firefox love.
    – plainclothes
    Jun 5, 2015 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, 2015 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.

Improve this answer
6
  • 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, 2015 at 20:46
  • 1
    Take a look at where Apple was in iOS 6 vs now in iOS 8.
    – plainclothes
    Jun 5, 2015 at 20:50
  • 1
    Not intuitive at all.
    – Deer Hunter
    Jun 5, 2015 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, 2015 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.
    – user56945
    Jun 6, 2015 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

Improve this answer
3
  • 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, 2015 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, 2015 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, 2015 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.

Improve this answer
2
  • 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, 2015 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, 2015 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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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