2

I am currently working on an org chart with collapse/expand capability. In case it matters, the original code is from d3/visx. To improve user experience, I want to include a clue that a node can be expanded or collapsed. In my example below:

  • "Software Lead" can be expanded
  • "Project Manager", "Business Analyst" and "Hardware Lead" can be collapsed
  • "Sponsors" cannot be expanded

For now I have added a red/green dot in the top right corner of each active node. Does it make sense? Is there a better way?

Flow chart with red and green circles on some nodes to indicate expandability

  • what happens to a node when it's collapsed? – Mike M Oct 28 at 20:15
  • Its children are hidden. In my example Software Lead is collapsed, which means you don't see the "Software Dev" children. Hardware Lead is expanded and you see its "Hardware Dev" children. – Christophe Oct 28 at 20:27
  • btw: are there alot of nodes in this network? and can parent nodes have a high number of children? – Mike M Oct 29 at 1:44
  • I expect around 20 nodes, max 5 children. – Christophe Oct 29 at 4:55
3

Data visualization uses color (and shape) to differentiate status, magnitude and categorical differences between data. They are often the go-to for understanding a dataset.

Your question regards UI capabilities, in this case the ability to expand an element to view the child elements.

You can look for indicators that emphasize a function, not to be confused with the data qualities themselves.

This is can be represented by some icon family: I've used a typical expand / collapse, but there's other ways.

Since icons are not universally understood, you should test to find what works, and perhaps provide a key for the functions.

enter image description here

| improve this answer | |
  • Thanks! I understand such icons on a list, but on a chart I find them hard to spot. I feel that they are overshadowed by the chart colors. – Christophe Oct 28 at 20:31
  • 2
    You could give them a border, making them more button-like. See updated mock. You can iterate until you have an appropriate level of differentiation. – Mike M Oct 28 at 20:32
2

I think you're almost there. Sometimes colorful oval badges communicate "something here is new", so like Mike M. said, an icon might be the better way to communicate function.

A common pattern for expand/collapse is circle plus / circle minus.

Flow chart with circle plus icons in the corner

| improve this answer | |

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.