Matrix representation for hierarchic data

Question

I have to create an UI that help user to define a relation level between 2 objects (from the same hierarchic level).

2 visions must be provided :

• Manager (3 levels)
• Technical (3 levels + 2 levels)

My hierarchy is like that :

                            +-----------------------+
                            |          Lvl 1        |
                            +--------+-----+--------+
                            |        |     |        |
                            +--+--+--+--+--+--+--+--+
                            |  |  |  |  |  |  |  |  | 
+---------+--------+--------+--+--+--+--+--+--+--+--+
|         |        |________|_1|_2|_0|_0|_0|_0|_0|_0|
|         |        |        | 0| 3| 0| 0| 0| 0| 0| 0|
|         +--------+--------+--+--+--+--+--+--+--+--+
|         |        |________|_0|_1|_0|_0|_0|_1|_0|_0|
|         |        |        | 0| 0| 0| 3| 0| 0| 0| 0|
| Level 1 +--------+--------+--+--+--+--+--+--+--+--+
|         |        |________|_0|_0|_0|_0|_3|_0|_0|_0|
|         |        |        | 0| 0| 0| 0| 0| 4| 0| 0|
|         +--------+--------+--+--+--+--+--+--+--+--+
|         |        |________|_0|_0|_0|_1|_0|_0|_0|_0|
|         |        |        | 0| 0| 0| 0| 0| 2| 0| 0|
+---------+--------+--------+--+--+--+--+--+--+--+--+

(Yes I love Ascii Art ^^)

I've tested some thing using a sunburst graph to select a dimension (matrix level), in-place edit for relation level update.

But i always have the same problem, this matrix shows us only one (root) level, in my model I have 7, for finally about 30 rows and same average row count.

When I switch in technical view, I add 2 sublevels to the current 3 levels. It becomes totally unusable.

I had an idea also using a bread crumb, and a sliding effect to drill down (such as Github repository browser). But this could not resolve the main view problem.

Answer 1

I haven't got a good handle on your database in my head, so my answer might not be completely useful to you.

Still, it seems to me that your problem is that you're trying to display too much information to your users in one go, and that's making your interface require too much cognitive overhead to use.

At the moment, you're asking your user to select one dimension, and then showing them all other dimensions against that one. Despite the fact that those other dimensions have no relationship with each other (even if they do each have a relationship with the selected dimension).

You shouldn't need to present all 5 sublevels for each dimension. Can you instead ask your user to select a level and then a sublevel and only present a fixed size grid?

You'd need to make it easy to change the sublevel they're looking at, perhaps with a dropdown or a filter box and smooth transition animations. However by adding that extra layer of filtering, you can limit the information they're looking at in one go to something manageable.

Basically the core of my advice is that for this view so long as there's no relationship between sublevels, you don't need to present them all at the same time. Just show one, and let the user easily switch to viewing another.