interaction designers: the tools of the trade
DESCRIPTION
some of the Interaction Designer methods.TRANSCRIPT
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 [email protected]
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...