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.

1. Namahn
Prioritizing content
Koen Peters, #euroIA20
kp@namahn.com - @2pk_koen
#EuroIA20 - Prioritizing content 1

2. Human-centred design agency (Brussels, BE)
Namahn

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

7. Namahn
Central idea
The right content in the right place!
Prioritizing content
#EuroIA20 - Prioritizing content 7

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.

9. Namahn
Why?
#EuroIA20 - Prioritizing content 9
What problem do they try to solve?

10. Namahn
“Mobile first!”
Single-column list of content items
#EuroIA20 - Prioritizing content 10
The Container Model, OOUX, …

11. Namahn
“Make cores, not wars”
Every page is a home page!
The importance of top tasks
#EuroIA20 - Prioritizing content 11
The Core Model

12. Namahn
“Death to wireframes!”
Words, not wireframe
#EuroIA20 - Prioritizing content 12
Priority guide, Page table, Content spreadsheet…

13. Namahn
“DTDT!”
Role and responsibilities of an IA (versus)
UX designer, UI designer, visual designer…
#EuroIA20 - Prioritizing content 13
Priority guide, Content spreadsheet…

14. Namahn
Models and tools
#EuroIA20 - Prioritizing content 14
Overview

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

21. Namahn
So who was first?
#EuroIA20 - Prioritizing content 21

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

24. OOUX + container model

25. Namahn
EIC dashboard
(European Institutions)
#EuroIA20 - Prioritizing content 25
OOUX and container model leading to conceptual design

26. Conceptual design (wireflow)

27. Yellow sticky notes for the core content
Green sticky notes for onward paths (links,
call to actions)
Core model + sticky notes (OOUX)

28. Namahn
“Living in Brussels” site
#EuroIA20 - Prioritizing content 28
Result: priority guide

29. Namahn
What model to use?
#EuroIA20 - Prioritizing content 29
Criteria

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

31. Namahn
Summary
#EuroIA20 - Prioritizing content 31

32. Namahn
References
 Container model: http://containerist.org/ ; https://medium.com/@2pk_koen
 Content spreadsheets https://bigmedium.com/ideas/only-one-deliverable-matters.html
 Core model: https://alistapart.com/article/the-core-model-designing-inside-out-for-better-results/
 OOUX: https://alistapart.com/article/object-oriented-ux/
 Page description diagrams: http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/
 Page tables: https://uxplanet.org/when-user-needs-get-lost-in-feedback-b1236bffac19
 Priority guides: https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes/
#EuroIA20 - Prioritizing content 32

33. Namahn
Thank you
#EuroIA20 - Prioritizing content 33
kp@namahn.com - @2pk_koen