building a user-focused information architecture
TRANSCRIPT
![Page 1: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/1.jpg)
Building a user-focused information architectureDevin Asaro, Content Strategist — @copydevGreg Harron, UX Strategist — @gregharron
#IAatDMFB
![Page 2: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/2.jpg)
What is information architecture?
#IAatDMFB
![Page 4: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/4.jpg)
IA is not just your content model
#IAatDMFB image source: http://bit.ly/1JFL0MU
![Page 7: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/7.jpg)
IA is not just your tagging structure
#IAatDMFB image source: http://bit.ly/1JFL0MU
![Page 8: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/8.jpg)
IA is not just your product hierarchy
#IAatDMFB image source: http://bit.ly/1JFL0MU
![Page 9: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/9.jpg)
“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
![Page 10: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/10.jpg)
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
![Page 11: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/11.jpg)
(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
![Page 12: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/12.jpg)
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
![Page 13: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/13.jpg)
— 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
![Page 15: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/15.jpg)
The world is confusing. We’re here to help people navigate it.
#IAatDMFB
image source: http://bit.ly/1bPp2eJ
![Page 16: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/16.jpg)
IA isn’t just for information architects, just as design isn’t just for designers.
IA is for business people, too.
#IAatDMFB
![Page 17: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/17.jpg)
#IAatDMFB
![Page 18: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/18.jpg)
My company can’t agree on anything. Do we need to fix our culture before we can build our IA?
Yes and no
#IAatDMFB
![Page 19: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/19.jpg)
IA can actually help you overcome organizational conflicts.
No.
#IAatDMFB
![Page 20: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/20.jpg)
First, you have to agree to reframe your thinking, and seek a common solution.
…but yes.
And that takes some doing.
#IAatDMFB
![Page 21: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/21.jpg)
#IAatDMFB
How do we do it?
![Page 22: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/22.jpg)
Phase One:Establishing IA Foundation
image source: http://bit.ly/1H1Qsqw
#IAatDMFB
![Page 23: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/23.jpg)
First rule:Let your users make the important decisions.
image source: http://bit.ly/1AWWLcW
#IAatDMFB
![Page 24: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/24.jpg)
Second rule:To create change, you have to look for new sources of information.
#IAatDMFB image source: http://bit.ly/1zZP9eF
![Page 25: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/25.jpg)
Interaction
How do we get raw user information?
ObservationIn the lab In the wild
image source: http://bit.ly/1L0qZlhimage source: https://flic.kr/p/doVSMj#IAatDMFB
![Page 26: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/26.jpg)
image source: http://bit.ly/1A09m3T
Users ≠ Customers Your website is also an internal tool
![Page 27: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/27.jpg)
Lay out your tools (in no particular order)
image source: http://bit.ly/1E5uWPv
Gather your toolsAvoid the temptation to organize them
![Page 28: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/28.jpg)
image source: bit.ly/1cA1qvk
Your CEO is NOT a primary userBalance opinion against empirical data
![Page 29: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/29.jpg)
image source: http://bit.ly/1zXefL6
Phase Two:Create logical groupings
#IAatDMFB
![Page 30: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/30.jpg)
!
Restore order and corral the chaos
#IAatDMFB
image source: http://bit.ly/1zZPCgG
![Page 31: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/31.jpg)
#IAatDMFB
What do you need?
![Page 32: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/32.jpg)
Ingredient #1: Doggie bag from Phase 1
#IAatDMFB image source: http://bit.ly/1zXefL6
![Page 34: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/34.jpg)
Secret Ingredients: Pinch of courage + dash of speed
#IAatDMFB
image source: http://bit.ly/1ECscuu
![Page 35: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/35.jpg)
But first, let’s demystify this card sorting stuff.
What is card sorting?
#IAatDMFB
![Page 36: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/36.jpg)
…and there you have it.
#IAatDMFB
![Page 37: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/37.jpg)
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
![Page 38: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/38.jpg)
#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 !!!
![Page 40: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/40.jpg)
Users sort cards into logical groupings and provide a label for each category
Open Card Sort
#IAatDMFB
![Page 42: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/42.jpg)
#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.
![Page 43: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/43.jpg)
For best results… Mash up your methods !!
#IAatDMFB
• open vs closed • physical vs digital • moderated vs unmoderated !
• compare user and business stakeholder results
![Page 44: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/44.jpg)
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
![Page 45: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/45.jpg)
#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
![Page 46: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/46.jpg)
#IAatDMFB
!
Visualization of data clusters, showing % of participants in agreement with category groupings.
What did we learn from this highlighted data point?
Dendograms
![Page 47: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/47.jpg)
Toolkit #1
Toolkit #2
Similarity Matrix
#IAatDMFB
Shows % of participants that grouped pairs of cards together - Highlights common pairings/clusters.
![Page 49: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/49.jpg)
Plenty o’ fish Lots of online tool options out there.
OptimalSort
UserZoom
UsabilityTools
ConceptCodify
SimpleCardSort
xSort
and more…
#IAatDMFB
![Page 51: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/51.jpg)
We want to identify this path BEFORE we pave.
#IAatDMFB
![Page 52: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/52.jpg)
Tree Test Scenario-based test to quickly test intuitiveness of site navigation and architecture BEFORE building the site.
#IAatDMFB
![Page 53: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/53.jpg)
Tree Test Results Rich data generated automatically to support navigation and architecture decision making.
#IAatDMFB
![Page 54: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/54.jpg)
Tree Test Participant Paths & Destinations Results See how users navigated for each scenario
#IAatDMFB
![Page 55: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/55.jpg)
#IAatDMFB
End Result: User-Validated Information Architecture
![Page 56: Building a User-Focused Information Architecture](https://reader038.vdocuments.mx/reader038/viewer/2022102903/55c98f4dbb61eb5f1b8b46a2/html5/thumbnails/56.jpg)
Questions?
Devin Asaro, Content Strategist @copydev Greg Harron, UX Strategist @gregharron
#IAatDMFB