4

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.

possible solution

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

Some actions removed

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?

| improve this question | |
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.

Windows Features (Turn on or Off) dialog

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.

| improve this answer | |
1

iOS development

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.

| improve this answer | |
  • +1 for the example that shows the content. that bit I couldn't get to in my head and preserve the menu state. – K7Buoy Feb 3 '16 at 21:45
  • Thanks for replying. I agree it's visually more compelling and a nice solution but the primary task for users will be to browse content down the hierarchy of each node sometimes 7+ levels deep before selecting one or multiple options. My concern with using the area in blue to select a parent node or leaf is that the real estate click space to expand a parent node is minimised to the size of the triangle (say 32px X 32px). Would it not be better to use the area in blue to open expand the parent node or is this an unusual behaviour? – Neil O'Donoghue Feb 4 '16 at 10:47
  • Are there multiple selects? Take a look at Unity game engine interface( 3dbuzz.com/Uploads/Public/709.png) There are multiple levels. I am not sure If I understood your question correctly. The indent because of changed level shouldn't be so big that level 7 child would get extremely minimized. – ypag Feb 4 '16 at 23:54
0

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

enter image description here

| improve this answer | |
  • I tried doing breadcrumbs as a collapsed view option but the titles are quite large and it looks a bit odd. The other solution was to truncate each breadcrumb but I found the information then is not unreadable. – Neil O'Donoghue Feb 4 '16 at 10:56
  • @NeilO'Donoghue Totally understandable, the categories I am using are data definitions from a data base and before opting to use this solution I have checked for the longest label (its always a single word ) to make sure that everything fits in nicely. I also have only three levels to drill down to so have more than enough space! Good luck – Okavango Feb 4 '16 at 11:04

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.