............. .INTERACTION. ......DESIGN. ...........A. .......BRIEF. .......GUIDE. ......... . ............. ............. ............. roberto picerno
1
Declaration of originality I submitted this document for the exam on 11 /01 / 2010 of the Interaction Design Theory course (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: 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. Roberto Picerno 03/01/2010
2
INTERACTION DESIGN A BRIEF GUIDE Roberto Picerno
3
Iuav University of Venice Masters in Design Visual and Multimedia Communication Interaction Design Theory 1 2009–10 Gillian Crampton Smith Philip Tabor
4
content list
chap. 1
What is interaction design?
7
chap. 2
Focus on users
8
chap. 3
Define the target
11
chap. 4
Visualize through metaphors
12
chap. 5
Design opportunies
15
chap. 6
Shape and details to your ideas
16
chap. 7
Prototyping
19
chap. 8
Conclusion
20
5
110101 101011 010100 011101 110110 011011 110101 6
chapter 1: introduction
What is interaction design? Interaction design is a field of study that helps communication between humans, and between humans and devices, able in some way to give back a response. When we use any kind of device for comunications, we need services designed for a good experience of use. This garantes usability of the service and the right access to the informations. Interaction design loos on products and services, and how they work, for an easy interaction between human beeings. When we use a device without problems and without making question on how it works, we have a positive experience, so that makes easy the way we use this product. Instead, when we can't find the answer, the solution, the interaction designer has abandoned us in the labirith of an alien thecnology, so we will crush the monitor, sending to hell the boy who convinced us to buy it. Interaction design concerns computer technology. With it, information is manipulated and created. The smallest unit of the information is the "bit", witch can be only 0 or 1, on or off, voltage or no voltage. But the combination of these elements create higher levels of information, in fact all the datas in our computer are coded in this way, and give back all the diffent medias that
we know: numbers; letters; images; diagrams; sounds; etc. So computers are used to create, manipulate and store information, and combined with telecomunications technologies, which provide data networks, these information can be exchanged with others. New devices and new thecnologies, often have a huge number of functions, but this isn't a real advantage for the user and the experience, doesn't correspond to a better product, instead, it's a new and not desired problem, that left the user beside new questions without a response, so the product, or the service become extremly difficult and uncomfortable. We can consider this hyper-communicative era as relatively young, but has throwed out old devices without giving to users the new language to understand them, without sharing a code to deal with. Interaction design has got to mahe the invisible visible, turning on the light, letting people see the product in a very easy way, switching from the dark side of thecnology, else not understandable. Has to design experience of use, behaviour, give solutions to various problems, anticipate different possibilities of use and take by the hand the user, driving him to a clear way to use the product.
7
chapter 2
Focus on users
Interaction designers think about not only the artefact but also the people who will use it. Interaction implies people, and so people become part of the design. Users are the great source of ideas, they can give you a lot of information about their real problems, their life, they can face to you lot of problems, and even solutions. Users are even the testers of your design, they can give you a feedback on what works well and what doesn't. They are foundamental for designing a good product or service, they show you all problems that instead the designer can't see, cause designers, deeply involved in their projects, aren't able to consider all the aspects of their design. When you want to face a problem, you want to help your user understanding his needs wishes and feeling in a particular situation. The designer can imagine, more or less, how would be the behaviour of the users, or can directly choose the kind of people who's interested about and discover the possible correlation with the tasks of the design. The users can give to the designer information about what to design, to fulfill their desires and needs, and can also tell how the product works, with responses on test prototypes. This is partecipatory design, involving the users on the designing process.
8
It's an european approach, grew up in the 70's, started in Norwey and then devoloped more and more in scandinavy and than to all europe. So, you could build up an interview in which you’ll guide your “model-user” through a series of themes you are interested about. In this way, during the phase of project development, focusing on his real words you can easily understand towards what kind of problems you should address yourself and what are the “opportunities” to advance. The difficult in the partecipatory design, it that you have to let people feel comfortable, otherwise they won't give you the access to their secret needs and desires, so you need to find an efficent way. First of all, for your interview you have to decide the tone. It can be friendly or more formal. Then, you should plan questions, which answers should be open and should explain widely the real needs, desires or proposals, without responding directly in few words or with just a mere “yes” or “no”. The important point is pushing your interviewed person to imagine new ways to do something, and think about how to solve a problem in his personal way.
" Observe to discover what people really do; participate to involve people in the process; simulate the experience of use " IDEO methods
interview someone you know
Vincenzo 25 years old italian Lives in Foggia and works as mechanical engeneer in a society based in Matera. He uses train twice a week spending 3 hours to meet their collaborator.
what's uneasy when you have to travel?
I have to wake up early at 6 o' clock to arrive to the station. I always have to remember to buy the ticket before, or I have to make the queue at the station. I get really bored spending 3 hours in the train becouse I can't sleep in the train, I can't even read books, it's unconfortable.
how you spend time in the train?
Usually I listen music with my IPod or I play with games on my pc, or I keep working on projects, always on the pc. But anyway, after a bit I'm bored.
what's your feeling when you travel?
Unconfortable. a bit tired an a bit sad. I even feel a bit alienated from others.
what kind of technology do you use?
A mobile phone, my IPod, and my dear personal computer.
do you need something more as a service, that now doesn't exist, to improve your life and maybe make easier your journeys?
Yes, I always think about improvings. I always listen music on the IPod, and I always try to imagine what are listening others. Would it be nice to see, share → MUSIC PLAYLIST SHARING playlists, a way to know new music, even a way to know people, new girls,hihi, and to share musical interests.
other ideas that came to your mind?
Mmm, yeah, to avoid queue, I would like to buy ticket just entering into the train, I → BUY TICKET WITH ELECTRONIC CARD don't know how, maybe with an electronic card. I would even have a wi-fi network to → TRAIN NETWORK FOR MULTIchallenge other travellers on pro evolution PLAYING VIDEOGAMES soccer and other games.
9
design three personas
what is his/her name?
Aldo
Maria
Domenico
age?
25
38
14
nationality?
italian
pourtogese
italian
how looks like?
10
what makes him/her different from the stereotype?
looks very rude, but it’s romantic inside
when get really stressed, plays extreme sports
he studies a lot but has time to play and have fun
what is his/her educational level?
doctor in industrial design, now he studies for a master degree.
doctor in foreign languages, spanish and english.
secondary shool
what interests?
death metal music, body building, graphic, movies
loves travelling, gardening and nature, fitness
loves history and geography, he just started to play piano
what likes doing?
physical sports, drawing, anime cartoons, play videogames
take care of bonsai and cactus. She likes also yoga excercises
play at strategic games, science fiction and harry potter
what is his/her character?
determined, pragmatic
organized, dreamer, creative
curious, clever, iperactive
what is the daily routine?
university courses, meet her girlfriend, studies and watch
works as a teacher, helps his children in homework, read bo-
movies and play videogames
oks, play fitness and yoga
school, homework, play with his brother and friends. Spends hours on with videogames
any physical limitations?
has an injury at the right foot
frequent pain at the neck
none
What are him/her most important motivations?
be a good designer and enjoy his work
grow and educate his sons, have an happy family life
become stronger than his bro-
What does he/she most like, love, dislike, fear doing?
loves to spend time with his girlfriend and to draw manga. Likes to work on good projects. He dislike boring studies
loves her familyand their house. Hates impolite people and computers, she can-t understand well how to use it.
his family and friends. Likes games with high complexity. He fears judments from other guys at school
What are him/her main needs and desires?
have good time with people, friends and his girlfriend. Have access to all desirede cultural resources. Have fun playing with really engaging games
relax after work, help his children in studies, solve her physical pain at the neck.
demonstrate to be a genius, win all competitions. He desires to meet other boys with the same interests. Learn to play piano without get bored
ther and have good notes.
chapter 3
Define the target In the moment in which you have to design something for a specified range of people you may have no idea of what the right target may be, so the first thing to do is to face the real people and rearrange them into small groups with common features. In this way, what will came out from your researches will be that a certain number of people have a lot in common in their daily life: same kind of family, same passions and interests, same fears, etc., and so, quite often, the same problems and desires. Now, that you have in mind these ideal groups of people, it would help you a lot to synthesize them into a “persona�: a fictional character that repre-
You can even use people you already know, so that you can add strange and particular details, as secret passions and fears, obsessions, attitudes, even handicaps. All these information will help you considering a wide range of problems to solve and solutions that can fits to every of them. The personas give you the target, so as limitations and possibilities of your design.
" Avoid referring to personas as creations. Of course they are,but they work better if we refer to them as if they were real people in the world " chris noessel
sents ideally a kind of human category. For everyone of them you should consider the personal story, the possible attitude, and most of all their link to your design subject: so, how they can react to your product, if they may like it, if they may use it and if your product could help them to create interactions inside a community or to give information from the world. It is important not the imagine the "personas" near to well-known stereotypes, every day people are very particular, and more details you imagine for the personas, the more you gain precious information for your design, or you won't gain any results.
11
chapter 4
Visualize through metaphors All through your lifetime, slowly you get the cognition of the world by accumulating in your mind a series of events, sequences and scenes about how something works or something happens. Thanks to this, every time you see something new, you may tend to associate it somehow to things you have already seen before, to compare them and better understand how this new thing could work. So, imagine to be in front of a new interactive object, and you have never seen something like that, you ignore how to use it: first of all quickly your brain will scroll down all notions already acquired in your life, then you’ll think about all the possible mental model of functioning, and you’ll relate that system to an easier one that you have already experienced. So, all the time in which there is something to design, it’s better to build it in a way that someone else can understand its working system simply because it’s very similar to a real action system or a physical event we are used to. And in this way, caring about your users, this use of metaphors allows them to better appreciate a product: it will be easy for them to associate your product, or its main function, or its aspect, to something they can easily associate to. Maybe an inte-
12
ractive device could be like a face which you can make up or caress to get some function.
“ Mental models comes from our natural bent for giving explanations ” donald a. norman
It’s a useful thing to design with metaphors: it opens your mind and helps you to find a way of making big problems something you can handle.
metaphor for financial situation of a young person living alone I N C O M E M O U N TA I N S
Extra
Sa
lar iver
income
yR
Rive r
C A S H
L A K E
Se ive
r
G o o ds R iv e r
sR
ver
I N G
M
ice
Rent Rive r
rv Ri
O
ds
N
ee
O
yN
C
ar
E
Prim
r R ive i l ls dB Ta x e s a n
O U T G O
Y
T A D E L
S
E
A 13
define opportunity for an interactive service
TrovaRistorante A software that allows to find the restaurant for you and to reserve a table.
what? why? who? where? how?
14
a software that allows to find and reserve a table in a restaurant; made for smartphones; to simplify the search for a restaurant in your city; to connect users (clients) and restaurant’s owners in a community;
QUESTIONS BY USERS -------------------------------------where's the closest restautant?
to help vegans, coeliacs and all people with specific requests; to help tourists or foreigners, people out from home/hometown; developed for people who’s got a smartphone or similar;
what we can eat?
developed for big towns, touristic ones, in general for towns in which the size of the restaurant’s business allows to get the service for free thanking to advertise
where we are?
download the application; launch the "TrovaRistorante" application; with the GPS, the application shows where are you and all restourant in the area; add filters to specify the kind of restourant you want to find; search by distance: find the restaurant near you;
how much does it cost?
search by prize: find the one that fits to your purse; search by typology: find typical, specific ones; search by rating: find the bests restaurants rated by users; search by event: find the one with special guests as musicians, etc; search by availability: find the ones with seats availables; search by menu: find the one with your desired menu; in your search you can even add others options required; after searching you have a list of the restourants that satisfies your search; every one has got an overview with details: name, where, menu of the day, rating by the community, special events, availability, etc.; when everything is allright, you can book a table, choosing how many seats; the application connect with the restaurant and give you the feedback of your booking and the time to wait; if it's ok, "trovaristorante" shows you the way to arrive their; at the end you can rate the restaurant.
can I go there with my dog?
where is the X restaurant?
what's his name?
someone there is playing music? how is it?
it's there a television? it's possible to book a table? how much time we've to wait?
chapter 5
Design opportunities You are a designer working for a project to be developed from a producer: someone gives you the resources you need to invent something new, something that people could need but they already don’t know. Probably you’ll have to create something from nothing, and it won’t be not easy if you don’t analyse the behaviors of your users in a certain situation –that is the context of your project.
want, why they do something or why, who else is affected from this problem collaterally, where to interact and how.
Focusing the users allows you to get through the project without missing essential elements: maybe a service could be better suitable for your target than an other one…The second step, once you have a sure target of users, and you know their attitude and what they want when they face the context you are designing about, is to define for them an opportunity: that is what users may do or would like to do with a service. To focus your project you should decide the services of your opportunity. You can look at the many problems of the situation you are analysing and write them down: before getting to the design of the facilities and to a solution you have to find the entire big, little, tangent or apparent problems. The better way to do it is passing through the “What? Why? Who? Where? How?”- Phase: answering yourself about what target-users
15
chapter 6
Shape and details to your idea Every fieldof human activities has its notations: fist of all the writing, an abstraction that cames out from the necessity to communicate thoughts and to hold words. In time, writing became specialized to create new abstractions with new meanings, everyone related to its field. We have notations for music, others with other meanings in architecture, others for flow charts, for movies, even for dance. These notations are abstraction, useful to communicate and manipulate informations to others. We need them to read, to remember,to analyse, to design. In interaction design we need notations to show choices, give inputs and outputs, for comunicating determined qualities, etc. Using the same notational system of the movies, interaction designers uses storyboards to show interaction over time, to draw scenario's of use. The storyboard is the rappresentation of images in movement, actions in time, shown through still drawings in sequence. Drawing every single action you go deep in your project and you put details for every step, throwings out lot of doubts, founding solutions for unsolved steps. Storyboards are usually used to define well
16
every scene and detail before shooting a video: every scene already decided and defined will make things easier, without loosing of time and money.
design a storyboard
17
paper prototype
18
chapter 1
Prototyping
After having focused your project the best thing to do is testing the usability of your service as the last step of your design. What you need is to consider your context of use and to draw a main scenario that better fits a problem that you solve with your service. A good way to face this point is, from one side, sketching a short storyboard, on the other side, getting a clear diagram or flow chart of how your simulation would go. Prototyping your system with paper you can create a little example of the device you are designing on: it will be just an example in small scale built in a very quick and row way.
implement your final project: it also depends from the fidelity of the representation, because obviously it’s much more useful to test a product when it follow a good resolution of demonstration. The same is for the video prototype.
The project’s prototype is based on the designer’s need of experimenting how can physically be used a device and how does it look and feel as a whole. This means going from ideas expressed with concepts or –if the design is almost completed- with sketches of the interface, to concrete shapes and layers of illustration to be drawn. After having built up an example of your product, it will be good, and amusing too, to plan a video where you show the main scenario and the kind of personas involved in the using of your service. This ways of closing a project, if the prototype phase is successfully passed, helps to understand where and maybe how you should
19
chapter 1
Conclusions
After the industrial revolution, in the last century the role of the product designers was to find new solutions for objects of use, using the new possibilities of mechanical work and using new materials. They had to shape and to define a new world for the mass, with new tools, new objects, struggling with new problems. Now, we're in a new thecnological revolution, that is comunicative: we have access to a huge amount of informations, datas of every kind, but even new devices, with new rules and new ways of working. In this revolution, the role of the interaction designer is to let this revolution be partecipated by all, creating a common language, making the invisible thecnology underneath every new device, visible, readable for everyone. Has to reduce the distance between human and machines. Developing many of basic concepts and techniques in this brief guide, was born a series of steps, actions and detailed practices that enable the designers working in interaction contexts to create services made exactly for specific unexpressed needs of people: using appropriate methods of cultural, social, and emotional probe the interaction designer are concretely able to solve problems of everyday life and help people, services would allow new solutions on social field, give new maps for thinking, new instruments for eploring
20
sciences, easiest solutions for problems that now we consider too big or too difficult to understand
21
sources list
DONALD A. NORMANN, The psycology of Everyday Things, 1988 www.ideo.com/methodcards/MethodDeck/ www.cooper.com/insights/journal_of_design/articles/
22
Chapter headings: Lekton thin, 66 pt, 53 pt, 44 pt Main text: Fedra Sans Std Light, 8 pt Captions: Fedra Sans Std Medium Italic, 9 pt booklet designed with Adobe InDesign CS3 illustration with Adobe Indesign CS3
23
............. ............. ............. ............. ............. ............. ............. ............. ............. ............. 24