Expand/Collapse clue on a chart



  • 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



  • 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



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2