A Contentogram shows the structure of a website or an app (like a sitemap) together with interactions between content modules (similar to a flowchart). Because of its simplicity, it helps uncover problems that would drown in more complex visualizations.
Why it’s useful
The best design work happens within constraints. It’s not an obstacle to a successful project (although it dow not alway feel that way). On the contrary, constraints are what makes good design good.
Contentograms are a way to create constraints in the design process to discover gaps in information architecture och interaction design in an early stage. I think of Contentograms as an extremely reduced language with very few words. If I cannot express a system in those simple terms, it is probably too complex.
How it works
A Contentogram consists of only three building blocks
- Module (piece of information)
- Forward path (how to get to a module)
- Backward path (how to return from a module to the start)
The result looks a lot like a sitemap but ads a navigational aspect to it. For every module, there is a path to it and a path away from it.
In a more realistic example a module might contain of servera sub modules. Those modules could be broken out into their own modules if they become more complex - it depends on the needs. ￼
When to use a Contentogram
- Plan out a bigger system on a high level
- Define Information Architecture and interactions between content modules
- Identify and avoid dead ends
- Communicate a system’s structure to stakeholders like developers - a lot can be built or prepared for before there is a visual design in place
I’ve used this techniques many times throughout the years and despite its simplicity, it always had me realise something I had previously overlooked.