0

the user has an operation where they must target a list of objects for that operation to affect.

there are four major use cases:

  • User knows exactly what they want; this is usually one to a handful objects, typically of the same type and hierarchy

EX: I want to select Honeycrisp and Golden Delicious specifically

  • User wants to browse for choices inside a container

EX: they look inside the container Fruit / then Fruit / Apples / to locate Fruit / Apples / Honeycrisp and Fruit / Apples / Golden Delicious

  • User is looking for a specific kind of object and needs to browse through a list matching the query

EX: Red Fruits or Red Fruits NOT Apples

  • User wants to select a container and an object and a group of objects

EX: I want to target Fruit / Apples / Golden Delicious and Fruit / Grapes / and Red Fruits NOT Apples

additionally, the ui needs to live in some kind of hideable state (modal/bottom sheet or side panel slideout, etc...) since it needs to be used by screens where space is a premium.

is there a pattern that I'm not thinking of? Leadership asked for everything to get dumped into a table full of checkboxes, but that doesn't address the multiple heirarchies...

1

I think you could use a directory tree style. The reason for this is because you can select multiple individual items, and even full folders (categories), while having the option to expand or collapse items, just as in any file manager

enter image description here

The only difference is that you should add a checkbox, or be careful when you code the "folder" to allow for multiple actions (select all elements, select some elements, expand, collapse)

I have wireframed 2 options below: one where you can simply select all items and they will be marked, and the other where you can use checkboxes. Please note in the second version how sub-trees that have all items selected have a checkmark, while those that have mixed content show a grayed out square. This is a common pattern for file managers, so its affordance will be quite easy to understand for most users

enter image description here

All this being said: As everything UX, you must test it out :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.