Interaction design Theory IUAV 2012 by Alessia Longo

STEPS ALESSIA LONGO

7 STEPS THROUGH INTERACTION DESIGN Alessia Longo

I submitted this document for the exam on 17/02/2012 of the Interaction Design Theory course (Teorie dellâ&#x20AC;&#x2122;interazione) given by Gillian Crampton Smith with Philip Tabor at the FacoltĂ di Design e Arti, Iuav University of Venice. For all word-sequences that I have copied from other sources, I have a) reproduced them in italics, and b) placed quotation marks at their start and their end, and c) indicated, for each sequence, the exact page number or webpage URL of the original source. For all the images which I have copied from other sources, I have indicated: a) the creator and/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 myself. Alessia Longo 20.01.2012

HOW I SEE THE INTERACTION DESIGN

INTRODUCTION

We face with the Interaction Design every time a person, a user, gets in contact with a system. The behaviours, the reactions, the ways the user relates with the object of the interface, how easily he can integrate the devices in his daily life and all the relations that the user has with the object of study are interesting subject to look at. It’s not product design even if products can be designed. It’s not graphic design even if communication is at the basis and it’s not computer science although computer and software are used. The Interaction Desing looks at the behaviour and this means that it depends on the context of a specific category of people, a specific place, a specific moment at the moment of studying. The interaction/behaviour is not universal and it is constantly changing. On one hand the Interaction designer can study existing behaviour, improving the bad interactions with we relate everyday and, often unconsciously, that make us waste time or just don’t help us in reaching our points. On the other hand the designers can create new ways of using existing (or maybe not) objects, new habits or new gestures that slowly can be learned and repeated in our everyday life. Interaction Design is a subject that keeps on evolving and that grows, thanks to each subject, and that can improve the relation between the user with the system he is surrounded by.

There’s an old joke between designers: “It’s not a problem. It’s an opportunity”1

The studies and researches have the aim to lead the technology go silently into people’s life, being sure it is always comprehensible, easy to learn and that respects the pre-existing conceptual models in order to be usefull. I would personally describe the Interaction Design through a process of seven maint actions: - setting up - research - elaboration - reinvention - discussion - innovation - identification Through this small guide I will talk about these steps, their functions and how each of them is essential to the creation of a good design. Every step is completed with an excercise done during the course “Theory of Interaction Design” held at the Facoltà di Design e Arti, IUAV University of Venice by Gillian Crampton Smith with Philip Tabor.

1. Dan Saffer, Design for Interaction (second edition), 2010, Giunti, p.53

DESIGN AN OPPORTUNITY

SETTING UP

WHO AM I DESIGNING FOR?

- Business and professional men and women that go often in new cities for meetings and conferences. They are from 35 to 55 years old, they often partecipate to these meetings so their lugguage is basic, small, with only the strict necessair. Probably they will have a bag to carry a notebook and documents They are open minded enough to want to meet people to spend a different evening with or to talk about affair.

HOW DO THEY SPEND THE EVENING?

- They usually eat alone, or with few people they know there, have a walk in the new city and go to sleep soon because they have to work the morning after.

HOW LONG ARE THEY GOING TO STAY IN THE CITY?

- Only the days of the conference, usually two or three but, in any case, not more than a week.

When a client comes to knock on the door of your studio it means that he faced with a problem and he is looking for a solution. Is not always easy to recognize what is wrong in a system or an object and, often, the brief that the client brings to you can be pretty vague or not clear. So the first, essential, step to do is to observe the situation, frame the problem and, if necessary, rewrite the brief so it is clear where to begin. Observe the people within a situation helps you to get a clearer idea of their habits and, maybe, to discover unexpected sides of the problem you haven’t thought about. After that it is possible to go back on the brief and, if necessary, change it to fit to the new requests. A good brief is the starting point for a good design result and every problem you encounter is a possibility to improve the existing. To do so, you as have to enlarge your view so to establish the edges of your action and don’t make things more complicated than they really are. Once you know the border inside you can move you can concentrate on the details and study the situation from a closer point of view. It can be helpful for you to start trying to formulate questions and give the answer to begin to imagine on what you are going to work before to start gathering informations.

”Observation” is the best way to learn about people in the context of a particular design project 2

WHAT COULD THEY HELP THEM TO MEET SOMEONE NEW? - A device that will book a table in a random restaurant with people they don’t know.

WHERE ARE THEY SUPPOSED TO USE IT?

- In the room booked at the hotel where they will stay. In this way they don’t have to bring it with them all the time.

HOW DOES IT WORK?

- The user can pick a restaurant from the list and he can choose to go there by writing his or her name on it. The device will create and book tables with a maximum of 6 people from other Companies that are having a conference in the same city and the person can meet them there, directly at the restaurant. If he or she doesn’t want to meet anybody, can just leave it blank.

WHO ARE THE STAKEHOLDERS?

- The hotel where they are spending the night, the owner of the restaurants that will be informed of the reservation.

To start creating possibilities, I decided an hypotetical situation where I client asks me for a device for business men and women that travel a lot. The questions are related both to the users themselves, who they are and their habits, and to the application, how is it supposed to work, where it’s possible to find it and if there are other people involved. This could be a good starting point for thinking about the questions of the interviews.

2. Bill Moggridge, Designing Interactions. Cambridge: MIT Press, p. 665

INTERVIEW SOMEONE YOU KNOW

RESEARCH Name: Giulia Age: 75 years old Family: 1 daughter, 4 sons and 8 grandchildren Occupation: Retired What is the last job you did before retire? I’ve been a chef in a residence for priests in Riano, a part of Rome. For how long did you do this job? Since I was a little girl I used to cook for my brothers so I could say I’ve always cooked in my life! But... I worked there for maybe 30 years, I can’t remember anymore.t (laugh) Did your job consist only on cooking or you also did other things? Cooking for all of that people made me really busy and someone else were caring of the rooms, the clothes and so on but, when needed, we helped each other.

Only through research can designers find out 3

A good design answers to the users’ problems and, to make this possible, it’s necessary to hear what people think about a certain product or service or to make reserches on it. Researches will help you to understand in which environment our product will exist and how people will interact with it, especially if it’s a field new for you or you don’t know so much about it. There are different methods to gather informations that’s why is important to recognize which one suits best for your situation. To make interviews is only one possibility to collect data and it needs to be planned in advanced starting from what it is called hunt statement. In the hunt statement is clear what you are looking for and why and will also be helpful to stay focused on the purpose of the research. Then will be necessary to spend a bit of time finding the right people to interview considering the range of charateristics we want to look at, paying particular attention to the extreme that can arise relevant and unespected value useful to avoid to design for the average. Another important thing to consider is that, most of the time, people you recruit for the interview are not used to be looked while they are using an object or asked about their habits and preferences so the questions should conduct them to answer in the most relaxing way. It’s better to ask with a neutral tone of voice to not influence the answer and avoid the question that can be concluded with only a yes or no.

What do you think is strictly necessary in a kitchen? A lot of space to work on and a big fridge to keep all the food fresh. It’s essential to use fresh food for cooking, the result is way better, trust me. (smile) Was there something you wanted to change in your kitchen? The kitchen where I used to work was big but the lights were not enough so, in the winter time, was really hard to spend there all your day. What was the most frequent accident you had while cooking? Basicly the accidents happened because of the distraction, a lot of concentration is needed while cooking because you have to control a lot of things at the same time. It happened that I cut myself sometimes or I left the bowl too much on the fire, it’s the experience then that teaches you. And what is the most annoying thing that happen to you know? Sometimes I come back home from the supermarket and I realize I forgot something but my legs are not so young anymore (she touches her legs) to go back and buy what I need so I just wait for one of my son that kindly comes here and brings me what I forgot. Could you tell me one of your secrets? I don’t have these big secrets, I just never follow a recipe but my instinct and my grandchildren can guarantee about the result! This interview has been done to an old woman who lives alone now after a entire life surrounded by people. She doesn’t seems to be sad and talks about her past job with passion because it’s something she did for all her life. From this meeting is possible to understand Giulia’s needs when she was a young chef and now that she’s old and forget to buy things at the market. I tryed to avoid all the yes or no questions and to make a confidential tone so she could feel free to talk.

3. Dan Saffer, Design for Interaction (second edition), 2010, Giunti, p.74

3 If you can tell a good story about something, or spin a good metaphor, it makes sense to people 4

DESIGN A METAPHOR FOR YOUR MONEY

ELABORATION

The best way you can lead someone understand your idea, especially if it’s abstract, is to use a metaphor that can describe the process you are thinking about. The most famous metaphor we deal with every day is the desktop of our computer. We maybe don’t pay so much attention to it now, but at the beginning it wasn’t so obvious how to allow people understand what was going on inside a computer and what were the possibilities you had. That’s why Tim Mott and Larry Tesler came up with the desktop idea, a metaphor that perfectly describe the mechanism behind a computer. In the same way, when you reach a certain point in your project, you may need to find a metaphor to make our system comprehensible first from our client and then from the users. The metaphor is a perfect tool to be aware of how every part reacts when an action is done so it’s easy to understand if everything works well or if there are problems. To find a parallel way to describe your idea that really suits with your work it’s often a big challenge because something that seems to be appropriate can then show bugs on the way to represent the system. In this case it’s important to be carefull to not to change or force the project just to make it fit with the metaphor: the metaphor is only a tool through which explain the system so, if it doesn’t work, just keep on searching.

GASOLINE - PARENTS The most gasoline I have, the farest I can go.

MAINTENANCE - FREELANCE Checking my scooter often make me sure it will work for a long time.

Picturing our financial situation made us faced with the big challenge of the metaphor. It wasn’t easy to find something that could represent the right system without forcing it but, in the end, I chose the scooter metaphor where my parents are my fuel, without them I can’t go anywhere. My small freelance job is like the maintenance: it helps to take care of me and the accessories are the presents or the savings I have with which I can buy the extras.

ACCESSORIES PRESENTS & SAVINGS With the right accessories my travel will be safer and more comfortable.

4. Bill Moggridge, Designing Interactions. Cambridge: MIT Press, p. 131

PICTURE A SMART ENVIRONMENT

REINVENTION

Advanced technology has to offer to the user the advantages of their use without highlighting the complexity they assolve 6

Once you understand what you are looking for, you can start designing your product following your personal way (or, better, the way that the project needs to be approached) of thinking and working as an interaction designer. You can think about it in term of technology usability in order to let people understand what programmers and engeneers have created (Technology-Centered View); you can look at the behaviour of people inside a system, in a specific environment, and try to simplify it or change it (Behavoiurist View); or you can study the interaction between people focusing on how they get in contact each other, no matter the devices they are using (Social Interaction Design View). Whatever your reason is, many different aspects of the situation need to be kept under control from the user-experiences to the aspect of the object, from the interaction design to the sound design for example. In this part of the design process you have all the data from the interview and your aim, through the observation of them, is to create or re-create a perfect environment where your user could live in as an ambient intelligence. An ambient intelligence is thought to have all the technology a person needs, embedded in your tool, in your everyday life without being intrusive. Ideally, the user should naturally use the connections the environment offers to him without even think they exist. After that, you can start thinking of the carateristics of the object.

This exercise was about thinking of an Ambient intelligence that we would like to live in. I pictured a system of auto-illumination of the room that gradually switches on when itâ&#x20AC;&#x2122;s time to get up (of course you can set it). I also thought about my pleasure of waking up with my favourite radio programm so a loudspeaker starts to play the radio and I set a panel close to the closet so I can check when the next bus is coming and the weather forecast for all day.

5. Aldo Attilio Epasto, article for the Vega Journal, UniversitĂ degli Studi di Perugia, December 2009 http://www.vegajournal.org/content/archivio/49-anno-v-numero-3/137-ambientintelligence-per-lapprendimento-e-la-condivisione-della-conoscenza

5 When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed 6

HUNT AFFORDANCE

DISCUSSION

One of the biggest point on designing an object is the study of the affordance for every part of it. People perceive things depending on their possibility to be used so it’s essential to let them understand which is the correct way immediately. A bad affordance could make people think they just can’t use your application or object and they will give up on it and maybe feel responsible of the failure. When the affordance is perfect, instead, the user knows exactly what he needs to do just looking at it. Looking at the affordance means to be sure that the attributes of the thing convay a message appropriate about its usability and it doesn’t have to be confused with the Perceived affordance that, for instance, involved touch screen displays: all the icon we can click on it are just perceived to be clicked because we know what happen. The real affordance is part of the screen we are touching. To help the user, Normann talked about three type of constraints: - Physical when, for example, two objects can’t be joined because of their shape. The number of actions a person can do is limited; - Logical when there is a spatial relation from two buttons and the two lights they controll or when you can’t do any more action but that logical one (mapping); - Cultural when a range of conventions are socially recognized by a culture (like reading or writing from left to right).

These drawings show examples of bad affordance: In the first one, the watch, the weel to change the time is clearly to rotate but only by trying you can see you also need tto pull it outside and then rotate. The other one, instead, the Venetian blind, has an hard stick to rotate to have more light (or less) and two strings to open completely the curtain but none of them can be understood only by looking.

In these cases the objects drawn have a good affordance because you get immediately the function of every piece. Let’s think about the basket: the pedal at the bottom it’s a clear signal that you have to press there, presumibly with your foot (it wouldn’t be natural to do it with the hand) and the opening of the basket is the feedback we have from our action. The egg timer has the minutes at the hight of the line and a small triangle that indicates the position of the timer. All you have to do is to rotate the top until you reach the time you desire. Clear and simple.

6. D.Normann, 1988, cit. made by Mads Soegaard on his article “Affordance” http://www.interaction-design.org/encyclopedia/affordances.html

DESIGN A COFFEE DISPENSER

INNOVATION

The main benefit of storyboarding is that it illustrates what the interface would do or how it will behave in response to user input 7

Connected to the discussion about the affordance, there is the principle of natural mapping that shows the user the correlation from what seems to can be done and what you can really do. The right mapping can avoid the user to remember the sequence of action needed to make something work and he doesn’t need to learn by doing mistakes but only by interpretating the informations suggested. One example could be a panel control of an airplan, plenty of buttons where is hard to understand and remember what they control. A powerful method to visualize the ideas is the use of notation so that we can abstract some elements and work with them to better understand how they should work. This will bring you to the creation of a scenario and sketches or quick models that don’t need to be precise but only clear enough to understand the main functions and give you the possibility to draw a storyboard. The storyboard should be done by original pictures or drawing (sometimes with small text also) of the key moments of the interaction between the user and the product so to clarify complicated functions. Right after that (but always keeping in mind that is often necessary to come back), there is the need to build a flowchart in order to have the right sequence of actions to do in the easyest and fastest way. It’s really easy, then, to check if the order of input put inside the system is logic or needs to be reviewed and changed.

To draw a new coffee dispenser, I started from a sporty mood where, to have a coffee, you need to run, jump, rise your arm. The flowchart is useful to understand the sequence of actions requested meanwhile the storyboard is used to verify these actions and to keep an eye to the affordance so that everything doesn’t become overcomplicated.

7. Description of a method of storyboarding on http://www.usabilitybok.org/methods/storyboard

PROTOTYPE

IDENTIFICATION We built a prototype of a usb key, with a key shape and we called it Fun-K because we wanted to help people (expecially students) to meet other people. We wanted to keep the surprise of a new meeting, that’s why the key reacts when it finds another key with similar fields filled but you need to go there and talk. The prototype is made by cardboard and we recorded a video in which we simulated the functions and the interactions when another Fun-K is closed. Here there is the storyboard.

Prototyping is where, finally, all the pieces of the design come together in a holistic unit [...] they are a tool for communicating 8

At this point of the designing process, it’s time to start prototyping the product or service and it will be possible to make your idea concrete. You can focus on that particular aspect that you are not sure about and then be aware of which is the best solution. The first prototype of a project is a low-fidelity one and it is used only to control the main functions and it can be done with everything can help to recreate the object. There is the paper prototype, the fastest one, made to turn post-it or pages to see what happens by clicking, dragging, pushing, and so on. Another technique is called Wizard of Oz where a designer or a developer is hidden and work to let the user feel that the system is responding as is supposed to. At this stage you can also do a rough video of your prototype simulating the result. Going on with the refinment, the prototype has to become closer and closer to the final product that you can hardly distinguish the two of them (high-fidelity prototype). This one is usually expensive and it takes more time to build so your expectetions could be really high from its result but just keep always in mind that is a fake, a way to understand the good things and the bad ones, a prototype. When everything is fixed you can start testing the object with the final user. It’s like the research phase and it’s better to be done in an environment where the person is going to use your product, so you can look at them and make a report of the experience.

The first thing you do is to set up your informations and what are you looking for.

When Fun-K finds another key with similar interests, it starts vibrating and emitting a “bip” sound.

If you two like each other, you can join the two keys so to share your informations.

Once you come back home, you have the list of all the people you’ve met that day like an elettronic agenda.

8. Dan Saffer, Design for Interaction (second edition), 2010, Giunti, p. 174

THINGS I HAVE LEARNED SO FAR

CONCLUSION

BIBLIOGRAFIA Trying to explain the interaction design process, helped me to better understand what is the complexity of this subject. For the aim of this book I left outside some always basic concept like the mental models, the importance of the brainstorming, the variety of ways to represent the data or the role of a persona. The steps described are only a macro view of all the entire workflow and, in the reality, is not going to be so linear and easy as I wrote. At every stage you have to look backward and check that everything is going on the right direction, keeping in mind the brief and, if at one point you realize to be gone in the wrong direction, you might go a step back and correct the mistake. It is a constant updating work that implies a wide view of the world, on one hand from far away to understand the whole situation and, on the other hand, closer and closer until you solve that small annoying interactions that affect our lifes. This means that also the knowledges required to do a good job can be totally different and that’s why is so important to work in group and share your informations to reach the best result. It’s foundamental to be curious, to observe, to be critic and, even if sometimes it seems that two points have nothing in common each other, a goal for a designer is to find connections where other people can’t and that is the moment where new concepts, new ideas come to life and radically change the world.

Moggridge, Bill. 2007. Designing Interactions. Cambridge: MIT Press. Norman, Donald A. 1997. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Florence: Giunti. (Trans. of The Psychology of Everyday Things. New York: Basic Books. 1988.) Saffer, Dan. 2006. Designing for Interaction: Creating Smart Applications and Clever Devices. Berkeley CA: Peachpit. Scott McLoud. Understanding comics: the invisible art. Harper Collins, New York, 1993. http://www.slideshare.net/dansaffer/the-role-of-metaphor-in-interaction-design http://www.vegajournal.org/content/archivio/49-anno-v-numero-3/137-ambient-intelligence-per-lapprendimento-e-la-condivisione-della-conoscenza http://www.gold.ac.uk/media/04gaver.technologyAffordances.chi91.pdf http://www.cs.umd.edu/class/fall2002/cmsc434-0201/p79-gaver.pdf http://jnd.org/dn.mss/affordance_conventions_and_design_part_2.html http://www.usabilitybok.org/methods/storyboard http://www.usabilitybok.org/methods/p312 http://www.interaction-design.org/encyclopedia/prototyping.html

COLOPHON

Iuav University of Venice Master in Design Visual and Multimedia Communication

Interaction Design Theory1 2011/2012 Gillian Crampton Smith Philip Tabor