Document interaction around disabling checkboxes/radio buttons with nested elements

[aminalhazwani]

When a checkbox or radio buttons has selected nested elements and a user uncheck/deselect the top level checkbox/radio buttons those nested elements do not have change their state. I can provide a picture later next week!

[johannhof]

This question comes up quite often in Firefox, for example here: https://bugzilla.mozilla.org/show_bug.cgi?id=1423564#c4

There are precedent cases for both behaviors in Firefox right now, most of them can be found in about:preferences, I guess. Let me know if you need examples :)

[johannhof]

See also https://bugzilla.mozilla.org/show_bug.cgi?id=1431280

[designakt]

After looking into this I found that there are quite a few different ways how this is implemented in Firefox, and in other systems.
I created a demo, exemplifying all options:
https://designakt.github.io/PDS/components/nesting_UI_elements/

I will bring this up in tomorrows Design Critique, and see if UX can find a agreement to only use 1 or 2 of those ways of nesting elements.

Personally I favor the unckeck and disable as it leaves no question about the state of the sub-option, as a disabled but checked could.

[johannhof]

Ha, that is an amazing example.

Personally I favor the unckeck and disable as it leaves no question about the state of the sub-option, as a disabled but checked could.

But that incorrectly reflects the state of the sub-option. IMO we should not translate "this doesn't apply" (which is why it's disabled) to "this is turned off" (which is why it's unchecked). That is just as confusing.

[designakt]

After running this by many other designer in 2 critiques, and double-checking with Philipp, we decided to go with recommending 2 possible options:

• Disable Sub & hide State
  default behaviour
• Hide Sub
  only to be used if showing all sub-options would overwhelm the interface with too much complexity. (so not if it only hides 2 check-boxes, but if there is a lot more nested and it is not needed in most cases. Or if on mobile and space is scarce.)

(Some concerns where voice on hiding the state, and we expect both options to have minor pros and cons, but standardizing on one will undoubtedly simplify the UI.)

[designakt]

Personally I favor the unckeck and disable as it leaves no question about the state of the sub-option, as a disabled but checked could.

But that incorrectly reflects the state of the sub-option. IMO we should not translate "this doesn't apply" (which is why it's disabled) to "this is turned off" (which is why it's unchecked). That is just as confusing.

I agree that because of the way we implement many options, that there is a difference between "this does not apply" and "this is turned off" - assuming each checkbox is directly paired with one boolean preferences in about:config.
For the user this makes very little difference when they want to know if the browser does something or not. Introducing a third state ("does not apply") just makes it harder to answer that question.

[designakt]

draft page for Nesting online:
https://firefoxux.github.io/photon-staging/patterns/nesting.html

[designakt]

Next steps:

• add UI examples of nesting (not just checkboxes... and also mobile)
  • have not found many mobile examples in Firefox for Android
• cross-link with relevant components
  • seams to only be checkboxes for now (drop-down will be relevant and maybe button/list)
• describe ui behaviour for both options of nesting

[aminalhazwani]

@aminalhazwani add classes to videos so that they scale properly on mobile viewports
@designakt remove the overlays before pushing to master