Interaction with artifacts Interaction through artifacts An interaction design booklet
Raffi Tchakerian
Interaction with artifacts Interaction through artifacts An interaction design booklet
Raffi Tchakerian
Declaration of originality I submitted this document for the exam on January 14, 2010 of the Interaction Design Theory course 1 (Teorie dell’interazione) given by Gillian Crampton Smith with Philip Tabor at the Facoltà di Design e Arti, Iuav University of Venice. For all word-sequences which I have copied from other sources, I have: > reproduced them in italics > placed “quotation marks” at their start and their end > 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: > the creator and/or owner of the image, and > 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.
Raffi Tchakerian January 11, 2010
Index | p.5
1 Introduction What is interaction design? | p.7
2 The fountains of opportunity Brainstorming | p.9 Interview | p.11
3 Crucial considerations Affordances | p.13 Mappings | p.15 The metaphors | p.17
4 Multidimensional Beings Datasets | p.19
5 How shall I begin?
Storyboards | p.21 Flowcharts | p.23 Paper prototypes | p.25 Video prototypes | p.27
6 Future of interaction design Towards an unmaterial world | p.29 Bibliography & Sources | p.31
1 Introduction
What is Interaction Design?
fig.1 center left Bell system, Touch Tone Telephone 1964. fig.2 center right Apple Iphone smartphone 2007
My interpretation to what interaction design could have been prior to the “Interaction Design Theory” course was quite different, even though in what I am about to write traces of my old interpretation will be clearly perceptible. I am a product design graduate student in the university of IUAV of Venice, and how I interpret everyday life and its aspects depends mostly from this fact. My work is related with tangible objects, whether they are static, dynamic, interactive, and architectonic. Even though one of the first things that the interaction design theory course communicated, was the fact that interaction design regarded “computer and information technology, having computation as its medium” (Interaction-Venice.com What is Is interaction design ), there were many non-computer related examples used to make us apprehend the “discipline”. Taking the oven example found in the “natural mapping” chapter of Norman (Norman 2009, 103) which was illustrated during the course, clearly this example can be related directly to the etymologic significance of the word interaction itself. “Reciprocal action, effect, or influence” (Dictionary. Interaction) definition found in most of the dictionaries, I turn the gas tap and I have fire, although Norman uses the oven example to illustrate the mind mapping concept, I just wanted to use this example to demonstrate that the fact remains that it’s in the boundaries of human-machine or human-artifact interaction, whether the artifact has an electronic interface or mechanic one like the gas taps. There are many other examples like the water tap example, the actual discipline itself is based on almost 20 years of study, evolved and manifests itself in our current day objects which are mostly “intelligent” and digital, computers, mobile phones, automatic ticket distributors etc. For what I have learned regarding the figure of the interaction designers, whatever the final artifact they want to design, they need to have a preparation regarding the “psychology of human-machine interaction”. (Norman 2009, 229).
7
2 The fountains of opportunity
Brainstorming
fig.3 all page Brainstorm interaction design loves & hates exercise
“Pressure makes diamonds” (thinkexist.com) quoted by WWII general George Smith Patton, as much as diamonds are valuable, so are creative ideas for us designers. Combine pressure as we had during our IxD theory course with a Brainstorming activity and its outcome would be among many other things, is infect creative and potential ideas. One of many rules that we had during our brainstorming exercise was to be as free and limitless as possible, the only rule was not to censor anything, we had to open our brain taps and let all flow, it was more about quantity then quality, even if it’s possible to do it singularly doing it in group was quite effective, and infect between 30 to 40 examples came out in our particular exercises’ case which was a list of interaction designs that we loved and hated, and at the end of the exercise we had to choose one particular example that we loved and another hated most among all found examples. A mistake that was continuously repeated and our instructors avoided us doing was, censoring first ourselves and thinking too much being afraid to tell something foolish, and second was how every single person tended to censor one another on this same problem. With brainstorming as one of the first phases to design something new, we obtain quite large number of ideas, which later on are filtered, eliminated, and others combined.
9
2 The fountains of opportunity
Interview
fig.4 all page Do a participatory interview exercise
How would you find your way in Venice if your are blind? the answer to this question and others to follow can be seen in fig. 4, this questions were asked during a “Participatory interview� exercise to a hypothetical blind person. Although the questions were made up, they were based on some realistic situations. The intent of an interview with a possible future user or target, is to excavate hidden design opportunities that we designers could only imagine or make up, but in reality there are certain details that we will never come to find out on our own, without personally living similar situations. Interesting how only in our case with a hypothetical blind person, we came to find out that there are certain opportunities that until current day remain unsolved. It was quite surprising when I did the same exercise at home, where my interviewee was an old mother that lived alone. As much as I would have imagined myself in her shoes, it was impossible for me to think of the opportunities that she told me about, where she felt alone at home and at an age of 67 she was trying to figure out how to use a computer, to be able to see and hear her sons who were living abroad. Her main difficulty was the modern day technical language, she expected it to be much simpler.
11
Bad affordance Train timetable > what
time is it?
ACTV ticket machine
> how do i validate my ticket? > what are the buttons for?
Lift for wheel chairs > no comment
Good affordance Trashcan
> throw it here, the message is clear!
Computer mouse
> knows how to be handled
Assisted affordance: doorbell > little to comment
3 Crucial considerations
Affordances
fig.5 all page Hunt for affordances exercise
A quality in which the physical and perceived characteristics of an artifact or environment influence its way of being used. Affordance a word originally made up by the perceptual psychologist J. J. Gibson (Gibson 1979, 127), and later on acquired its modern meaning thanks to Donald Norman ”[…]When affordances are taken advantage of, the user knows what to do just by looking[…]” (Norman 1990, 9) we have 2 types of affordances “[…]real and perceived affordances[…]” (Norman, jnd.org) the real affordances are the true and physical affordances of an object, while perceived ones are how a user sees the affordance offered by a particular object. We can talk about affordances either in the physical world for example the case of a cup that it has e particular shape and invites you to grab it in a certain way, or a flat plate mounted on a door that invites you to push the door. During our IxD course we were given an exercise where we had to search for artifacts that had good and bad affordances, examples can be seen in the fig.5. An interesting thing of this exercise was that we also brought examples of bad or good affordances that had to do with interfaces. Interactive interfaces do have affordances for, example a virtual button that invites you to push, but given that the term affordance refers to the properties of a physical object (see Norman, jnd.org) these affordances are based on knowledge of affordances of a button based on real physical buttons.
13
3 Crucial considerations
Mappings “Mapping is a technical term meaning the relationship between two things, in this case between the controls and their movements and the results in the world.” (Norman 1990, 23)
fig.6 left Light switch panel with a map where the switchs placed on the map corrispond with the places where the lights are really found
To briefly illustrate the concept of mapping it’s enough to look at fig. 6 on the left, as we see we have a light switch panel of the church of “San Lazzaro degli Armeni – Venice”, it clearly demonstrates the relation between the “two things” mentioned above with Norman, the light button and its spatial location, even without reading the written indications its very easy to turn on the light of a desired location. Just to explain it better, suppose the same light switches are represented as seen in the fig. 7, which one would be easier to understand and use? Norman explains the fact that the better the natural mappings are, less information is needed to be memorized, and without a good mapping, the user cannot readily determine which light goes to which control (see Norman 1990, 75). The principles of mapping are valid both in the physical world and in world of interfaces.
fig.7 right Another example of a switch panel this time without a map and only some written indications
Chapter x 15
3 Crucial considerations
The Metaphors "People understand and interact with systems and environments based on mental representations developed from experience"
(Lidwell, William, Butler 2003, 130)
fig.8 center Brainstorm a metaphor exercise
Exactly by taking advantage of this experiences in 1974 Tim Mott (see Moggridge, 19) introduced what we know today as the computer desktop. For example By putting an icon of a trashcan used for desgarding unwanted files, the real world trashcan experience permits us to use this virtual one for the same reason, a place where unwanted files and documents finish. He simply took the office situation and transformed it into a metaphor, we came to understand it and started to use it properly thanks to our real world experiences. Even though computers are no longer an exclusive office instrument, yet still the desktop metaphor prevails. During our IxD course we were given a task where we had to find a new metaphor instead of the desktop, what we had as a subject the kitchen, so we just started in listing all the kitchens instruments followed by categorizing them as seen in fig. 8, to the needs of a computer user. Just to give an example honey was what we used to paste our files.
17
4 Multidimensional beings
Datasets “The design of statistical graphics is a universal matter like mathematics and is not tied to the unique features of a particular language” (Tufte 2007, 11)
fig.9 all page Rewiring the Spy applet screenshot which is about whether blogs and wikis could be used by agencies like the C.I.A. and F.B.I. to combat terrorism. The visualizations create a three-dimensional space in which the physical relationship of actors, weapons and targets suggest their level of connection in an attack. 2006
It has passed around 28 years since the above mentioned line saw light in the publication of Edward Tufte, an American statistician and information design expert among many other things at the Yale University. Even though the “statistics” being represented is only a micro-portion of the whole deal, today this universal language surrounds us in everyday life, the quantity of information that flows around is exponentially expending, and the presence of a figure responsible in organizing this information is crucial. Today not only we are evolving into beings with multitasking capabilities, but we have mastered the ability to look into an information world of many dimensions, thanks to the representation of this information that it itself has evolved from simple letters to containers with time and spatial dimensions. We owe our capabilities to important historic figures like, Playfair, Minard, Snow and many others, those who were responsible of putting the first keystones. Today, as the ICT horizons are widened, new tools are emerging to better organize and represent the info. “Cosmos” and new devices on which these information need to be organized. During our course we had the possibility to enter and play with this “cosmos”, having exercises that dealth with static and dynamic representation of information. The role of interaction designers is clearly noticed when it comes to building dynamic data representations, not only there’s the need to translate concepts and data into clear and multidimensional graphic appearances but an important factor is to design the interaction between the users or the “stakeholders”, and design the interactions between the multi-dimensions themselves.
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
5 How shall I begin?
Storyboards “A method of creating imagery, emotions, and
understanding of events through an interaction between a storyteller and an audience.” (Lidwell, William, Butler 2003, 186)
fig. 10 Storyboard of ACTVenessian (The Movie)
There are many ways of telling a story, the simplest way is just to explain it orally, another way would be to write the story down so others or the “audience” could read it, a third manner is to add some drawings to this written story where they could initially start with simple lines to become color rich representations of the story and its context, eventually at a certain point the text would no longer be needed and one would simply follow the story thanks to these “sequence” of drawings. Storyboards which are boxed sequences of sketches are commonly used in the cinematographic field, whether they are movies or cartoons, they are used to better explain a particular scene and communicate its events, so it can be passed on to the various movie departments so they can later on shoot the movie. If in the cinematographic case the “audience” is the various departments that need to visualize how would a certain scene look like, what camera angles and shots are needed and what are the sequence of events, in the case of us designers the audience could be let’s say the client. Supposing that we have designed a certain device or interface and we want to communicate the way it works, or the way you need to interact with it, or simply its context of use, we use simple sketching methods to design this sequence of events, where it’s also possible the use of some text to better explain what’s happening. During our IxD course we used the storyboard 2 times, in the first case we had to represent a coffee dispenser, and by using the storyboard method we showed how our product looked like, how it interacted or “behaved” with its user, and in what environment it was found in. Whereas in the second case the storyboard represented the movie scenes that we had to shoot about our product.
21
Person detected?
5 How shall i begin?
Flowcharts A flowchart allows to visualize the logical sequence of events in a given process, whether it’s a computer program, business actions, or simply as we did during our course, in what manner “Pasta alla carbonara” is obtained. As we notice a flowchart can have many uses indicating clearly in any desired process actions questions and decisions. A flowchart is necessary to be able to design every step in any product, where it’s a physical action done by a machine or simply a page in a dynamic interface. In fig. x a flowchart indicates the process of a “Coffee dispenser” which infect was one of our home assignments. Ironically following the “story” or the process we will see that the machine will end up asking a product from the user instead of giving one to him. If we try to analyse the code of some software or let’s say a robot the only difference that we will notice that the code or the written commands aren’t in plain english but a programming language, what remains the same is the logical sequence of events. fig.11 all page The flowchart of one of our home assignments indicating the process of a coffee dispenser.
23
5 How shall i begin?
Prototypes “The use of simplified and incomplete models of a design to explore ideas, elaborate requirements, refine specifications, and test functionality” (Lidwell, William, Butler 2003, 158)
fig.12 all page Scenes of ACTVenessian video showing the paper prototypes the packaging, device, and interface.
The above mention reference also talks about three kinds of prototyping: concept, throw –away, and evolutionary. I’m not going to enter in details, but from these three what particularly interests me is the concept prototyping, which I’ll talk about in a min. During our IxD course, it was already known that we were going to end up in creating a video prototype of a final product, but before that it was necessary to have a product or at least a prototype of it on which the video had to be based. Every individual was to chose among 4 given subjects and later on present a concept in class. Followed a group formation where every group had to chose one of this many concepts and eventually elaborate one. The concept upon which I worked with my group was a smart navigation device for the water transport system in Venice called ACTVenessian. As a student from the product design faculty, prototypes are quite common, and there are off course many levels of it, we usually start with paper or cardboard ones which are quite easy to make and they give you more or less the impression of your products dimensions, I would call it a protoprototype, what was new to me that in the case of our Interaction-design course we had a second prototyping level upon which we had to concentrate, it wasn’t enough to create the form of our product but being an interactive device it had to interact. Here comes the role of the abovementioned Concept prototype, where we don’t really have an artifact but merely storyboards of an interface that once used in the correct manner in the video or stop-motion technique they could be useful to uncover new opportunities regarding your interface. As we see storyboards have many uses.
25
5 How shell i begin?
Video prototypes
fig.13 all page Video-prototype final exercise timeline snapshots
Before starting our video prototype there were a few things to do which off course I mentioned in the section before. We had to have a concept, it had to have a form and an interface, we needed to know how the interface would work so we had to have some kind of a flow chart, then this was to be presented in storyboards which would then be used in the final video. After we had our prototype in hand we had to think of shooting the movie, so storyboards were also required there, which can be seen in the “storyboards” section on page. 20. prepared all this, we were instructed to shoot all in around 2 hours, because it wasn’t a professional movie, but simply some shots that would have explained how the product itself was handled and used. In fig. 13 we can see the screenshots of our video-prototype timeline, showing what was the problem, what was the solution, how did the user acquire the device, how would she use it, showing in a stop motion changes in the interface. In our particular case the old granny “Sara Passalacqua” not only acted but she also talked and explained her problem, and being all in venetian language we used English subtitles to explain to the viewers what was happening. Very small editing was done to stick the video shots together. This final exercise was a container of all the disciplines and methods that we learned during our IxD course, starting from brainstorming going to personas as our old lady that had certain characteristics being quite old, having a dog, having friends around in venice that she wanted to meet, a story of her own, then we also passed through flowcharts and storyboards, and arrived finaly to the prototypes.
27
6 Future of interaction design
Towards an unmaterial world
fig.14 top Honda Their new brain-machine interface letting the user control the robots movement by thought. 2009 fig.15 bottom Project Natal A new 3d camera letting users interact with machine using their whole body as input. 2009
As time goes by devices are evolving from getting to small to vanishing completely, what we could witness in the near future is the total absence of devices that permit us to interact with the info. Cosmos, from advanced censors, to brain-machine interfaces fig. 14. Another interesting and revolutionary example Human-Machine interface is Microsofts Project Natal. A new controller initially destined for their gaming platform the XBOX 360 and soon for general use, it’s an special camera-sensor that can detect 48 body joints fig. 15, and it has also voice and facial recognition features. It’s not too far where virtual realties will get almost physical realties, simple objects that surround us will act based on how we physically move or command who knows maybe also how we feel. All that was mentioned in this booklet was about the tools, methods, and techniques that was transmitted to us students during the Theory course of interaction design, some I personally was familiar with coming from the product design program, and some were quite new for me, all these were fundamental tools that invited us to go deeper and more profound to explore the bottom of the iceberg, where many disciplines await from sociological ones to psychological, which will permit us to master the design of interactions to deal with the yet to be invented platforms and devices.
29
Bibliography & Sources BOOKS GIBSON, J. J. 1979. The Ecological Approach to Visual Perception. Boston: Houghton Mifflin. LIDWELL, W., KRITINA, H., JILL, B. 2003. Universal Principles of Design. Gloucester, Mass.: Rockport Publishers. NORMAN, D. A. 1990. The design of everyday things. New York: Currency Doubleday. NORMAN. D. A. 2009. La Caffettiera del Masochista – psicopatologia degli oggetti quotidiani. Prato: Giunti Editore. TUFTE, E. 2003. The Visual Display of Quantitative Information - Second Edition. Connecticurt: Graphics Press LLC. SITES http://www.interaction-venice.com/courses/Theory1/Theory1_uploads/2008/12 /T1.S00_09-10T1_What-is-IxD.pdf http://thinkexist.com/quotation/pressure_makes_diamonds/147753.html http://www.jnd.org/dn.mss/affordance_conv.html FIGURES fig. 1 - http://www.flickr.com/photos/davepolaschek/3592253726/ fig. 2 - http://images.apple.com/at/iphone/gallery/images/ photos-software-phone-20090608.jpg fig. 3 - This exercise was done in group with: Caterina Marzolla, Dario Martini, Marta Ferrari, Raffi Tchakerian. fig. 4 - This exercise was done in group with: Dario Martini, Dorotea Panzarella, Idoia Mendiola, Isabella Loddo, Raffi Tchakerian . fig. 5 - This exercise and the photos used in it were done by me, Raffi Tchakerian. fig. 6 - The photo of the light switch panel was done by me, Raffi Tchakerian. fig. 7 - http://farm1.static.flickr.com/69/168247141_0a04c34390.jpg fig. 8 - This exercise was done in group with: Caterina Marzolla, Dario Martini, Dorotea Panzarella, Isabella Loddo, Raffi Tchakerian fig. 9 - http://jamesnsears.com/applets/spies/ fig. 10- The following storyboards were drawn by Sara Passalacqua and were used to make the video prototype of ACTVenessian, the other members of the group were: Paolo Gabai, Raffi Tchakerian. fig. 11- This was a home assignment therefore was done by me Raffi Tchakerian, initially manually then redesigned for the booklet. fig. 12- for the ACTVenessian movie, Sara Passalacqua was the old Granny, Paola Gabai was the post office worker, and Raffi Tchakerian who can't be seen was the cameraman. fig. 13- see fig. 10 and 12. fig. 14- http://www.gizmag.com/honda-asimo-brain-machine-interface31 mind-control/11379/
Colophon
FONTS Cover Titles: Helvetica regular by Linotype, 24pt, 14pt, 13pt Index Titles: Rotis Sans Serif 75 Extra Bold by Monotype Imaging, Inc., 14pt Index Sub-titles: Rotis Sans Serif 55 by Monotype Imaging, Inc., 12pt Chapter heading: Rotis Sans Serif 65 bold by Monotype Imaging, Inc., 18pt Main Titles: Rotis Sans Serif 75 Extra Bold by Monotype Imaging, Inc., 26pt Main text: Garamond Regular by Monotype Typography, Inc., 12pt Captions: Garamond Italic by Monotype Typography, Inc., 10pt Figure details: Rotis Sans Serif 55 by Monotype Imaging, Inc., 8pt Page number: Rotis Sans Serif 55 by Monotype Imaging, Inc., 14pt SOFTWARE Booklet created by using: Adobe® Illustrator® Adobe® Photoshop® Extended Microsoft® Word® 2007 PRINT The booklet is printed on 100gr/m2. paper in four-color process CMYK using a Canon laser printer .
The current booklet was made for the "Interaction Theory 1" course held by Gillian Crampton Smith & Philip Tabor. IUAV University of Venice Arts & Design Faculty