Responsive Information Architectures

5,506 views

Published on

My talk from the 2014 Information Architecture Summit in San Diego on March 28th.

Published in: Design

Responsive Information Architectures

  1. 1. 28 March 2014 Responsive Information Architectures IA Summit San Diego, CA Presented by Andy Fitzgerald, PhD
  2. 2. #ResponsiveIA @andybywire
  3. 3. http://bradfrostweb.com/blog/post/device-fatigue/
  4. 4. #ResponsiveIA @andybywire http://jenson.org/of-bears-bats-and-bees-making-sense-of-the- internet-of-things/
  5. 5. #ResponsiveIA @andybywire http://jenson.org/of-bears-bats-and-bees-making-sense-of-the- internet-of-things/
  6. 6. #ResponsiveIA @andybywire
  7. 7. #ResponsiveIA @andybywire - Sara Wachter-Boettcher. Content Everywhere “The best we can all do is focus our limited stock of human care and attention toward designing systems [...] not obsessing over individual pages for individual platforms.”
  8. 8. #ResponsiveIA @andybywire Responsive Information Architecture An information design strategy that allows for the expression of specific meaning across multiple and independent contexts.
  9. 9. #ResponsiveIA @andybywire Rich understanding of the information ecology Content-driven guidelines for interaction design choices Articulated information structures based on multiple modes of meaning making Embrace ambiguity as a strategy for negotiating the connected environment Responsive Information Architecture
  10. 10. #ResponsiveIA @andybywire Responsive web design Meaning-making Information architecture Responsive information architectures
  11. 11. Responsive web design
  12. 12. #ResponsiveIA @andybywire - Ethan Marcotte. Responsive Web Design “We can embrace the flexibility inherent to the web, without surrendering the control we require as designers.”
  13. 13. #ResponsiveIA @andybywire
  14. 14. #ResponsiveIA @andybywire
  15. 15. #ResponsiveIA @andybywire
  16. 16. #ResponsiveIA @andybywire
  17. 17. #ResponsiveIA @andybywire
  18. 18. #ResponsiveIA @andybywire
  19. 19. #ResponsiveIA @andybywire
  20. 20. #ResponsiveIA @andybywire
  21. 21. #ResponsiveIA @andybywire Responsive Grid a model that allows us to write the rules necessary to effectively articulate an instance in the system
  22. 22. Making meaning
  23. 23. #ResponsiveIA @andybywire - Richard Saul Wurman. Hats “You can only understand something relative to something you already understand.”
  24. 24. #ResponsiveIA @andybywire Modes of Signification Symbolic the signifier does not resemble the signified; it is arbitrary and conventional
  25. 25. Text
  26. 26. = Tree (signifier)(signified)
  27. 27. #ResponsiveIA @andybywire Modes of Signification Symbolic the signifier does not represent the signified; it is arbitrary and conventional Indexical the signifier is directly connected to the signified
  28. 28. #ResponsiveIA @andybywire Smoke signifies fire Fever signifies infection A knock signifies a visitor Handwriting signifies the writer
  29. 29. #ResponsiveIA @andybywire Modes of Signification Symbolic the signifier does not represent the signified; it is arbitrary and conventional Indexical the signifier is directly connected to the signified Iconic the signifier is perceived as resembling or imitating the signified
  30. 30. #ResponsiveIA @andybywire - Daniel Chandler. Semiotics “Iconic signifiers seem to present reality more directly than symbolic signs.”
  31. 31. #ResponsiveIA @andybywire
  32. 32. #ResponsiveIA @andybywire
  33. 33. #ResponsiveIA @andybywire - Louise Barrett. Beyond the Brain “This innate bias may not be for faces as such, but for the particular kind of geometric configuration that faces present.”
  34. 34. #ResponsiveIA @andybywire
  35. 35. Information architecture
  36. 36. choreography ontology taxonomy arrangement of the parts particular meaning rules for interaction among the parts THE NATURE OF INFORMATION ARCHITECTURE
  37. 37. #ResponsiveIA @andybywire Ontology • “Particular meaning” • “What we mean when we say what we say” • The argument: how we encourage users to think about the content or functionality we are offering
  38. 38. #ResponsiveIA @andybywire Taxonomy • “Arrangement of the parts” • “Arrangement of meaning in and across contexts” • How the pieces of the argument fit together – a method of arrangement conceived to create a particular kind of understanding.
  39. 39. #ResponsiveIA @andybywire • “Rules for interaction among the parts” • “The appropriate unfolding” • Must respond to context in order to be effective Choreography
  40. 40. #ResponsiveIA @andybywire ONTOLOGY TAXONOMY CHOREOGRAPHY
  41. 41. #ResponsiveIA @andybywire } ONTOLOGY TAXONOMY CHOREOGRAPHY ng it up is an associative e get these actions right, level of meaning making one of the slowest of the : the fundamental way in ur natural world.This has ages to usability. Intuitive ly useable because they perational knowledge we n interface is completely intuitive it must “borrow” her sphere of experience man in The Psychology of s to as “knowledge in the een interface popularized dy example of this. More Protect’s ”wave to hush” n example that builds on eractions (waving smoke tector to try to shut it up) nstantly comprehensible nal and often overlooked pping into deep layers of that by leveraging more , we’re able to design for r loosely and in a natural I mean associations that erwritten by an arbitrary, ciation in order to signify; oted in our experience of nate perceptual abilities. ore stable and, ironically, mapping one’s use of the ple as swapping out one mental model (the wheel another (the touchscreen loose coupling allows for to rigid (and often brittle) ganizational approaches. University of Lethbridge Louise Barrett uses this embly” to explain how in obots “a whole variety of effectively exploit specific ry) conditions, along with cs of an animal’s body, to ive behavior ‘on the fly.’” w soft assembly accounts in simple organisms (her and pre-microprocessor those examples to show ces of human and animal e be explained by taking fundamental constitutive n. For those of us tasked hitectures and interaction worked physical spaces, e most fundamental level ociation is understood (in mode it is most basically and then articulating that that exploits the intrinsic nment, allows us to build ation structures that don’t her by force, convention, which fit together by the e of their core structures.
  42. 42. #ResponsiveIA @andybywire } ONTOLOGY TAXONOMY CHOREOGRAPHY QUALIA ng it up is an associative e get these actions right, level of meaning making one of the slowest of the : the fundamental way in ur natural world.This has ages to usability. Intuitive ly useable because they perational knowledge we n interface is completely intuitive it must “borrow” her sphere of experience man in The Psychology of s to as “knowledge in the een interface popularized dy example of this. More Protect’s ”wave to hush” n example that builds on eractions (waving smoke tector to try to shut it up) nstantly comprehensible nal and often overlooked pping into deep layers of that by leveraging more , we’re able to design for r loosely and in a natural I mean associations that erwritten by an arbitrary, ciation in order to signify; oted in our experience of nate perceptual abilities. ore stable and, ironically, mapping one’s use of the ple as swapping out one mental model (the wheel another (the touchscreen loose coupling allows for to rigid (and often brittle) ganizational approaches. University of Lethbridge Louise Barrett uses this embly” to explain how in obots “a whole variety of effectively exploit specific ry) conditions, along with cs of an animal’s body, to ive behavior ‘on the fly.’” w soft assembly accounts in simple organisms (her and pre-microprocessor those examples to show ces of human and animal e be explained by taking fundamental constitutive n. For those of us tasked hitectures and interaction worked physical spaces, e most fundamental level ociation is understood (in mode it is most basically and then articulating that that exploits the intrinsic nment, allows us to build ation structures that don’t her by force, convention, which fit together by the e of their core structures.
  43. 43. #ResponsiveIA @andybywire
  44. 44. #ResponsiveIA @andybywire
  45. 45. #ResponsiveIA @andybywire
  46. 46. #ResponsiveIA @andybywire } ONTOLOGY TAXONOMY CHOREOGRAPHY QUALIA Mind Blowing by Luis Prado from The Noun Project ng it up is an associative e get these actions right, level of meaning making one of the slowest of the : the fundamental way in ur natural world.This has ages to usability. Intuitive ly useable because they perational knowledge we n interface is completely intuitive it must “borrow” her sphere of experience man in The Psychology of s to as “knowledge in the een interface popularized dy example of this. More Protect’s ”wave to hush” n example that builds on eractions (waving smoke tector to try to shut it up) nstantly comprehensible nal and often overlooked pping into deep layers of that by leveraging more , we’re able to design for r loosely and in a natural I mean associations that erwritten by an arbitrary, ciation in order to signify; oted in our experience of nate perceptual abilities. ore stable and, ironically, mapping one’s use of the ple as swapping out one mental model (the wheel another (the touchscreen loose coupling allows for to rigid (and often brittle) ganizational approaches. University of Lethbridge Louise Barrett uses this embly” to explain how in obots “a whole variety of effectively exploit specific ry) conditions, along with cs of an animal’s body, to ive behavior ‘on the fly.’” w soft assembly accounts in simple organisms (her and pre-microprocessor those examples to show ces of human and animal e be explained by taking fundamental constitutive n. For those of us tasked hitectures and interaction worked physical spaces, e most fundamental level ociation is understood (in mode it is most basically and then articulating that that exploits the intrinsic nment, allows us to build ation structures that don’t her by force, convention, which fit together by the e of their core structures.
  47. 47. #ResponsiveIA @andybywire
  48. 48. #ResponsiveIA @andybywire } Mind Blowing by Luis Prado from The Noun Project ng it up is an associative e get these actions right, level of meaning making one of the slowest of the : the fundamental way in ur natural world.This has ages to usability. Intuitive ly useable because they perational knowledge we n interface is completely intuitive it must “borrow” her sphere of experience man in The Psychology of s to as “knowledge in the een interface popularized dy example of this. More Protect’s ”wave to hush” n example that builds on eractions (waving smoke tector to try to shut it up) nstantly comprehensible nal and often overlooked pping into deep layers of that by leveraging more , we’re able to design for r loosely and in a natural I mean associations that erwritten by an arbitrary, ciation in order to signify; oted in our experience of nate perceptual abilities. ore stable and, ironically, mapping one’s use of the ple as swapping out one mental model (the wheel another (the touchscreen loose coupling allows for to rigid (and often brittle) ganizational approaches. University of Lethbridge Louise Barrett uses this embly” to explain how in obots “a whole variety of effectively exploit specific ry) conditions, along with cs of an animal’s body, to ive behavior ‘on the fly.’” w soft assembly accounts in simple organisms (her and pre-microprocessor those examples to show ces of human and animal e be explained by taking fundamental constitutive n. For those of us tasked hitectures and interaction worked physical spaces, e most fundamental level ociation is understood (in mode it is most basically and then articulating that that exploits the intrinsic nment, allows us to build ation structures that don’t her by force, convention, which fit together by the e of their core structures. ONTOLOGY TAXONOMY CHOREOGRAPHY
  49. 49. #ResponsiveIA @andybywire
  50. 50. #ResponsiveIA @andybywire - @brad_frost https://twitter.com/brad_frost/status/443371579645624321 “This makes me want to murder things.”
  51. 51. #ResponsiveIA @andybywire
  52. 52. #ResponsiveIA @andybywire } Mind Blowing by Luis Prado from The Noun Project ng it up is an associative e get these actions right, level of meaning making one of the slowest of the : the fundamental way in ur natural world.This has ages to usability. Intuitive ly useable because they perational knowledge we n interface is completely intuitive it must “borrow” her sphere of experience man in The Psychology of s to as “knowledge in the een interface popularized dy example of this. More Protect’s ”wave to hush” n example that builds on eractions (waving smoke tector to try to shut it up) nstantly comprehensible nal and often overlooked pping into deep layers of that by leveraging more , we’re able to design for r loosely and in a natural I mean associations that erwritten by an arbitrary, ciation in order to signify; oted in our experience of nate perceptual abilities. ore stable and, ironically, mapping one’s use of the ple as swapping out one mental model (the wheel another (the touchscreen loose coupling allows for to rigid (and often brittle) ganizational approaches. University of Lethbridge Louise Barrett uses this embly” to explain how in obots “a whole variety of effectively exploit specific ry) conditions, along with cs of an animal’s body, to ive behavior ‘on the fly.’” w soft assembly accounts in simple organisms (her and pre-microprocessor those examples to show ces of human and animal e be explained by taking fundamental constitutive n. For those of us tasked hitectures and interaction worked physical spaces, e most fundamental level ociation is understood (in mode it is most basically and then articulating that that exploits the intrinsic nment, allows us to build ation structures that don’t her by force, convention, which fit together by the e of their core structures. ONTOLOGY TAXONOMY CHOREOGRAPHY
  53. 53. #ResponsiveIA @andybywire } Mind Blowing by Luis Prado from The Noun Project ng it up is an associative e get these actions right, level of meaning making one of the slowest of the : the fundamental way in ur natural world.This has ages to usability. Intuitive ly useable because they perational knowledge we n interface is completely intuitive it must “borrow” her sphere of experience man in The Psychology of s to as “knowledge in the een interface popularized dy example of this. More Protect’s ”wave to hush” n example that builds on eractions (waving smoke tector to try to shut it up) nstantly comprehensible nal and often overlooked pping into deep layers of that by leveraging more , we’re able to design for r loosely and in a natural I mean associations that erwritten by an arbitrary, ciation in order to signify; oted in our experience of nate perceptual abilities. ore stable and, ironically, mapping one’s use of the ple as swapping out one mental model (the wheel another (the touchscreen loose coupling allows for to rigid (and often brittle) ganizational approaches. University of Lethbridge Louise Barrett uses this embly” to explain how in obots “a whole variety of effectively exploit specific ry) conditions, along with cs of an animal’s body, to ive behavior ‘on the fly.’” w soft assembly accounts in simple organisms (her and pre-microprocessor those examples to show ces of human and animal e be explained by taking fundamental constitutive n. For those of us tasked hitectures and interaction worked physical spaces, e most fundamental level ociation is understood (in mode it is most basically and then articulating that that exploits the intrinsic nment, allows us to build ation structures that don’t her by force, convention, which fit together by the e of their core structures. ONTOLOGY TAXONOMY CHOREOGRAPHY
  54. 54. Responsive information architectures
  55. 55. #ResponsiveIA @andybywire An information design strategy that facilitates the expression of specific meaning across multiple and independent contexts. Responsive Information Architecture
  56. 56. #ResponsiveIA @andybywire Taxonomic Grid • Determine the narrative • Audit content and existing organization • Identify and build single-dimension structures • Articulate compound taxonomies to meet goals, accommodate constraints, and leverage opportunities.
  57. 57. #ResponsiveIA @andybywire
  58. 58. #ResponsiveIA @andybywire
  59. 59. #ResponsiveIA @andybywire Taxonomic Grid • Determine the narrative • Audit content and existing organization • Identify and build single-dimension structures • Articulate compound taxonomies to meet goals, accommodate constraints, and leverage opportunities.
  60. 60. #ResponsiveIA @andybywire
  61. 61. #ResponsiveIA @andybywire Taxonomic Grid • Determine the narrative • Audit content and existing organization • Identify and build single-dimension structures • Articulate compound taxonomies to meet goals, accommodate constraints, and leverage opportunities.
  62. 62. #ResponsiveIA @andybywire
  63. 63. #ResponsiveIA @andybywire#ResponsiveIA @andybywire
  64. 64. #ResponsiveIA @andybywire
  65. 65. #ResponsiveIA @andybywire
  66. 66. #ResponsiveIA @andybywire#ResponsiveIA @andybywire
  67. 67. #ResponsiveIA @andybywire
  68. 68. #ResponsiveIA @andybywire Taxonomic Grid • Determine the narrative • Audit content and existing organization • Identify and build single-dimension structures • Articulate compound taxonomies to meet goals, accommodate constraints, and leverage opportunities.
  69. 69. #ResponsiveIA @andybywire
  70. 70. #ResponsiveIA @andybywire
  71. 71. #ResponsiveIA @andybywire
  72. 72. #ResponsiveIA @andybywire
  73. 73. #ResponsiveIA @andybywire Taxonomic Grid • Determine the narrative • Audit content and existing organization • Identify and build single-dimension structures • Articulate compound taxonomies to meet goals, accommodate constraints, and leverage opportunities.
  74. 74. #ResponsiveIA @andybywire
  75. 75. #ResponsiveIA @andybywire
  76. 76. #ResponsiveIA @andybywire
  77. 77. #ResponsiveIA @andybywire http://pervasiveia.com/blog/embracing-ambiguity - Luca Rosati. Embracing ambiguity: Ambiguity as an emerging design pattern “Embracing ambiguity — embracing the possibility of not understanding exactly how the pieces fit together — means designing systems that surpass our expectations of them.”
  78. 78. #ResponsiveIA @andybywire Rich understanding of the information ecology Content-driven guidelines for interaction design choices Articulated information structures based on multiple modes of meaning making Embrace ambiguity as a strategy for negotiating the connected environment Responsive Information Architecture
  79. 79. #ResponsiveIA @andybywire
  80. 80. Thank you. Responsive Information Architectures www.linkedin.com/in/andyfitzgerald @andybywire #ResponsiveIA

×