Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Namahn
Prioritizing content
Koen Peters, #euroIA20
kp@namahn.com - @2pk_koen
#EuroIA20 - Prioritizing content 1
Human-centred design agency (Brussels, BE)
Namahn
Core model Container model
OOUX
Priority guides
Page tables
Content spreadsheets
Page description diagrams
Namahn
At what level are these models working?
#EuroIA20 - Prioritizing content 5
IA at micro level
Namahn
Information architecture (IA)
Two dimensions to content
Zoom out: macro-level
The overall structure of the content ...
Namahn
Central idea
The right content in the right place!
Prioritizing content
#EuroIA20 - Prioritizing content 7
Namahn
Prioritizing content
#EuroIA20 - Prioritizing content 8
Listing the content and call to actions needed on a page, a...
Namahn
Why?
#EuroIA20 - Prioritizing content 9
What problem do they try to solve?
Namahn
“Mobile first!”
Single-column list of content items
#EuroIA20 - Prioritizing content 10
The Container Model, OOUX, …
Namahn
“Make cores, not wars”
Every page is a home page!
The importance of top tasks
#EuroIA20 - Prioritizing content 11
T...
Namahn
“Death to wireframes!”
Words, not wireframe
#EuroIA20 - Prioritizing content 12
Priority guide, Page table, Content...
Namahn
“DTDT!”
Role and responsibilities of an IA (versus)
UX designer, UI designer, visual designer…
#EuroIA20 - Prioriti...
Namahn
Models and tools
#EuroIA20 - Prioritizing content 14
Overview
Namahn
The Container Model
aka Container-based IA
“A web page is a stack of autonomous containers”
6 principles: stack, po...
Namahn
The Core Model
aka Cores & Paths
“When structuring and designing your site or application,
you start from the core ...
Namahn
OOUX, Object-Oriented UX
aka ORCA
“Define the objects first, and the relations between them”
Strong points
 Great ...
Namahn
Priority Guides
(high-level or detailed)
“List the content and elements for a mobile screen,
sorted by hierarchy fr...
Namahn
Page Tables
aka content templates
Content template; describes each section of
content on a page before it is writte...
Namahn
Content Spreadsheet
aka content wireframe
A spreadsheet that describes the content
hierarchy of a page
(first colum...
Namahn
So who was first?
#EuroIA20 - Prioritizing content 21
Namahn
Page Description Diagrams
(aka PDD – Dan Brown, 2002!)
Content areas of the page are described in prose, as in
a fu...
Namahn
How to apply (& combine) these models?
#EuroIA20 - Prioritizing content 23
A few examples
OOUX + container model
Namahn
EIC dashboard
(European Institutions)
#EuroIA20 - Prioritizing content 25
OOUX and container model leading to conce...
Conceptual design (wireflow)
Yellow sticky notes for the core content
Green sticky notes for onward paths (links,
call to actions)
Core model + sticky ...
Namahn
“Living in Brussels” site
#EuroIA20 - Prioritizing content 28
Result: priority guide
Namahn
What model to use?
#EuroIA20 - Prioritizing content 29
Criteria
Namahn
Questions to ask?
 What kind of (macro) structure do you have?
(Hierarchy? Relational model? no structure availabl...
Namahn
Summary
#EuroIA20 - Prioritizing content 31
Namahn
References
 Container model: http://containerist.org/ ; https://medium.com/@2pk_koen
 Content spreadsheets https:...
Namahn
Thank you
#EuroIA20 - Prioritizing content 33
kp@namahn.com - @2pk_koen
Prioritizing content, talk at #euroia20
Upcoming SlideShare
Loading in …5
×

Prioritizing content, talk at #euroia20

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.

  • Be the first to comment

Prioritizing content, talk at #euroia20

  1. 1. Namahn Prioritizing content Koen Peters, #euroIA20 kp@namahn.com - @2pk_koen #EuroIA20 - Prioritizing content 1
  2. 2. Human-centred design agency (Brussels, BE) Namahn
  3. 3. Core model Container model OOUX Priority guides Page tables Content spreadsheets Page description diagrams
  4. 4. Namahn At what level are these models working? #EuroIA20 - Prioritizing content 5 IA at micro level
  5. 5. 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
  6. 6. Namahn Central idea The right content in the right place! Prioritizing content #EuroIA20 - Prioritizing content 7
  7. 7. 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.
  8. 8. Namahn Why? #EuroIA20 - Prioritizing content 9 What problem do they try to solve?
  9. 9. Namahn “Mobile first!” Single-column list of content items #EuroIA20 - Prioritizing content 10 The Container Model, OOUX, …
  10. 10. Namahn “Make cores, not wars” Every page is a home page! The importance of top tasks #EuroIA20 - Prioritizing content 11 The Core Model
  11. 11. Namahn “Death to wireframes!” Words, not wireframe #EuroIA20 - Prioritizing content 12 Priority guide, Page table, Content spreadsheet…
  12. 12. Namahn “DTDT!” Role and responsibilities of an IA (versus) UX designer, UI designer, visual designer… #EuroIA20 - Prioritizing content 13 Priority guide, Content spreadsheet…
  13. 13. Namahn Models and tools #EuroIA20 - Prioritizing content 14 Overview
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Namahn So who was first? #EuroIA20 - Prioritizing content 21
  21. 21. 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
  22. 22. Namahn How to apply (& combine) these models? #EuroIA20 - Prioritizing content 23 A few examples
  23. 23. OOUX + container model
  24. 24. Namahn EIC dashboard (European Institutions) #EuroIA20 - Prioritizing content 25 OOUX and container model leading to conceptual design
  25. 25. Conceptual design (wireflow)
  26. 26. Yellow sticky notes for the core content Green sticky notes for onward paths (links, call to actions) Core model + sticky notes (OOUX)
  27. 27. Namahn “Living in Brussels” site #EuroIA20 - Prioritizing content 28 Result: priority guide
  28. 28. Namahn What model to use? #EuroIA20 - Prioritizing content 29 Criteria
  29. 29. 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
  30. 30. Namahn Summary #EuroIA20 - Prioritizing content 31
  31. 31. 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
  32. 32. Namahn Thank you #EuroIA20 - Prioritizing content 33 kp@namahn.com - @2pk_koen

×