I was very interested in Rob's answer where he lists different options for displaying a hierarchical list of 'nodes'

enter image description here

I was thinking that this component would be a good way for our users to manage their sites in a CMS style application.

e.g. Everything has a relationship with each other.
Everything revolves around creating multiple maps.
A map can then have multiple queries, reports, layouts, tools tied to it.
There is a many to many relationship with everything, and at the moment we allow them to configure everything via stepping through wizards.

We were discussing alternate approaches for displaying these relationships, and I was struggling to explain how a network component could be used in our scenario. The only crude example I could think of was MS Access relationship diagrams:

enter image description here

I am looking for an answer that has:

  • Some examples of network components
  • Correct term for this type of component (i.e. is Network Component correct?)
  • Any information on how and when (subjective, but just best practise advice) they should be used.
  • 1
    It's a bit confusing as to what your actual question is here, and you be more specific or highlight exactly what it is that you want an answer to?
    – JonW
    Mar 24, 2012 at 21:58
  • Its that last bit I need info on. I want to see examples so that I can get a better understanding on the UX first hand.
    – jakc
    Mar 25, 2012 at 11:32
  • 1
    Is this question asked from a user perspective (site map) or from a developer perspective (broken link finder, workflow moderation, navigational design, information architecture)? Apr 2, 2012 at 20:28
  • They're called node graphs - and whether they're good UX depends entirely on implementation. I think you need to rephrase your title question. Apr 7, 2012 at 0:57
  • agreed that my Q is too broad. peteorpeter answer has given me a lot to go away and research. I imagine ill be raising a more specific Q once I have some mockups. Thanks.
    – jakc
    Apr 7, 2012 at 2:57

2 Answers 2


This question is quite broad, so I'll try and give a primer. The Graph Drawing entry in Wikipedia makes a good starting point for this genre of visualizations.

Graph Drawing is a general term for pictures that show how things are connected. Synonyms and more specific variants abound: Node-Link Diagram, Relationship Diagram, Network Diagram, Social Network Diagram, etc. In general, the mathematical model you are looking at is an acyclic graph. It's common to refer to the entities as "nodes" and the connections between them as "edges" (though that is a bit wonky - I try to use "lines" in common conversation).

I don't know of a hard-and-fast, industry-accepted name for a UI implementation of a one of these diagrams - there is too much variety and bleed-in from the specific subject matter.

There a variety of commonly used display methods for this type of information, including:

  • Force Directed - "molecule-style". These are best used for large-scale diagrams where you really want to understand groupings, clusters, regions, etc. They tangle easily, and it is difficult to display details on individual lines. The example you site is a perfect hierarchy, which looks nice and orderly. The more interconnected the nodes are, the more of a rat's nest this can become.

  • Orthagonal - "wiring-style". These are useful for displaying processes, flows, and details about how parts are linked together, since the layout makes an effort to cleanly order the links between things. Your Access example fits into this - this is common in the programming world (many IDE's and DB admin tools include basic graphing of models). These can get difficult to comprehend when there are too many nodes because the nodes need to be spread out and the routes between nodes can get long.

  • Circular - "rings". These are a nice balance when you have a highly variable number of nodes. You get some sense of groupings by perceiving thicker or thinner clusters of lines, and yet you can get some fairly detailed understanding of the lines, mainly because they are orderly.

In all cases, it can be useful to provide visual emphasis on relevant parts of the graph - on hover, by clicking nodes, or through some other interaction like "highlight all relationships of type X". Some graph-drawing tools use multiple panes to show the same information from multiple perspectives: enter image description here

Source: yEd.

In fact, I'd recommend you install yEd (it's cross-platform and free to use personally), add some representative data and run it through their various layout engines to get a feel for how your data might look and feel. Their UI is also highly configurable - try multi-pane, single-pane, with or without thumbnail panes, etc.

  • Such pretty charts. These can be great for complex data visualization.
    – Ben Brocka
    Apr 6, 2012 at 15:20

I think the "network" view would be a good visualizaton tool. You can easily see how things are related a la alternative to a site map above. You could also change the node size depending on amount of content or visits.

However this is a great visualizaton idea for presentations or even small amount of links, it might get unwieldly for large scenarios. It will be like navigating a large spider web. Working with MS Access by connecting table to table is a good concept but most people just use SQL when the number of tables and keys increase.

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.