hierarchy - Are Network Components good UX?

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

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:

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.

Answer

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:

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.