7

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. enter image description hereThe 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: enter image description here

Any suggestions?

  • 1
    Are Mo & Sons Building and Jimmy Window Cleaning a part of Lane Construction? – maxathousand Oct 20 '16 at 21:42
  • Did I detect a subtle reference to Seinfield there in the question? – Michael Lai Oct 28 '16 at 23:06
4

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.

enter image description here

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

4

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

enter image description here

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.

enter image description here

2

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.

enter image description here

2

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.

gantt

  • This is a decent suggestion for dealing with other elements of the design but it doesn't answer the current question. – Andre Dickson Oct 23 '16 at 16:47
  • I agree that gantt fall short in displaying hierachy but the other solutions fall short in visualizing time. – Asaf Oct 23 '16 at 17:23
  • The nature of the data in terms of a structured hierarchy and a linear timeline makes it difficult to display both effectively, but I think the use of colours on the gantt chart is not a bad suggestion. – Michael Lai Oct 24 '16 at 23:51
1

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.

1

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:

gray

In the second image, I just used indentation:

indentation

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.