Information Architecture for Beginners

This talk was given to students of NID Bangalore.

Transcript

1. Information Architecture for beginners
2. @souvikdg
5. By the end of this talk you 
 should be aware of what is
 Information Architecture
 without facing jargon-bullets.
6. Mess Part 1 of 4
7. 9 4 49 25 16 __
8. 4 9 16 25 __ 49
9. 4 9 16 25 __ 49 36
10. 4 8 16 32 __ 128
11. 4 8 16 32 __ 128 64
12. 4 8 15 16 __ 42
14. 4 8 15 16 __ 42 23
15. wtf-am-i-supposed-to-do-wit by kris krüg on Flickr https://www. fl ickr.com/photos/kk/18768224 Mess
16. wtf-am-i-supposed-to-do-wit by kris krüg on Flickr https://www. fl ickr.com/photos/kk/18768224 Mess disorganised or disarranged 
 and therefore not understandable
17. 9 4 49 25 16 __ 36
18. 4 9 16 25 __ 49 36
19. 4 8 15 16 __ 42 23
20. mess by amanda on Flickr https://www. fl ickr.com/photos/pinprick/5879923126
21. Unkept Room by Tom Blackwell on Flickr https://www. fl ickr.com/photos/tjblackwell/6007033415
22. Photo credit: José Morcillo Valenciano on Visual Hunt / CC BY
23. –Abby Covert Information Architect and author of How to Make Sense of Any Mess “I de fi ne the word ‘mess’ the same way that 
 most dictionaries do: A situation where the 
 interactions between people and information 
 are confusing or full of di ffi culties.”
24. Mess
26. Mess is somewhat manageable in small doses
28. Mess is a problem at scale
29. Order by Volgar on Flickr https://www. fl ickr.com/photos/volgar/27461981479
30. Tukwila/International Blvd Station Parking lot by Atomic Taco on Flickr https://www. fl ickr.com/photos/atomictaco/4333647127
31. Tukwila/International Blvd Station Parking lot by Atomic Taco on Flickr https://www. fl ickr.com/photos/atomictaco/4333647127 Mess may be visually neat and tidy
32. India by Herry Lawford on Flickr https://www. fl ickr.com/photos/herry/6779074382
33. My destroyed desk by josephbergen on Flickr https://www. fl ickr.com/photos/jbergen/2128605950
34. My destroyed desk by josephbergen on Flickr https://www. fl ickr.com/photos/jbergen/2128605950 Mess is not about visual neatness or aesthetics
35. Mess
36. Information Part 2 of 4
37. the electric information age book by MANYBITS on Flickr https://www. fl ickr.com/photos/manybits/6888838611
38. Collection by Erich Ferdinand on Flickr https://www. fl ickr.com/photos/erix/2370752145
39. 365 0917 by Tim Caynes on Flickr https://www. fl ickr.com/photos/timcaynes/5408753242
40. 365 0917 by Tim Caynes on Flickr https://www. fl ickr.com/photos/timcaynes/5408753242
41. –Abby Covert in How to Make Sense of Mess “Every mess and every thing shares 
 one important non-thing : information.”
42. Information is inherent in everything
43. Architecture Part 3 of 4
44. “Architecture”
45. Photo credit: variationblogr on Visual Hunt / CC BY
46. Photo credit: variationblogr on Visual Hunt / CC BY • Structure • Doors • Windows • Rooms/Spaces • Corridors • Stairways • Signage • Labels • …
47. Architecture is simply the structure of a thing or a place
48. Architecture in fl uences how a space will be perceived and used
49. а print from sortavala architecture book by Sasha ЯR on Flickr https://www. fl ickr.com/photos/rotten_reverie/8103565216
50. а print from sortavala architecture book by Sasha ЯR on Flickr https://www. fl ickr.com/photos/rotten_reverie/8103565216 Blueprint
51. “Architecture” may refer to two di ff erent things
52. An Output a.k.a. blueprint or technical drawing
53. A Practice i.e. application of skill or knowledge
54. Information Architecture Part 4 of 4
55. –The Information Architecture Institute 
 (now dissolved) “Information architecture is the practice of 
 deciding how to arrange the parts of 
 something to be understandable.”
56. Where do you encounter IA? well, everywhere
57. French dictionary page2 by Liz Eckmann on Flickr https://www. fl ickr.com/photos/24498687@N03/2337550017
58. Old Map (33) by rosario fi ore on Flickr https://www. fl ickr.com/photos/38703275@N06/6884558828
59. Docos by John Keogh on Flickr https://www. fl ickr.com/photos/jvk/6721198
60. Facebook Messenger app by PROKārlis Dambrāns on Flickr https://www. fl ickr.com/photos/janitors/14039237076
61. arsp_064 by Anthony Ryan on Flickr https://www. fl ickr.com/photos/useanthonyryansphotos/7946386402
62. Exhibition Hall by Robert Ziegler on Flickr https://www. fl ickr.com/photos/63998580@N06/5980150860
63. buffet by bigbigbigbigtoe on Flickr https://www. fl ickr.com/photos/10402746@N04/7165271584
64. House Numbering An example
65. What are the different ways of organising house numbers?
66. European Scheme / Odd and Even
67. Clockwise Scheme
68. Distance Scheme
69. –No one, ever “Hey, nice IA!”
70. IA is typically accepted as is
71. –Most people while experiencing mess “Where am I?” “Where am I supposed to go next?” “Where do I fi nd something” “This doesn’t make any sense!”
72. Mess ❌
73. Organising Things so that they make sense
74. Broadly speaking…
75. Labelling Structuring
 Grouping
 Arranging
76. Labelling Structuring
 Grouping
 Arranging i.e. naming i.e. breaking down i.e. bunching up i.e. ordering
77. What are the different ways of organising things?
78. –Richard Saul Wurman Author of Information Anxiety (1989) “Information may be in fi nite, however… The organisation of information is fi nite as it can only be organised by LATCH: Location, Alphabet, Time, Category, or Hierarchy.”
79. Location spatially
80. Delhi Metro Rail Corporation
81. https://commons.wikimedia.org/wiki/File:Dorsal_Ventral_Body_Cavities.jpg
82. Alphabet alphabetically
83. Little phone by John Sheldon on Flickr https://www. fl ickr.com/photos/18909153@N08/6965138569
84. Lord to Mumps by Kevin Grocki on Flickr https://www. fl ickr.com/photos/kgrocki/4353715409
85. Time chronologically
86. Music by Jesse Kruger on Flickr https://www. fl ickr.com/photos/jessekruger/390534244
87. Photo credit: aafes49 on VisualHunt.com / CC BY-ND
88. Category similarity
91. Hierarchy continuum or rank
92. Photo credit: Gilbert R. on visualhunt.com / CC BY-NC-ND
93. Mailboxes by Lodewijk van den Broek on Flickr https://www. fl ickr.com/photos/12760128@N04/3765909892
94. Location Alphabet
 Time
 Category Hierarchy
96. Representing IA
97. Block Diagram Flow Diagram Gantt Chart Quadrant Diagram Venn Diagram Swim Lane Diagram Hierarchy Diagram Mind Map Schematic Journey Map
98. Wall sized mind-map of the Cambridge University MPhil course "Introduction to musicology and its debates” by Tim Regan on Flickr
 https://www. fl ickr.com/photos/dumbledad/4441138308/in
99. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915
100. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 Information Architect
101. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 –Richard Saul Wurman Author of Information Anxiety (1989) “An information architect is the individual 
 who organises the patterns inherent in data, 
 making the complex clear.”
102. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 Break Away thoughtfully and deliberately
103. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 Break Away from internal biases
104. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 Break Away from existing paradigms
105. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 Break Away from known structures
106. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 Break Away from chasing visual neatness or aesthetics
107. information by Tobi Gaulke on Flickr https://www. fl ickr.com/photos/gato-gato-gato/12851862915 Break Away and question until we reach clarity in 
 understanding the properties inherent in things
108. Scrabble Tiles and Scrapbooking Letters 3 by Barbara Mazz on Flickr https://www. fl ickr.com/photos/electricporcupine/4623214027
109. Scrabble Tiles and Scrapbooking Letters 3 by Barbara Mazz on Flickr https://www. fl ickr.com/photos/electricporcupine/4623214027 See through the mess,
 and help others.
110. Now let’s try it
111. The recipe by Bill Holsinger-Robinson on Flickr https://www. fl ickr.com/photos/billhr/3190017092
112. The recipe by Bill Holsinger-Robinson on Flickr https://www. fl ickr.com/photos/billhr/3190017092 Cookbook
113. The recipe by Bill Holsinger-Robinson on Flickr https://www. fl ickr.com/photos/billhr/3190017092 If you have a large collection of food recipes, what are the ways in which you could arrange them?
121. Taboo
122. The recipe by Bill Holsinger-Robinson on Flickr https://www. fl ickr.com/photos/billhr/3190017092 If you have a large collection of food recipes, what are the ways in which you could arrange them?
123. Location Alphabet
 Time
 Category Hierarchy
124. Information is subjective
126. My destroyed desk by josephbergen on Flickr https://www. fl ickr.com/photos/jbergen/2128605950
127. Information
128. User Context
129. Information User Context
130. Information User Context IA
131. Understanding of 
 Users and Context is essential
132. Research is essential
133. Objectives are essential
134. Summary • IA is all around us, but practising IA means doing it 
 deliberately and thoughtfully • IA is created for speci fi c users in a particular context • IA requires the ability to understand and capture the inherent information in things (e.g. meta-information, traits, properties, characteristics, etc.) • IA typically involves labelling, structuring, grouping and arranging 
 (information can be organised using LATCH*) • IA is expressed using diagrams and schematics • IA is the means and not an end product *but don’t get too latched onto this
135. ≠ IA UX
136. IA UX ⊆
137. ≠ IA Navigation
138. informs IA Navigation
139. Now where?
140. How to make sense of any mess
 by Abby Covert https://www.howtomakesenseofanymess.com/
141. IA Resources https://www.howtomakesenseofanymess.com/resources
142. The ultimate IA reading list https://blog.optimalworkshop.com/the-ultimate-ia-reading-list/
143. You’re now an Information Architect…
144. …and can possibly save the world from mess.
145. 🤔 Thanks! Chris How — All You Need To Know About IA In 10 Minutes
 Abby Covert — How to Make Sense of Any Mess
 Dan Brown — Eight Principles of Information Architecture 💬
146. Bonus
147. –Dan Brown
 founder of EightShapes Eight Principles of IA
148. Objects Treat content as a living, breathing thing, with a lifecycle, behaviors and attributes The Principle of
149. Choices Create pages that o ff er meaningful choices to users, keeping the range of choices available focused on a particular task The Principle of
150. Disclosure Show only enough information to help people understand what kinds of information they'll fi nd as they dig deeper The Principle of
151. Exemplars Describe the contents of categories by 
 showing examples of the contents The Principle of
152. Front Doors Assume at least half of the website's visitors will come through some page other than the home page The Principle of
153. Multiple Classi fi cation O ff er users several di ff erent classi fi cation 
 schemes to browse the site's content The Principle of
154. Focused Navigation Don't mix apples and oranges 
 in your navigation scheme The Principle of
155. Growth Assume the content you have today is a small fraction 
 of the content you will have tomorrow The Principle of
156. 🙏