What is the best layout for a hierarchical menu with multiple actions?

Question

I am working on a project that uses a root/leaf node hierarchy menu to search, view, select and open content on a desktop platform. The user will need to have the option to do one, 2 or all of these actions depending on what page they are on. I'm trying to come up with a common component or consistent layout/design that can be used across the board with all, one or some of the components. (For desktop and tablet)

User actions - Select content via a checkbox. Open root node to view sub sections via the triangle. See content via a sideward chevron. Drag and drop menus via drag icon.

In different contexts some of the actions are removed, see below. What is the expected behaviour of the area in blue for each case?

If the user clicks the chevron at the root level they are brought to a detailed view page of all the items in that node.

I can't find any examples of menus this complex anywhere. Any suggestions?

Answer 1

Hmm.. The only UI that comes immediately to mind is the "Turn Windows features on or off" dialogue. You can see similar UI during advanced software's install process.

It is similar your application in that:

• List of nodes
• Nodes can have children
• All nodes are "selectable"

Note that different icons are used when all versus not all children are selected.

If you are worried that your compenent is too complex (it really does do a lot), then it might be worth breaking your flow into two separate components. For example:

• Step 1: Sorting list items
• Step 2: Selecting parent items and their children

There aren't always concrete answers, which is why it's important that you know the persona you're developing for. This specific problem might be a good use case for split testing, or slowly growing the component/process and watching users interact with it for the first time for some real-time feedback.

Answer 2

Your hierarchy reminds me of the nested hierarchy of parent and nodes in iOS development(Xcode) interface. I have a windows machine and this is not to compare the two but from a pure user experience point of view, I find checkboxes quite confusing when there are too many children in the list. If you could highlight the selected child after selection, it's much better from readability point of view than visually searching for which checkbox is selected and which is not.

Answer 3

I Agree with Daniel Brown when he says that "it's important that you know the persona you're developing for" Case in point:

I am working on a similar problem, though my end users manipulate hierarchical data to verify its quality before importing it to a database so calls to action are quite different.This being said, I think the solution I am working on might help.

The solution I am working on allows users to drill-down through hierarchical data to view the details of a specific branch of the hierarchy while still maintaining the possibility to navigate back to the parent category via breadcrumbs with minimal effort. the solution looks roughly like the mockup below. Hope that helps