Currently I'm working on a navigation that doesn't take up too much screen real-estate. I came up with a pseudo off-canvas navigation with stacked menus.

A user can assign nodes to a product. This is the current state of the wireframe; user chose Add nodes. Now he want's to manually search for a specific node 1 (1. Browse Nodes in wireframe). The user now can select a node to add to product 2 or go 1 level deeper into the navigation 3. and 4.. If you click on a node-link the children off that node will slide-in and stack on top of the current menu. There is also a back option to parent (second wireframe).

I deliberately chose checkboxes, links and button as elements because that's their purpose; I wireframed there functionality not a design-solution. Normally I like selecting text/label also checks a checkbox, but now the label is a link too. A user could a) select that node to add to product, Or b) select node to navigate to children of that node.

enter image description here

enter image description here

I could argue if it makes sense that a node will act is a leaf and a branch. A don't have any real data about how customers assign nodes. I can't wait for this input. Currently functionality of the system is that a node could be a leaf and a branch. So asking real users is no option. Maybe in the future (months from now).

How to convert this into an intuitive navigation?

  • Are the levels different per branch or is there some pattern? Could you replace the levels e.g. "node1" with categories e.g. "Color"="Black". Have your considered what happens when a product is under multiple leaves e.g. "Role"="Media player" and "Role"="Phone". Commented Sep 9, 2014 at 18:57
  • It has already been done by customers. So product A could be assigned (associated) to node 1, 45, 60, 415 and so on. Just like amazon.com an article could popup in different categories. Minor detail is that with "real nodes" you have to define them yourself. I think tagging and generating some hierarchy based on concatenating these tags is the way to go. Regretfully this is legacy stuff. Defining and assigning products to nodes is the way the system works. EDIT: so could be like; node_1 > node_16 >node_45 > product_A And also node_67 > node_97 > node_134 > node_23 > product_A
    – myradon
    Commented Sep 10, 2014 at 9:30

3 Answers 3


Here are some suggestions:

The title/heading of the first menu layer, 'Search Nodes', is confusing. It might be better just to echo the link the user just clicked to slide out the menu i.e. "Add Nodes"

It feels like you might be over-using checkboxes. The first example of this is next to 'Select previously bookmarked nodes'. A checkbox shouldn't be necessary if there's only one option, and even so, you complicate the interaction here. A checkbox should require one click to select, and another to confirm the choice, whereas a more appropriate element, like a button or a simple link, would only require one.

Regarding your key question, again, I think your choice of repeating checkboxes and buttons will result in complicated interactions and cluttered UI.

Here's an alternative solution for your consideration:

Disclosure triangle menu option

(1) An accordion-style menu, with disclosure triangles to reveal deeper options.

(2) Hovering over elements that can interacted with reveals a text link and action. In this case a branch node has already been added (hence the green color and checkmark) so the option is to Remove.

(3) This node has already been added.

(4) Hovering over this leaf node reveals the option to Add.

Of course there are are lots of stylistic variations to this, but it doesn't require multiple slide out menu trays, both leaf and branch nodes can be added/removed, and it doesn't require the repetition of check boxes and buttons.

  • I like you suggestion about 'search nodes' yep 100% true; it has to be 'Add nodes'. also right about 'checkiritis' it was meant as well-known convention to select an item. You're hover and reveal suggestion is a good direction. I don't really like the accordion-style. I heard some customers have like 25-levels deep nav-structure! You need to have a 4K screen to collapse them all. What about a hybrid-option; my pseudo-off-canvas-stacked-menus along with you're hover-reveal?
    – myradon
    Commented Sep 9, 2014 at 16:36
  • Do users generally know what they're looking for, or are the browsing?
    – dennislees
    Commented Sep 9, 2014 at 17:53
  • We don't have a clear few in that one. I know some customer supply an excel-sheet to there employees to do there work. So target-nodes and other associations must be known. I don't know how they find there way. That's why I want to implement faceted searching throughout the entire system along with predefined filters. I can't imagine 25-levels is maintainable.
    – myradon
    Commented Sep 9, 2014 at 20:28

Something like this;

enter image description here

Hovering above nodes will reveal add-button. Clicking on the add-button will set node as 'checked'. Clicking on node-text or clicking on arrow will slide on 1 level deeper in the nav. EDIT: 'Done-button' functions to finishes the task 'add nodes' Or click outside the menu (eg in main-section) will hide menu. Good plan?


Is there a relationship between selecting a node and selecting its parent node?

For example, if Node A has child nodes B, C and D, is it the case that selecting all of B,C and D implicitly selects A and vice versa? If so, then you don't necessarily need different click behaviors for leaf and branch nodes. Perhaps the first click on "Node A" expands it, and subsequent clicks select / deselect it (and all its children); and if B, C and D are each checked individually then A is checked automatically. You would still need a separate button / triangle to collapse the list, but that functionality is much less important, especially if the list is only on screen transiently.

I am thinking here of the hierarchical checkbox lists you sometimes see in older Windows installer applications. You get a list of features, with a checkbox next to each, and if the feature has sub-features of which only some are selected, its checkbox shows a special intermediate state. I don't recall which installer type does this, and it's not brilliantly implemented anyway, but the basic idea can work well I think.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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