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

1. 28 March 2014
Responsive Information
Architectures
IA Summit
San Diego, CA
Presented by Andy Fitzgerald, PhD

2. #ResponsiveIA @andybywire

3. http://bradfrostweb.com/blog/post/device-fatigue/

4. #ResponsiveIA @andybywire
http://jenson.org/of-bears-bats-and-bees-making-sense-of-the-
internet-of-things/

5. #ResponsiveIA @andybywire
http://jenson.org/of-bears-bats-and-bees-making-sense-of-the-
internet-of-things/

6. #ResponsiveIA @andybywire

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. #ResponsiveIA @andybywire
Responsive
Information Architecture
An information design strategy that allows for
the expression of specific meaning across
multiple and independent contexts.

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. #ResponsiveIA @andybywire
Responsive web design
Meaning-making
Information architecture
Responsive information architectures

11. Responsive web design

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. #ResponsiveIA @andybywire

14. #ResponsiveIA @andybywire

15. #ResponsiveIA @andybywire

16. #ResponsiveIA @andybywire

17. #ResponsiveIA @andybywire

18. #ResponsiveIA @andybywire

19. #ResponsiveIA @andybywire

20. #ResponsiveIA @andybywire

21. #ResponsiveIA @andybywire
Responsive Grid
a model that allows us to write the rules
necessary to effectively articulate an
instance in the system

22. Making meaning

23. #ResponsiveIA @andybywire
- Richard Saul Wurman. Hats
“You can only understand something relative to
something you already understand.”

24. #ResponsiveIA @andybywire
Modes of Signification
Symbolic
the signifier does not resemble the signified; it is
arbitrary and conventional

25. Text

26. = Tree
(signifier)(signified)

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. #ResponsiveIA @andybywire
Smoke signifies fire
Fever signifies infection
A knock signifies a visitor
Handwriting signifies the writer

30. #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

31. #ResponsiveIA @andybywire
- Daniel Chandler. Semiotics
“Iconic signifiers seem to present reality more
directly than symbolic signs.”

32. #ResponsiveIA @andybywire

33. #ResponsiveIA @andybywire

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

37. #ResponsiveIA @andybywire

38. Information architecture

39. choreography
ontology
taxonomy
arrangement of the parts
particular meaning
rules for interaction among the parts
THE NATURE OF
INFORMATION ARCHITECTURE

40. #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

41. #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.

42. #ResponsiveIA @andybywire
• “Rules for interaction among the parts”
• “The appropriate unfolding”
• Must respond to context in order to be effective
Choreography

43. #ResponsiveIA @andybywire
ONTOLOGY
TAXONOMY
CHOREOGRAPHY

44. #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.

45. #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.

46. #ResponsiveIA @andybywire

47. #ResponsiveIA @andybywire

48. #ResponsiveIA @andybywire

49. #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.

50. #ResponsiveIA @andybywire

51. #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

52. #ResponsiveIA @andybywire

53. #ResponsiveIA @andybywire
- @brad_frost
https://twitter.com/brad_frost/status/443371579645624321
“This makes me want to murder things.”

54. #ResponsiveIA @andybywire

55. #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

56. #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

57. Responsive information
architectures

58. #ResponsiveIA @andybywire
An information design strategy that facilitates
the expression of specific meaning across
multiple and independent contexts.
Responsive
Information Architecture

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. #ResponsiveIA @andybywire

61. #ResponsiveIA @andybywire

62. #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.

63. #ResponsiveIA @andybywire

64. #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.

65. #ResponsiveIA @andybywire

66. #ResponsiveIA @andybywire#ResponsiveIA @andybywire

67. #ResponsiveIA @andybywire

68. #ResponsiveIA @andybywire

69. #ResponsiveIA @andybywire#ResponsiveIA @andybywire

70. #ResponsiveIA @andybywire

71. #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.

72. #ResponsiveIA @andybywire

73. #ResponsiveIA @andybywire

74. #ResponsiveIA @andybywire

75. #ResponsiveIA @andybywire

76. #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.

77. #ResponsiveIA @andybywire

78. #ResponsiveIA @andybywire

79. #ResponsiveIA @andybywire

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

81. #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

82. #ResponsiveIA @andybywire

84. Thank you.
Responsive Information Architectures
www.linkedin.com/in/andyfitzgerald
@andybywire
#ResponsiveIA