Switches in Unity menus
2012-06-07 13 Comments
Plans for the next iteration of the network status menu in Unity include the use of switch widgets.
As has been brought up on the unity-design list, their placement on the right is likely to make the issue of diagonal movement often opening adjacent menus worse. Independent of improving the menu mechanics, enabling/disabling could be handled differently in style and placement of the widgets.
I think the adoption of light-switch style widgets in point-and-click interfaces is a mistake. Their look implies a sliding movement, not just a click. They are unclear about whether the labels refer to the current state, or the state to change to (only the use of bright coloration for the On state helps here, but does nothing, if all you see is an Off).
If all you have to communicate is On/Off, what is wrong with checkboxes? They do have unclear target areas (in proper implementations, the label is clickable, too), but are well established and do not suffer from the problems switches have, as listed above.
In the middle: a different take on the switch widget, trying to do without separate label and state-labels. The state that can be switched to is represented by a button, while the current state is flat, as it is not clickable.
Finally an experiment, to see whether a strike-through approach could work for a very compact solution. It is hard to find a balance between legibility of the label and making the stroke clear.
Thorwil's 
You’re absolutely right about the switches. They’re conceptually flawed, for the reasons you mention, and they’re certainly not _better_ on a 2d surface. I’ve also seen opposite implementations, where the label displays the alternate state instead of the current one. I remember someone once switching to 230V from 180V because of that. Or at least, that’s what he thought. In reality, he switched from 230V to 180V, which meant instead of starting his brand new computer, he switched on the smoke generator.
Yes. And I always thought it was just me who did not understand those great new switches. I always try to change the setting (especially if it is off) to learnt what state it is in.
What about the push down button with the next text indicting ON/OFF?
Or the colored shadow around the push-down button…it could be themed..
Why not make the menu open towards the left? This would avoid the diagonal movement. Also, this should already be the default behaviour anyway, since the indicators are in the right side of the screen, and as such the menus always get constrained against the right screen border.
Example:
Interesting idea. It would cause additional eye movment, though, if the user first focuses the menu icon, and then has to look leftwards, instead of finding the menu items start right below.
has this design got accessibility planned in? What would orca say if you were using such a menu?
I’m not familiar with the capabilities of the current framework. I would advocate a split between representations, such that it does not matter how it looks for how it is read out at all.
The strikethrough concept is my favorite, but the on position is not clear enough for me. Maybe adding an outer glow to the text when on or something like that.
“Their look implies a sliding movement, not just a click. They are unclear about whether the labels refer to the current state, or the state to change to ”
Yes i agree 100%.
I’m going to have to disagree with you on this. Switches are widely used in touch interfaces, especially in iOS. In the touch world, the action is also a press (like a click) rather than a slide. No one seems to be confused by this nor by the status of the switch and you can’t fault Apple’s UI for being unintuitive. The purpose of the switch is to clearly demonstrate a large target (clicking on the option name is not intuitive) and to provide a better analogy: you are switching functionality on or off, not filling out a form. The only possible issue I see here is that we have to make sure that this is compatible with themes and accessibility features.
You say no one seems to be confused. Well, there’s Jo-Erlend, Aham and myself, http://www.arwebdesign.com.au/blog/usability/ios-on-off-switch/, http://de-vita-sua.blogspot.de/2012/05/apples-worst-interface-widget.html and I heard enough complaints in informal chat.
The design being from Apple doesn’t make it good and I and others can and do blame Apple UI for being “unintuitive” in specific cases.
Of course a design isn’t good just because Apple made it, I had just never heard any complaints from average users about iOS being unintuitive. But maybe I’ve been listening to the wrong people.
I do like the idea of using a “rocker switch” type metaphor similar to what Angus suggested, but where the depressed option is selected and the switch lights up when in the “on” position. This would solve the sliding confusion, maintain the large target area of the slider, and keep a relevant physical metaphor.