$30 off During Our Annual Pro Sale. View Details »

Information Architecture for Beginners

Souvik Das Gupta
September 27, 2023

Information Architecture for Beginners

This talk was given to students of NID Bangalore.

Souvik Das Gupta

September 27, 2023
Tweet

More Decks by Souvik Das Gupta

Other Decks in Design

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