6

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

|improve this question|||||
  • 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 '13 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 '13 at 18:39
  • 1
    Nice question! Great to see that you put effort to design before implementing. – Benny Skogberg Nov 19 '13 at 22:08
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).

Thoughts?

|improve this answer|||||
  • 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 '13 at 15:40
1

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.

|improve this answer|||||
1

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'

|improve this answer|||||

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.