Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
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?
2 answers
You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.
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.
0 comment threads
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.
0 comment threads
0 comment threads