Is it okay to use a dropdown chevron in a checkbox?

Question

We have a feature where the user can select some checkboxes. They are all selected by default.

We are planning some UI/UX changes that will allow the user to cherry-pick, between these selections, a more detailed list of files/folders from each.

Once the user clicks the chevron, the idea is that a list of files/folders will appear beneath it, where the user can de-select specific files/folders.

This is what the UI mock-up looks like:

It raises a couple of concerns:

• When clicking "Backup Media Library", should it select/unselect, or expand/collapse?
• If the expand/collapse behavior is tied to the chevron alone (my preference), is it too small for the user to click? Should I replace it with something bigger, like [Show/Hide]?
• In this specific application, desktop users is a vast majority, but is this friendly enough for mobile users?

Bonus question: When expanding multiple sections, should I collapse the other sections, keeping only one expanded at a time?

Answer 1

My initial thought is that I'd personally avoid attaching a chevron to the checkbox like you've got in your screenshot because it's an atypical design pattern and therefore pretty safe to assume that a (possibly significant) percentage of your user base won't be familiar with it and they'll have to work to figure it out, which means increased cognitive load, and many may not recognize that the functionality to expand is even present and miss it entirely.

An alternative solution that is a more common design pattern would be what we call a treeview component. Here's a screenshot of one that I designed in our app.

It offers all of the same functionality that you're after i believe, and also brings scalability and as many levels of hierarchy as you want. Collapsed sections have a '+' beside them, which when clicked expands the section and displays the children. Children can also be expandable, etc. I think this might work better for you because most people have a basic understanding and level of familiarity with this functionality compliments of early Windows UIs. Of course it can be dressed up and polished better, but in the end I would opt for utilizing a design pattern that is more commonly recognized versus inventing something new that your users will have to learn.

Answer 2

There is a similar UI for managing exceptions in Visual Studio, which is fairly intuitive:

The key differences to the UI you have shown are:

• Chevrons/arrows appear to the left of the top level checkboxes, making the control more like a familiar tree control.
• The top level checkboxes are tri-state checkboxes so you can see if only all/some/none of the child items are selected even when they are collapsed.

Following this design the answers to your questions would be:

When clicking "Backup Media Library", should it select/unselect, or expand/collapse?

It should select (if not fully selected) or unselect, but not expand/collapse.

If the expand/collapse behavior is tied to the chevron alone (my preference), is it too small for the user to click? Should I replace it with something bigger, like [Show/Hide]?

It's no smaller than other UI controls, and seems to work fine for a desktop app, but probably would not be great in a touch UI, and I expect it would need to be larger.

In this specific application, desktop users is a vast majority, but is this friendly enough for mobile users?

It would probably need to be larger in a touch UI.

Bonus question: When expanding multiple sections, should I collapse the other sections, keeping only one expanded at a time?

No. The user may want to be able to see all the details, and scrolling would be better than expanding/collapsing.

Answer 3

• When clicking "Backup Media Library", should it select/unselect, or expand/collapse?

It should select/unselect. This is the default behavior and makes the checkbox more accessible.

• If the expand/collapse behavior is tied to the chevron alone (my preference), is it too small for the user to click? Should I replace it with something bigger, like [Show/Hide]?

Use indeed links or buttons with a descriptive label: "Show files and folders" and after expanding "Hide files and folders".

• In this specific application, desktop users is a vast majority, but is this friendly enough for mobile users?

Making it responsive should not be a problem. You can let text wrap like this (or keep it always this way):

Bonus question: When expanding multiple sections, should I collapse the other sections, keeping only one expanded at a time?

Keep it expanded. Change the "Show files & folders" button to "Hide files & folders" when expanded and let the user be in control.