4 ms·
I experimented quite a lot with "3 state checkboxes" at Product Chart. The Product Chart interface offers a ton of checkboxes. Because the most typical use cas
by mg 5y ago
I experimented quite a lot with "3 state checkboxes" at Product Chart.
The Product Chart interface offers a ton of checkboxes. Because the most typical use case is that a user wants to "tick" a feature. Like "I want a laptop with a touchscreen":
https://www.productchart.com/laptops/ https://www.productchart.com/laptops/
But sometimes, users want to exclude a feature. Like "I want a 3D printer that is not assembled". After some experimentation with custom 3-state checkboxes, I decided to go with this type of dropdown:
https://www.productchart.com/3d_printers/ https://www.productchart.com/3d_printers/
By default it displays "Feature". And when dropped down it has the options "√ Feature" and "√ No Feature". So far, users seem to grasp this intuitively.
The nice thing is that it is self-explanatory and takes up only one line of space.
- noctune 5y agoNice site. I'm not sure the dropdown looks great on OS X though. On OS X, the selected option is prepended with √, so it looks like √ Feature √ Feature √ No Feature Selecting the second element then shows Feature √ √ Feature √ No Feature It ends up looking somewhat odd.
- mg 5y agoOh wow, you are right. The same happens on the latest iPadOS. Must have changed since I tested it last time. I guess that's why nobody is using native elements. They can break any time the browsers change their appearance. Guess I will have to create a custom element that "simulates" a plain dropdown.
- mwcampbell 5y ago> Guess I will have to create a custom element that "simulates" a plain dropdown. That would probably be a regression for accessibility.
- voussoir 5y agoAnother option might be to rephrase them as "Assembled or Disassembled", "Assembled", "Disassembled". At the moment you're using the checkmark to disambiguate between not-chosen and chosen, but rewording the not-chosen to clarify that it includes both could achieve the same goal.
- marcellus23 5y agomacOS has always displayed selected menu items that way.
- remram 5y agoYou should probably add this to the brands as well, so I can search e.g. "not Lenovo" or "not Google". A "select all" button would also make it faster to get that.