Interaction Designers:the Tools of the Trade

Student: Giuseppe BurdoProfessors: Philip Tabor, Gillian Crampton-Smith

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 writ-

ten or created by me alone.

Declaration of originality

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 ........................................................................................................................................................

Index

i

q

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 af-

fordance 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 ar tifact 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 ItXD!

Introduction

q

Good

Bad

.a .b .c

.d .e .f

“We are constantly get in touch with a lot of environment signals, and even if end-

less, 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

you how to use an object”2. 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

short 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 real-

ize 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 vertical for the display. Finally, where does the tape star t? I assure that is on

the front side.

I

.a common handle / .b nokia 3500 interface / .c scissors / .d remote control /

.e oven alarm clock / .f hot-water heater

Affordance:: how we affect ::

Interview:: focus on user needs ::

II

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 part 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 star ting some interview to people who you are

designing for. Sometimes a happy our or a short trip could be enough. Firstly it’s

important to prepare the questions and after pay attention to the proxemic lan-

guage, 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 satis-

fied 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

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 ques-

tion 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 mo-

ment...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 understand-

ing. Another unexpected fact is that while we were showing it, we thought that some-

thing 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

Flowchart::the human-machine connection::

bankrupt

$$$

mum and dad

occasional and summer work

rentfees

purchaseseveryday costspleasures [...]

IV

Have you ever printed before now? I hope so, if no...I’ll try to explain it. Let me

star t with a question: why to print? This one could be very personal, but for ex-

ample..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 commu-

nicative 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 star ted with a basic budget and

often I get something from my parents just for the essential expenses. Well, imag-

ine 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

Metaphor:: from connection to relation ::

V

Represent a multidimensional data set - interactively:

Luca Boscardin, Giuseppe Burdo, Luca Coppola, Silvio Lorusso

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 opportunity4. 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 cof-

fee 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 (ex-

cept 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 informa-

tions quite soon. If you want to look at the other days, just shift the sheets. Fun

and operative. Yeah, it’s just a sketch.

Dynamic Information:: custom visualizations ::

VI

Video Prototype: ABRACADABRA Kiosk

Chiara Bertolin, Silvia Boscolo, Giuseppe Burdo, Mario Ciaramitaro

What do you expect from students? You can demand ideas, trust, dedication, cor-

rectness 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 star t: 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 “ABRACA-

DABRA”, 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 consump-

tion, you can interact when you are enough close to it. So clap your hands and

the play goes on.

Video Prototyping::How the idea will work::

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 star ting points as ways of life.

The topics are in a sequence from the most enactive5 to the conceptual ones,

trying to merge mind and artifacts, 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, dis-

coveries 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 : prob-

ably 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 pos-

sible to add real possibilities for making real the inspirations.

In this sense, what is invisible can be visible, giving a tangible shape to the sensa-

tions 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/worth/

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

exper ience feel ing f low mapping feedback insp irat ion needs des ires

prototype qual i ty except ions synthes is much more new stor y te l l ing

presence obser ve par t ic ipate s imulate involv ing th ink ing a loud inter v iew

qu ick and d ir ty roleplay personas model l ing abstract ing act ion diagrams

p ictures metaphor behav ior execut ion eva luat ion source target role

implementat ion explor ing test ing demonstrat ing team resolut ion f ide l i ty

scenar io stor yboard v ideo fake representat ion metaphor concept from inv is ib le to

v is ib le sa fety human factors d isseminat ion showing cr i t humble map interact ive

car toon t ime space in format ion error constra int v is ib i l i ty on sound colour users

des ign how where when what why who approach p leasure locat ion l i fe quest ions

postcards hard tandem presence photos ethnography socia l network d iar y purpose

f ict ion world com

munity beyond

fami ly se l f example

va lue loca l notat ion

appearance funct ion

v iew sequence def in ing d is-

cuss ing choices input output imprecise improvisat ion log ic f lowchar t sketch

risk context on-screen reason menta l model idea computer learn ing by doing

abstract system poss ib le per forming movement perceiv ing term

inter face smoke and mirrors v iewInteract ion Design Theory Course 1 bra instorming

Venice , 2008/09 new

q q qqq

ID’s ABC

q

Ejecting...