The document discusses the importance of information architecture (IA) in aiding users to navigate and find information effectively on websites. It emphasizes that IA is not limited to technical aspects like sitemaps and taxonomies, but is a user-focused approach that should consider user needs and mental models. The document outlines steps for creating an effective IA, including user observation, card sorting, and testing navigation structure to derive a user-validated architecture.

1. Building a user-focused information
architecture
Devin Asaro, Content Strategist — @copydev
Greg Harron, UX Strategist — @gregharron
#IAatDMFB

2. What is information architecture?
#IAatDMFB

3. IA is not
just your
sitemap
#IAatDMFB image source: http://bit.ly/1JFL0MU

4. IA is not
just your
content
model
#IAatDMFB image source: http://bit.ly/1JFL0MU

5. IA is not
just your
taxonomy
#IAatDMFB image source: http://bit.ly/1JFL0MU

6. IA is not
just your
metadata
#IAatDMFB image source: http://bit.ly/1JFL0MU

7. IA is not
just your
tagging
structure
#IAatDMFB image source: http://bit.ly/1JFL0MU

8. IA is not
just your
product
hierarchy
#IAatDMFB image source: http://bit.ly/1JFL0MU

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. 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. (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. 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. — 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. Notice a pattern?
#IAatDMFB
image source: http://bit.ly/1bPp2eJ

15. The world is confusing.
We’re here to help people navigate it.
#IAatDMFB
image source: http://bit.ly/1bPp2eJ

16. IA isn’t just for
information architects,
just as design isn’t just
for designers.
IA is for business
people, too.
#IAatDMFB

17. #IAatDMFB

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. IA can actually help you overcome
organizational conflicts.
No.
#IAatDMFB

20. First, you have to agree to reframe your
thinking, and seek a common
solution.
…but yes.
And that takes some doing.
#IAatDMFB

21. #IAatDMFB
How do we do it?

22. Phase One:
Establishing IA Foundation
image source: http://bit.ly/1H1Qsqw
#IAatDMFB

23. First rule:
Let your users make the
important decisions.
image source: http://bit.ly/1AWWLcW
#IAatDMFB

24. Second rule:
To create change, you have to look
for new sources of information.
#IAatDMFB image source: http://bit.ly/1zZP9eF

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. image source: http://bit.ly/1A09m3T
Users ≠ Customers
Your website is also an internal tool

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. image source: bit.ly/1cA1qvk
Your CEO is NOT a primary user
Balance opinion against empirical data

29. image source: http://bit.ly/1zXefL6
Phase Two:
Create logical groupings
#IAatDMFB

30. !
Restore order and corral the chaos
#IAatDMFB
image source: http://bit.ly/1zZPCgG

31. #IAatDMFB
What do you need?

32. Ingredient #1: Doggie bag from Phase 1
#IAatDMFB image source: http://bit.ly/1zXefL6

33. Ingredient #2: Real live users
#IAatDMFB image source: http://bit.ly/1L1YPX3

34. Secret Ingredients:
Pinch of courage + dash of speed
#IAatDMFB
image source: http://bit.ly/1ECscuu

35. But first, let’s demystify this card sorting stuff.
What is card sorting?
#IAatDMFB

36. …and there you have it.
#IAatDMFB

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. #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. #IAatDMFB
Scenario 1: Wide Open
image source: http://bit.ly/1JdgBYi

40. Users sort cards into
logical groupings and
provide a label for each
category
Open Card Sort
#IAatDMFB

41. Scenario 2: Round Holes?
#IAatDMFB
image source: http://bit.ly/1A0kC0D

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. For best results…
Mash up your methods
!
!
#IAatDMFB
• open vs closed
• physical vs digital
• moderated vs unmoderated
!
• compare user and business stakeholder
results

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. #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. #IAatDMFB
!
Visualization
of data
clusters,
showing % of
participants in
agreement
with category
groupings.
What did we learn from this highlighted data point?
Dendograms

47. Toolkit #1
Toolkit #2
Similarity Matrix
#IAatDMFB
Shows % of
participants that
grouped pairs of cards
together - Highlights
common pairings/
clusters.

48. Let the data do the talking
#IAatDMFB
image source: http://bit.ly/1K6gLSQ

49. Plenty o’ fish
Lots of online tool options out there.
OptimalSort
UserZoom
UsabilityTools
ConceptCodify
SimpleCardSort
xSort
and more…
#IAatDMFB

50. What now?
#IAatDMFB
image source: http://bit.ly/1JHzhNX

51. We want to identify
this path BEFORE
we pave.
#IAatDMFB

52. Tree Test
Scenario-based test to quickly test intuitiveness of site navigation and
architecture BEFORE building the site.
#IAatDMFB

53. Tree Test Results
Rich data generated automatically to support navigation and architecture decision making.
#IAatDMFB

54. Tree Test Participant Paths &
Destinations Results
See how users navigated for each scenario
#IAatDMFB

55. #IAatDMFB
End Result:
User-Validated Information Architecture

56. Questions?
Devin Asaro, Content Strategist @copydev
Greg Harron, UX Strategist @gregharron
#IAatDMFB