3

I'm working on a menu that can be toggled on or off, with sub-options within the menu that themselves can be toggled on or off. while logically I think it makes sense for both the parent menu and child options to have toggle buttons, visually it looks a little confusing. I've tried an alternate that uses checkboxes for the child items instead, which looks a bit clearer to me. Is there an alternate design pattern that would work better / feel more intuitive than these two options?

enter image description here enter image description here

Improve this question

2 Answers 2

Reset to default
1

Design priorities can help here.

I think a priority here is, let's use the best control for the job.

  • Checkboxes (without labels) are good for on/off states where it's clear what the check/uncheck states mean. Labeled toggle switches give you an opportunity to show what each state means ('on' and 'off').

  • I'm guessing the best control for your situation is the toggle switch, since the "on" and "off" labels are helpful to the user. So let's use that.

Now, you have a secondary concern which is whether a column of toggles will look awkward. Since it's a secondary concern, we should try to address it without abandoning the control altogether. Design can help a lot:

  • One of the problems with the wireframe is, the rounded toggles create an awkward visual flow from top to bottom on the right side. So, let's square them out to provide a smoother grid layout.
  • Another problem is distinguishing the menu toggles from the header toggles. So let's use design to make the difference much clearer.
  • Last, I hate small toggles because they aren't friendly to touch interfaces. So let's super-size all of them to make them more touch-friendly.

Here's a result which may be more successful:

enter image description here

Improve this answer
7
  • 1
    I agree that the square toggles work better when used in consecutive rows, but with your current mockup the main design tool to differentiate the parent and child toggles is color. Do you think that will be enough to maintain a clear hierarchy?
    – rlawrence86
    Mar 4, 2015 at 0:25
  • @rlawrence86 if the toggles are semantically consistent in the hierarchy (e.g. if toggling the parent means "enable this group of sites", and toggling the children also means "enable this site") then yes I think the uniformity actually helps. If the two toggle types mean something different, then you may want to deliberately introduce inconsistency in controls to draw attention to the difference (e.g. fighter planes use different controls intentionally to avoid false associations)
    – tohster
    Mar 4, 2015 at 0:34
  • @tohster you need also avoid ambiguity in the phrase 'enable this group of sites' - the OP means to retain the users choices, but there is also a common pattern the actually unchecks or checks all of the child items
    – Toni Leigh
    Mar 4, 2015 at 7:23
  • @ToniLeigh agreed. In my experience (and yours may be different), the terms 'disabled' and 'enabled' make no suggestion on whether data in a form is reset, cleared, or frozen upon a transition (they are orthogonal). In this case the OP wants to disable and freeze the child selections.
    – tohster
    Mar 4, 2015 at 7:50
  • @tohster - it's less my personal experience and more the way sites often respond
    – Toni Leigh
    Mar 4, 2015 at 9:34
1

Firstly, toggle buttons are somewhat problematic. Although they are a pretty common design pattern on modern touchscreen devices it isn't immediately obvious that one can activate them just by clicking. A user unfamiliar with this on-screen element but familiar with it's real life counterpart is going to try and drag it as we don't click such switches in the real world.

https://ux.stackexchange.com/a/43889/33233

https://ux.stackexchange.com/a/63886/33233

Also, if you look at sites like GMail or Amazon, who invest huge amount in UX you'll see checkboxes, not toggle switches.

Checkboxes mean on / off (yes, or no; or if you're geeky, 1 or 0) and have been used on the web literally billions of times to represent yes or no, on or off type choices for users.

You do also encounter a problem if you were to use the same element for the parent and the child (particularly a checkbox) as you imitate another very common web design pattern which is the all or none parent checkbox pattern. This goes beyond the aesthetic issue you raise in your question. There are 1000s of examples of this pattern throughout the web.

What I would recommend is the following design:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Where the on and off selections are clearly clickable and where the checkboxes themselves would remain set as the user left them. The current state would be clearly defined by which button was selected

Also, the entire panel would be either greyed out, collapsed or both while in the off state. Both of these actions and the switch in interface state depending on choice would help to reinforce the action.

PS ... I am assuming you want the checkbox set state to be retained regardless of the parent state, if not and the parent is a 'toggle all' function then use checkboxes throughout as this is a very well established, common and usable solution.

Improve this answer
3
  • 1
    Yes, you are correct in assuming that regardless of the parent state I want the checkboxes set state to be retained. Thank you for the insight into the potential click and drag issue with toggles on desktop, that hadn't occurred to me.
    – rlawrence86
    Mar 4, 2015 at 0:20
  • @rlawrence86 - I must admit I have it in for them a little, just because something works in 3 dimensions with direct hand control doesn't mean that drawing it on a 2d screen will make it easily accessible with keyboard or mouse!
    – Toni Leigh
    Mar 4, 2015 at 7:17
  • All good points. I'm not really a fan of toggle switches myself for the reasons you articulate. I don't really like checkboxes either because labeling them is awkward. Luckily nowadays there are other toggle widgets which I find better than either option, so we are blessed with choice as designers.
    – tohster
    Mar 4, 2015 at 7:58

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.