115
votes
Boolean switch with a third state
Here:
You are creating a search-filter? Just add an option that means you don't care about this filter option.
male | female | doesn't matter
Other names:
Any
Either
Everyone
N/A (Not Applicable)...
- 1,491
80
votes
Accepted
Boolean switch with a third state
If I understood correctly the premises of the question, what the user should decide is:
If the user wants to consider (filter by) one of the following options
If the answer to 1 is Yes, then choose ...
- 16.8k
67
votes
Accepted
Should a select all toggle button get activated when all toggles get manually selected?
I am not a fan of the approach you have suggested. I find that having a global toggle can be confusing. The reason for this is exactly why you are unsure and asking this question - because there are ...
- 7,061
56
votes
Accepted
How to indicate a checkbox/toggle is "always on"
Consider removing UI elements that have no function, and add labels to emphasize the options the user does have.
For a simple form, there's a lot going on in this interface. Not only are you letting ...
- 8,878
48
votes
Cookies - Should the toggles be on?
Simple answer, the law states that they must be off per default.
Privacy by default:
https://www.ics.ie/news/what-is-privacy-by-design-a-default
Accept all/reject all buttons are a nice touch, go ...
- 1,086
45
votes
Accepted
Toggle states display
Material Design Shows the Locked State by a greyed-out version like this:
But the problem here is the accessibility. Users with vision-related disabilities won't be able to differentiate these two.
...
- 3,599
35
votes
Mutually exclusive Switches
The way I see this is that you have two exclusive groups of options, it just happens that the second group only contains one option.
Something as simple as the word 'or' will help a lot - that way it'...
- 982
32
votes
Accepted
Does an on/off switch still means on/off when positioned horizontally?
I think your assumption that vertical switches are always up=on and down=off is wrong. In instances where two switches control the same thing then it is very easy for them to get out of sync. For ...
- 7,061
29
votes
Boolean switch with a third state
What you're searching for is "both", "any" or "all" (in case you add more gender categories).
All - Female - Male
So that makes it clear that results from both (or all) genders will be included. And ...
- 1,178
29
votes
Mutually exclusive Switches
Your constraints limit you to only four valid choices:
A and B
Only A
Only B
Only C
I would just use a set of 4 radio buttons.
- 399
25
votes
Should a toggle button show its current state or the state to which it will change?
There's already 18 answers here so this might be late to the party, but it makes sense to use checkboxes in such situations. Some examples:
And when selected:
This is similar to the "dim / lit" ...
- 509
22
votes
Mutually exclusive Switches
What I understand from the question is that A, B, and C are independently selectable but selecting C disables A or B.
What is the way to graphically show three selectors where one is linked to the ...
- 18.3k
21
votes
Accepted
Cookies - Should the toggles be on?
As the most highly voted answer is simply false I am writing this answer just clarify the legalities in the EU.
Under GDPR there are 6 lawful bases for processing personal data. The two we care about ...
- 3,289
21
votes
Mutually exclusive Switches
Option 1
Note: this was the original answer before the question was updated (see comments).
I think what you essentially have here is two groups. You have the "A and/or B" group, and you ...
- 7,061
20
votes
Toggle states display
While having a "faded" style for disabled controls is quite standard, the problem here is that the difference is too subtle for the user to clearly see.
You could change the colour from ...
- 7,061
16
votes
Accepted
How to represent a switch "tabbed" state in Material Design?
Just use the style is recommended on Material design | Components– Selection controls | Switch
- 4,481
14
votes
How to indicate a checkbox/toggle is "always on"
Since the enabled-disabled and required-optional fields are interdependent, why not combine them to make the concept of enabled implicit?
Field | Disabled Optional Required
--------------+---...
- 636
13
votes
Should a toggle switch's label be on its left or right?
Labels on either side serve different purposes.
In reading order,
Labels before the switch (on the left or top for LTR languages) indicate what the switch is for.
Labels after the switch (on the ...
- 9,597
12
votes
What's the difference between a toggle switch, radio buttons and a tickbox? What's the best cases these patterns can be used?
Well, it kind of depends on which system you are.
There are mobile guidelines for Android, iOS and Windows.
iOS, for example, doesn't use regular checkboxes (they are not called tickbox btw) or radio ...
- 6,816
12
votes
12
votes
Boolean switch with a third state
In many situations, context is really really important, and it may be sensible to look at a consistent way to do all filters, and not just the male/ female one. As the question states:
The form of ...
- 1,424
12
votes
Does an on/off switch still means on/off when positioned horizontally?
You're possibly using a two-state switch to control three states:
Off | Auto | On
"Activating the switch when the fan is on will turn it off, and vice versa."
Like a lightswitch in a room ...
- 12k
11
votes
Should a select all toggle button get activated when all toggles get manually selected?
Personally, I prefer to have it toggled on/off too, depending on the children state.
At least with the design above, it makes sense to also change the 'parent' state, because should the user want to ...
- 363
10
votes
Should a toggle button show its current state or the state to which it will change?
I would recommend watching the following video (from 1991!) which was seminal to the current design of the iOS toggle for instance:
https://www.youtube.com/watch?v=wFWbdxicvK0
And corresponding paper:...
- 668
10
votes
Accepted
What breakpoint width to switch to mobile menu?
Forget mobile breakpoints, there's no phone and tablet sizes outside marketing. Breakpoints should follow the content, not the screen size.
As a simple example, let's consider the menu:
Home | ...
- 373
10
votes
Accepted
Toggle Switch position the right way?
Avoid ambiguity
The control should clearly tell the user where to click / swipe and what the result will be.
Take these iOS toggles for example:
In juxtaposition, a user can easily tell which ...
- 21.3k
10
votes
Accepted
Should I translate ON and OFF in a switch element?
While it depends on your demographics, I would say yes, you should translate it. It also depends on whether you are translating everything else. Having a translated control in the middle of other ...
- 37.3k
9
votes
Checkbox vs toggle
The implementation of the switch that you have show is not correct.
Refer to the image attached.
9
votes
Boolean switch with a third state
For a selection which includes 'no choice', plus other, exclusive choices, a good old fashioned select box is great! In this specific case, it would allow you to have a default of "Don't filter", plus ...
- 982
9
votes
How to indicate a checkbox/toggle is "always on"
I've tried: grey (looks if they're off) and darker green (doesn't really communicate the functionality).
You're absolutely right that making the toggle switches grey would look like they were 'off', ...
- 422
Only top scored, non community-wiki answers of a minimum length are eligible