Displaying multiple levels of hierarchy in a table

Question

I’m working on a payroll app for construction contractors. I’m trying to show hierarchy in a table for one contractor (In this case, “Vandelay Industries”. I want the user to be able to see where Vandelay is in the hierarchy, (i.e. they are a Subcontractor) and who’s above them in the hierarchy, who’s at the same level, and who’s below. I’d like to show 4 or 5 levels of hierarchy, but I feel the solution I’ve sketched out is too clunky. The example above has too much text in the Hierarchy Column heading. The second solution, where I literally write their hierarchy level after each entry seems better but still not great:

Any suggestions?

Answer 1

I think the problem here is you shouldn't use a table, but something different. The first easy choice is a Tree View. Tree view is a system that allows you to organize hierarchical data in an easy to understand manner, and most users (if not all) know how to use it and its affordances.

From an implementation side and user experience, it also allows you to filter hierarchies, providing the user a simple way to visualize the position of an element inside a hierarchy. For example, you can show all hierarchies and then provide a way to collapse any hierarchy under contractor level, or sub-contractor or whatever the choice

Answer 2

Another option is to use Miller columns, which is essentially a treeview flipped around and structured in rows.

This is a rather common approach in file organizers, but you may find it a little bit tricky when there are too many levels of hierarchy.

You could also look at an organisational chart or graph that is commonly used to represent hierarchy within an organisation.

Answer 3

The only problem that sticks out for me with your solution is that it communicates the absolute hierarchy between the contractors and not the relative hierarchy you actually want to communicate. I would suggest making the following adjustments:

1. Flatten the hierarchy of all the tiers below and above Vandelay's tier since you are only interested in the relationship between Vandelay and each of the other contractors. This will give you three tiers, all contractors above Vandelay in the hierarchy, all contractors on the same tier and all contractors below Vandelay in the hierarchy.
2. Retain indentation and ordering to signify the hierarchy of the three relative tiers.
3. Retain the hierarchy labels from your second solution to indicate the contractor's absolute hierarchy level.
4. Group contractors that are in the same absolute tier.
5. Make Vandelay's group the most visually prominent of all the tiers.
6. Make Vandelay the most visually prominent item in its group, so it stands out from its tier grouping and by extension all other items in the heirarchy.

Answer 4

With gantt charts, you can provide a high-level plan where you can see the flow of sub-constructors dependency, as shown in the picture below. You can also show if there are dependencies between different constructors and sub-constructors work.

Answer 5

I think your approach is fine in general, especially if you intend to display more columns and more data alongside the tree.

I've seen this interface in some information systems before and I never considered it as bad UX. But it really depends on how much data you want to display there. If the data displayed alongside the tree is not a priority, other mentioned approaches might work better.

See the TreeList widget by Kendo UI as an example of implementation of your pattern.

Also this older question might be relevant.

Answer 6

This is what I did in my case for same issue. I think I pretty much solved it. Check the images if it helps you.

In first image, I differentiated each hierarchy by a shades of grey:

In the second image, I just used indentation: