In my daily practice as information architect working for clients on the structure and design of pages for websites, intranets and application, one of the recurring challenges is to have a client team make choices in selecting the right content to display on a page, prioritizing the content (what comes first on the page), linking the page content in a meaningful way to other content, and adding the right call to actions (CTA’s) to the page. Of course, this problem is not new. In the past 10 to 15 years, a range of models/tools have emerged to help you tackle this: Page description diagrams, the Core model, Priority guides, OOUX, Page tables, the Container model…. basically, they are all about listing the content and CTA’s needed on a page and prioritizing them in a mobile-first way. These different models/tools do very similar things but not exactly the same, so which one should you choose?
In the past years, I have been trying out these different models and used them in different projects. I have discovered for instance that priority guides work really well when you want to include actual content and want to leave out the design/wireframing aspect completely. Cores & paths are great to start with early on in a project, can be applied in almost every situation, even when you don’t have a classification for your site yet, but go less in depth and lack the prioritization element. OOUX is great for its practical, workshop-friendly step-by-step sticky notes process and the idea of “nested objects”. In this talk I will share these findings, show examples from projects, explain the pros and cons of each tool/model, and guide you in making the right choice of tools depending on the context. I will even show you how you can combine elements of different tools into your own version of them.
4. Core model Container model
OOUX
Priority guides
Page tables
Content spreadsheets
Page description diagrams
5. Namahn
At what level are these models working?
#EuroIA20 - Prioritizing content 5
IA at micro level
6. Namahn
Information architecture (IA)
Two dimensions to content
Zoom out: macro-level
The overall structure of the content – find the right piece of
content in a large pile
Zoom in: micro-level
The quality of the individual pieces of content itself – how
effective are they in helping a user solve a problem; what
structure and format does the content have…
#EuroIA20 - Prioritizing content 6
8. Namahn
Prioritizing content
#EuroIA20 - Prioritizing content 8
Listing the content and call to actions needed on a page, and prioritizing them in a
mobile-first way.
13. Namahn
“DTDT!”
Role and responsibilities of an IA (versus)
UX designer, UI designer, visual designer…
#EuroIA20 - Prioritizing content 13
Priority guide, Content spreadsheet…
15. Namahn
The Container Model
aka Container-based IA
“A web page is a stack of autonomous containers”
6 principles: stack, position, repeat, condition, reuse,
federation
5 layers
Strong point
From content (data) to page design level, and even all the
way up to implementation (CMS)
#EuroIA20 - Prioritizing content 15
16. Namahn
The Core Model
aka Cores & Paths
“When structuring and designing your site or application,
you start from the core (= the reason why users come to
your site) and work from there (= paths)”
“Paths, not hierarchy. No dead ends!”
Strong points
Simple tool, works well in co-creation workshops; you can go
straight from content selection to sketching draft page designs
You don’t need a site structure yet
#EuroIA20 - Prioritizing content 16
core
Inward path Onward path
17. Namahn
OOUX, Object-Oriented UX
aka ORCA
“Define the objects first, and the relations between them”
Strong points
Great workshop tool (colour-coded sticky notes)
Works well when your content consists mainly of “instantiated
objects”
#EuroIA20 - Prioritizing content 17
18. Namahn
Priority Guides
(high-level or detailed)
“List the content and elements for a mobile screen,
sorted by hierarchy from top to bottom and without
layout specifications”
Strong points
Skip the wireframes, focus on content
Directly integrates real content
#EuroIA20 - Prioritizing content 18
19. Namahn
Page Tables
aka content templates
Content template; describes each section of
content on a page before it is written; a
paragraph-level companion to your website’s
wireframes
Strong points
Again, focus on the content
Get content writers involved
#EuroIA20 - Prioritizing content 19
20. Namahn
Content Spreadsheet
aka content wireframe
A spreadsheet that describes the content
hierarchy of a page
(first column looks a lot like a mobile wireframe)
Strong points
Skip the wireframes, focus on content
#EuroIA20 - Prioritizing content 20
22. Namahn
Page Description Diagrams
(aka PDD – Dan Brown, 2002!)
Content areas of the page are described in prose, as in
a functional specification, and arranged in priority order.
Idea: take the design out of IA! Allow designers and
information architects to stay comfortably within their
own realms without compromising communication
#EuroIA20 - Prioritizing content 22
23. Namahn
How to apply (& combine) these models?
#EuroIA20 - Prioritizing content 23
A few examples
30. Namahn
Questions to ask?
What kind of (macro) structure do you have?
(Hierarchy? Relational model? no structure available yet? …)
Does it need to be workshop-friendly?
(cf. when stakeholder involvement is high)
What do you need as output?
(Wireflow/wireframes? No design at all?…)
Who does the UI design/visual design?
Is there already a lot of high-quality content available?
Are content authors involved in the project?
(do they need templates)
How much time/budget do you have available?
#EuroIA20 - Prioritizing content 30