Relevant blog post theme music: Follow by Crystal Fighters
Dan Brown’s (different Dan Brown) Communicating Design presents an excellent top-down method for presenting relationships between content on the web. Using nouns — described in the chapter as nodes — and verbs — as connections — we can form sentences of flexible complexity that describe the actions we want users to take on websites. This is called a concept model.
Concept models give designers insight into how content will be presented and the relative connections between parts of the site. Associations to other content that may not have been immediately obvious can be discovered while creating a model. While it yields a structure to overall site content, it’s important to note that concept models are different from site maps in that it’s relational, rather than hierarchical.
| Site Maps | Concept Models |
| Represent hierarchical structures | Represent all kinds of relationships |
| Have a clear beginning, but no clear ending | May have neither a clear beginning, nor a clear ending |
| Illustrate how content categories relate to each other | Tell a story about the site’s underlying concepts (which may or may not be content categories) |
| Presume that nodes represent particular pages or templates | Make much broader assumptions about what nodes represent |
Brown describes this process as multilayer, meaning that once a broad overview has been established, we as informational designers can revise and refine our model to include finer nodes and relationships. What Brown doesn’t suggest in his explanation of the concept is a tool to diagram a concept model. Creating a pencil-and-paper concept model might work in initial layers, but as complexity increases you may want to consider a digital utility. Tools like Visio for Windows and OmniGraffle for OS X are built with this application in mind. Even Prezi is flexible enough to be refactored for concept modeling.
As mentioned, the other part of developing a site overview is a site map. Site maps typically give a taxonomic view of a website with the clear intention of showing where things are. Where the node-connection idea drove concept modeling, site mapping is more driven by pages and links. A good point Brown makes is that site maps have the simultaneous function of describing site navigation. In designing a site map, try to keep data to a three-level maximum.
| Site Maps | Concept Models |
| Describe a website hierarchy | Describe a complex concept |
| Use web pages as the basic unit of currency | Use concept as the basic unit of currency |
| Have a very clear starting point | Have ambiguous starting and ending points |
| Show hierarchical connections between pages | Show semantic connections between ideas |
In practice
What’s really interesting about concept models is that node-connection relational data is being ‘graphed’ by one of the most successful online companies ever: Facebook. What Facebook calls the Open Graph is really a living concept model being written to a database every time an action is taken on (and now, off) the site. Connections are called edges, depicted in the graph as actionable content.
The new Timeline profile design comes as part of a larger set of underlying structural improvements to Facebook itself. The company revised its Open Graph to reflect edges as being anything — opening up the capability to take social action on the web as a verb, just as you like things today on the site.