I have a dataset that uses has the hierarchy and breakdown of categories, sub-categories, and labels that each have a value:

Category 1:
    Sub-Category 1:
        Label 1: 4
        Label 2: 3
    Sub-Category 2:
        Label 2: 2
        Label 3: 5
Category 2:
    Sub-Category 3:
        Label 1: 6
        Label 2: 2
        Label 3: 4

My goal is to design an interface that shows the breakdown of categories and gives the user the ability to view and verify any values in the hierarchy. The data us primarily used as a step for another process, so the fewer clicks to view all the necessary information (the Label level) the better. There are expected to be between 1 and 5 rows in each nested group, but the larger categories can have ~10 sub-categories.

Currently I have a table that shows each category with nested rows for the breakdown. To make it easier for the user to view the structure, I added styles when the user hovers a group to highlight its contents. This is an example with placeholder data: table

Any thoughts on alternative formats or ways to improve my current design?

  • Just a couple of questions to clarify the requirements: 1. Do you need to be able to see all values at any given time? 2. Do you just need to get to a final Quantity value given the final selection? 3. Do you need to be able to traverse the hierarchy in any direction (e.g. including moving across Program, Version or Countries)?
    – Michael Lai
    Commented Jan 20, 2020 at 23:44
  • @MichaelLai 1. The quantity fields are already aggregated, so a user should be able to see all values present. Each quantity would actually be stored by city, but that detail isn't important and can be shown by clicking in on the quantity. 1. If I am reading your question correctly, the user should be able to view a total quantity for each group without much interaction. Some can be required, but most of the totals should be present without interaction. 2. Lateral movement within a parent and moving up and down are required, but moving across parents is not a requirement.
    – GammaGames
    Commented Jan 21, 2020 at 0:14

1 Answer 1


I've found a couple I think improve the existing chart:

  • Include a color border on the right to make the distinction between groups easier
  • Make the border narrower as the category's depth decreases
  • Use the color when hovering categories to enforce the connection
  • Bold the totals and place them in the corner of each category's cell

Here's a mockup jsfiddle


Edit: Now with the border matching the hover color, jsfiddle.


  • 1
    The colors are a nice idea but I think the right lines should be the same color as the hover effect, not stronger. It's a bit confusing because you have to "decipher" if the currently shown two colors belong to each other or not.
    – Big_Chair
    Commented Jan 23, 2020 at 19:12
  • @Big_Chair That's fair, I'll update the question with that as an example. I think it makes it look better! All it did before was take the previous color and make it slightly transparent
    – GammaGames
    Commented Jan 23, 2020 at 19:14
  • 2
    Another aspect to consider could be color blindness, so maybe something like a slightly thicker border for the hovered table cells could also be a plus? You just have to be careful not to add too many visual distractions so users can still focus on the actual content at hand, not on the visual effects. And maybe the colors can be less strong to also not add visual overload. Other than that I think this is a cool idea.
    – Big_Chair
    Commented Jan 23, 2020 at 19:18
  • @Big_Chair adding a border to the top/bottom of the hovered category would be nice, I'd have to modify my current highlighting logic but it is definitely an idea to play with
    – GammaGames
    Commented Jan 23, 2020 at 19:27

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.