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.

Post History

70%

+5 −1

Q&A 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...

2 answers · posted 3y ago by Canina‭ · edited 3y ago by Canina‭

Question user-interface-controls

#4: Post edited by

Canina‭ · 2021-08-26T20:48:13Z (about 3 years ago)

Copy Link

Raw

Markdown

Okay, this is driving me nuts with modern UIs.
Back in the old days, it was easy: Checkboxes were either checked, crossed, or whatever glyph the particular environment used for the purpose, to indicate that whatever was described by the label was *on*, true, active, selected, ...; or they were 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, but those were both 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, or (b) clicking it will turn what is described by its label "ON".
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*?

Okay, this is driving me nuts with modern UIs.
Back in the old days, it was easy: Checkboxes were either [checked](http://toastytech.com/guis/macos9.html), [crossed](http://toastytech.com/guis/win31.html), [starred](http://toastytech.com/guis/riscos.html), [filled in](http://toastytech.com/guis/DWindows.html), 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*?

#3: Post edited by

Canina‭ · 2021-08-26T20:11:59Z (about 3 years ago)

Copy Link

Raw

Markdown

Okay, this is driving me nuts with modern UIs.
Back in the old days, it was easy: Checkboxes were either checked, crossed, or whatever glyph the particular environment used for the purpose, to indicate that whatever was described by the label was *on*, true, active, selected, ...; or they were 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, but those were both relatively rare. (There's also radio buttons, but we can ignore those for now.) So a UI might include something like:
~~> ☑ This sentence contains a truthful statement~~
> ☐ Canines outnumber humans on the Internet by 10x
These days, *horizontal sliders* are often used to select between "on" and "off". In this world, the above might instead be rendered as:
~~> ░░█ This sentence contains a truthful statement~~
> █░░ Canines outnumber humans on the Internet by 10x
(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, or (b) clicking it will turn what is described by its label "ON".
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*?

Okay, this is driving me nuts with modern UIs.
Back in the old days, it was easy: Checkboxes were either checked, crossed, or whatever glyph the particular environment used for the purpose, to indicate that whatever was described by the label was *on*, true, active, selected, ...; or they were 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, but those were both 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, or (b) clicking it will turn what is described by its label "ON".
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: Post edited by

Canina‭ · 2021-08-26T20:01:03Z (about 3 years ago)

Copy Link

Raw

Markdown

Okay, this is driving me nuts with modern UIs.
Back in the old days, it was easy: Checkboxes were either checked, crossed, or whatever glyph the particular environment used for the purpose, to indicate that whatever was described by the label was *on*, true, active, selected, ...; or they were 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, but those were both relatively rare. (There's also radio buttons, but we can ignore those for now.) So a UI might include something like:
> ☑ This sentence contains a truthful statement
> ☐ Canines outnumber humans on the Internet by 10x
These days, *horizontal sliders* are often used to select between "on" and "off". In this world, the above might instead be rendered as:
> ░░█ This sentence contains a truthful statement
> █░░ Canines outnumber humans on the Internet by 10x
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, or (b) clicking it will turn what is described by its label "ON".
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*?

Okay, this is driving me nuts with modern UIs.
Back in the old days, it was easy: Checkboxes were either checked, crossed, or whatever glyph the particular environment used for the purpose, to indicate that whatever was described by the label was *on*, true, active, selected, ...; or they were 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, but those were both relatively rare. (There's also radio buttons, but we can ignore those for now.) So a UI might include something like:
> ☑ This sentence contains a truthful statement
> ☐ Canines outnumber humans on the Internet by 10x
These days, *horizontal sliders* are often used to select between "on" and "off". In this world, the above might instead be rendered as:
> ░░█ This sentence contains a truthful statement
> █░░ Canines outnumber humans on the Internet by 10x
(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, or (b) clicking it will turn what is described by its label "ON".
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*?

#1: Initial revision by

Canina‭ · 2021-08-26T19:58:18Z (about 3 years ago)

Copy Link

Raw

Markdown

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, or whatever glyph the particular environment used for the purpose, to indicate that whatever was described by the label was *on*, true, active, selected, ...; or they were 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, but those were both relatively rare. (There's also radio buttons, but we can ignore those for now.) So a UI might include something like:

> ☑ This sentence contains a truthful statement  
> ☐ Canines outnumber humans on the Internet by 10x

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

> ░░█ This sentence contains a truthful statement  
> █░░ Canines outnumber humans on the Internet by 10x

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, or (b) clicking it will turn what is described by its label "ON".

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*?

user-interface-controls

Communities

Post History