1. Information Architecture: Making Information Accessible and Useful
David Sherwin / t:@changeorder
HOW INTERACTIVE CONFERENCE | NOVEMBER 2, 2011

2. Introduction
This is a talk about how
designers can help people
make use of information.
Information Architecture: Making Information Accessible and Useful 11/02/11 2

7. Introduction
Information Architecture (IA):
describing systems well, so people
can find their way around them
Information Architecture: Making Information Accessible and Useful 11/02/11 7

8. Talk at a glance
01 02
How we Identifying &
move through structuring
systems concepts
03 04
The core Practicing
elements information
of great IA architecture
Information Architecture: Making Information Accessible and Useful 11/02/11 8

9. 01: How we move through systems

10. How we move through systems
We identify places in systems
for people to find and act upon
desired information.
Information Architecture: Making Information Accessible and Useful 11/02/11 10

11. How we move through systems
Example: a trip to the museum.
Information Architecture: Making Information Accessible and Useful 11/02/11 11

12. How we move through systems
PERSONA:
Designer
GOAL: GET INSPIRED AT THE SFMOMA
WALK to museum VIEW the exhibit RETURN to work
Information Architecture: Making Information Accessible and Useful 11/02/11 12

13. v
Information Architecture: Making Information Accessible and Useful 11/02/11 13

14. Information Architecture: Making Information Accessible and Useful 11/02/11 14

15. Section title text
Information Architecture: Making Information Accessible and Useful 11/02/11 15

16. Information Architecture: Making Information Accessible and Useful 11/02/11 16

17. Information Architecture: Making Information Accessible and Useful 11/02/11 17

18. Section title text
Information Architecture: Making Information Accessible and Useful 11/02/11 18

19. Section title text
Information Architecture: Making Information Accessible and Useful 11/02/11 19

20. Information Architecture: Making Information Accessible and Useful 11/02/11 20

21. Information Architecture: Making Information Accessible and Useful 11/02/11 21

22. Section title text
Information Architecture: Making Information Accessible and Useful 11/02/11 22

23. Information Architecture: Making Information Accessible and Useful 11/02/11 23

24. Information Architecture: Making Information Accessible and Useful 11/02/11 24

25. Section title text
Information Architecture: Making Information Accessible and Useful 11/02/11 25

26. Information Architecture: Making Information Accessible and Useful 11/02/11 26

27. Section title text
Information Architecture: Making Information Accessible and Useful 11/02/11 27

28. How we move through systems
That was a great museum
experience… though
what did I leave out?
Information Architecture: Making Information Accessible and Useful 11/02/11 28

29. How we move through systems
Exhibit information
Information Architecture: Making Information Accessible and Useful 11/02/11 29

30. How we move through systems
Getting there
Information Architecture: Making Information Accessible and Useful 11/02/11 30

31. How we move through systems
Checking hours
Information Architecture: Making Information Accessible and Useful 11/02/11 31

32. How we move through systems
Can I share this
with friends?
Information Architecture: Making Information Accessible and Useful 11/02/11 32

33. Identifying and structuring concepts
Digital and real-world
systems must work in concert
to be accessible and usable.
(How much of this can a designer control?)
Information Architecture: Making Information Accessible and Useful 11/02/11 33

34. 02: Identifying & structuring concepts

35. Identifying and structuring concepts
Time, place, and desired actions
give context to information
situated in the flow of a
well-designed experience.
Information Architecture: Making Information Accessible and Useful 11/02/11 35

36. Identifying and structuring concepts
PERSONA:
Designer
GOAL: GET INSPIRED AT THE SFMOMA
BEFORE DURING AFTER
FIND the museum LOCATE the exhibit BUY a snack at the cafe
CHECK business hours VIEW the exhibit LOOK at mobile site
WAIT in line VIEW another exhibit RETURN to work
PAY for admission
Information Architecture: Making Information Accessible and Useful 11/02/11 36

37. Identifying and structuring concepts
Plus: responding to email, text
messaging, checking Facebook,
tweeting a friend, et cetera.
Information Architecture: Making Information Accessible and Useful 11/02/11 37

38. Identifying and structuring concepts
PERSONA:
Designer
GOAL: GET INSPIRED AT THE SFMOMA
BEFORE DURING AFTER
FIND the museum LOCATE the exhibit BUY a snack at the cafe
CHECK business hours VIEW the exhibit WRITE text message
WALK to museum SHOOT photographs REVIEW photographs
WAIT in line STATUS on Facebook LOOK at mobile site
CHECK my email VIEW another exhibit SHARE site with friends
PAY for admission RESPOND to text msg RETURN to work
Information Architecture: Making Information Accessible and Useful 11/02/11 38

39. New context
Information Architecture: Making Information Accessible and Useful 11/02/11 39

40. Identifying and structuring concepts
PERSONA:
Designer
GOAL: GET INSPIRED AT THE SFMOMA
CONTEXT: PLANNING MY VISIT TO THE SFMOMA WHILE AT WORK
HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY
FIND the museum RESEARCH the art LOCATE the exhibit
CHECK business hours VIEW another exhibit VIEW the exhibit
PAY for admission
WAIT in line
BUY a snack at the cafe
Information Architecture: Making Information Accessible and Useful 11/02/11 40

41. New context
Information Architecture: Making Information Accessible and Useful 11/02/11 41

42. Identifying and structuring concepts
PERSONA:
Designer
GOAL: GET INSPIRED AT THE SFMOMA
CONTEXT: JUST ENTERED THE MUSEUM
HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY
LOCATE the exhibit VIEW another exhibit FIND the museum
VIEW the exhibit BUY a snack at the cafe PAY for admission
RESEARCH the art WAIT in line
CHECK business hours
Information Architecture: Making Information Accessible and Useful 11/02/11 42

43. Identifying and structuring concepts
PERSONA:
Tourist
GOAL: SHOW MY KIDS THE BEST OF SF
CONTEXT: JUST ENTERED THE MUSEUM
HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY
BUY a snack at the cafe LOCATE desired exhibit FIND the museum
RESEARCH events VIEW desired exhibits PAY for admission
SIGN UP for a tour VIEW another exhibit WAIT in line
CHOOSE exhibits CHECK business hours
Information Architecture: Making Information Accessible and Useful 11/02/11 43

44. Identifying and structuring concepts
PERSONAS:
Designer + Tourist
GOAL: GET INSPIRED AT THE SFMOMA GOAL: SHOW MY KIDS THE BEST OF SF
CONTEXT: JUST ENTERED THE MUSEUM
HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY
FIND the museum? LOCATE an exhibit? WAIT in line?
CHECK business hours? RESEARCH events?
PAY for admission? SIGN UP for a tour?
Information Architecture: Making Information Accessible and Useful 11/02/11 44

45. Identifying and structuring concepts
How can we visualize how
multiple personas understand
information in a shared place?
Information Architecture: Making Information Accessible and Useful 11/02/11 45

46. Identifying and structuring concepts
CONCEPT MAPS
Determining
relationships
between concepts
for your users.
photo 3920008870 by Anderbill / Attribution 2.0 License on Flickr
Information Architecture: Making Information Accessible and Useful 11/02/11 46

47. Identifying and structuring concepts
Designer
VISITORS
Tourist who
need
to
EAT
who
who view who wants to
find want
want
to see goes
to the
SHOP
TOURS /
EVENTS EXHIBITS
TRAVEL
to get CAFE
to the
visiting buys
with
buys selling
FOOD
GIFTS
buys
ART
PHYSICAL SPACE "MUSEUM"
DIGITAL SPACE
Information Architecture: Making Information Accessible and Useful 11/02/11 47

48. Identifying and structuring concepts
Designer
VISITORS
Tourist who
HOW TO VISIT need
to
EAT
who
who view who wants to
find want
want
to see goes
to the
SHOP
SHOPPING
TOURS /
TRAVEL EXHIBITS & EVENTS
EVENTS EXHIBITS
to get CAFE
to the
visiting buys
with
buys selling
FOOD
GIFTS
THE WHOLE
ART
buys
COLLECTION
PHYSICAL SPACE "MUSEUM"
ABOUT SFMOMA
DIGITAL SPACE
Information Architecture: Making Information Accessible and Useful 11/02/11 48

49. A museum experience
Information Architecture: Making Information Accessible and Useful 11/02/11 49

50. What’s critical
in context?
Information Architecture: Making Information Accessible and Useful 11/02/11 50

51. Identifying and structuring concepts
PROGRESSIVE DESIGN CHALLENGE
Try concept mapping yourself!
Visualize how users might relate
to the content in your magazine.
Information Architecture: Making Information Accessible and Useful 11/02/11 51

52. Identifying and structuring concepts
LIQUIDS drunk by PEOPLE who go to STORES
want
made to eat
who that carry
into eating
are that carry
also
eating
formed TRUFF- HOME: PASTRI
CHOCOLAT- baked into that carry
into LES CHOCOLATE ES
IERS
made in
into
which
sold to BARS is
formed
into
FARMERS grown
by
RAW
CACAO
Information Architecture: Making Information Accessible and Useful 11/02/11 52

53. photo 1449664622 by Frenkeib
Attribution 2.0 License on Flickr
03: The core elements of great IA

54. The core elements of great IA
A: Search
B: Navigation
C: Labeling
D: Organization & Hierarchy
Information Architecture: Making Information Accessible and Useful 11/02/11 54

55. The core elements of great IA: Search
A: Search
how do users locate information?
(I know a keyword…)
Information Architecture: Making Information Accessible and Useful 11/02/11 55

56. Waiting for search
Information Architecture: Making Information Accessible and Useful 11/02/11 56

57. Autocomplete &
Results Structure
Information Architecture: Making Information Accessible and Useful 11/02/11 57

58. Filter by Category
Information Architecture: Making Information Accessible and Useful 11/02/11 58

59. The core elements of great IA: Search
Sorting
vs. Filtering
Information Architecture: Making Information Accessible and Useful 11/02/11 59

60. The core elements of great IA: Search
Filtering Patterns
Information Architecture: Making Information Accessible and Useful 11/02/11 60

61. The core elements of great IA: Search
Multiple
Inputs
Information Architecture: Making Information Accessible and Useful 11/02/11 61

62. The core elements of great IA: Navigation
B: Navigation
how do users locate information?
or a place that might contain it?
(I have a scent of what I’m looking for…)
Information Architecture: Making Information Accessible and Useful 11/02/11 62

63. Section title text
Information Architecture: Making Information Accessible and Useful 11/02/11 63

64. The core elements of great IA
Search and navigation
should support each other.
Information Architecture: Making Information Accessible and Useful 11/02/11 64

65. The core elements of great IA: Navigation
Levels of navigation:
Global: Across multiple sites/apps (ecosystem)
Primary: First level visible (parent)
Secondary: Second level (child)
Tertiary: Third level deep (grandchild), et cetera
Information Architecture: Making Information Accessible and Useful 11/02/11 65

66. The core elements of great IA: Navigation
shortcuts (secondary, tertiary)
dropdown exposes one level
Information Architecture: Making Information Accessible and Useful 11/02/11 66

67. The core elements of great IA: Navigation
exposed secondary navigation
you are here
Information Architecture: Making Information Accessible and Useful 11/02/11 67

68. breadcrumb trail
(not secondary nav)
Information Architecture: Making Information Accessible and Useful 11/02/11 68

69. vertical
navigation
eh?
http://www.thisisleaf.co.uk
Information Architecture: Making Information Accessible and Useful 11/02/11 69

70. The core elements of great IA: Navigation
Fused site/app
navigation
http://www.bloomberg.com/company/
Information Architecture: Making Information Accessible and Useful 11/02/11 70

71. The core elements of great IA: Navigation
80% cases
New patterns for 4 + more…
Information Architecture: Making Information Accessible and Useful 11/02/11 71

72. The core elements of great IA: Navigation
Information Architecture: Making Information Accessible and Useful 11/02/11 72

73. The core elements of great IA: Navigation
Content over
navigation…
Information Architecture: Making Information Accessible and Useful 11/02/11 73

74. The core elements of great IA: Labeling
C: Labeling
is the information identified
in a way that users understand?
Information Architecture: Making Information Accessible and Useful 11/02/11 74

75. Information Architecture: Making Information Accessible and Useful 11/02/11 75

76. The core elements of great IA: Labeling
CARD SORTING
Validate labeling
& content categories
for sites and apps
Get Card Sorting: Creating Usable Categories
by Donna Spencer (Rosenfeld Media)
Information Architecture: Making Information Accessible and Useful 11/02/11 76

77. The core elements of great IA: Organization & Hierarchy
D: Organization & Hierarchy
is information structured in a way
that reflects my priorities and needs?
Information Architecture: Making Information Accessible and Useful 11/02/11 77

78. Information Architecture: Making Information Accessible and Useful 11/02/11 78

79. The core elements of great IA: Organization & Hierarchy
Make hierarchy obvious
Information Architecture: Making Information Accessible and Useful 11/02/11 79

80. The core elements of great IA: Organization & Hierarchy
WATCH
BUY
Show the right info
at the right level
Information Architecture: Making Information Accessible and Useful 11/02/11 80

81. The core elements of great IA: Organization & Hierarchy
Test with users
photo 2247745929 by psd / Attribution 2.0 License on Flickr
(& real content)
Information Architecture: Making Information Accessible and Useful 11/02/11 81

82. The core elements of great IA: Organization & Hierarchy
“Designing in the absence
of content is not design.
It’s decoration.”
—Je rey Zeldman
Information Architecture: Making Information Accessible and Useful 11/02/11 82

83. for iPhone, iPod Touch and
Desktop Web
Interlude: TV Chatter v1 -> v2

84. Home
+ nav
Information Architecture: Making Information Accessible and Useful 11/02/11 84

85. Program
screen
Information Architecture: Making Information Accessible and Useful 11/02/11 85

86. Tweet
stream
Information Architecture: Making Information Accessible and Useful 11/02/11 86

87. Interlude: TV Chatter
How would a designer
express the elements of IA
for this app?
Information Architecture: Making Information Accessible and Useful 11/02/11 87

88. Interlude: TV Chatter
NAVIGATION SCHEMA
Translates a site/app map into
menu states a user would see.
FAVES HOT NEXT FEATURED SEARCH (ALL)
Shows Popular What’s Promoted Full
I love shows on next? Shows catalog
FAVES HOT NEXT FEATURED ALL
Information Architecture: Making Information Accessible and Useful 11/02/11 88

89. Interlude: TV Chatter
HEADER
ZONED WIREFRAMES
HOME SCREEN Establishing screen
CONTENT
templates and
design patterns
NAVIGATION
Information Architecture: Making Information Accessible and Useful 11/02/11 89

90. Interlude: TV Chatter
USER FLOWS
Focuses on a singular use case, reaching
desired content via explicit interactions.

91. Interlude: TV Chatter
Information Architecture: Making Information Accessible and Useful 11/02/11 91

92. Interlude: TV Chatter
APPLICATION MAP
ES 0.0 HOME 5.0 SEARCH
Establishes
relationships
between content
& functionality.
Conveys spatial
metaphors.
6.0 SHOW HOME 7,0 TWEETSTREAM
Should happen at lowest
fidelities first.

93. Interlude: TV Chatter
We started with mobile first.
You should too.
Information Architecture: Making Information Accessible and Useful 11/02/11 93

94. Interlude: TV Chatter
Download TV Chatter v2 from the iTunes App Store
to see how we refined the information architecture.
Information Architecture: Making Information Accessible and Useful 11/02/11 94

95. Section title text
Extend
to web
Information Architecture: Making Information Accessible and Useful 11/02/11 95

96. Interlude: TV Chatter
Extend
to live TV
Information Architecture: Making Information Accessible and Useful 11/02/11 96

97. 04: Practicing information architecture

98. Practicing information architecture
MAPPING OF WEBSITE/APP CONTENT
Designer
VISITORS
Tourist who
HOMEPAGE need
to
EAT
who
who view who wants to
find want
want
to see goes
to the
SHOWCASE PORTFOLIO PROGRESS TOURS /
SHOP
EVENTS EXHIBITS
TRAVEL
to get CAFE
to the
Filters Filters Sort
buys
By the Numbers New Business visiting
with
buys selling
SITE MAP CONCEPT MAP buys
GIFTS
FOOD APP MAP
ART
PHYSICAL SPACE "MUSEUM"
DIGITAL SPACE
SCREEN COMPOSITION & PLACEMENT OF FUNCTIONALITY
NAVIGATION SCHEMA ZONED WIREFRAMES WIREFRAME FLOWS
WEBSITE APP
Information Architecture: Making Information Accessible and Useful 11/02/11 98

99. Practicing information architecture
What documentation
do I need to know how to create?
Just enough of what’s needed.
Information Architecture: Making Information Accessible and Useful 11/02/11 99

100. Practicing information architecture
The curse of increasing fidelity
TIME
TIME COST
OF BIG DESIGN
UP FRONT
SKETCH LOW-FI HIGH-FI PIXEL-PERFECT
WIRES WIRES COMPS
Information Architecture: Making Information Accessible and Useful 11/02/11 100

101. Practicing information architecture
The “value” of increasing fidelity
TIME
TIME COST
OF EXPLAINING
DESIGN IDEAS
SKETCH LOW-FI HIGH-FI PIXEL-PERFECT
WIRES WIRES COMPS
Information Architecture: Making Information Accessible and Useful 11/02/11 101

102. Practicing information architecture
Are you better o
resolving your design
by prototyping, not
by documenting?
Information Architecture: Making Information Accessible and Useful 11/02/11 102

103. Practicing information architecture
Prototyping is creating
models of how a system
should behave in use.
(It does not have to be working, shippable code!)
Information Architecture: Making Information Accessible and Useful 11/02/11 103

104. Practicing information architecture
Want to ship faster?
DOCUMENTATION
TIME
TIME
DESIGN TIME INCLUDING
IN-LINE PROTOTYPING
SKETCH LOW-FI IN-LINE PIXEL- SHIPPABLE
WIRE PROTOTYPING PERFECT CODE
COMPS
HIGH-FI
WIRE
Information Architecture: Making Information Accessible and Useful 11/02/11 104

105. Practicing information architecture
Don’t try to predict change
through heavy documentation.
Redesign your IA process
so it can adapt to change
through prototyping your IA.
Information Architecture: Making Information Accessible and Useful 11/02/11 105

106. Adobe CS???
Information Architecture: Making Information Accessible and Useful 11/02/11 106

107. Practicing information architecture
DISCOVERY WITH
1. INVENTORY
CLIENT & USERS
CREATE DESIGN
2. STRUCTURE & PROTOTYPE HYPOTHESES
VALIDATE &
3. VALIDATE GENERATE IDEAS
DESIGN &
4. EXTEND DEVELOPMENT
ITERATION
Information Architecture: Making Information Accessible and Useful 11/02/11 107

108. Example: GE
Ecomagination
Information Architecture: Making Information Accessible and Useful 11/02/11 108

109. Practicing information architecture
DISCOVERY WITH
1. INVENTORY
CLIENT & USERS
CREATE DESIGN
2. STRUCTURE & PROTOTYPE HYPOTHESES
VALIDATE &
3. VALIDATE GENERATE IDEAS
DESIGN &
4. EXTEND DEVELOPMENT
ITERATION
Information Architecture: Making Information Accessible and Useful 11/02/11 109

110. SITE MAP
HOMEPAGE
ANALYSE INVENT COMMIT SHOWCASE PORTFOLIO PROGRESS GREEN ROOM SUBSCRIBE SEARCH
Filters Filters Sort Filters
FEATURE FEATURE FEATURE By the Numbers New Business ASK AN EXPERT Product
DETAIL PAGE DETAIL PAGE DETAIL PAGE On the Road Home Year DETAIL PAGE Showcase
On the Web Business A-Z Articles
City
BEHIND THE SCENES
FEATURETTE FEATURETTE FEATURETTE DETAIL PAGE
DETAIL PAGE DETAIL PAGE DETAIL PAGE SEARCH
SHOWCASE PRODUCT
DETAIL PAGE DETAIL PAGE RESULTS PAGE
ECO CONVERSATION
(ECO 2.0 CONTENT)
AGGREGATED AGGREGATED AGGREGATED
DETAIL PAGE DETAIL PAGE DETAIL PAGE
GLOBAL ELEMENTS ADDITIONAL PAGE
DRAWER OVERLAY MISSION STATEMENT
FOOTER
Information Architecture: Making Information Accessible and Useful 11/02/11 110

111. Practicing information architecture
DISCOVERY WITH
1. INVENTORY
CLIENT & USERS
CREATE DESIGN
2. STRUCTURE & PROTOTYPE HYPOTHESES
VALIDATE &
3. VALIDATE GENERATE IDEAS
DESIGN &
4. EXTEND DEVELOPMENT
ITERATION
Information Architecture: Making Information Accessible and Useful 11/02/11 111

112. ZONED WIRE WITH NAVIGATION SCHEMA
Information Architecture: Making Information Accessible and Useful 11/02/11 112

113. Practicing information architecture
MOOD BOARDS
Sets tone and
art direction for
visual design
& interaction.
Information Architecture: Making Information Accessible and Useful 11/02/11 113

116. Practicing information architecture
DISCOVERY WITH
1. INVENTORY
CLIENT & USERS
CREATE DESIGN
2. STRUCTURE & PROTOTYPE HYPOTHESES
VALIDATE &
3. VALIDATE GENERATE IDEAS
DESIGN &
4. EXTEND DEVELOPMENT
ITERATION
Information Architecture: Making Information Accessible and Useful 11/02/11 116

117. Practicing information architecture
DISCOVERY WITH
1. INVENTORY
CLIENT & USERS
CREATE DESIGN
2. STRUCTURE & PROTOTYPE HYPOTHESES
VALIDATE &
3. VALIDATE GENERATE IDEAS
DESIGN &
4. EXTEND DEVELOPMENT
ITERATION
Information Architecture: Making Information Accessible and Useful 11/02/11 117

118. Information Architecture: Making Information Accessible and Useful 11/02/11 118

119. 01 02
Discover the places Identify the right
people act upon concepts to express
desired information needed information
03 04
Work in modules Document to
to establish clear understand,
design patterns prototype to know
Information Architecture: Making Information Accessible and Useful 11/02/11 119

120. “Less, but better.”
—Dieter Rams
Information Architecture: Making Information Accessible and Useful 11/02/11 120

121. Say hello:
t: @changeorder
e: david.sherwin@frogdesign.com
b: changeorderblog.com
Creative Workshop
available now from HOW
at mydesignshop.com &
amzn.to/CWTheBook
© 2011 frog. All rights reserved.