Page 1


THIS IS NOT A TRASH CAN Metaphors in Interaction Design


I submitted this document for the exam on February, 17th 2012 of the Interaction Design Theory 1 course (Teorie dell’interazione) given by Gillian Crampton Smith with Philip Tabor at the Faculty of Design and Arts, Iuav University of Venice. For all word-sequences which I have copied from other sources, I have: a) reproduced them in italics, or placed quotation marks at their start and their end, and b) indicated, for each sequence, the exact page number or webpage URL of the original source. For all images which I have copied from other sources, I have indicated: a) the creator and/or owner of the image, and b) the exact page number or webpage URL of the original source. I declare that all other word-sequences and images in this document were written or created by me alone.

Venice, February 13th 2012


THIS IS NOT A TRASH CAN Metaphors in Interaction Design

IUAV UNIVERSITY OF VENICE Masters in Design Visual and Multimedia Communication Interaction Design Theory 1, 2011–12 Gillian Crampton Smith with Philip Tabor

6 ::


step step step step step step step

1 2 3 4 5 6 7

Introduction Let's look around The language of things How does the human brain work? Coffee karaoke The metaphor game Metaphorical systems Make it visible Conclusion Sources list Colophon

5 6-7 8-9 10-11 12-13 14-15 16-17 18-19 20 21 22

:: 7


In the grammatical system the word "metaphor" defines a figure of speech in which an implied comparison is made between two unlike things that actually have something in common. In other words, it expresses the unfamiliar in terms of the familiar. We get used to talk by metaphors during our speeches, just because we understood what powerful tools they are for explaining things both abstract and real to someone else. And this is possible beacause we all draw from a single large container of signs and symbols called "human culture", allowing us to speak a language that everybody can understand, in some ways. In interaction design metaphors play a very crucial role since they build bridges between the designer, the user and the object (or device, application, service) itself. Therefore they are useful not only in the very early stages of the design process for the properly comprehension of the concept, but also - and above all - to ensure an efficient and direct dialogue between the user and the object. I started considering the use of metaphors in everyday life during the Theory course in interaction design. I didn't realize before how the world surrounding us is so full of signs and symbols which link to something else to explain it better, and it was surprisingly amazing for me to understand how everything gets much easier with the use of metaphors. Since I developed a growing interest about this topic I decided to draft a sequence of steps about how to get familiar with metaphors, with the aim of understand how we interact with objects. Let's find out what the trash can really is!

8 ::



Why is important to analyze the surrounding world The first step to do approaching to interaction design is to understand the way the world works - in order to design better solutions to specific problems - and also the way we interact with the world itself and all the objects we use. The process of analysis of the surrounding reality is a necessary starting point before beginning the design process, since it is "the deconstruction of a whole process, activity, object, or environment into its component parts […]. Each part can be examined in order to discover its properties and characteristics."2 That's why the first thing I learnt in the Interaction Design Theory Course was to take a look around me and notice the things I interact with every time I do something. It was surprising to discover how many instinctive actions I do every day without even noticing it, just because I'm used to it, with all the everyday objects I use. Constraints Something I noticed during my observations is that every object is designed to respond to specific problems, but at the same time these problems pose limitations to design, the rules it must obey: they are "constraints". So it was important for me to understand that boundaries are necessary to shape the design decisions, and more important was using metaphors even at this early stage to compare unlike objects to aid my research. In Dan Saffer's words: "sometimes by using metaphor, you can discover a framework that can wrap around the whole project."3 Above: In the morning the coffee machine turns on by touching the alarm clock; at 6:30 PM in the evening, while coming back home, I could set home temperature or light the fire under a pot in the kitchen with a touch of my mobile device.

Picture a smart environment The first assignment I was asked to in the Interaction Theory Course summarize all the reflections previously explained: I had to imagine a system of connections between wirelessly-linked devices placed into my everyday life. I immediately retraced my typical day starting from the moment I wake up, get ready and so on, and It was like a river of ideas.

:: 9

I couldn't help thinking about possible connections and services, designed to solve my personal problems. I imagined first an alarm clock waking me up and turning the shower and the coffee machine on as soon as I shut it off. This was the very first idea and maybe the easiest one – not so original indeed – but then I realized what a powerful tool could be a sort of home station, with a monitor on the wall, providing me a series of informations: it could check the weather and give me some clothes advices, or tell me when next bus would arrive and send all datas to my mobile device. Also I could interact with my home station even when I'm out through my mobile device and set my home temperature, or light the fire under the pan in my kitchen, while I'm stuck in the traffic. And maybe if I have friends coming over there would be a monitor in my kitchen which scans the food in the fridge and shows me a possible recipe. For sure there are points of weakness, I mean maybe I won't decide to light up the fire in my kitchen when I'm out, and in the end I don't know if I would really cook – or dress - something that is conceived randomly, but thinking about that gave me the idea of functionality and cooperation between different systems.

NOTES 1. Bill Moggridge, Designing Interactions, chapter 10, paragraph "Core skills of design", page 651. 2. Dan Saffer, Designing for interaction, chapter 5, paragraph "Analyzing the Data", page 98. 3. Dan Saffer, Designing for interaction, chapter 6, paragraph "Structured Brainstorming", page 119.

On top: Through monitors on my wall I could easily get some useful informations about the public transport service, and send all datas to my mobile device. In the evening the system could scan the food inside the fridge and provide some recipies through a monitorn on my kitchen's wall.

10 ::



Going deeper in the observation of the everyday objects, I noticed that sometimes I'm totally comfortable using objects even if it's the first time I use them. That's the case of a pot that I just bought, for instance: I have a knob that tells me how can I handle the object without burn me; I can see an empty space underlined by the shape of the object itself, which suggests me to be filled with something else; on the bottom side of the pot I see a plane surface with a hard material on it and in my mind I would reasonably imagine that it is done to be subject to wear. These are mental processes activated by the signals that the pot send to me, advices about its use which the designer have thought about when he conceived it. Affordance These are principles of interaction's psychology between people and things, and they focus in particular on the words "affordance" and "constraints". The former is about giving visibility and explaining how the user can interact with the device, the latter is linked to the subject of the previous step, and focuses on everyone's cultural limits.

Above: The shape of the objects reveals how the user can interact with them. Different switches provide different affordances: the user knows which is the correct gesture looking at their shapes.

Designers know very well these topics and I could easily find examples of good affordances just looking at the things around me: let's take a balance for people, it is flat and will probably stand on the floor, as we can perceive from the little piece of gum on the bottom side of it. Or the toaster: it has only one button on the top, it opens up and is covered inside with a hard material which size perfectly fits two bread slices! My mind is oriented by cultural mechanisms and I already know what to do with the object. Take the example of an emergency door's knob: often it has no visible signals explaining the direction which has to be pushed, but just adding some paint or a plate makes the operation really easier. In Don Norman's word: "The use of cultural constraints simplifies the task of figuring out where to do it"2.

:: 11

Feedback To improve visibility and usability of a device is fundamental to provide a feedback as a response of an action done by the user. This would avoid the repetition of the same action more than once, or, as in my case, the perpetually press of the start button of my old washing machine, which didn't give me any signals of the effective start until the sound of the water flowing came from inside. This is an example of the existence of no feedback, but if we want to be open minded we can say that the feedback would be the water sound itself, which takes place at the last level of latency3 (time between an action and the product's response). That's not good at all! Every action should be accompanied by some kind of response and, most important, should occur early and often. These observations led me to discover a whole system of language of things, something we are totally used to. This is for sure a crucial point in the design process and it has the same origins of metaphors: human culture and instinctive behaviors. That's why designers take advantage of these mechanisms to shape objects and devices, and the aim is always to make the interaction as easy and intuitive as possible.

NOTES 1. Dan Saffer, Designing for interaction, chapter 7, paragraph "Affordances", page 131. 2. Don Norman, Design of everyday things, chapter 4, paragraph "The problem with doors", page 88. 3. Dan Saffer, Designing for interaction, chapter 7, paragraph "Feedback and Feedforward", page 132.

On top: Analysis of everyday's objects bad affordances (left) and good affordances (right). Above: The silent washing machine, that unknow object: no feedback of a started process is provided.

12 ::


Every time we approach to an object our mind immediately activate a series of consideration about the object itself: the shape, the colors, whether it has knobs, buttons, displays, how they are placed in the space and so on. Every one builds an idea of how to use a specific object before using it even for the first time, and for instance this is the case of an ATM for withdrawing of money. No one has the knowledge of all the existing ATM, but we all are able to get money from an ATM even in the other side of the world. We know what to expect from it, and it is get the money; we know pretty much how we would get it and what we would be asked to; then the position of the physical elements (where to insert the card, where to pick money) and the digital elements (navigation on screen) follow a standard allowing us to do the same kind of interactions throughout the world. Dan Saffer talking about standards says that "over many years, designers have trained users to expect certain items to be located in certain places […] and certain features to work in a particular way."1 Mental models When the interaction is made so simple and intuitive is because the designer provided some cues about how to use the object (affordances, feedback) and the user built a conceptual model on its own. Everything is clear so far, but there's a little note: the designer's mental model may not be the same of the user's model, and it often happens.

Above: When I see an ATM for the first time some mechanisms start in my mind: first a quick visual analysis of the shapes, colors, position of the elements; after the building of a mental model about how I can interact with the object and what I expect from it. Then comes the actual use of the ATM.

I remember my first approaching to computers, I was around 6-7 years old, and the biggest difficulty for me was interact with the scrolling of a web page. My mind could conceive to scroll the little bar on the right of the screen to move the page, but just in the opposite way it is meant to be: I wanted to scroll the bar towards the high in order to move the page in the same direction and see what was hidden below. Then with trials and errors I adapted my mental model and I get used to scroll the pages in the current way, but even today I keep wandering whether it is the most natural way to do it.

:: 13

Just like most people, in my life I had to face with objects like digital watches: those squared little watches with tiny displays and two little parallel buttons saying "mode" and "set". Ok, nice and minimal design but... what should I do? The most common operation I could do is set the time. But if I press the "set" button nothing happens, so after a while I understand I have to press "mode" button, and the hours on the display start to turn on and off and it means it entered in the setting mode. If I have to go one hour back, my mental model would suggest me to press the left button of the two, the "mode" button, but once pressed I noticed that display come back in stand-by mode, assuming I finished my settings! The correct way - in designer's mental model - would be press the "set" button on the right to scroll all the hours, but it's against the cultural convention. The problem here is that the designer didn't provide the best coordinates. Don Norman says that it's up to the designer to "ensure that the system reveals the appropriate system image. Only then can the user acquire the proper user's model"2.

NOTES 1. Dan Saffer, Designing for interaction, chapter 7, paragraph "The laws and principles of Interaction Design", page 134. 2. Don Norman, Design of everyday things, chapter 7, paragraph "Use both knowledge in the world and knowledge in the head", page 190.

On top: Mental model of a user approaching to a digital watch: the disposition of the buttons and the text on them induce the user to make mistakes. The designer's mental model is in this case completely different by user's mental model.

14 ::


The previous steps helped me to understand the mechanisms of human thought, and as a result I noticed that most of our mental operations start from the cultural principles which we all own, as Don Norman confirms when he says that "design should make use of the natural properties of people and the world: it should exploit natural relationships and natural constraints."1 For this reason is helpful to employ metaphors in the early stages of a design process as an aid for research and analysis, but they mostly express their power when applied to define the structure and aesthetic of a product. The coffee machine During the Interaction Course I was asked to rethink and improve the quality of interaction with a common coffee machine, like those which I spend so much time with when I take a break, I admit. Anyway, the aim of the assignment was to imagine also a new aesthetic of the object machine itself, so it came natural for me to think about several systems which could be assimilated to the coffee machine. First thing I thought about was: coffee machines are often a bit boring, too serious and don't seem to support that feeling of joy when I approach to them. So came up to my mind the idea of a funny experience, something different from a typical pressing of buttons, making the coffee time a nice moment of the day. And since the most natural thing I do when I'm happy is singing, why don't interact with the coffee machine by singing then? And why don't transform the coffee machine in a karaoke? Above: Schematization of the action's translation into the karaoke metaphor: inputs remain, change the mode.

The metaphor was strongly defined in my mind, and I also figured out myself interact with the coffee karaoke during a typical day: the machine could send me three songs every morning on my mobile phone, and I could listen to them while going to school.Once in front of the coffee machine I could pick up the microphone and say my name, assuming a previous stage of profiling of datas about me and my voice as well. The coffee machine could recognize me and propose one of the three

:: 15

song sent to me, then I could start singing reading texts of the song on the screen and sing the name of the product I prefer when the display shows me yellow underscores instead of the text. Then I just had to insert coins and take my coffee! Storyboard In order to explain my idea to the class I had to move it on paper, so I drew a storyboard through illustrations of the main moments, helping myself to show everybody the key points of the interaction. Making storyboards is a common procedure during the design stages and came right after the definition of a scenario (which is the story itself) and sketches. Dan Saffer talking about storyboards says: "combining a narrative with accompanying images, designers can powerfully tell a story about a product or a service, displaying its features in a context."2 Moreover I provided a flow chart of the interaction for the presentation: a diagram of the logical sequence of actions, inputs and outputs from the machine's point of view. That was a further tool which helped me to express my ideas.

NOTES 1. Don Norman, Design of everyday things, chapter 7, page 188. 2. Dan Saffer, Designing for interaction, chapter 7, paragraph "Documentation and methods of Refinement", page 146.

On top: Storyboard's fragments about the typical using of the karaoke coffee machine. Above: Flow chart of the main actions from the machine's point of view: the squares are the actions, the lozenges are question points.

16 ::



At this point my mind couldn't help thinking in form of metaphors, everything I saw was assimilated to something else, even the most different and weirdest which had nothing to do - apparently! - with the starting point. I remember a scene from my childhood, my brother and I pretending to be a merchant and a customer, with the desk, the bowls full of lentils, beans, carrots and other food, and we just spent the time buying and selling each other. We were just playing, but we didn't notice that was the way we learnt how to menage money and the most basic economic transactions. We unconsciously built up a metaphorical way to express commercial exchanges, because the metaphor helped us to define a concept, and make it concrete. Bill Verplank says: "If you can tell a good story about something, or spin a good metaphor, it makes sense to people. This is where the meaning of the design comes from. A clear metaphor is the strange idea that connects two things."2 The garden metaphor

Above: The garden metaphor and its parts: on top the gardener (left) and the cloud (right); then the water provided and controlled by the gardener; then the plants inside the fence which are bigger (left) or smaller (right); finally the extra water which is the result.

Like most of the systems existing in the world, money is a useful example to build metaphors. We can easily compare the exchanges and movements of inputs and outputs to any other system, and when I was asked to, I imagined my money status as a garden. In my botanical system there were two kinds of inputs: a gardener as a supervisor and source of water and seed (input inside the system), and clouds with rain as a occasional source of water (external input). Then there were different kinds of plants inside the garden, some were bigger, some smaller, and they took water in proportion of their size and needs. Maybe, when the smaller plants took more water than needed, the gardener might cut them off and keep the balance in the garden. Finally the end of the system was the water gained (output). I think it's pretty clear which element stands for what, if I transpose the garden metaphor into my actual money system: the gardener is the metaphor for my parents, the cloud represents occasional works, while bigger

:: 17

plants are important needs like school, food and clothes, and smaller plants are secondary needs like cinemas, books, restaurants and so on. Unfortunately, in reality the water saved at the end is always too few! Searching for metaphors is pretty much like a game. I can entertain myself finding association of ideas, going from a thought to another, and then another, and again, again, reaching finally something completely different from the beginning which keeps, however, the same conceptual relations. And I can be quite sure that anyone can understand the metaphor, because it is drawn from the same big cultural baggage of symbols and concepts which everyone owns. Just think about the most famous metaphor applied to the computer: the desktop metaphor. It was a crucial point which marked a significant change in terms of the interaction between user and machine. It was developed by Tim Mott while working for Xerox Parc and it assimilates the system "computer" to the system "office", and the user can interact with computer through direct manipulation of the elements on screen.

NOTES 1. Dan Saffer, Designing for interaction, chapter 7, paragraph "Frameworks", page 138. 2. Bill Moggridge, Designing interactions, chapter 2, paragraph "Interaction design process", page 131.

Above: When the smaller plant begins taking more water than needed and growing up, the gardener must take action cutting off the excess and restoring the balance.

18 ::


The previous step has been my first real employ of metaphor in a whole constituted system. Once the work was done I noticed that in order to express ideas I conceptualized every single element as a little illustration, and they were really close to the common icons. So I realized which it helps to translate a big system – especially the most complex ones – in a powerful metaphor and visualize it (but need not) through icons. As I already said about the desktop metaphor, here the metaphor is an office. Going back with my mind to older operative systems (which are a little bit different from today's OS), looking on the screen of computers I could see some icons which represented each one a different task. This set of icons conceptualized by Tim Mott worked not only as the translation of the system "computer" in a metaphor, but they also gave the chance to interact directly with the system via mouse, as he explains when interviewed: "We didn’t think about it as a desktop, we thought about it as moving these documents around an office. They could be dropped into a file cabinet, or they could be dropped onto a printer, or they could be dropped into a trashcan."1 And finally here it comes the trash can! Which – now I'm conscious – is not the real trash can of a computer. This little icon on the screen is not a digital place where files are deleted if I drop them into, it is just the metaphor of an action executed by computer (deleting files from the hard disk), which makes my interaction as an user easier to understand. Call me mom Above: The actions of the user inside an office are translated into the desktop metaphor: through direct manipulation of the mouse, files are dragged and dropped inside a printer or a trash can, in order to make clearer the meaning of the action to the user.

Once acquired this knowledge It was easier for me to play the last metaphor game of the Interaction Design Course: like a circle, I came back to the first assignment, this time with the aim of designing a well defined network of objects using a system design approach. This design methodology allows the contextualization of a problem, analyzing the users in a specific environment. Dan Saffer says: "Designers using system design focus on the whole context of use, not just individual objects or devices."2

:: 19

The idea came up thinking about the network as an home assistant, and what is the best assistant every young guy could ever need? Probably the own mom! It seemed nice, so I chose "Call me Mom" as network's name, and I started thinking properly about the user defining a persona, which is a detailed profile of the specific user who will likely use the network. Nothing better than a single young man, Marco, too busy (and too lazy) to think about home stuff. So the basic idea was about a home station, with monitors installed in specific places inside the house responding to specific tasks, and an interaction based on vocal inputs. Marco could talk with his "mom" and she would answer to him through amplifiers. To make it more funny, Marco could choose the kind of "mom" he prefers at the very first start of the network application, and maybe he might desire a more intransigent mother. So she would wake him up in the morning, or shout at him if he forget to take umbrella if it's raining outside, or say him to go to bed if it's late. Just like Tim Mott's metaphor of the actions inside an "office", in this project I compared the actions inside the house with the metaphor of a "mom", conceived as a system.

NOTES 1. Bill Moggridge, Designing interactions, chapter 1, paragraph "The Desktop (Office) metaphor", page 53. 2. Dan Saffer, Designing for interaction, chapter 2, paragraph "Systems Design", page 38.

On top: An exemple of the system design approach: fundamental steps of the service design's process are the definition of the user, the use environment, what is it for, why is it needed and how it will be used.

20 ::



Previous step was the definition of a metaphor in order to explain connections inside a domestic system. Last step is how to make the idea visible to somebody else, allowing the best understanding of problems and solutions. Paper prototype When my brother and me were younger we liked to make our ideas tangible through paper. I remember once when we strongly desired a remote control for TV which would provide us only channels with cartoons, and since we were enthusiast for having this idea we decided to realize it for real with paper and cardboard. And in a few minutes we had our special control. Even in its simplicity, this is a powerful technique widely used during design process, which allows designers to express and quickly visualize ideas. Bill Moggridge when talking about prototypes emphasize the use of paper, because "paper is accessible and so versatile. You can quickly sketch, lay out, and evaluate interaction design concepts for basic usability, making it possible to rapidly organize, articulate, and visualize interaction design concepts."2 Two classmates and I provided a quick and dirty paper prototype and a simple video scenario of a new version of "Call me Mom" network. We imagined a typical use of the network and quickly we built a home environment with paper: fridge, coffee machine and monitors on the walls, and we also illustrated the voice coming from the "mom" as sound waves. Then we combined all the elements together to build up the paper environment and acted inside of it pretending to be users. Video scenario On top: Paper prototype of the mobile device's screen showing how would be visualized a message sent by "Call me Mom" network. Below: The prototype of the wall monitor showing the mom's settings.

It was funny to create this kind of environment with so simple tools, and it adapted very well to a video scenario shot in stop motion. A series o photos taken one right after the other allowed us to realize a certain kind of motion, not really fluid but nice. The advantage of doing this is that between a shoot and another, we could easily move objects inside the space, while keeping the same position of the camera.

:: 21

So once merged together the object seemed moving, and the effect gave to the viewer a realistic perception of what it could be like if realized. This was particularly useful for realizing the flowing of screens on monitors as a succession of papers one behind the other applying the so called Wizard of Oz manipulation3: we manually controlled the movement of sheets in order to make them appear interactive.

NOTES 1. Dan Saffer, Designing for interaction, chapter 8, paragraph "Prototyping", page 174. 2. Bill Moggridge, Designing interactions, chapter 10, paragraph "Screen-Based Experiences", page 705. 3. Dan Saffer, Designing for interaction, chapter 8, paragraph "Low-Fidelity Prototypes", page 177.

On top: Two sequences of photos for the video scenario which merged together make the motion effect: Marco's profile registration and the simulation of the signal sent by the coffee machine to the alarm clock at 6:55 AM in the morning.

22 ::


During the Interaction Design course I learnt how to look at the world surrounding me, and I discovered a new cultural world made by connections, symbols, signs. Metaphors relate human beings to this cultural container, and Interaction Design works with them since they represent the door to the human comprehension of complex and abstract concepts. The path defined by the steps in this booklet explains my approach to metaphors, starting from the analysis of the surrounding world (which is where the cultural knowledge comes from) and the everyday objects, passing through the mechanisms of the human brain and the way we conceive interactivity with objects. Then came the study of the metaphor itself, thepossible uses of it inside projects and some ways to visualize the work done. This is the result of what I experienced on my skin, extrapolating concepts about metaphors also from my own cultural baggage which I discussed previously, the same everybody owns. That's why most of the topics explained here are intuitively understandable, because there are some mental patterns strongly grounded in universal culture allowing relations between humans and between humans and devices as well. Since the human culture keeps evolving with the passing of time, I can barely imagine how the quality of interactions will change, improved by future's new technology. Nor I can imagine whether in the future human beings will keep the same mental mechanisms to conceive things around them as today, because new possibilities will probably bring new cultural patterns, new mental models and new metaphors as well. What I learnt is for sure a concrete and valid starting point for today's Interaction Design which provides the basement for a comprehension of tomorrow's changes.

:: 23


BOOKS Donald A. Norman, The Design of Everyday Things, Currency and Doubleday Inc., Publishers, New York, 1990. Bill Moggridge, Designing Interactions, The MIT Press Publisher, Cambridge, 2007. Dan Saffer, Designing for Interactions Second Edition: Creating Innovative Applications and Devices, New Riders Publishers, Berkeley, 2010. Walter Aprile, Britta Boland, Stefano Mirti, Interaction Design Primer (vol. 1), Postmedia Srl, Publisher, Milan, 2006. Stefano Marzano, The new everyday: views on ambient intelligence, 010 Publishers, 2003.

ON LINE Bruce Tognazzini, Magic and Software Design, "Principles, Techniques, and Ethics of Stage Magic and Their Application to Human Interface Design", Proceedings of INTERCHI, New York, 1993.

24 ::


Design of the booklet, photos and illustrations by Simone Capano.

TYPEFACE Chapter headings: Anonymous Pro Bold, 11 pt. Main texts: Anonymous Pro Regular, 11 pt. Quotations: Anonymous Pro Italic, 11 pt., Anonymous Pro Bold Italic, 10 pt. Capions: Euphemia UCAS Regular, 9 pt. Anonymous Pro is a family of four fixed-width fonts designed especially with coding in mind. Developed by Marc Simonson, it is based on Anonymous 9, a freeware Macintosh bitmap font developed in the mid-'90s by Susan Lesch and David Lamkins. Anonymous Pro is distributed with the SIL Open Font License. Anonymous+Pro Euphemia is a family of three fonts designed by Ross Mills from Tiro Typeworks. They are available with free end-user licences in TrueType-OpenType format (.ttf).

SOFTWARE Booklet layout: Adobe InDesign™ CS5 Photos and illustrations: Adobe Photoshop™ CS5

This is not a trash can  

A booklet about the use of metaphors in interaction design.

Read more
Read more
Similar to
Popular now
Just for you