Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question

closed as unclear what you're asking by Scott, ckpepper02, Matt, Jenna, Johannes Jan 30 at 21:45

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question.If this question can be reworded to fit the rules in the help center, please edit the question.

3  
can you give us some screenshots of what you've tried? –  Bakabaka Jan 30 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. –  Random O'Reilly Jan 30 at 14:16
    
apologies, I will post a screen shot of an example and some use cases later today –  Ben Nelson Jan 30 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 at 22:25

1 Answer 1

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

share|improve this answer
    
+1 excellent answer. –  Random O'Reilly Jan 30 at 14:20
    
Fantastic book and answer! I will definitely buy a copy after I get done with my current UX book! –  Ben Nelson Jan 30 at 22:37

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