0

We're using an iOS-style on/off switch to toggle selected items on/off. This switch will also reflect the state of the selected items. If you select items that are on, the switch will show on. Select items that are off, the switch will show off.

The issue comes if you select some items that are on and others that are off. For that, I need a version of the switch in some middle position. (Like a checkbox with a dash through it.)

Has anyone seen a version of that kind of switch that includes a middle position? Do any of you have any recommendations regarding my approach?

Madalina Taina
  • 4,491
  • 5
  • 21
  • 50
Paul Seymour
  • 343
  • 4
  • 12
  • Can you illustrate what you mean? Is the switch interactive? For example what happened when you select 3 mixed on/off items and you hit the switch? Or is it just an indicator of state (Ie not clickable) – tohster Apr 03 '15 at 18:45
  • The switch is both interactive and an indicator of state. Selecting mixed-state items and hitting the switch turns them on, much like in Microsoft Word if you select bold and plan text and hit the Bold button. – Paul Seymour Apr 03 '15 at 19:01
  • 1
    Another example is in Adobe products. Select 2 objects of the same fill color, and the swatch color shows that color. Select items of a different color, and the swatch turns into a "?" symbol. –  Apr 03 '15 at 19:32
  • A related question that I asked earlier that might also give you some ideas: http://ux.stackexchange.com/questions/75399/how-should-a-multi-state-toggle-slider-with-more-than-two-states-be-implemented – Michael Lai Apr 04 '15 at 08:53
  • I don't know about iOS but in .NET WPF you can set a CheckBox to IsThreeState = true for a third state. True, False, and Null. – paparazzo Apr 06 '15 at 12:45

3 Answers3

2

You may wish to investigate if an iOS-style on/off switch is the most appropriate metaphor for your situation.

A checkbox is a very traditional control which users are familiar with and has a very clear "on" and "off" state. They also overcome the common issue of if a switch should show state, or action when pressed, since their behavior is already well known. They also have familiar 3-state patterns:

enter image description here

enter image description here

If an iOS-style switch is the design of choice, you can try something akin to the following:

enter image description here

The on and off states are clearly indicated (my use of color is not a suggestion, it is simply an illustration) and the middle state is one of indifference to either state.

Community
  • 1
Nicholas Pappas
  • 17,667
  • 5
  • 53
  • 58
  • Thanks! This is where we landed as well.

    https://www.evernote.com/l/AAjwLe_9cZdJwKNv7HtVNJqPSDQREv_ruRs

     – Paul Seymour Apr 06 '15 at 16:41
  • I feel instead of white background color for the middle state, some other color like yellow(not sure if we can use) or blue can be given to specify the middle state. – Siva-Dev-Wizard May 04 '15 at 03:53
1

I think what you're looking for is a segmented controller. The switch is used for binary options where as the segmented controller allows for 3 (or more) mutually exclusive options. Hacking the switch design to accommodate for a third state isn't recommended since it it's not clear there's a middle state. It also requires you to slide to just the right position (esp for the middle state) and can accidentally slide to the next state by accident if the thresholds are too close.

segmented controller

Nicholas Pappas
  • 17,667
  • 5
  • 53
  • 58
skwokz
  • 779
  • 4
  • 9
  • 1
    Not in this case. The control the OP is seeking a 2-state control, with an "indeterminate" state for when multiple dissimilar records are selected. The segmented control would imply that the "indeterminate" state is a valid selection, which it is not. – Nicholas Pappas Apr 03 '15 at 21:46
  • Yep. The reason why a segmented controller won't work in this case is because there is no 3rd state that the user can choose. There are only 2 states. The switch just needs to show a state where buttons belonging to both states are selected. – Paul Seymour Apr 06 '15 at 16:40
0

First, it seems as though you're using the toggle for the wrong purposes.

With that being said, if you are set on using it, you can create a grey version with a dotted or dashed outline of the toggle/switch centered.

Something like this (quick sketch):

Mixed State Toggle

Chadwick Johnson
  • 31
  • 2