My app has functionality for users to create a number of objects, each of which may have multiple child objects. I'm going to generalize the terminology a little more so we don't get hung up on the words.

Thus, users can create Branches and then Leafs inside Branches, and the current design is like this:


download bmml source – Wireframes created with Balsamiq Mockups

I don't love this approach. Is there something more generally accepted?

  • 1
    You need to improve the words and the wording in your app and application. There is insufficient context to suggest a solution -- thinking in terms of user goals and a broader problem you're trying to solve might help.
    – dbkk
    Nov 18, 2013 at 18:21
  • I'm going to generalize the question a little more so we don't get hung up on the words. Thanks.
    – GollyJer
    Nov 18, 2013 at 18:39
  • 1
    Nice question! Great to see that you put effort to design before implementing. Nov 19, 2013 at 22:08

3 Answers 3


So, I could be misunderstanding, but it seems to me that important part of the problem is the relationship between the branches and the trees. Putting them into two distinct boxes might not be the best approach to help the user visualize the hierarchy here.

Have you considered using a tree view? Depending on the need, you could implement a limited tree view that can only go one level deep (basically folders are your branches, and files are your leaves). It is not an uncommon interaction and probably gets some points in the IA category for visually representing the relationship between branches (that they are neighbors) and leaves (that they are contained by branches).


  • The challenge, in my opinion, is the user doesn't need to see the leaves of any other branches when working with a branch. I guess an auto-collapsing treeview is an option but I don't like the click-targets (branches) moving around.
    – GollyJer
    Nov 20, 2013 at 15:40

This is a true hierarchical model, so let's keep the mental model user have of a hierarchy. If your target audience are Apple users, implement the model Finder uses. And if they are Microsoft users, follow the design guidelines of Explorer.

Make sure that your users don't have to think when they use your app. Splitting the hierarchy in two different views in your mockup will only confuse your users.


How about just showing the user the controls and details of the item they are working on with a 'breadcrumb' trail near the top. This is another common way to represent hierarchical information. For example the user might see the following at the top level (the 'Trunk'):

enter image description here

If they select a branch, they might see the following:

enter image description here

Of course this could be extended to hierarchies with more than two levels as well. The breadcrumb serves as a nice 'anchor' so the user knows where they are at within the hierarchy and can be used to navigate 'backward'

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.