What's the pattern for how on/off sliders work?

Okay, this is driving me nuts with modern UIs.

Back in the old days, it was easy: Checkboxes were either checked, crossed, starred, filled in, or whatever glyph the particular environment used for the purpose, indicating that whatever was described by the label was on, true, active, selected, ...; or they were (generally some variation of) blank to indicate that it was off, false, inactive, unselected, ... Clicking on the checkbox switched its state between checked and unchecked. Some advanced software had tristate checkboxes, and some checkboxes were used purely for information and couldn't be changed by the user, and some software automatically unchecked other checkboxes when another was selected, but those were all relatively rare. (There's also radio buttons, but we can ignore those for now.) So a UI might include something like:

☑ Use private mode by default
☐ Participate in surveys without asking

These days, horizontal sliders are often used to select between "on" and "off". In this world, the above might instead be rendered as:

░░█ Use private mode by default
█░░ Participate in surveys without asking

(It doesn't help much that the sliders are sometimes to the left of the label, and sometimes to the right of the label.)

I suppose this is meant to map to some real-world analogy of physical switches, but there's a very real difference.

Real-world physical switches typically map to some effect that is observable irrespective of the switch that controls it.

If I know that a switch controls a particular light, then I don't need to know whether the switch being in position A or position B maps to the light being on or off; I can look at the light and see if it's on or off, and if it's not in the state I want it, I just flip the switch. If it's still not in the state I want it in, then something about it is broken, or there is a power outage, or whatever. In neither case do I need to remember, under normal circumstances, which way the switch goes to turn the light on or off.

More often than not, that's not the case in software. Whether a setting is on or off might not have any immediately observable effect at all.

Different color schemes between different applications doesn't make it easier.

Some applications even try to be helpful by displaying a text within the slider; something like "ON" or "OFF", but usually only one is shown at a time, so I can never be quite sure whether a slider showing "ON" means (a) it's currently in the ON position, so what is described by its label is currently ON (making the text mostly informative), or (b) clicking it will turn what is described by its label "ON" (similar to an action button to change the state).

So: what's the pattern, and how to remember it? How do I determine, without flipping it back and forth and trying to deduce state from things like color changes or other controls appearing, disappearing, being enabled or disabled, whether a UI slider is set such that a particular thing is currently on or currently off?

posted over 2 years ago

CC BY-SA 4.0

2y ago

Canina‭

1064 reputation 5 20 122 48