Comment by mg | Hacker News Reader

Comment by mg | Hacker News Reader

Parent Full thread

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/

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/

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.

Nice 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.

Oh 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.

Another 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.

> Guess I will have to create a custom element that "simulates" a plain dropdown.

That would probably be a regression for accessibility.

macOS has always displayed selected menu items that way.

You 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.

Reply on news.ycombinator.com