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.
Building a user-focused information
architecture
Devin Asaro, Content Strategist — @copydev

Greg Harron, UX Strategist — ...
What is information architecture?
#IAatDMFB
IA is not
just your
sitemap
#IAatDMFB image source: http://bit.ly/1JFL0MU
IA is not
just your
content
model
#IAatDMFB image source: http://bit.ly/1JFL0MU
IA is not
just your
taxonomy
#IAatDMFB image source: http://bit.ly/1JFL0MU
IA is not
just your
metadata
#IAatDMFB image source: http://bit.ly/1JFL0MU
IA is not
just your
tagging
structure
#IAatDMFB image source: http://bit.ly/1JFL0MU
IA is not
just your
product
hierarchy
#IAatDMFB image source: http://bit.ly/1JFL0MU
“On the web, IA is structured information
that contributes to the relationship of
meaning between a website and the
people...
On the web, IA is structured information
that contributes to the relationship of
meaning between a website and the
people ...
(Actually… three)
On the web, IA is structured information
that contributes to the relationship of
meaning between a websi...
Information architecture is about helping
people understand their surroundings and
find what they're looking for—in the rea...
— Louis Rosenfeld
http://bit.ly/1F7iPWn
[Information architecture is] the art and
science of structuring, organizing and
l...
Notice a pattern?
#IAatDMFB
image source: http://bit.ly/1bPp2eJ
The world is confusing.
We’re here to help people navigate it.
#IAatDMFB
image source: http://bit.ly/1bPp2eJ
IA isn’t just for
information architects,
just as design isn’t just
for designers.
IA is for business
people, too.
#IAatDM...
#IAatDMFB
My company can’t agree on anything.
Do we need to fix our culture before we
can build our IA?
Yes and no
#IAatDMFB
IA can actually help you overcome
organizational conflicts.
No.
#IAatDMFB
First, you have to agree to reframe your
thinking, and seek a common
solution.
…but yes.
And that takes some doing.
#IAatD...
#IAatDMFB
How do we do it?
Phase One:
Establishing IA Foundation
image source: http://bit.ly/1H1Qsqw
#IAatDMFB
First rule:
Let your users make the
important decisions.
image source: http://bit.ly/1AWWLcW
#IAatDMFB
Second rule:
To create change, you have to look
for new sources of information.
#IAatDMFB image source: http://bit.ly/1zZP...
Interaction
How do we get raw user
information?
Observation
In the lab In the wild
image source: http://bit.ly/1L0qZlhimag...
image source: http://bit.ly/1A09m3T
Users ≠ Customers
Your website is also an internal tool
Lay out your tools
(in no particular order)
image source: http://bit.ly/1E5uWPv
Gather your tools
Avoid the temptation to ...
image source: bit.ly/1cA1qvk
Your CEO is NOT a primary user
Balance opinion against empirical data
image source: http://bit.ly/1zXefL6
Phase Two:
Create logical groupings
#IAatDMFB
!
Restore order and corral the chaos
#IAatDMFB
image source: http://bit.ly/1zZPCgG
#IAatDMFB
What do you need?
Ingredient #1: Doggie bag from Phase 1
#IAatDMFB image source: http://bit.ly/1zXefL6
Ingredient #2: Real live users
#IAatDMFB image source: http://bit.ly/1L1YPX3
Secret Ingredients:
Pinch of courage + dash of speed
#IAatDMFB
image source: http://bit.ly/1ECscuu
But first, let’s demystify this card sorting stuff.
What is card sorting?
#IAatDMFB
…and there you have it.
#IAatDMFB
What are we looking for?
!
!
!
!
Consistency with user expectations!
• natural groupings based on user mindset
• clear, di...
#IAatDMFB
Open and/or closed
!
OPEN = what things go together?
CLOSED = test your labels
HYBRID = test labels, allow user ...
#IAatDMFB
Scenario 1: Wide Open
image source: http://bit.ly/1JdgBYi
Users sort cards into
logical groupings and
provide a label for each
category
Open Card Sort
#IAatDMFB
Scenario 2: Round Holes?
#IAatDMFB
image source: http://bit.ly/1A0kC0D
#IAatDMFB
Closed/Hybrid Card Sort
Hybrid Card Sorting
exercise to identify
common groupings and
understand user mental
mod...
For best results…
Mash up your methods
!
!
#IAatDMFB
• open vs closed
• physical vs digital
• moderated vs unmoderated
!
•...
Practical stuff
!
1.30-40 cards is optimal, 50-60 max
2.Randomize card order (and categories if doing closed sort)
3.Vary ...
#IAatDMFB
Analyze results
-Similarity - which cards were grouped together most commonly
-Categorization - how often did ca...
#IAatDMFB
!
Visualization
of data
clusters,
showing % of
participants in
agreement
with category
groupings.
What did we le...
Toolkit #1
Toolkit #2
Similarity Matrix
#IAatDMFB
Shows % of
participants that
grouped pairs of cards
together - Highlight...
Let the data do the talking
#IAatDMFB
image source: http://bit.ly/1K6gLSQ
Plenty o’ fish
Lots of online tool options out there.
OptimalSort
UserZoom
UsabilityTools
ConceptCodify
SimpleCardSort
xSor...
What now?
#IAatDMFB
image source: http://bit.ly/1JHzhNX
We want to identify
this path BEFORE
we pave.
#IAatDMFB
Tree Test
Scenario-based test to quickly test intuitiveness of site navigation and
architecture BEFORE building the site.
...
Tree Test Results
Rich data generated automatically to support navigation and architecture decision making.
#IAatDMFB
Tree Test Participant Paths &
Destinations Results
See how users navigated for each scenario
#IAatDMFB
#IAatDMFB
End Result:
User-Validated Information Architecture
Questions?
Devin Asaro, Content Strategist @copydev
Greg Harron, UX Strategist @gregharron
#IAatDMFB
Upcoming SlideShare
Loading in …5
×

Building a User-Focused Information Architecture

2,359 views

Published on

Co-presented with Greg Harron, UX Strategist at Centerline Digital (@GregHarron).

Determining your site’s information architecture is a highly political exercise. Everyone from product managers to the executive team has an idea about what’s most important, and how it should be organized on the site. But while determining your IA by committee might make everyone in your company happy (or at least keep them quiet), it often leaves users out of the picture. Learn how to combine exercises from user experience and content strategy to build an information architecture (anything from sitemaps to metadata structures) that starts and ends with your user’s voice.”

Published in: Design

Building a User-Focused Information Architecture

  1. 1. Building a user-focused information architecture Devin Asaro, Content Strategist — @copydev
 Greg Harron, UX Strategist — @gregharron #IAatDMFB
  2. 2. What is information architecture? #IAatDMFB
  3. 3. IA is not just your sitemap #IAatDMFB image source: http://bit.ly/1JFL0MU
  4. 4. IA is not just your content model #IAatDMFB image source: http://bit.ly/1JFL0MU
  5. 5. IA is not just your taxonomy #IAatDMFB image source: http://bit.ly/1JFL0MU
  6. 6. IA is not just your metadata #IAatDMFB image source: http://bit.ly/1JFL0MU
  7. 7. IA is not just your tagging structure #IAatDMFB image source: http://bit.ly/1JFL0MU
  8. 8. IA is not just your product hierarchy #IAatDMFB image source: http://bit.ly/1JFL0MU
  9. 9. “On the web, IA is structured information that contributes to the relationship of meaning between a website and the people who use it. HERE’S OUR DEFINITION ”#IAatDMFB @copydev
  10. 10. On the web, IA is structured information that contributes to the relationship of meaning between a website and the people who use it. (This is a two-way relationship) “ ” HERE’S OUR DEFINITION #IAatDMFB
  11. 11. (Actually… three) On the web, IA is structured information that contributes to the relationship of meaning between a website and the people and programs that use it. “ ” HERE’S OUR DEFINITION #IAatDMFB
  12. 12. Information architecture is about helping people understand their surroundings and find what they're looking for—in the real world as well as online. — The IA Institute http://bit.ly/1EE08pT “ ” BUT OTHER PEOPLE SAY SMART STUFF, TOO… #IAatDMFB
  13. 13. — Louis Rosenfeld http://bit.ly/1F7iPWn [Information architecture is] the art and science of structuring, organizing and labeling information to help people find and manage information. “ ”#IAatDMFB
  14. 14. Notice a pattern? #IAatDMFB image source: http://bit.ly/1bPp2eJ
  15. 15. The world is confusing. We’re here to help people navigate it. #IAatDMFB image source: http://bit.ly/1bPp2eJ
  16. 16. IA isn’t just for information architects, just as design isn’t just for designers. IA is for business people, too. #IAatDMFB
  17. 17. #IAatDMFB
  18. 18. My company can’t agree on anything. Do we need to fix our culture before we can build our IA? Yes and no #IAatDMFB
  19. 19. IA can actually help you overcome organizational conflicts. No. #IAatDMFB
  20. 20. First, you have to agree to reframe your thinking, and seek a common solution. …but yes. And that takes some doing. #IAatDMFB
  21. 21. #IAatDMFB How do we do it?
  22. 22. Phase One: Establishing IA Foundation image source: http://bit.ly/1H1Qsqw #IAatDMFB
  23. 23. First rule: Let your users make the important decisions. image source: http://bit.ly/1AWWLcW #IAatDMFB
  24. 24. Second rule: To create change, you have to look for new sources of information. #IAatDMFB image source: http://bit.ly/1zZP9eF
  25. 25. Interaction How do we get raw user information? Observation In the lab In the wild image source: http://bit.ly/1L0qZlhimage source: https://flic.kr/p/doVSMj#IAatDMFB
  26. 26. image source: http://bit.ly/1A09m3T Users ≠ Customers Your website is also an internal tool
  27. 27. Lay out your tools (in no particular order) image source: http://bit.ly/1E5uWPv Gather your tools Avoid the temptation to organize them
  28. 28. image source: bit.ly/1cA1qvk Your CEO is NOT a primary user Balance opinion against empirical data
  29. 29. image source: http://bit.ly/1zXefL6 Phase Two: Create logical groupings #IAatDMFB
  30. 30. ! Restore order and corral the chaos #IAatDMFB image source: http://bit.ly/1zZPCgG
  31. 31. #IAatDMFB What do you need?
  32. 32. Ingredient #1: Doggie bag from Phase 1 #IAatDMFB image source: http://bit.ly/1zXefL6
  33. 33. Ingredient #2: Real live users #IAatDMFB image source: http://bit.ly/1L1YPX3
  34. 34. Secret Ingredients: Pinch of courage + dash of speed #IAatDMFB image source: http://bit.ly/1ECscuu
  35. 35. But first, let’s demystify this card sorting stuff. What is card sorting? #IAatDMFB
  36. 36. …and there you have it. #IAatDMFB
  37. 37. What are we looking for? ! ! ! ! Consistency with user expectations! • natural groupings based on user mindset • clear, distinct meaning • mental models of how things relate to one another ambiguities terminology usage/understanding concept overlap #IAatDMFB
  38. 38. #IAatDMFB Open and/or closed ! OPEN = what things go together? CLOSED = test your labels HYBRID = test labels, allow user to customize ! Ideally, Open THEN Closed ! ! !
  39. 39. #IAatDMFB Scenario 1: Wide Open image source: http://bit.ly/1JdgBYi
  40. 40. Users sort cards into logical groupings and provide a label for each category Open Card Sort #IAatDMFB
  41. 41. Scenario 2: Round Holes? #IAatDMFB image source: http://bit.ly/1A0kC0D
  42. 42. #IAatDMFB Closed/Hybrid Card Sort Hybrid Card Sorting exercise to identify common groupings and understand user mental models for information architecture.Users sort cards to predefined categories. ! With Hybrid version, users also have option to create new categories if they don’t see a true fit.
  43. 43. For best results… Mash up your methods ! ! #IAatDMFB • open vs closed • physical vs digital • moderated vs unmoderated ! • compare user and business stakeholder results
  44. 44. Practical stuff ! 1.30-40 cards is optimal, 50-60 max 2.Randomize card order (and categories if doing closed sort) 3.Vary wording and terminology on cards 4.Set time/workload expectations with participants up front 5.Encourage the participant to think aloud 6.Ask follow-up questions
  45. 45. #IAatDMFB Analyze results -Similarity - which cards were grouped together most commonly -Categorization - how often did cards get grouped to the same category -Qualitative review of notes and observations
  46. 46. #IAatDMFB ! Visualization of data clusters, showing % of participants in agreement with category groupings. What did we learn from this highlighted data point? Dendograms
  47. 47. Toolkit #1 Toolkit #2 Similarity Matrix #IAatDMFB Shows % of participants that grouped pairs of cards together - Highlights common pairings/ clusters.
  48. 48. Let the data do the talking #IAatDMFB image source: http://bit.ly/1K6gLSQ
  49. 49. Plenty o’ fish Lots of online tool options out there. OptimalSort UserZoom UsabilityTools ConceptCodify SimpleCardSort xSort and more… #IAatDMFB
  50. 50. What now? #IAatDMFB image source: http://bit.ly/1JHzhNX
  51. 51. We want to identify this path BEFORE we pave. #IAatDMFB
  52. 52. Tree Test Scenario-based test to quickly test intuitiveness of site navigation and architecture BEFORE building the site. #IAatDMFB
  53. 53. Tree Test Results Rich data generated automatically to support navigation and architecture decision making. #IAatDMFB
  54. 54. Tree Test Participant Paths & Destinations Results See how users navigated for each scenario #IAatDMFB
  55. 55. #IAatDMFB End Result: User-Validated Information Architecture
  56. 56. Questions? Devin Asaro, Content Strategist @copydev Greg Harron, UX Strategist @gregharron #IAatDMFB

×