I have a web application that shows a lot of information that is rather mundane. The information is related to data types that are hierarchical in nature, so there is some design around that in terms of listing nests of information under one another that are under each other in the hierarchy.

I also have tons of lists of information that are stored in tables that allow users to manually search through them and sort them to find what they are looking for.

I don't know how to display all this information. How can I present these groups that are nested under different data structures?

  • 3
    can you give us some screenshots of what you've tried?
    – Vincent
    Jan 30 '14 at 8:59
  • It is very difficult to suggest things, without seeing what you have, or knowing what kind of data this is about. There are many, many ways of displaying and visualising data; some simple, some complex. If you could give us some sample images of what you have, and a general idea of the intended use, that would be more constructive.
    – benteh
    Jan 30 '14 at 14:16
  • apologies, I will post a screen shot of an example and some use cases later today
    – Ben Nelson
    Jan 30 '14 at 18:07
  • @BenNelson Example and cases would be great. I still think this is a good question as it is (it might too broad, in any case, but I don't believe it's unclear), sometimes you just have some ideas but nothing implemented yet. Anyhow, we can reopen it as soon as you edit it with some more info.
    – Yisela
    Jan 30 '14 at 22:25

If you're completely lost, there's a recent (late 2013) book that's a very good, practical, clear introduction to information graphics: Design for Information by Isabel Meirelles.

The question mentions digging into hierarchical data: one classic way of allowing people to do this is with a multi-layer interactive treemap.

enter image description here

It's quite hard to find really good examples of these outside of specialist software suites. Here's a few:

  • This D3.js demo, despite just being a software demo, is probably the clearest example (though unhelpfully the content is meaningless)
  • Here's one on US budgets from the NY Times. This one isn't as good as NY Times graphics usually are - think something like this, but instead of being a big mess with unreadable labels that become readable when you click and zoom in, think of different layers and each box divides into sections when you click and zoom on it, then further into deeper layers from there, more like the D3 demo. Here's a nicer looking NY Times one, but there's only one layer.
  • Here's a very basic example of the principle from Google. Think this, but with more layers and some kind of "go back" functionality that works.
  • Often with things like this, it's better to have the supplementary info off the chart, with the chart acting as visual context and a navigation aid to the main content, rather than arbitrarily constricting the main content. This Tableau demo is an okay example of the principle of the chart controlling and switching between other page content. The MarketWatch Market Map (formerly SmartMoney Market Map, featured in the Isabel Meirelles book above) is another good example.

There are loads of tools out there for generating them - D3.js (mentioned above) is a good open source one (uses Javascript to create SVG).

A very functional (but quite ugly) example of a treemap where you can dig down as many layers as needed through a hierarchy of information is this old free Windows desktop application, SpaceSniffer, designed to help people explore where their disk space has gone. It's a very early example of the treemap visualisation technique being put to use to solve a practical problem.

enter image description here

  • Fantastic book and answer! I will definitely buy a copy after I get done with my current UX book!
    – Ben Nelson
    Jan 30 '14 at 22:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.