Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Q&A

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

+5
−1

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?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

2 answers

+2
−0

There's no set pattern for this, which is down to the fact that they're not a native control, unlike checkboxes. Each application is able to define and design its own sliders. As far as I can tell, the general convention is to read left to right; that is, a slider currently set to its rightmost position is to be read as ON (whatever that means in the context of the application).

As you said, some sliders will attempt to indicate state changes with text or icons. As far as I can tell, the general convention there is that the displayed text or icon indicates current state — so if a tick or the text ON is displayed, the slider should be read as currently ON.

These are just conventions in usage as far as I can tell. There's nothing to stop an application designing its sliders completely differently.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

+1
−0

Relying on my own experience, usually websites do some combination of the below:

  • The current state tells you how it is
    • That is, if it is green, it is on, and if it is red, it is off
    • Filled in means on, and not means off
    • If it has "on" visible, it is on, and if it has "off" visible, it is off
    • and so on
  • If there are labels on both sides, the side the switch is on is its state.
  • If there are no visible features, to the right is usually on.
  • Try hovering and see if it tells you.

Also, some UIs change the text when it is on or off. E.g. if the label says "Turned on" and changes to "Turned off" when you click to switch, you can be fairly certain whether it is on or off.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »

This community is part of the Codidact network. We have other communities too — take a look!

You can also join us in chat!

Want to advertise this community? Use our templates!