Information Architecture for Beginners

Transcript

1. Information Architecture
   for beginners
   

   View Slide

2. @souvikdg
   

   View Slide

3. View Slide

4. View Slide

5. By the end of this talk you 

   should be aware of what is

   Information Architecture

   without facing jargon-bullets.
   

   View Slide

6. Mess
   Part 1 of 4
   

   View Slide

7. 9 4 49 25 16 __
   

   View Slide

8. 4 9 16 25 __ 49
   

   View Slide

9. 4 9 16 25 __ 49
   36
   

   View Slide

10. 4 8 16 32 __ 128
    

    View Slide

11. 4 8 16 32 __ 128
    64
    

    View Slide

12. 4 8 15 16 __ 42
    

    View Slide

13. View Slide

14. 4 8 15 16 __ 42
    23
    

    View Slide

15. wtf-am-i-supposed-to-do-wit by kris krüg on Flickr
    https://www.
    fl
    ickr.com/photos/kk/18768224
    Mess
    

    View Slide

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
    

    View Slide

17. 9 4 49 25 16 __
    36
    

    View Slide

18. 4 9 16 25 __ 49
    36
    

    View Slide

19. 4 8 15 16 __ 42
    23
    

    View Slide

20. mess by amanda on Flickr
    https://www.
    fl
    ickr.com/photos/pinprick/5879923126
    

    View Slide

21. Unkept Room by Tom Blackwell on Flickr
    https://www.
    fl
    ickr.com/photos/tjblackwell/6007033415
    

    View Slide

22. Photo credit: José Morcillo Valenciano on Visual Hunt / CC BY
    

    View Slide

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.”
    

    View Slide

24. Mess
    

    View Slide

25. View Slide

26. Mess
    is somewhat manageable in small doses
    

    View Slide

27. View Slide

28. Mess
    is a problem at scale
    

    View Slide

29. Order by Volgar on Flickr
    https://www.
    fl
    ickr.com/photos/volgar/27461981479
    

    View Slide

30. Tukwila/International Blvd Station Parking lot by Atomic Taco on Flickr
    https://www.
    fl
    ickr.com/photos/atomictaco/4333647127
    

    View Slide

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
    

    View Slide

32. India by Herry Lawford on Flickr
    https://www.
    fl
    ickr.com/photos/herry/6779074382
    

    View Slide

33. My destroyed desk by josephbergen on Flickr
    https://www.
    fl
    ickr.com/photos/jbergen/2128605950
    

    View Slide

34. My destroyed desk by josephbergen on Flickr
    https://www.
    fl
    ickr.com/photos/jbergen/2128605950
    Mess
    is not about visual neatness or aesthetics
    

    View Slide

35. Mess
    

    View Slide

36. Information
    Part 2 of 4
    

    View Slide

37. the electric information age book by MANYBITS on Flickr
    https://www.
    fl
    ickr.com/photos/manybits/6888838611
    

    View Slide

38. Collection by Erich Ferdinand on Flickr
    https://www.
    fl
    ickr.com/photos/erix/2370752145
    

    View Slide

39. 365 0917 by Tim Caynes on Flickr
    https://www.
    fl
    ickr.com/photos/timcaynes/5408753242
    

    View Slide

40. 365 0917 by Tim Caynes on Flickr
    https://www.
    fl
    ickr.com/photos/timcaynes/5408753242
    

    View Slide

41. –Abby Covert
    in How to Make Sense of Mess
    “Every mess and every thing shares
    

    one important non-thing : information.”
    

    View Slide

42. Information
    is inherent in everything
    

    View Slide

43. Architecture
    Part 3 of 4
    

    View Slide

44. “Architecture”
    

    View Slide

45. Photo credit: variationblogr on Visual Hunt / CC BY
    

    View Slide

46. Photo credit: variationblogr on Visual Hunt / CC BY
    • Structure
    
    
    • Doors
    
    
    • Windows
    
    
    • Rooms/Spaces
    
    
    • Corridors
    
    
    • Stairways
    
    
    • Signage
    
    
    • Labels
    
    
    • …
    

    View Slide

47. Architecture is simply the
    structure of a thing or a
    place
    

    View Slide

48. Architecture in
    fl
    uences
    how a space will be
    perceived and used
    

    View Slide

49. а print from sortavala architecture book by Sasha ЯR on Flickr
    https://www.
    fl
    ickr.com/photos/rotten_reverie/8103565216
    

    View Slide

50. а print from sortavala architecture book by Sasha ЯR on Flickr
    https://www.
    fl
    ickr.com/photos/rotten_reverie/8103565216
    Blueprint
    

    View Slide

51. “Architecture”
    may refer to two di
    ff
    erent things
    

    View Slide

52. An Output
    a.k.a. blueprint or technical drawing
    

    View Slide

53. A Practice
    i.e. application of skill or knowledge
    

    View Slide

54. Information Architecture
    Part 4 of 4
    

    View Slide

55. –The Information Architecture Institute 

    (now dissolved)
    “Information architecture is the practice of
    

    deciding how to arrange the parts of
    

    something to be understandable.”
    

    View Slide

56. Where do you encounter IA?
    well, everywhere
    

    View Slide

57. French dictionary page2 by Liz Eckmann on Flickr
    https://www.
    fl
    ickr.com/photos/24498687@N03/2337550017
    

    View Slide

58. Old Map (33) by rosario
    fi
    ore on Flickr
    https://www.
    fl
    ickr.com/photos/38703275@N06/6884558828
    

    View Slide

59. Docos by John Keogh on Flickr
    https://www.
    fl
    ickr.com/photos/jvk/6721198
    

    View Slide

60. Facebook Messenger app by PROKārlis Dambrāns on Flickr
    https://www.
    fl
    ickr.com/photos/janitors/14039237076
    

    View Slide

61. arsp_064 by Anthony Ryan on Flickr
    https://www.
    fl
    ickr.com/photos/useanthonyryansphotos/7946386402
    

    View Slide

62. Exhibition Hall by Robert Ziegler on Flickr
    https://www.
    fl
    ickr.com/photos/63998580@N06/5980150860
    

    View Slide

63. buffet by bigbigbigbigtoe on Flickr
    https://www.
    fl
    ickr.com/photos/10402746@N04/7165271584
    

    View Slide

64. House Numbering
    An example
    

    View Slide

65. What are the different ways of
    organising house numbers?
    

    View Slide

66. European Scheme / Odd and Even
    

    View Slide

67. Clockwise Scheme
    

    View Slide

68. Distance Scheme
    

    View Slide

69. –No one, ever
    “Hey, nice IA!”
    

    View Slide

70. IA
    is typically accepted as is
    

    View Slide

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!”
    

    View Slide

72. Mess
    ❌
    

    View Slide

73. Organising Things
    so that they make sense
    

    View Slide

74. Broadly speaking…
    

    View Slide

75. Labelling
    Structuring

    Grouping

    Arranging
    

    View Slide

76. Labelling
    Structuring

    Grouping

    Arranging
    i.e. naming
    i.e. breaking down
    i.e. bunching up
    i.e. ordering
    

    View Slide

77. What are the different ways of
    organising things?
    

    View Slide

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.”
    

    View Slide

79. Location
    spatially
    

    View Slide

80. Delhi Metro Rail Corporation
    

    View Slide

81. https://commons.wikimedia.org/wiki/File:Dorsal_Ventral_Body_Cavities.jpg
    

    View Slide

82. Alphabet
    alphabetically
    

    View Slide

83. Little phone by John Sheldon on Flickr
    https://www.
    fl
    ickr.com/photos/18909153@N08/6965138569
    

    View Slide

84. Lord to Mumps by Kevin Grocki on Flickr
    https://www.
    fl
    ickr.com/photos/kgrocki/4353715409
    

    View Slide

85. Time
    chronologically
    

    View Slide

86. Music by Jesse Kruger on Flickr
    https://www.
    fl
    ickr.com/photos/jessekruger/390534244
    

    View Slide

87. Photo credit: aafes49 on VisualHunt.com / CC BY-ND
    

    View Slide

88. Category
    similarity
    

    View Slide

89. View Slide

90. View Slide

91. Hierarchy
    continuum or rank
    

    View Slide

92. Photo credit: Gilbert R. on visualhunt.com / CC BY-NC-ND
    

    View Slide

93. Mailboxes by Lodewijk van den Broek on Flickr
    https://www.
    fl
    ickr.com/photos/12760128@N04/3765909892
    

    View Slide

94. Location
    Alphabet

    Time

    Category
    Hierarchy
    

    View Slide

95. View Slide

96. Representing IA
    

    View Slide

97. Block Diagram
    Flow Diagram
    Gantt Chart
    Quadrant Diagram
    Venn Diagram
    Swim Lane Diagram
    Hierarchy Diagram
    Mind Map
    Schematic
    Journey Map
    

    View Slide

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
    

    View Slide

99. information by Tobi Gaulke on Flickr
    https://www.
    fl
    ickr.com/photos/gato-gato-gato/12851862915
    

    View Slide

100. information by Tobi Gaulke on Flickr
     https://www.
     fl
     ickr.com/photos/gato-gato-gato/12851862915
     Information Architect
     

     View Slide

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.”
     

     View Slide

102. information by Tobi Gaulke on Flickr
     https://www.
     fl
     ickr.com/photos/gato-gato-gato/12851862915
     Break Away
     thoughtfully and deliberately
     

     View Slide

103. information by Tobi Gaulke on Flickr
     https://www.
     fl
     ickr.com/photos/gato-gato-gato/12851862915
     Break Away
     from internal biases
     

     View Slide

104. information by Tobi Gaulke on Flickr
     https://www.
     fl
     ickr.com/photos/gato-gato-gato/12851862915
     Break Away
     from existing paradigms
     

     View Slide

105. information by Tobi Gaulke on Flickr
     https://www.
     fl
     ickr.com/photos/gato-gato-gato/12851862915
     Break Away
     from known structures
     

     View Slide

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
     

     View Slide

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
     

     View Slide

108. Scrabble Tiles and Scrapbooking Letters 3 by Barbara Mazz on Flickr
     https://www.
     fl
     ickr.com/photos/electricporcupine/4623214027
     

     View Slide

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.
     

     View Slide

110. Now let’s try it
     

     View Slide

111. The recipe by Bill Holsinger-Robinson on Flickr
     https://www.
     fl
     ickr.com/photos/billhr/3190017092
     

     View Slide

112. The recipe by Bill Holsinger-Robinson on Flickr
     https://www.
     fl
     ickr.com/photos/billhr/3190017092
     Cookbook
     

     View Slide

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?
     

     View Slide

114. View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. View Slide

120. View Slide

121. Taboo
     

     View Slide

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?
     

     View Slide

123. Location
     Alphabet

     Time

     Category
     Hierarchy
     

     View Slide

124. Information
     is subjective
     

     View Slide

125. View Slide

126. My destroyed desk by josephbergen on Flickr
     https://www.
     fl
     ickr.com/photos/jbergen/2128605950
     

     View Slide

127. Information
     

     View Slide

128. User Context
     

     View Slide

129. Information
     User Context
     

     View Slide

130. Information
     User Context
     IA
     

     View Slide

131. Understanding of 

     Users and Context
     is essential
     

     View Slide

132. Research
     is essential
     

     View Slide

133. Objectives
     are essential
     

     View Slide

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
     

     View Slide

135. ≠
     IA UX
     

     View Slide

136. IA UX
     ⊆
     

     View Slide

137. ≠
     IA Navigation
     

     View Slide

138. informs
     IA Navigation
     

     View Slide

139. Now where?
     

     View Slide

140. How to make sense of any mess

     by Abby Covert
     https://www.howtomakesenseofanymess.com/
     

     View Slide

141. IA Resources
     https://www.howtomakesenseofanymess.com/resources
     

     View Slide

142. The ultimate IA reading list
     https://blog.optimalworkshop.com/the-ultimate-ia-reading-list/
     

     View Slide

143. You’re now an
     Information Architect…
     

     View Slide

144. …and can possibly save the
     world from mess.
     

     View Slide

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
     💬
     

     View Slide

146. Bonus
     

     View Slide

147. –Dan Brown

     founder of EightShapes
     Eight Principles of IA
     

     View Slide

148. Objects
     Treat content as a living, breathing thing, with a
     lifecycle, behaviors and attributes
     The Principle of
     

     View Slide

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
     

     View Slide

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
     

     View Slide

151. Exemplars
     Describe the contents of categories by
     

     showing examples of the contents
     The Principle of
     

     View Slide

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
     

     View Slide

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
     

     View Slide

154. Focused Navigation
     Don't mix apples and oranges
     

     in your navigation scheme
     The Principle of
     

     View Slide

155. Growth
     Assume the content you have today is a small fraction
     

     of the content you will have tomorrow
     The Principle of
     

     View Slide

156. 🙏
     

     View Slide