Hierarchical list for selecting an element
The user is trying to select an element which will be used in a form. So it could be like selecting interests in an app where you can pick the more general case (e.g. sports) or the more specific (e.g. baseball).
I have hierarchical data where:
* Exactly one node may be selected.
* Users can select nodes anywhere in the tree
* Leaf nodes must be selectable
* Parent nodes may be selectable. Selecting a parent node represents a selection of all of its leaf node descendants.
* Selectable parent nodes are uncommon.
* The depth of the data is deeper than can be readily shown on the screen all at once.
I am developing an interface for browsing this data. This data needs to be usable on both desktop and mobile interfaces on the web.
I am thinking of modeling an interface after what Apple does with hierarchical menus, like the one below. The differences in my case are primarily that:
* The items can have three states: selectable node, refinable node, and nodes with both capabilities. How do I make this look uncluttered?
* My design must operate reasonably on both desktop and mobile. How do I design the refinement signifier in an unobtrusive way that is clear even on desktop views.
* My lists have a lot of heterogenous content. This happens only rarely in Apple menus, like the shut down button in the second screenshot. How do I show heterogenous content without looking disjoint?
Notice the blue row at the bottom representing differing content.
What I've been thinking of so far is similar to the Apple design. These next two screenshots show the top level of the hierarchy here, and...
...the screen after food is selected.
I like the multi-screen approach to this design for my use case, so I am primarily looking for feedback on exactly what icons/buttons to put in, and how to separate out content. I'm particularly interested in examples on the web and high fidelity mock examples, but I'm open to lower fidelity feedback as well.
The one structural thing that I think could be changed is in the combination case where a parent node can also be selected. Conceptually I've illustrated it here:
I'd like to draw attention to the fact that this makes the rows less crowded, and seem more homogenous. But I'm not sure exactly how to design the current level selection mechanism. How could I clearly indicate that the current level can be selected? Relatedly, how do I indicate the situation where the current level can't be selected?