The user tries to select an item to use in a form. So it could be like selecting interests in an app where you can select the more general case (eg, sport) or the more specific one (eg, baseball).
I have hierarchical data where:
* Exactly one node can be selected.
* Users can select nodes anywhere in the tree
* Leaf node Got to be selectable
* Parent nodes can be selectable. Selecting a parent node represents a selection of all its child leaf nodes.
* Selectable parent nodes are unusual.
* The depth of the data is deeper than can be displayed on the screen immediately.
I'm developing a UI to search this data. This data must be usable on both desktop and mobile web interfaces.
I'm thinking about modeling a UI based on what Apple does with hierarchical menus, like the following. The differences in my case are mainly that:
* The elements can have three states: Selectable node, Refineable node, and Nodes with both functions. How do I make this look clear?
* My design must work well on both the desktop and mobile devices. How do I design the refinement signifier in an unobtrusive way that is clearly visible on desktop views?
* My lists have a lot of heterogeneous content. This is rare in Apple menus, z. For example, the shutdown button in the second screenshot. How do I show heterogeneous content without looking disjoint?
Notice the blue line at the bottom that represents different content.
What I've been thinking about is similar to Apple's design. The next two screenshots show the top level of the hierarchy and …
… the screen afterwards foods is selected.
I like the multi-screen approach to this design for my use case, so first and foremost, I'm looking for feedback on which icons / buttons to insert and how content should be cut out. I'm particularly interested in web examples and high fidelity mocking examples, but I'm also open to low fidelity feedback.
The one structural thing that I think could be changed is the combination case in which a parent node can also be selected. Conceptually I presented it here:
I would like to point out that the rows are less crowded and more homogeneous. But I'm not sure how to do it exactly Current level Selection mechanism. How can I clearly indicate that the current level can be selected? How can I indicate the situation in which the current level is located? tilt to be selected?