Display hierarchical structure and corresponding reference data

Question

Do any of you have any suggestion on how to design view for reference data and make it easy to navigate and understand. We are developing a web application and have this hierarchical setup:

• 1 corporation that can have X numbers of large teams below
• Each large team can have X number of small teams below
• A small team can belong to several larger teams (Z belongs to both A and B in the image below)
• Each level in this hierarchy can have X numbers of accounts and GUI-users

We need to have a view (or perhaps views) where it’s possible to find all entities and view a details “page” with more information for each entity.

It should be possible to

• query and find all larger and/or smaller teams
• find all accounts a specific team owns
• a user from a smaller team should be able to find all larger teams he belongs to
• Given an account, find the smaller team that owns it and what larger teams it belongs to

We are considering a combinations of list structures, where the first one more or less acts as a tree structure and displays the hierarchal team structure.

When selecting a team all users below that team are displayed as well as the details for the specific team. If/when selecting a user the details to the right is replaced with the user details. For a team you can in the details view see all teams that it belongs to/are below. The downside with this solution is that a smaller team will be duplicated in the tree structure under all larger teams it belongs to.

Questions:

• Anyone that has tried a similar solution?
• Is it obvious that the users are only the ones that are on the specific node/entity you are viewing, so if you have selected Corporation you get only the users for that level, NOT all users (e.g all users below)?
  • Where/how should the accounts be displayed?

If anyone has a better solution I'm up for anything :)

Answer 1

Have worked on a few applications that rely on users navigating hierarchy structures like yours, and whilst the other solutions below are creative they just aren't natural for a user, and a treeview is generally always a best fit.

One additional option you have aside from treeview is that if you're able to group the teams (i.e. Large/Small) you can simply have a filter bar that has the options 'Select Large Team' & 'Select Small Team', the disadvantage here is that it just adds an extra step to the user getting the information they want to see.

I would personally go with the treeview structure, and implement breadcrumbs so users can easily switch to view their parent teams details as well. I would make the treeview more prominent as a navigation tool, along with a page title and breadcrumbs - you instantly give feedback to the user of what's controlling their view. Have attached a quick sketch of what this may look like (plus an additional way of displaying users, but don't know enough about your requirements to know if this helps or not)

Answer 2

You probably have found your solution by now, but I'm wondering if a possiblity would be to put Big Teams in a dropdown filter list, and return Small Teams and their users when the user makes a selection. I think that would look cleaner. Something like:

The small team members could be co-mingled by default (because they all belong to the large team) and sorted alphabetically. The small team panel on the left could support child elements (Smaller team G under Small team A, etc.)

Interested to know what you landed on.

Answer 3

One way is to use a combination of the hierarchy and master-detail patterns, expressed with Grid view or other suitable UI elements.