Metaphors, materialities, and affordances:

Hybrid morphologies in the design of

interactive artifacts
Heekyoung Jung, School of Design, 5470 Aronoff, University of Cincinnati,
OH 45221, USA
Heather Wiltse, Ume
a Institute of Design, Ume

a University, Sweden
Mikael Wiberg, Department of Informatics, Ume
a University, Sweden
Erik Stolterman, School of Informatics and Computing, Indiana University,
USA

As materiality of interactive artifacts is diversified with integrated physical and

digital materials, metaphoric design approaches in HumaneComputer
Interaction (HCI) go beyond resembling the appearance of physical objects,
exploring novel materials and forms of interactive artifacts. The hybrid
materialities and forms of artifacts influence how interactivity is perceived,
reframing the concept of affordances according to its evolving relationship to
metaphors and materialities. By conceptualizing interactive forms in their
surface, behavioral and systemic aspects, we examine multifaceted roles of
metaphors in HCI from concealing and revealing a formal system to expanding
and reifying its meaning; and propose a morphologic perspective on affordances
as an invitation for making variations of interactive forms by compositing
multiple design resources.
Ó 2017 Elsevier Ltd. All rights reserved.

Keywords: design rationale, design theory, interaction design, interface design,

materialities

I
n HumaneComputer Interaction (HCI) design, the use of metaphors
began as a way of communicating to users what a computer application
could do by linking it to something already familiar to the user. A prime
example is the desktop metaphor in computing: it conveyed its similarity to
the physical desktop through its spatial and file-based information organiza-
tion, graphic icons and menu labels; and it was similarly amenable to the
workflows and activities associated with traditional offices. Beside represent-
ing abstract concepts in familiar and concrete forms, metaphors, as part of
human way of conceptualizing one thing in terms of something else (Lakoff
& Johnson, 2003), have been used for bringing new perspectives to product
design by integrating disparate source and target entities (Hekkert & Cila,
Corresponding author:
H. Jung. 2015). Many studies propose systematic design strategies for metaphor selec-
junghg@ucmail.uc. tion and conception by specifying metaphoric means in terms of which aspects
edu of a product a metaphor is applied to (e.g., form, interaction, movement,
www.elsevier.com/locate/destud
0142-694X Design Studies 53 (2017) 24e46
http://dx.doi.org/10.1016/j.destud.2017.06.004 24
Ó 2017 Elsevier Ltd. All rights reserved.
 sensory modes) (Hekkert & Cila, 2015); by sorting through different ways of
applying metaphors depending on how our embodied experience in the phys-
ical space is applied to interface design (e.g., orientational, ontological, struc-
tural) (Barr, Biddle, & Noble, 2002); and by viewing design practice itself as
different metaphoric concepts to inform design processes (e.g., design as
problem-solving, design as idea-generation) (Hey & Agogino, 2007).

While the desktop metaphor has been successful in popularizing the com-
puter at work for the target user group, alternative metaphors are constantly
sought for to accommodate diversified forms and meanings of the computer.
On the other side, the use of metaphors in HCI design has been controversial
for a few reasons: metaphoric user interfaces veil the actual computing sys-
tem from its users, potentially confusing or misleading the users
(Blackwell, 2006); many metaphors are hardly scalable to complex interactive
systems that involve abstract concepts such as processes, relationships, ser-
vices, and transformations (Cooper, Reimann, Cronin, & Noessel, 2007:
Ch. 13); and the source domain of metaphors could limit the design and
the interpretation of digital artifacts, which can do far more than analog ob-
jects with their computational features (Jung, Kim, Chan, Li, & Zhang,
2016). Moreover, the success of a metaphor in HCI, not only confined to
the design of a single computer application, depends on how the application
is perceived and used in the network of other things (Blackwell, 2006). The
network aspect of digital artifacts calls for new metaphors in HCI that
concern the relations among multiple artifacts.

A theoretical reflection is needed to understand metaphors applied to diversi-

fied materialities and to unravel various design dimensions involved in HCI
(e.g., technical, esthetic, cognitive, and experiential aspects). The lack of theo-
retical reflection leads to only a few proven interaction or interface metaphors
replicated across different media with little consideration about their material
properties; and multifaceted roles of metaphors in connecting them remain un-
classified, even confused with other concepts including formal patterns or im-
age schemas. It is hard to prescribe and evaluate a metaphoric design process
based on separate theories like mental models, visual representations or affor-
dances. By synthesizing related theories toward a design-oriented perspective,
this study investigates the evolving relationship between metaphors and mate-
rialities of interactive artifacts and their influence on the perception of affor-
dances based on the following propositions.

1 Propositions relevant to shape of interactive artifacts:

metaphors, materialities, and affordances
Morphology refers to ‘the study of shape’, and accordingly we find it relevant
to discuss morphologies for the design of interactive artifacts. In particular, we
focus on the notions of form and meaning in this study about shape of

Metaphors, materialities, and affordances 25

 interactive artifacts. As forms and meanings of computers are diversified to
mobile, wearable and ambient applications beyond the desktop computer,
interaction and interface design possibilities are expanding to diverse material
composites of digital media. Metaphors in HCI have been traditionally used as
a semantic link to resemble the material appearances of physical objects and to
provide familiar mental models of how the computer can be used with corre-
sponding graphic representations in the screen. However, interaction design
today deals with materiality composed of physical and digital components,
which are not only linked but also fundamentally woven to mutually reshape
each other; and the use of metaphors as a one-way semantic link between a
familiar physical object and a new digital system is challenged by hybrid inter-
faces such as touch screens, smart textiles, augmented reality displays, or
shape-changing interfaces (Rasmusse, Troiano, Peterse, Simonsen, &
Hornbæk, 2016).

The hybrid materiality of interactive media and emerging forms of interfaces

demand re-conceptualizing affordances of interactive artifacts in terms of how
they are shaped and perceived. Since Norman (1988) introduced the concept of
affordances to HCI as perceivable action possibilities from Gibson’s ecological
perspective, the focus of HCI design has expanded from interface to experi-
ence, emphasizing the emergent nature of interactions between a system and
a user. Norman (1999) distinguished perceivable affordances (i.e., learned ef-
fects of user actions) from real affordances (i.e., static actionable properties
inherent to the material of an interface), highlighting the influence of cultural
conventions on the user’s detection of affordances. However, as he points out
recently, this distinction still fails to capture social cues of designed forms
(Norman, 2008) and is limited to imply how unprecedented forms and hybrid
materialities of digital artifacts would be perceived both from designers’ and
users’ perspectives.

More relevant perspectives are proposed to connect affordance theory to inter-

action and experience design guidelines. Xenakis and Arnellos (2013) claim that
interaction aesthetics also influence on the users’ detection of action possibilities
in relation to the user’s experience horizon. Pucillo and Cascini (2014) postulate
the concept of experience affordances to bridge affordance theory and user expe-
rience research by specifying different affordancesdmanipulation, effect, use
and experience affordancesdas a sequence of action possibilities with an inter-
active artifact. Kaptelinin and Nardi (2012) propose a mediated action perspec-
tive on technology affordances by extending the concept from instrumental
affordances (i.e., cues for how to handle an application and what to occur by
a user action) to auxiliary and learning affordances (i.e., cues for maintenance
and augmentation of an application in connection with other things). All these
perspectives underscore the complex and sequential nature of affordances,
which are not only confined to a single application but also emergent from
its relations with user contexts and other artifacts. A proposition of our study

26 Design Studies Vol 53 No. C November 2017

 is that the concept of affordances not only guides user action possibilities but
also informs design possibilities in terms of how to shape an artifact (or multiple
artifacts) to mediate user interactions. The link between affordances and inter-
active form-making requires further speculations regarding what are formal
constituents, how interfaces with hybrid materialities are made sense of, and
how their meanings are conceived and implied through temporal and net-
worked formal properties beyond visuals or tangibles.

Regarding pragmatic interface design approaches, Cooper et al. (2007: pp.

270e273) categorize three interface design paradigms: implementation centric
(i.e., based on how things actually work under the hood), metaphoric (i.e.,
intuiting how things work) and idiomatic (i.e., based on learning how to
accomplish things). The authors highlight the third is the most natural and
human process, while the first two are difficult and risky due to a potential
gap between designer’s and user’s mental models. However, those three par-
adigms are not necessarily exclusive to each other, rather coexist in any
design process to some extent. Norman (2004) proposes more comprehensive
interface design heuristics: 1) follow conventional usage; 2) use words to
describe the desired action; 3) use metaphor; and 4) follow a coherent model
so that once part of the interface is learned, the same principles apply to
other parts. In response to these strategies, we question about the relation-
ship between conventions and metaphors as well as their influence on devel-
oping a coherent user interaction model based on the following propositions:
1) a conventional usage is hardly separable from widely known metaphors; 2)
the use of metaphor needs careful considerations for its potential harms and
limits as discussed above; and 3) hybrid materialities of emerging interfaces
add far more complexity to the conception and communication of meta-
phors. Based on these propositions, we investigate the interplay of metaphors
and materialities in HCI; reframe affordances of interactive forms across
different material domains; and discuss about systematic form-making that
integrates multiple design resources and user interpretations into a cohesive
formal system.

2 Morphological perspectives on humanecomputer

interaction
From the viewpoint of morphology as the study of shape, we suggest that
form, as the graphic, tactile or temporal appearance of an object, communi-
cates functions and meanings of the object. There are many factors that deter-
mine the form of an object, ranging from functional or esthetic qualities of the
single object to trending styles in the technological and sociocultural context
where the object is designed (Heskett, 1985) and to the tools and the platforms
by which the object is produced and distributed. Form is a critical lens through
which to interpret diverse factors shaping an artifact (Jung & Stolterman,
2012); and theorizing form is an important research agenda to understand

Metaphors, materialities, and affordances 27

 and inform design practice. The forms of interactive applications are more
complex than those of analog objects due to the immaterial qualities of digital
materials (L€ owgren & Stolterman, 2004), the temporal nature of their coded
behaviors (Vallg
arda, Winther, Mørch, & Vizer, 2015), interaction possibil-
ities transcendingdsometimes contradicting todphysical material properties
(Vallg
arda, 2014), and their network connectivity to other digital artifacts.
This section contextualizes the complexity of interactive form-making from
1) semantic, 2) cognitive, and 3) material perspectives. Each perspective corre-
sponds to respective paradigm shifts in communication and design stud-
iesdsemantic, iconic and material turns, which have largely influenced on
how we design and interact with artifacts. The overview of these perspectives
will highlight focused aspects of our study on metaphor and materiality based
on a brief trajectory of form-making approaches in HCI.

2.1 Semantic perspective

Viewing design as communication between designers (i.e., a sender who
encode meanings) and users (i.e., a receiver who decodes the meanings)
through a designed object (i.e., a system of meanings) (Krippendorff &
Butter, 1984), the semantic perspective investigates how formal features of
products (e.g., shapes, colors, textures, materials) could convey additional
meanings to users beside functions. Since the form of products is freed from
function in the postmodern era, lifestyles and emotional values are considered
more significantly in product design (Demirbilek & Sener, 2003); and meta-
phors are used to explore novel formal motives in order to distinguish a prod-
uct from its kind, as seen in design cases from the Cranbrook Academy of Art
and Alessi kitchen gadgets (Parsons, 2009, pp. 44e45). Although such meta-
phoric approach often makes humaneproduct interaction unique and
engaging, there have been also criticisms about a metaphor turned into a cliche
after overused for similar products, leaving little room for user engagement in
product experience (Dunne, 1999). Such criticism is related to the tension be-
tween the specificity and the ambiguity in metaphor conceptions, questioning
about how an interactive form could be concrete enough for a user to make
sense of intended interactions but still ambiguous enough to generate subjec-
tive meanings with an artifact.

The semantic approach in design goes beyond the form of a single product,
leading to the notion of a semantic turn that shifts the focus of design research
to network of meanings among multiple artifacts. The semantic turn suggests
that artifacts are connected through their meanings and functions, construct-
ing an ecology where they are created, used cooperatively or competitively, re-
produced to something else, and sometimes extinct like biological species
(Krippendorff, 2006). This notion of artifact ecology is a metaphoric concept
by itself, emphasizing networked attributes of contemporary digital artifacts
and their pervasive meanings in the information society. This perspective

28 Design Studies Vol 53 No. C November 2017

 extends the formal dimension of an artifact to a systemic level and underlines
human-centered approaches for creating an artifact that has compatible mean-
ings relevant to other artifacts (Krippendorff, 1989a). The role of metaphors
has been expanded to shape such ‘relations’ among multiple artifactsdboth
in terms of their forms (i.e., how they are functionally and technically con-
nected to each other) and meanings (i.e., what they can do as a whole in hu-
manecomputer interaction)dbeyond individual artifacts.

2.2 Cognitive perspective

The interaction between human and computer can be specified based on
cognitive theories of information processing: a human is constructed into
the user who works for information related tasks; a user mental model is
devised to describe how information could be structured in the mind; and
the computer interface is designed to represent its system structure in relation
to the user’s mental model. Metaphors are often used in information system
design by abstracting core formal attributes of related physical objects and/or
behaviors and mapping them to system structures and interfaces as image
schemas (Hurtienne & Blessing, 2007). The increasing number of images pro-
duced in the contemporary society has brought an iconic turn in visual cul-
tural studies (Moxey, 2008). The iconic turn implies epistemological
transformation of how we discover and construct knowledge with advanced
media technologies by representing the invisible in visible structures and ex-
tending the mental representations outside the realm of space and time.
The iconic turn, in relation to the notion of embodied cognition, influences
how we understand and communicate abstract concepts as a metaphoric
foundation: our innate and everyday sensory-motor experiences can be
abstracted into embodied schemas to guide user interactions with spatial
and temporal cues (Hurtienne & Meschke, 2016).

However, this universal perspective on forms may miss socially, culturally and
personally situated human experiences. Metaphoric and schematic representa-
tions, how specific they maybe, are largely dependent on the user’s experience
and knowledge; the user may not understand or behave as prescribed by de-
signers. The specific framing of the user and prescribed interaction flows could
limit user experience and engagement with an artifact (Redstr€ om, 2006). This
criticism corresponds to the tension between the specificity and the ambiguity
of metaphors and schematic images, leading to further questions about their
roles in interface and interaction design: Is the use of metaphors to support de-
signers’ intuitive form-making or users’ creative engagement in it? How can a
novel metaphor be intuitive enough and still open for further interpretations?
How could image schema serve as a useful concept for designers to make forms
of interactive artifacts with hybrid materiality? Now with the networked and
pervasive aspect of the computer, humans and computers have become
more interdependent to each other. Not necessarily guided by a fixed

Metaphors, materialities, and affordances 29

 metaphoric or schematic representation of a single artifact, users actively make
meanings and connections between multiple artifacts by improvising their sit-
uated actions and mental models about a computer system. This evolving form
of humanecomputer interaction calls for alternative metaphors and design
paradigms to embrace human cognitive capabilities expanded through symbi-
otic relationships with the computer beyond the desktop.

2.3 Material perspective

While the semantic and cognitive perspectives provide conceptual founda-
tions to understand the meaning and the formal structure of a designed ob-
ject, the material perspective focuses on its material presence in terms of
what things look like and what they do in technological and sociocultural con-
texts (Verbeek, 2005). As forms and functions of digital artifacts are
becoming more diverse beyond the desktop computers, an artifact’s material-
ity is increasingly recognized as playing a significant role in the user experi-
ence, whether in relation to its tactile or embodied presence (Ishii &
Ullmer, 1997), programmable qualities (Vallg
arda & Redstr€ om, 2007),
emotional resonance of sensory memories (Jung & Stolterman, 2011) or em-
beddedness in material and social contexts (Dourish, 2011; Leonardi et al.,
2013). Attention to the artifact’s physical presence, material composition
and embeddedness in specific contexts has led to the notion of a material
turn in HCI (Robles & Wiberg, 2010) that embraces and explores diverse ma-
terial qualities in designing digital artifacts. While metaphor has traditionally
guided interaction design to represent digital systems in graphic user inter-
faces that resemble familiar physical objects, we simultaneously see many at-
tempts at working backwards to create meaningful physical manifestations of
digital services. The concept of the Marble Answering Machine by Durrell
Bishop proposes a tangible presence of a digital system (Moggridge, 2007).
The linkage among digital information (voice message), its material represen-
tation (marbles), and tangible manipulation (move a marble) may be less
intrinsic to each other than in graphic representations (e.g., speaker icon)
but leverages our bodily skills in manipulating digital information through
embodied metaphors, i.e., hold to select, place to play. Our focus regarding
metaphors in design lies on such a constructive linkage between form and
function that invites users’ active meaning-making through their perception
and action loop rather than imposing a fixed metaphor and its schematic im-
age to their interaction.

The material turn in HCI, not only proposing tangible and embodied interac-
tions, has brought in corresponding methodological explorations by viewing
digital technologies as inspirational design materials to be investigated
(Sundstr€ om et al., 2011), by sorting through varying perspectives on material-
ity to frame interaction design research (Fernaeus & Sundstr€ om, 2012), and by
speculating about authentic material qualities in computing toward material

30 Design Studies Vol 53 No. C November 2017

 interactions (Wiberg, 2016). The analogy of interaction design to bricolage
(Vallg
arda, 2015) advances the understanding of materiality in HCI through
improvised making and tinkering with digital materials, as done with physical
materials. These attempts expand the design in HCI from application design,
which is largely driven by usability and efficiency in task completion, to
form-making, which values human engagement with material meanings of dig-
ital technology. Digital artifacts have gained a recognition as material thing
that has tangible presence and influence beyond as content or service to be
contained by a physical device. These material perspectives will provide a
way of looking into the evolving relationship between metaphors and materi-
alities in HCI, leading to speculations about authentic forms inherent to their
materiality instead of relying on the image of something else. Specifically, they
will provide a foundation based on which to conceive new metaphors for
exploring authentic material and formal qualities of the computer, corre-
sponding form-making processes, and novel relations between users and dig-
ital artifacts beyond communicating fixed interaction schemas.

2.4 Interplay and tension of the three perspectives

The three perspectives presented above provide distinct but related explana-
tions of the design rationale behind the development of different interactive
applications, respectively 1) the semantic perspective viewing the form of a dig-
ital artifact as a carrier of intended meanings, 2) the cognitive perspective as a
representation of user mental model, and 3) the material perspective as a mate-
rial presence influential in the lived world. The material presence of an object
always reflects its semantic value in the network of other objects; its symbolic
aspect also includes and implies its material functionality (Folkmann, 2013, p.
153); and what things do in terms of human experience is shaped by their ma-
terial presence in the users’ cultural horizon (Ihde, 1990). Poised among the
three perspectives, metaphors are implicitly or explicitly applied in the design
of digital artifacts as semantic resources, schematic patterns, and/or material
references to afford user interpretations of source domains as represented in
a target domain (Figure 1).

Main challenges in the practice of interactive form-making are summarized as

1) formal dimensions expanding from the representation of a single artifact to
the relations between multiple ones and 2) less intrinsic linkage between form
and function that could result in a mismatch between meaning and affordance
of an artifact (Krippendorff, 1989b). We address these challenges by re-
investigating metaphoric design approaches from the three perspectives on
interactive forms. The interplay of semantic, cognitive and material perspec-
tives is evident in diversified material manifestations of digital artifacts.
Tangible and embodied interfaces are designed based on the schematic image
or material presence of source domains by reinterpreting their meaning appro-
priately to the materiality of a target domain. There are also tensions between

Metaphors, materialities, and affordances 31

Figure 1 Three perspectives to
link source and target do-
mains by metaphors

the three perspectives, when it comes to the level of specificity of formal rep-
resentations. While metaphor conception is usually built on the specific cogni-
tive model derived from its source domain, representing too much detail of its
material appearance could distract and mislead a user interpretation. When
metaphors are applied to tactile or ambient interfaces (e.g., gesture, vibration,
sound), their meanings could be more ambiguous than in graphic representa-
tions. However, the ambiguity may invite more diverse and improvised user
interactions emergent between the form and the user context (Antle et al.,
2009; Dijk, Lugt, & Hummels, 2014). To further investigate the use of meta-
phors across different material types, we conceptualize interactivity by speci-
fying formal constituents of interactive artifacts.

3 The anatomy of interactive forms: surface, behavior

and system
To examine design properties underlying the interface of interactive applica-
tions, we conceptualize interactive artifacts as interactive form, which consists
of multiple formal states linked and transitioned to each other, regardless of
their material types that may include screen, ambient or tangible interfaces.
For example, a website displayed on the computer screen does qualify as an
interactive form not because of its digital medium but because of its multiple
pages and interface elements that are connected within the website and navi-
gable through mouse events, which in fact are part of the properties of digital
media. Although degrees of interactivity and types of materiality may vary,
each interactive form behaves like an organic entity by unfolding its multiple
formal states in response to interaction events; and their coherent connectivity
and temporal responsiveness are the main attributes that we focus on in this
study. For a systematic analysis of the relationship between metaphors and
materialities in the design of interactive artifacts, we suggest three aspects to
conceptualize an interactive form: surface, behavior, and system. In what fol-
lows, we examine the role of metaphors in each aspect and across them in rela-
tion to the materialities of interactive artifacts. Many examples to be
mentioned are touch screen applications simply because they are currently
the most common; but this pragmatic choice is not meant to exclude other

32 Design Studies Vol 53 No. C November 2017

 types of interactive artifacts, and similar analyses could be carried out to
different material types of interactive forms.

3.1 Formal aspect 1: surface

The surface aspect of interactive forms is about how a digital application is
represented through its interface to indicate what a user can do with it. The
perception of an interactive form can be fragmented as it has multiple states;
often nested in other platforms (e.g., a mobile app installed in a physical de-
vice), reconfigurable depending on where it is installed, and relatable to other
systems (e.g., a mobile app connected to a wearable device). Because of the
fluidity of an interactive form, the surface is hardly separable from the sys-
temic aspect of its platform where it is installed (Miller & Matviyenko,
2014). In addition to the re-configurability of interactive forms, invisible and
temporal form factors (e.g., press longer, tapping twice) make the recognition
of affordances on the surface and the interpretation of their meanings even
more challenging.

Regardless of these design challenges with hybrid materiality, the surface of an

interactive application mediates user interactions by presenting its entire sys-
tem as a material thing with its formal identity. A user makes sense of the arti-
fact (i.e., what are interfaces, what I could do with them, what the artifact
could do for me) by recognizing its interaction cues and their esthetic styles
from the surface. With the digital and physical integrated materiality, the sur-
face representation of digital applications has become graphically minimalized
and embedded in diverse tangible materials; and the ways in which metaphors
are applied are also changing from instructional representations to hints at
minimal interaction cues. Compared to its older versions, Apple’s calendar
app in iOS 7 and thereafter shows how the schematic image of a paper calendar
has been refashioned only to highlight its main interaction cues in recent
touch-screen apps with other graphic details eliminated (Hodgkins, 2013).
The original form of a paper calendar is remediated by the affordances of
the new medium, i.e., the limited screen estate, effortless touches on it, dynamic
visual responses to them. The surface does not reveal all possible formal states
at once, but noticeable interaction cues and immediate responses to user ac-
tions enable a user to discover what the app can do through its surface and
to develop one’s own mental model regardless of any intended metaphor or
schematic image.

3.2 Formal aspect 2: behavior

The behavioral aspect is about how an artifact responds to interaction events
by unfolding corresponding formal changes that are coded behind the surface.
Interaction events could be user actions, contextual changes or internal status
changes within a system. Often described in terms of interaction gestalt (Lim,
Stolterman, Jung, & Donaldson, 2007), different material and esthetic styles of

Metaphors, materialities, and affordances 33

 formal transitions affect the perceived character of an interactive artifact. The
login interface of iOS responds to a wrong password by shaking up the graphic
elements on the screen, evoking various mental images compared to a plain
text message of “login failed”. The shaking response may evoke someone
shaking one’s head to disagree or an object shaking from a physical impact.
Such behavior represented by embodied metaphors enables diverse user inter-
pretations, but still convey the common image of the abstract concept of denial
or failure based on human embodiment in the physical space (Johnson, 2008;
Antle et al., 2009).

Graphic interfaces in the screen are more seamlessly combined with touch ges-
tures and tactile feedback, simplifying instructional representations. In the
example of a task management app in Figure 2, the surface only consists of
colored task boxes, which can be added, deleted or edited by different gestures
without any instructional icons. The user is guided by minimal visual cues for
touching and corresponding responses leading to next steps of interaction.
Various gestures are assigned with new meanings according to their effects
within the application (e.g., cross to delete, pinch to create, drag to edit).
With the integrated materiality of interactive media like touch screen, interac-
tive forms become less dependent on the image of familiar objects in the sur-
face, and interaction affordances more transparently emerge from their material
properties and behavioral responses through embodied metaphors. Metaphors
and meanings of an artifact emerge through such interactions, reified through
repeated uses, instead of imposed by a fixed image schema; and cohesive links
between one formal state and another significantly influence on user engage-
ment with the form to make user’s own meaning and use of the artifact.

3.3 Formal aspect 3: system

The systemic aspect of an interactive form is about how its multiple states are
connected to each other in a coherent structure. Metaphors are also applied as
a systemic design strategy for mapping multiple formal elements to a system
structure, although the structure may not be apparent on the surface. For
example, the spatial metaphor is pervasively used to organize and navigate in-
formation in a virtual space by exploiting human ability of space perception in
the physical world. Many graphic design principles are grounded in the spatial
metaphor: interaction cues are identified based on the visual hierarchy among
multiple elements; and navigation occurs by scrolling or zooming in the screen,
as if moving a view frame within or through the surface. The card metaphor is
another example that is conceived to organize an increasing amount of infor-
mation in a more flexible and modular structure by assigning a tag to a piece of
information instead of archiving it in a static and hierarchical structure.
Different ways of manipulating physical cardsde.g., turning over to reveal
more, expanding for more details, folding or stacking to save space, or
spreading to view more than onedcan be mapped to new interactive behaviors

34 Design Studies Vol 53 No. C November 2017

Figure 2 Touch gestures embedded in graphic interfaces (Photos Courtesy of Realmac Software, 2015)

for manipulating information in the digital space. The card metaphor may not
be recognized in the surface representation, and some of its interactive manip-
ulations are not necessarily inherent traits of physical cards. However, the card
metaphor, as a systemic strategy, generates new design possibilities appro-
priate for touch screen manipulations; and the original form and the use of
physical cards are augmented to new interface elements. This shows that the
value of a metaphor comes from its creative interpretation and coherent mapping
to the systemic aspect of a target entity instead of its depictive representation on
the surface. Instead of the precise communication of metaphor sources, user’s
engagement with the form and its subjective interpretation is more of our focus
in reframing the relationship between materialities, metaphors, and affordan-
ces in interactive forms.

4 Affordances shaped by metaphors and materialities

The three aspects of interactive form in the previous section are separately
described for an analytic purpose, but the intention is to highlight their intri-
cate relationship instead of their division. The surface aspect gives an applica-
tion its material presence and indicates interaction cues; the behavioral aspect
guides interaction flows through the chain of interaction triggers and re-
sponses; and the systemic aspect connects multiple formal elements into a
coherent structure (Figure 3). Metaphors implicitly or explicitly mediate

Metaphors, materialities, and affordances 35

Figure 3 User interaction mediated through different formal aspects

user interactions by resembling the material presence of source domains, with

their schematic images refashioned to various sensory and material modes or
abstracted to structural principles. Building upon this framework, this section
examines how affordances are shaped and perceived in interactive forms. Spe-
cifically, we reframe how metaphors remediate design conventions across
different digital media from a relevant perspective of media theory, which
has developed conceptual vocabularies and perspectives compatible with ma-
teriality theory in HCI (Gross, Bardzell, & Bardzell, 2014a).

4.1 Design affordances inherent to the materiality of

interactive media
From a communication perspective, the concept of affordances embraces the
materially, culturally and historically developed modes of communication
(Kress, 2010): the temporal sequence is an affordance of the mode of speech;
the spatial arrangement is an affordance of the mode of still images. Likewise,
interactive media entail affordances inherent to their semiotic resources and
materialities; and the design of an interactive application always involves a
discretionary choice of conventions or invention of a new medium (Murray,
2011, p. 25). Murray specifies four affordances of the computer as digital me-
dia in terms of its computational properties based on which information is in-
scribed, processed and represented: spatial, participatory, encyclopedic and
procedural properties. These computational properties are woven with diverse
physical materials to reshape the materiality of interactive media. Materiality
of media, in the context of their ecosystems, enables or constrains designers to
form a digital artifact in particular ways (Fuchsberger, Murer, & Tscheligi,
2013), which we consider as design affordances of media. According to the
remediation theory (Bolter & Grusin, 1999), design affordances of one medium
can be remediated to another with corresponding design conventions refash-
ioned and integrated to the materiality of new media: for example, e-books
resemble a paper book by taking its formal schema of covers and pages and
even augment it through the affordances of digital media such as searching

36 Design Studies Vol 53 No. C November 2017

 (i.e., the encyclopedic property) and social bookmarking (i.e., the participa-
tory property).

4.2 Interaction affordances emerging from formal

compositions
From the Kantian perspective of perception, it is the representation that
makes the system recognizable, rather than the system makes the representa-
tion possible (Puhalla, 2011): “experiencing the world is dependent on a concep-
tual structure providing representational properties of experience; reasoning
connects the world we experience through structure.” Affordances of interactive
systems emerge from perceived qualities of their formal compositiond-
through noticeable interaction cues and responsesdnot imposed by fixed sche-
matic or metaphoric representations. Although the structure of an interactive
form is hardly graspable at once, the surface is indicative of the entire system
by selectively revealing or hiding other aspects of the form underneath it; and it
is the coherence of its systemic structure that enables the user to infer other
formal states and to develop a mental model about the whole, which maybe
subjective and different from the design intention. The user engagement in sub-
jective interpretations of an interactive form is only possible when its formal
system is carefully crafted with a cohesive design language. Inconsistent repre-
sentational or behavioral styles within a system could easily confuse the user:
too much detail in the representation may interfere the user’s detection of main
interaction cues, as seen in skeuomorphic interface design (Manjoo, 2012); too
familiar metaphors or formal patterns may disengage a user from fully expe-
riencing interactions by imposing the image of something else, although they
may work better for efficient task completion. In addition, digital formal
composition goes beyond remediation from one medium to another: the com-
puter, as metamedia, remixes and modifies different digital forms including
graphic user interfaces, databases, navigable virtual spaces, and dynamic visu-
alizations to various manifestations (Manovich, 2013). Digital forms, not only
affording user actions, provoke a multitude of user interpretations and recon-
figurations by hinting at various source domains that constitute a remixed
manifestation. New metaphors of the computer as ‘metamedia’ are in need
to enrich future interactive form-making approaches and to generate various
formal compositions from multiple design resources.

4.3 Affordances reified as formal styles and patterns

The form of an interactive application is built in and thus constrained by its
medium, through which information and interactive behaviors are coded, pro-
cessed and represented. Each medium has its own affordances inherent to its
materiality, enabling certain formal structures and interaction styles. Gross,
Bardzell, and Bardzell (2014b) further claim that interaction styles evolve
across different media and skeuomorphism provides a way to look into the
evolutionary process in terms of how new interactions capture the experiences

Metaphors, materialities, and affordances 37

 they are emulating in new materials at varying levels of specificity. Formal pat-
terns and interaction styles are remediated and even remixed across different
material domains and could become design conventions that indicate corre-
sponding affordances for user interactions. Metaphors are often used to reme-
diate forms and meanings of one material domain to another, sometimes
reified as particulars types of objects (e.g., digital ‘book’ for digital reading ap-
plications, ‘calendar’ app for scheduling applications, smart ‘watch’ for activ-
ity tracking devices). Some embodied metaphors applied to touch screen
manipulations, although their meanings might have not been intuitive when
first introduced, have become conventional interaction languages through
repeated uses (e.g., pinch to zoom, slide to open, cross to delete). Such evolu-
tionary developments of interactive forms and media through style-borrowing
or style-mediating processes (Gross et al., 2014b) make formal style and mate-
riality of media difficult to distinguish from each other and reify them as part
of the design affordances and conventions of interactive media. In this vein,
affordancesdeither design or interaction possibilitiesdbecome inseparable
from the materiality of a medium and its corresponding design conventions.
New metaphors can be conceived as a design or interaction process beyond
an instructional representation; such generative metaphors can create various
combinations of formal conventions and hybrid materialities of digital media,
reifying new meanings and affordances emergent from their relations.

This section examined the dynamic and evolutionary nature of affordances in

interactive forms as a conceptual composite of the materiality of interactive
media and related design conventions. Metaphors are often applied to reme-
diate design and interaction possibility across physical and digital material do-
mains. A successful metaphor introduces new ways of organizing and
navigating information by reinterpreting related objects or experiences appro-
priately to a target domain, sometimes reified as relevant formal patterns and
styles applicable to other designs, as seen in ‘card’ based navigation or ‘time-
line’ of postings. Digital interfaces themselves are no longer novel blank slates
to be imbued with meaning derived from the physical world; rather, they are
woven with diverse materials of interactive media, creating their own formal
conventions particular to their materiality. A series of related research agendas
can be set out through the lens of interactive form-making, from searching for
and experimenting with new metaphors in HCI, to exploring materialities and
affordances of interactive media through metaphors, and to augmenting the
forms and meanings of physical objects via interactive media. Further implica-
tions are discussed in the next section.

5 Toward a morphological perspective on affordances of

interactive artifacts
As the forms of interactive applications are diversified with their pervasive in-
fluence on human perception and experience, corresponding reflections are in

38 Design Studies Vol 53 No. C November 2017

 demand to make sense of what are their building blocks and to analyze their
relationship from a design-oriented perspective. Many screen-based interface
design patterns and heuristic design guidelines in practice aim at efficiency in
use by replicating familiar interaction metaphors and design conventions; on
another hand, research attempts are increasing to explore new metaphors
and forms for richer user experience with diverse interactive media beyond
the screen. Based on the investigation of materialities, metaphors, and affor-
dances of interactive artifacts, we propose a morphological view in the design
of interactive artifacts with focus on the generative linkage between multiple
design sources and their interpretations. Our proposal shares similar motiva-
tions with the notion of cultural form (Horn, 2013) that addresses continually
appropriated and restructured forms of artifacts and their evocativeness as a
means to activate existing patterns of social activities along with associated
cognitive, physical, and emotional resources. In line with this notion, our pro-
posal for a morphological perspective sorts through conceptual distinctions as
well as relationships between materialities, metaphors, and affordances toward
an integrated view on interactive form-making. While both perspectives shed
light on the (potential) connections of various design resources and their in-
stantiations, the notion of cultural forms focuses on implications of tangible
interactions for social activities; and our morphological view aims at speci-
fying the linkages between various design resources including materialities,
metaphors, and formal conventions to inform the analysis and the creation
of novel formal patterns, esthetic qualities, and meanings of interactive
artifacts.

Our study conceptualizes interactive forms and reflects on how their affordan-
ces are shaped through metaphors and materialities of interactive media
(Figure 4): 1) material properties of a medium are combined with its compu-
tational properties, shaping design affordances that define design possibilities
and constraints in the medium; 2) design conventions from multiple sources
(e.g. semiotic resources, interaction styles, design templates) influence on the
formal structure of a target domain and corresponding interaction affordances
in relation to the users’ knowledge and experience; 3) once a new interactive
form is designed and repeatedly used, its variations in terms of formal patterns
and interaction styles are made in other design instantiations, reifying the form
as a new design convention. Many interactive applications in same media
share similar formal patterns as design conventions, which frame their sys-
temic structure; formal variations are made in the surface and behavioral as-
pects of different application instances; and the affordances of an interactive
artifact emerge through the user engagement with each of and across its formal
aspects. In this course, metaphors often mediate the forms and meanings of
existing media as a semantic, schematic or material resource to a new design,
enriching interaction design languages and styles in general. The proposed
framework in Figure 4 leads to a further speculation about the relationship be-
tween metaphors, materialities and affordances in interactive forms by

Metaphors, materialities, and affordances 39

Figure 4 Metaphors, materialities, and affordances in the design of interactive artifacts

extending the form-making practice from creating a single application to re-

creating it in relation to the forms of other designed things. This framework
emphasizes a mutual influence between materiality and design convention
across different media, which are combined to create new formal variations
and interaction affordances. Here, metaphors often link multiple formal mo-
tives and meanings. However, the precise recognition of the source domains
should not limit meaning-making from the user side. Instead, active user
engagement and interpretation is critical part of the interactive-form making
process by exploring and reifying certain formal patterns. For doing so, cohe-
sive formal compositions of multiple sources need to be further investigated in
HCI design across diverse material domains. In what follows, we reframe how
to consider metaphors and affordances toward generative interactive form-
making across diverse material domains by embracing both designer and
user perspectives in it.

5.1 Contradicting roles of metaphor in designing interactive

forms
The framework of semantic, cognitive and material perspectives on interac-
tive form-making can inform HCI design by considering different roles of
metaphors in linking multiple states of an interactive form and affording
user engagement with the formal system. Metaphor can be used to conceal
the systemic aspects of interactive forms as well as reveal them. Interactive

40 Design Studies Vol 53 No. C November 2017

 forms have a rather iceberg-like structure, with much more going on under-
neath the surface than what is revealed above it. Metaphor is generally
thought to work well at this surface level of use when it simplifies the
complexity of the underlying system. However, unlike in the physical world
where artifact forms are rooted in generally stable and analog materials, dig-
ital materials offer no such guarantee regarding the link between the surface
level of forms and their underlying character. Thus, while interactive forms
may implicitly claim to function as familiar physical materials through a met-
aphor, there is nothing inherent in their character that requires any particular
link between this symbolic representation and its referent. In fact, it may be
said that given the generally simplifying function of metaphor, it is typically
the case that metaphors deployed in interactive forms do not reveal (or even
conceal) everything that interactive forms do under the surface. We claim that
metaphors, instead of relying on the inherent relevance between source and
target domains, are rather strategically explored and carefully crafted through
coherent formal compositions and also selectively interpreted by the users. To
carefully use metaphors in HCI design with emerging media, it is critical to
understand the conceptual constituents of interactive forms and their rela-
tionship as we propose in Figure 4.

5.2 Affordances as invitations for interpreting interactive

forms
The surface of interactive forms become graphically minimal with user inter-
faces embedded in diverse material components (e.g., gestures, vibration,
sound). With the integrated materiality, the three formal aspectsdsurface,
behavior and systemdare merged to reveal the behavioral and systematic as-
pects directly onto the surface by deconstructing or eliminating metaphoric
representations; and the scope of interactive formal compositions is expanded
to directly connect physical objects to digital services instead of nesting one in
the other, as seen in many mobile apps connected to other devices working
together as networked systems (e.g., Internet of Things). Such distributed
forms of digital systems can imbue new meanings and functions to an existing
object, not necessarily by remediating it to a new medium representation but
by augmenting its system in its original material presence. In this vein, affor-
dances of interactive forms, not only indicating interaction cues and expected
effects, extend to design possibilities of how one artifact could be reinterpreted
in relation to other systems or use contexts. This view furthers the mediated
action perspective on technology affordances (Kaptelinin & Nardi, 2012) by
linking interaction affordances and design affordances to enable various form-
making approaches such as tinkering or hacking with blurred boundaries be-
tween designers and users. Affordances can be considered as a series of invi-
tations for user interpretations to (re-)create new forms and meanings of
interactive artifacts; accordingly, metaphoric design approaches can be

Metaphors, materialities, and affordances 41

 expanded from representing familiar interaction cues to exploring new formal
patterns that are still compatible to other design conventions.

5.3 Metaphor as a strategy to explore the materiality of

emerging media
Metaphors are more applied as a systemic strategy to connect multiple formal
elements and to explore new design and interaction possibilities of digital me-
dia (e.g., card based navigation, gesture interactions) beyond resembling the
image of something else on the surface. Liquid layout is an example of a meta-
phoric design strategy that adjusts graphic layouts of screen-based applica-
tions to fit different device sizes and orientations for optimized user
experience across multiple devices. The liquid metaphor reinterprets the mate-
riality of the screen media in relation to its physical container, reified as respon-
sive design approach for web applications (W3Schools). Likewise, Material
Design by Google (2014) is a set of systemic design guidelines that apply a met-
aphor of tactile manipulation with physical materials to graphic design styles
by creating a virtual tactile reality where all design components are cohesively
connected with perceived weight, spatial depth and motion in the screen. Not
constrained by familiar forms, new formal properties, structures and styles
with digital media are explored, for example, by creating physically impossible
structures through computational fabrication (Oxman, 2007) or generating
unusual aesthetics from data related computational processes (Meshu;
Moere, 2005; Gross, 2013). Such new formal compositions, though not
directly involving responsive interactivity between user and form, influence
on our perception of things as well as their interactivity in terms of what could
be acted on and how. Furthermore, alternative metaphors are sought to re-
frame relations between human and multiple artifacts, as seen in related con-
cepts including product ecology (Krippendorff, 1989a, 1989b) and product
agency (Cila, Smit, Giaccardi, & Kr€ ose, 2017). These attempts take a meta-
phor as a strategy to embrace hybrid materialities of emerging media in inter-
active form-making by blurring physical and digital material boundaries;
deconstructing and refashioning design conventions; and revealing authentic
material qualities and corresponding design processes on to the surface instead
of covering it with the image of something else.

6 Conclusion
Our study investigates the relationship between metaphors, materialities and af-
fordances in the design of interactive artifacts. With a point of departure in
morphology, which is ‘the study of shape’, we suggest that interactive forms
can be conceptualized in terms of their surface, behavioral and systemic aspects
and examine the use of metaphors and the emergence of affordances in and
across those formal aspects. Based on this conceptualization, we propose an
explanation of how affordances of interactive forms emerge and evolve: 1)
the material and computational properties of interactive media enable or

42 Design Studies Vol 53 No. C November 2017

 constrain design possibilities (i.e., design affordances); 2) design conventions
from various domains influence on a new design in relation to the users’ knowl-
edge and experience with other artifacts (i.e., interaction affordances); and 3)
the formal pattern of a new design is refashioned and augmented to other ma-
terial entities. Based on this explanation, we claim that forms and meanings of
artifacts are connected across various material domains and that metaphors
implicitly or explicitly play a key role in bringing a new design perspective
from one domain to another, sometimes reified as design conventions. Our
investigation extends the perspective on affordances from perceivable action
possibilities to invitations for interpreting forms and meanings of an interactive
artifact. We also highlight the role of metaphors as a systematic strategy for
exploring materialities and affordances of digital media. This study provokes
further research questions for future work: how to create an interactive form
that is authentic to its hybrid materiality; how to evaluate the use of metaphor
as a systemic design strategy; what it means to craft a unique formal composi-
tion in the age of agile and patterned design, and more. We expect the hybrid
morphological perspective developed in this study to support critical engage-
ment with material and formal meanings of digital artifacts in design research
and practice.

Funding
This research did not receive any specific grant from funding agencies in the
public, commercial, or not-for-profit sectors.

References
Antle, A., Corness, G., Bakker, S., Droumeva, M., Hoven, E., & Bevans, A.
(2009). Designing to support reasoned imagination through embodied meta-
phor. In Proceedings of the conference on creativity and cognition (pp.
275e284). Berkeley, CA, USA: ACM.
Barr, P., Biddle, R., & Noble, J. (2002). A taxonomy of user-interface metaphors.
In Proceedings of CHINZ’02 symposium on computer-human interaction (pp.
25e30). Hamilton, New Zealand: ACM.
Blackwell, A. F. (2006). The reification of metaphor as a design tool. ACM Trans-
actions on Computer-Human Interaction, 13(4), 490e530.
Bolter, J. D., & Grusin, R. (2000). Remediation: Understanding new media. Cam-
bridge, MA, USA: The MIT Press.
Cila, N., Smit, I., Giaccardi, E., & Kr€ ose, B. (2017). Products as agents: Meta-
phors for designing the products of the IoT age. In Proceedings of the confer-
ence on human factors in computing systems (pp. 448e459). Denver, USA:
ACM.
Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2007). About face: The es-
sentials of interaction design. Hoboken, NJ, USA: John Wiley & Sons.
Demirbilek, O., & Sener, B. (2003). Product design, semantics and emotional
response. Ergonomics, 15(46), 13e14.
Dijk, J., Lugt, R., & Hummels, C. (2014). Beyond distributed representation:
Embodied cognition design supporting socio-sensorimotor couplings. In Pro-
ceedings of the conference on tangible, embedded, and embodied interaction
(pp. 181e188). Munich, Germany: ACM.

Metaphors, materialities, and affordances 43

 Dourish, P. (2011). Where the action is: The foundations of embodied interaction.
Cambridge, MA, USA: The MIT Press.
Dunne, A. (1999). Hertzian tales: Electronic products, aesthetic experience, and
critical design. Cambridge, MA, USA: The MIT Press.
Fernaeus, Y., & Sundstr€ om, P. (2012). The material move how materials matter in
interaction design research. In Proceedings of the designing interactive systems
conference (pp. 486e495). Newcastle Upon Tyne, UK: ACM.
Folkmann, M. N. (2013). The aesthetics of imagination in design. Cambridge, MA,
USA: The MIT Press.
Fuchsberger, V., Murer, M., & Tscheligi, M. (2013). Materials, materiality, and
media. In Proceedings of the conference on human factors in computing systems
(pp. 2853e2862). Paris, France: ACM.
Google. (2014). Introduction e Material design e Google design guidelines [Web
Site]. Retrieved from: https://material.google.com.
Gross, S. (2013). Glitch, please: Datamoshing as a medium-specific application of
digital material. In Proceedings of the international conference on designing
pleasurable products and interfaces (pp. 175e184). Newcastle upon Tyne,
UK: ACM.
Gross, S., Bardzell, J., & Bardzell, S. (2014a). Structures, forms and stuff: The ma-
teriality and medium of interaction. Personal and Ubiquitous Computing, 18,
637e649.
Gross, S., Bardzell, J., & Bardzell, S. (2014b). Skeu the evolution: Skeuomorphs,
style, and the material of tangible interactions. In Proceedings of the conference
on tangible, embedded, and embodied interaction (pp. 53e60). Munich, Ger-
many: ACM.
Hekkert, P., & Cila, N. (2015). Handle with care! Why and how designers make
use of product metaphors. Design Studies, 40, 196e217.
Heskett, J. (1985). Industrial design. London, UK: Thames & Hudson.
Hey, J. H. G., & Agogino, A. M. (2007). Metaphors in conceptual design. In Pro-
ceedings of the international design engineering technical conferences & com-
puters and information in engineering conference (pp. 125e134), Paper
presented at Las Vegas, Nevada, USA, September 4e7, 2007.
Hodgkins, K. (September, 9, 2013). “iOS 7: The Calendar app re-imagined” e
Engadget [Online Article]. Retrieved from: https://www.engadget.com/2013/
09/19/ios-7-the-calendar-app-re-imagined/.
Horn, M. S. (2013). The role of cultural forms in tangible interaction design. In
Proceedings of conference on tangible, embedded and embodied interaction
(pp. 117e124). Barcelona, Spain: ACM.
Hurtienne, J., & Blessing, L. (2007). Design for intuitive use e Testing image
schema theory for user interface design. In Proceedings of the international con-
ference on engineering design (full paper no. DS42_P_386). Paper presented at
Paris, France, August 28e31, 2007.
Hurtienne, J., & Meschke, O. (2016). Soft pillow and the near and dear: Physical-
to-abstract mappings with image-schematic metaphors. In Proceedings of the
conference on tangible, embedded, and embodied interaction (pp. 324e331).
Eindhoven, Netherland: ACM.
Ihde, D. (1990). Technology and the lifeworld: From garden to earth. Bloomington,
IN, USA: Indiana University Press.
Ishii, H., & Ullmer, B. (1997). Tangible bits: Towards seamless interfaces between
people, bits and atoms. In Proceedings of the conference on human factors in
computing systems (pp. 234e241). Atlanta, Georgia, USA: ACM.
Johnson, M. (2008). The meaning of the body. Chicago, IL, USA: University of
Chicago Press.

44 Design Studies Vol 53 No. C November 2017

 Jung, H., Kim, S., Chan, J., Li, Y., & Zhang, Y. (2016). This is not a watch:
Reframing the design of wrist-worn devices. In Proceedings of the international
conference on design and emotion (pp. 211e221), Amsterdam, Netherland.
Jung, H., & Stolterman, E. (2011). Material probe: Exploring materiality of dig-
ital artifacts. In Proc. of conference on tangible, embedded and embodied inter-
action (pp. 153e156). Funchal, Portugal: ACM.
Jung, H., & Stolterman, E. (2012). Digital form & materiality: Theoretical prop-
ositions for a new approach to interaction design research. In Proceedings of
the Nordic conference on human-computer interaction (pp. 645e654). Copenha-
gen, Denmark: ACM.
Kaptelinin, V., & Nardi, B. (2012). Affordances in HCI: Towards a mediated ac-
tion perspective. In Proceedings of the conference on human factors in
computing systems (pp. 967e976). Austin, Texas, USA: ACM.
Kress, G. (2010). Multimodality: A social semiotic approach to contemporary
communication. London, UK: Routledge.
Krippendorff, K. (1989a). Product semantics: A triangulation and four design the-
ories. In S. V€akev€a (Ed.), Product semantic ’89. Helsinki: Finland: University
of Industrial Arts.
Krippendorff, K. (1989b). “On the essential contexts of artifacts” or on the prop-
osition that “design is making sense (of things).” Design Issues, 5(2), 9e39.
Krippendorff, K. (2006). The semantic turn: A new foundation for design. Boca Ra-
ton, FL, USA: CRC Press.
Krippendorff, K., & Butter, R. (1984). Product semantics: Exploring the symbolic
qualities of form. Innovation, 3(2), 4e9.
Lakoff, G., & Johnson, M. (2003). Metaphor we live by. Chicago, IL, USA: Uni-
versity of Chicago Press.
Leonardi, P. M., Nardi, B. A., & Kallinikos, J. (2013). Materiality and organizing:
Social interaction in a technological world. Oxford, UK: Oxford University
Press.
Lim, Y., Stolterman, E., Jung, H., & Donaldson, J. (2007). Interaction Gestalt
and the design of aesthetic interactions. In Proceedings of the conference on
designing pleasurable products and interfaces (pp. 239e254). Helsinki, Finland:
ACM.
L€
owgren, J., & Stolterman, E. (2004). Thoughtful interaction design: A design
perspective on information technology. Cambridge, MA, USA: The MIT Press.
Manjoo, F. (November 1, 2012). “Should a calendar app look like a calendar?” e
Slate [Online Article]. Retrieved from: http://www.slate.com/articles/technol-
ogy/technology/2012/11/scott_forstall_fired_skeumorphism_the_design_con
cept_that_s_tearing_apple.html.
Manovich, L. (2013). Software takes command. (Ch. 1). London, UK: Blooms-
bury Academic.
Meshu (n.d.). Meshu e Turn your places into beautiful objects [Website].
Retrieved from: https://meshu.io.
Miller, P. D., & Matviyenko, S. (2014). The imaginary app (software studies).
Cambridge, MA, USA: The MIT Press.
Moere, A. V. (2005). Form follows data: The symbiosis between design and infor-
mation visualization. In Proceedings of the international conference on
computer-aided architectural design (pp. 31e40). Vienna, Austria: OKK
Verlag.
Moggridge, B. (2007). Designing interactions. (Ch. 8). Cambridge, MA, USA: The
MIT Press.
Moxey, K. (2008). Visual studies in the iconic turn. Journal of Visual Culture, 7(2),
131e146.

Metaphors, materialities, and affordances 45

 Murray, J. H. (2011). Inventing the medium: Principles of interaction design as a
cultural practice. Cambridge, MA, USA: The MIT Press.
Norman, D. A. (1988). The psychology of everyday things. New York, NY, USA:
Basic Books.
Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3),
38e43.
Norman, D. A. (2008). Signifiers, not affordances. Interactions, 15(6). ACM.
Norman, D. (30 July, 2004). Affordances and design e jnd.org [online article].
Retrieved from: http://www.jnd.org/dn.mss/affordances_and.html.
Oxman, N. (2007). Digital craft: Fabrication based design in the age of digital
production. In Proceedings of the workshop in the international conference on
ubiquitous computing (pp. 534e538), Innsbruck, Austria.
Parsons, T. (2009). Thinking: Objects: Contemporary approaches to product design.
Lausanne, Switzerland: AVA Publishing.
Pucillo, F., & Cascini, G. (2014). A framework for user experience, needs and af-
fordances. Design Studies, 35(2), 160e179.
Puhalla, D. (2011). Design elements, form & space: A graphic style manual for un-
derstanding structure and design. Beverly, MA, USA: Rockport Publishers.
Rasmusse, M., Troiano, G. M., Peterse, M. G., Simonsen, J. G., & Hornbæk, K.
(2016). Sketching shape-changing interfaces: Exploring vocabulary, metaphor
use, and affordances. In Proceedings of the conference on human factors in
computing systems (pp. 2740e2751). San Jose, California, USA: ACM.
Realmac Software. (October 27, 2015). Clear e Tasks, reminders & to-do lists [on-
line store]. Retrieved from: https://itunes.apple.com/us/app/clear-tasks-re-
minders-to-do/id493136154?mt¼8.
Redstr€om, J. (2006). Towards user design? On the shift from object to user as the
subject of design. Design Studies, 27, 123e139.
Robles, E., & Wiberg, M. (2010). Texturing the “material turn” in interaction
design. In Proceedings of the conference on tangible, embedded, and embodied
interaction (pp. 137e144). Cambridge, Massachusetts, USA: ACM.
Sundstr€om, P., Taylor, A., Grufberg, K., Wirstr€ om, N., Belenguer, J. S., &
Lunden, M. (2011). Inspirational bits: Towards a shared understanding of
the digital material. In Proceedings of the conference on human factors in
computing systems (pp. 1561e1570). Vancouver, BC, Canada: ACM.
Vallg
arda, A. (2014). Giving form to computational things: Developing a practice
of interaction design. Personal and Ubiquitous Computing, 18, 577e592. http://
dx.doi.org/10.1007/s00779-013-0685-8.
Vallg
arda, A. (2015). Interaction design as a bricolage practice. In Proceedings of
the conference on tangible, embedded, and embodied interaction (pp. 173e180).
Stanford, California, USA: ACM.
Vallg
arda, A., & Redstr€om, J. (2007). Computational composites. In Proceedings
of the conference on human factors in computing systems (pp. 513e522). San
Jose, California, USA: ACM.
Vallg
arda, A., Winther, M., Mørch, N., & Vizer, E. E. (2015). Temporal form in
interaction design. International Journal of Design, 9(3), 1e15.
Verbeek, P. P. (2005). What things do: Philosophical reflections on technology,
agency and design. University Park, PA, USA: The Pennsylvania State Press.
W3Schools (n.d.). HTML responsive web design [Website]. Retrieved from:
http://www.w3schools.com/html/html_responsive.asp.
Wiberg, M. (2016). Interaction, new materials & computing e Beyond the disappear-
ing computer, towards material interactions. Materials & Design, 90, 1200e1206.
Xenakis, I., & Arnellos, A. (2013). The relation between interaction aesthetics and
affordances. Design Studies, 34(1), 57e73.

46 Design Studies Vol 53 No. C November 2017