Interaction Designers: the Tools of the Trade

Interaction Designers:

the Tools of the Trade

Student: Giuseppe Burdo Professors: Philip Tabor, Gillian Crampton-Smith

Declaration of originality

I submitted this document for the exam on the seventh of January 2009 of the Interaction Design Theory 1 course (Design dell’interazione) given by Philip Tabor with Gillian Crampton Smith at the Facoltà di Design e Arti, IUAV University of Venice.

For all word-sequences which 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 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.

Index

q

i Introduction .....................................................................................................................................................

Affordance :: how we affect ::............................................................................................................................................. I Interview :: focus on user needs ::............................................................................................................................... II Flowchart :: the human-machine connection ::..................................................................................................... III Metaphor :: from connections to relations ::......................................................................................................... IV Dynamic Information :: custom visualizations ::............................................................................................................................. V Video-Pro to typing :: how the idea will work ::........................................................................................................................ VI Conclusions .....................................................................................................................................................

Source List ........................................................................................................................................................

Great. You have just created an interaction. How? It’s more simple that you can think. It’s about you and this booklet. At first you have looked it, then grabbed with your hands and opened it. The way that inspired you to do it, is called affordance from the Interaction Designers. After a quick view in visual and haptic aspects, now you are reading this text. Let me tell you that is just the star t.

Someone else has designed it before and other people were essential for making it possible: the teachers, the IUAV University, the other students, the typography, and a lot of other people and events more or less involved. Well, these can define context and stakeholders of an ar tifact. And how are possible all these relations?

Thanks to a certain behavior of course.

Till now we have talked about paper, but when did you write a paper mail for the last time? A communicative artifact is one of the most used way to interact and it can be firstly paper-based or digital-based. Interaction Design studies the how before all the related subjects. That’s why it’s very useful for expressing our ideas, and here are presented the basis. What will you find here?

This bundle edition is composed by this booklet, a cd-rom with the pdf edition and the tools: pennarelle, post-it, masking tape, A3 sheets and something else as the ruler for the magnet-closing.

The booklet tries to explain you in a face to face way how to use these tools and how to apply several methods learnt in the first Interaction Design Theory course.

For any comment please send me an e-mail to giuseppe.burdo@gmail.com Enjoy It XD!

q

Introduction

Good

.a

.b

.c

.e

.f

Bad

.d

Affordance :: how we affect ::

“We are constantly get in touch with a lot of environment signals, and even if endless, we interact only with a part of them: for that reason we are able to interact with a series of oppotunities, not just a not well defined stimolous. These are called affordance”1. More generally the affordance is “some characteristic which suggest 2

you how to use an object” . How many times have you pulled a door instead of pushing it? Well, it’s not your fault except if you are drunk. Sometimes we read a shor t text close to the form, that is a trick. For good design the user has to know quite soon how to interact, then what he can do with this object.

Look at the left images. Probably I’ve done a mistake telling what is bad and good for me. But they are just an example. There are several types of affordances, based on the culture, habits, ways of life. In addiction they responds to different stages of culture, from the most enactives to the symbolic representations.

Are you asking to yourself why bad in the second row? It’ comprehensible to realize what doesn’t work in a product aged more of me, but often also new ones make me think. The first one is a tv remote control. The bigger buttons on the center are unable to use, while you have to use the smaller ones on the bottom in order to change volume and channel. In the second one there are 2 wheels per command and they work in a different use: horizontal for the small wheel and ver tical for the display. Finally, where does the tape start? I assure that is on the front side.

.a common handle / .b nokia 3500 interface / .c scissors / .d remote control / .e oven alarm clock / .f hot-water heater

I

Interview :: focus on user needs ::

Interaction needs two or more people, who are person and user at the same time like two sides of the coin. Everyone is a person in the real life and a user when he takes par t in a technological system. The artifact which you are designing for is related to a user, who is a real person with his needs and desires. A good way is going out from your home and starting some interview to people who you are designing for. Sometimes a happy our or a shor t trip could be enough. Firstly it’s important to prepare the questions and after pay attention to the proxemic language, as the gestures. It’s also possible that while you are doing it, the interviewee will inspire you new questions.

Let’s look at left. In few days from the Venezia-Bari trip I asked to my mum about her relation to technology. Using the philosophy “be wide get narrow”, try to ask something in general in order to get answers that may reflect a mental model, a form of cognitive horizone. Remember to yourself the simple 5W rules of a news writer : What? Who? Where? When? Why? They could be useful and try to go in depth asking often why. Also the how question could tell you important informations. Underline the most important statements and try to put them in different categories such as ideas, discoveries, proposals, etc. If you are not satisfied from your interviewee, don’t give him the fault. Probably you have made bad questions. You already get the tools, be free to use pennarelle and the A3 sheets to take note.

Interview someone you know: Maria, 51 years old

II

Flowchart ::the human-machine connection::

You have 15 minutes to represent how the coffee machine works.

The flowchart is based on the boolean logic (yes or not) and you need just few rules to use it: start and end are in a circle, an action is represented by a square and a question by a rhombus.

This simple technique used in the primary school now seems to be very powerful.You can think about only what’s now, and what happens if you continue. When you have a question, you can tell just yes or not. While the statements became more and more, the challenge has just started. You have to think about every possibility for every moment...have you ever tried crashes on your computer? Well, this is the starting point of programming. In addition there are two way to work on, based on the machine view or on the human view.

The flowchart next to this page is a team work. While we were doing it everyone had a different way to think it. So...time was flying away and we were saying..but what happens now? Nooo! Let’s add a state. OK...let’s continue. And sugar? Why we cannot put it after selected? ...

There are different advantages using this technique...we are very complicated, and when we try to represent this mechanism, we retake a first simplicity for understanding. Another unexpected fact is that while we were showing it, we thought that something had to be improved. So, discovering the simplicity is a nice way to understand and create something new and satisfying always based on the user needs.

Getting a Cappuccino: Chiara Bertolin, Giuseppe Burdo, Alberto Moro, Giulia Orlando

III

$$$

purchases everyday costs pleasures [...]

occasional and summer work

rent fees

mum and dad

bankrupt

Metaphor :: from connection to relation ::

Have you ever printed before now? I hope so, if no...I’ll try to explain it. Let me start with a question: why to print? This one could be very personal, but for example..it is for showing better our ideas and eventually elaborating another bit to improve them. Another reason could be to transfer the results to a communicative ar tifact, understandable without our presence. Useful, not? Ok, we take for granted that we get a printer. But what happens without ink...and paper? Just white, that is a fine colour, but fortunately it’s not enough for most people. Think about all the products you have used from this morning, your satisfaction from their use, etc. How do you get them?

Here’s how I manage my money...just for now. I started with a basic budget and often I get something from my parents just for the essential expenses. Well, imagine this booklet in black and white...mmm, yes, it should work, but no as I want to.

A lot of time we need to give a tangible quality for making real our inspirations, needs and desires. Other times we have to work for the customers. Unexpected events are always around the corner : a bad use of the medium as being naive with others.

In any case I try to present them in the way that suits as better as possible.

Sometimes also a non living object could make we think.

Circle as cycle: printer - paper - black ink - coloured ink - printed paper translated to idea - collaborations - medium - product - more inspirations and so on.

Don’t forget to refill the cartridges when you need it.

Design a metaphor for your money

IV

Dynamic Information :: custom visualizations ::

Paper, paperboard, pennarelles, ideas. Did anyone use it from young? These are the star ting tools to present what is in our mind. As someone said “A picture is worth a thousand words”3, it’s more effective to draw it than try to explain something not finished yet.

How many lines of words can you write on a A4 sheet? 30? well...they should be a lot. And if you draw on it? How many “words” can you tell? Surely more.

And...if does someone want to see different things on the same paper? Is it a problem? It could be, but optimistic people like to say oppor tunity4. There are a lot of ways to show the same content, but in the first phases the ideas make the difference. The picture on the left is the evolution of a previous map where we rapresented informations for two type of stakeholders, but it was not interactive.

Focus on the these stakeholders that are the questionaire agency and the coffee machine staff, the creative process takes inspiration from the layers or more generally from a window. You have a basic structure of the IUAV University (except the classroom H) where you are able to see the different floors and doors.

Upon that, you have a holed sheet for every range of lesson with the appropriate teacher and the coffee bean. In this way you are able to see if there are lessons and who are the teachers. Thanks to an iconic visualization you get the informations quite soon. If you want to look at the other days, just shift the sheets. Fun and operative. Yeah, it’s just a sketch.

Represent a multidimensional data set - interactively: Luca Boscardin, Giuseppe Burdo, Luca Coppola, Silvio Lorusso

V

Video Prototyping ::How the idea will work::

What do you expect from students? You can demand ideas, trust, dedication, correctness and much more. But remember to not ask money, it could be a waste of time. This is a “quick and dir ty” method that allow you to have a fast and cheap way to present how the idea will work. It doesn’t matter if you are not a director or you’ll never be. It should be better if you do it in group, so that one or more acts while someone else is recording on. It’s nice to see also a face feedback, it makes your work more human and effective.

There are just few aspects to pay attention before the start: who and what is it for4. The result could be different in order to persuade different audience or just to have fun with other people. In reality, the first spectator is who does it because he probably has not a concrete idea yet. This phase is called exploring followed by testing and demonstrating ones. In addition you can avoid next impasses by previous sketches and storyboard.

Here are presented the key frames of the video prototype called “ABRACADABRA”, full recorded on the cd-rom. The project is about a kiosk information for students and stakeholders in IUAV. It shows itself as a table display. You can look for courses, timetable, teachers and interact to them sending an e-mail.

These are just few of the possible features. In order to reduce energy consumption, you can interact when you are enough close to it. So clap your hands and the play goes on.

VI

Video Prototype: ABRACADABRA Kiosk Chiara Bertolin, Silvia Boscolo, Giuseppe Burdo, Mario Ciaramitaro

Conclusions

Yeah, even if presented just few methods, it’s quite clear how this discipline is so wide. Inspirations, feelings, techniques are not just school subjects, but they are also starting points as ways of life.

The topics are in a sequence from the most enactive5 to the conceptual ones, trying to merge mind and ar tifacts, called sometimes body extensions in social studies6. The color graphics wants to remind how we affect the world from the long-lenght waves to the short ones, considering the dispersion of light form close to far, from red to violet. I have used a short bibliography because this one wants to be different from a thesis project, able to be suddenly ready for using it or general knowing for every-one.

As you can see a good Interaction Designer never forgets notions, methods, discoveries borrowed from other disciplines such as psychology, social aspects, user experience disciplines, human computer interaction, visual representations of the information, cinematic methods as video-prototyping and more on.

In addition, it’s nice to consider time and space where we are designing for : probably both the time and space are invisible. The first one because it’s difficult to predict the future and what will affect us, and the second one because we often, for not saying always, don’t perceive everything in our space.

So, merging a lot of stuff from the other disciplines with the ID criteria, it’s possible to add real possibilities for making real the inspirations.

In this sense, what is invisible can be visible, giving a tangible shape to the sensations and intentions felt before.

So, what are you waiting for? Let’s close me and star t to use the tools :)

Source List

1. On J. Gibson, Visuo-Haptic Interaction in Vir tual Environments, G. Burdo 2. Lesson slide on affordances, G. Crampton-Smith - P. Tabor 3. Picture vs. word, http://score.rims.k12.ca.us/activity/wor th/ 4. Lesson slide on prototypes, G. Crampton-Smith - P. Tabor 5. On enactive knowledge, ID Sketchbook - B. Verplank - fully download at http://ccrma.stanford.edu/courses/250a/lectures/IDSketchbok.pdf 6. On body extensions, http://www.interdisciplines.org/enaction/papers/7/4

experience fe e li ng f low map ping feedbac k i n s p i r a ti o n n e e ds des i re s prototype qua l ity exce pti ons synthesis muc h more new st o r y t e l l i n g p re s e n c e o bs er ve par ticipat e simulat e invo lv in g t hinking a l o u d in t e r v i ew quick and dir ty ro l e pl ay perso n a s modelling abst ract ing a c ti o n d i a g r a m s p i c tu re s m e t ap ho r i m p l em e n t a t i o n

behavior

e xpl ori ng

s c e n a r i o st o r y b o a rd v i s i bl e sa fe t y

vide o

human

te sti ng

exec ut ion evaluat ion source

de mo n st ra t in g te a m

ta r g e t

resolut ion fide lit y

fa ke re p resent at ion met aphor concept from

fa cto rs di sseminat ion

s h ow i n g

ro l e

invisible

to

crit humble map inte r a c t i ve

time space info rma tio n error const raint visibilit y on sound colour u se r s d e s i g n how w he re whe n wha t why who approach pleas ure location life q u e s t i o n s p os tc a rds ha rd ta nde m presence phot os et hnography soc ial net work diar y p u r p o s e

c ar to o n

fic ti on

Ejecting...

mu n i ty f am i ly s e l f ID’s ABC

world com

beyond e xample f u n ct i o n

q

q q

app e a r a n c e q

no t at ion

q q

v al u e l o c a l

v i ew s e q u e n c e

de f in in g d is -

output imprec ise i m p rov i s a ti o n lo g ic flowchar t ske tc h ri s k c o n t ex t o n-scre e n reason me n t al model idea c omput er le a rn in g by d o i n g a b str a c t s y st em po ssi ble performing movement p e rc e iv in g t e r m

c u s s i n g c h o i c es i nput

int erfac e smoke and mirro r s

I n te r a c t i o n D esi g n T he o r y Co urse 1

view

b ra in s t o r m i n g

Ve n i c e , 2 0 0 8 / 0 9

n ew