DECLARATION OF ORIGINALITY I submitted this document for the exam on 31/01/2013 of the Interaction Design Theory 1 course (Teorie dell’interazione) given by Gillian Crampton Smith with Philip Tabor at the Faculty of Design and Arts, Iuav University of Venice. For all word-sequences which I have copied from other sources, I have: a) reproduced them in italics, or placed quotation marks at their start and their end, and b) 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. Venice, 25/01/2013
{ } 4
INTERACTION DESIGN COOKBOOK Ruggero Baracco Booklet realized for the Interaction Design’s Theory course held by Philip Tabor and Gillian Crampton Smith. Iuav University of Venice Master in Design 2012/13
RECIPES
APERITIF
Introduction
3
STARTERS
Waterbus shrimps cocktail
4
Money metaphor salad
8
Affordance and mapping tortilla
12
FIRST COURSES
Smart enviroment soup
16
Video prototype noodles
20
MAIN COURSES
Sweet and sour interview
24
Conceptual model meatballs
28
DESSERT & COFFEE
Design opportunity apple pie
32
Ice cream drowned in coffee
36
DIGESTIVE
Colophon
40
1
2
INTRODUCTION An aperitif for each type of palate.
Design is like cooking. There are styles, tastes and many different way of doing it. When you cook for someone, what you prepare has to interact directly with an user. If Interaction Design is “shaping digital things for people’s use”, cooking is “mixing and arranging food for people’s tastes”. As cooking, Interaction design ranges in many different disciplines, need knowledge and preparation and a working method. What you cook reflects your personality and behavior, you can improve your skills and find your own style. As a cook, you have to satisfy the needs and desires of who will eat your dishes, indeed your projects. My choice for the booklet’s metaphor has an explanation in one of the main principles of IxD: affordance. Affordance is a quality of an object, or an environment, which allows an individual to perform an action. Cutlery have one of the best affordance you can find, for their shape, visual qualities, history and cultural values. Affordance is also one of the first thing developed in a project from an Interaction Designer, so I used this principle for the first approach of the readers to my booklet. The magic of the human being is the ability of doing the same thing in so many ways. Find your way and walk your path. If you ask to someone how to cook a soft-boiled egg, you will hear countless recipes for the same thing.
For this booklet I decided to present this discipline from a different angle, using a metaphor well known also by people who have nothing to do with design or they approach to it for the first time. It’s important to let others understand that when we talk about design there are no defined borders and and this is especially true in the interaction design field. It has ingredients, various preparations and needs a lot of patience. The first tries will always be useful failures, persevering will lead you to a real result. What I’m going to show here are a few recipes to help understand how to approach to Interaction design. There’s not a particular order on my interactive recipies, each of them are important principles which can be seen individually or as a menu for a dinner in a restaurant. Starting from the main ingredients and following the steps taught by the chefs Gillian Crampton Smith and Philip Tabor, I tried to prepare my first interactive meal, from the appetizer to the coffee. Enjoy your meal.
“To a man with an empty stomach, food is god.” Mahatma Gandhi 3
WATERBUS SHRIMPS COCKTAIL Data visualization: from facts to images. A fast and clear way to start a meal.
Data are pure variables in a set of items, sometimes multivariables. They are also informations and knowledge not always usable and understandable by users. When we talk about data visualization we refer to the translation of facts (the pure data) into an image. The aim of the data visualization is to allow the users to understand the facts faster and clearly, a sort of communication from “expert” to “non-expert”. The information is abstracted in a schematic form (through graphic), including attributes or variables for the units of information. The main rule of the data visualization is to mantain the balance between aesthetic form and functionality, communicating the information in an intuitive way. But designers don’t have to stop here, they have to stimulate viewer engagement and attention, let them reveal new acts or suggest new theories. It has to be a discovery. “Dataviz” is mainly graphic, and can be made in two ways: static or dynamic. When we think about the static form, the first thing that comes in mind are images on paper which can not change. On the screen instead they can change, so we talk about dynamic visualization (the only one interactive). The interaction with the user can be multisensoral, and with a dynamic visualization the fruition of information can increase. In their different nature, both of them use the graphic principles of visualization. 4
INGREDIENTS Lists Matrix Tree diagrams Venn diagrams Tables Calendars/Timetables Maps Statistical graph COOK FOR Graphic designers, Computer programmers, Data visualizers, Engineers.
DIFFICULTY
REFERENCES: Donald A.Norman, The Psychology of everyday things, chap. 7 http://en.wikipedia.org/wiki/Data_visualization http://datavisualization.ch http://www.visualizing.org
5
Assignment 6
REPRESENT A WATERBUS SERVICE Invent a compressed paper (static) representation of the place/ time/price information given on Alilaguna’s Linea Arancio web page. Invent a more interactive (dynamic) design of the Linea Arancio page for the screen of (you choose) a mobile phone, tablet, laptop, or public e-kiosk. Your boat stop
Zoom Mode Boat stops
Static Representation
Selection of departure or arrival for the boat stop
Boat stop Selection of the time
(after “time” set)
Timetable
(on “Search” click)
Boat station not selected 6
Boat station selected
Dynamic Representation Boat Route (realtime)
Map mode selection
Boat Route (timeline)
Time distance
Boat
Boat infos Ticket ride selected
Ticket ride not selected
(Boat stop selected) Amount of money
Buy button 7
MONEY METAPHOR SALAD A special kind of conceptual model: the metaphor. From the unfamiliar to the familiar.
8
The idea of what something is and how it works in the head of someone is a Conceptual Model. A metaphor refers directly to this concept but in a more particular way: starting from a domain’s attribute, it uses the same but in a different one. If we search for a definition of metaphor we will find: “a device of seeing something in terms of something else” (Kenneth Bourke, 1945). In design this “power” is used to make the unfamiliar familiar, it uses a knowlege of a source domain to make it understandable and usable to someone with the knowlege of a target domain. The most common examples are usually verbals when something has a literal meaning expressed in a metaphorical way. But the concept of metaphor is not only related to the language, but it’s about thought.
INGREDIENTS
A metaphor is used to “find the hidden characteristic of the content”, it has to fit to it, it has culturals and contextual proprieties and they need to scale appropriately. In Interaction Design it helps users to relate to and understand a device, transforming something complex, new and invisible to something simple, familiar and physical. The comfort created allows the user to operate with what we designed. There are also disvantages on the use of metaphors: they are always fictions, incoherent and confusing and very conservative. We use them unconsciously, for the most part to generate meanings, can contribute to creative thinking and thereby to more innovative products.
Interaction Designers, Graphic Designers, Philosophers, Artists, Teachers.
Imagination Creativity Madness Concreteness Hazard Adventurousness Orientation Acumen Criticism COOK FOR
REFERENCES: DIFFICULTY
Bill Moggridge, Designing Interactions, chap. 1 http://www.slideshare.net/dansaffer/the-role-of-metaphor-in-interaction-design http://philosophe.com/design/metaphors/ http://www.ijdesign.org/ojs/index.php/IJDesign/article/ view/53/27
9
Assignment 5
DESIGN A METAPHOR FOR YOUR MONEY SYSTEM Choose a physical system, artificial or natural, as a metaphor for the ‘algebraic’ system of causes and effects underlying the economic situation of an university student. Identify the ‘elements’ in the real economic system and the elements in your metaphorical system which represent the elements in the real economic system.
University Student Source Domain Incomes Soil Fertilizer & sustenance Outgoing Trunk Leafs Roots Branches Apex Knowledge It grows from a pot and needs continuous care. The Plant continues to grow and you decide its shape and health. 10
Fixed
Variables Target Domain Incomes Parents Job Outgoing Travels Meals University fees Materials Your vices
Knowledge The incomes depends mainly on your parents (but you can have also a job). The outgoings are mainly the travels and the taxes, then there are materials, meals and your vices.
Bonsai - Soil - Fertilizer & sustenance
“Money doesn’t grow on trees”
- Roots - Trunk - Branches - Leafs - Apex
- Seeds From - Cuttings - Layering
- Water - Sunlight
General economic situation
Bon a tray or low sided pot Sai a planting or plantings
- Contemplation (for the viewer) - Pleasant exercise of effort and ingenuity (for the grower) - Long term cultivation and shaping 11
AFFORDANCE AND MAPPING TORTILLA Two of the main ingredients of Design: affordance and mapping.
The main principles of design are: visibility, feedback, constraint, consistency and of course affordance and mapping. “Affordance” is a term used by perceptual psychologists. It’s the perception of the proprieties of an an object to know how to perform an action. The term was introduced in 1966 by the psychologist James J.Gibson. The “action possibilities” are latent in the environment, objectively measurable and independent of the individual’s ability to recognize them, but always in relation to the actor and therefore dependent on their capabilities. If you see an handle, you think to pull it. It’s like imaging how objects make us think to use them. Nowadays it’s difficult to understand if affordance is a quality inside an object or it’s something that we acquired culturally or with the experience. The main problem starts when we read the affordance negatively: when the object let you think of a wrong behavior on the use of it. “Mapping” refers to the relations between the controls and the parts of an object and their effect on an user. It’s more “how the controls are mapped on a device or product that I want to use”. The visual and logical order can help an user to understand more how to interact with an object and deny wrong behaviors and actions. But sometimes you are forced to learn how to interact with objects.
12
INGREDIENTS Buttons Visibility Touch Hear On/Off Turn Direction Position COOK FOR Any kind of designer.
DIFFICULTY
REFERENCES: Donald A.Norman, The Psychology of everyday things, chap. 1 Dan Saffer, Designing for interaction, chap. 3-4 http://en.wikipedia.org/wiki/Affordance http://www.communitywiki.org/WhatIsAffordance
13
Assignment 5
HUNT AFFORDANCES AND MAPPINGS Record examples of artefacts whose ‘good’ and ‘bad’ affordances you notice, and ‘good’ or ‘bad’ mappings. Choose 3 good and 3 bad examples of a) affordances and b) mappings. Record these examples on a display.
- It gives the affordance of sitting - Distinction from the enviroment - Seat and back support recognizable
- User friendly - Easy to understand and map - Functions recognizable on the use
- Different areas, different colors - Physical feedback - It’s clear where to validate
Affordance 14
- It doesn’t give the affordance of “sitting”
- The “conventional” way of displaying notes
- Not the conventional way of displaying notes
- The material doesn’t distinguish the chair from the enviroment
- Only the horizontal way of reading
- Too many inputs + horizontal and vertical note reading
- Seat and back support not so clear and recognizable
- Different languages used at the same time vs
- To shoot you have to push and not pull on your direction (there isn’t a button) - May look like something to turn but it’s fixed - What you see is not what you photograph
- The function areas are divided - It’s possible to “feel” the buttons clearly
vs
- The reading order is not so clear and it’s not unconventional
- There isn’t a clear distinction of the areas (everything “is” in the center)
- Small display - It’s not clear how you can convalidate ?
- One switch for each plug
- You don’t understand clearly the functions of the buttons
- Use of different colors
- You don’t know which one refers on the relative female plug
Mapping 15
SMART ENVIROMENT SOUP The ambient all around you. Sensors, Actuators, places and infrastructures. The smart city.
Interaction design is the creative design of the interaction between may different subjects: people, devices, services, systems, informations. Our perception of the reality and spaces around us (and particularly the concept of city) is always evolving. The real and the virtual interconnect, making a city an entity made of both atoms and bits. Nowadays we can make the distinction between three kind of city: the fixed city, the parallel city and the real + virtual city. The fixed city is the one related to places and infrastructures. The parallel city is a place independent from a location. The real + virtual city is a virtual place linked to a location
INGREDIENTS
Advances in design and systems architecture have called for the increased utilization of sensors in numerous applications. When we talk about tranducers, we refer to something that covert one kind of energy into another kind. They have inputs and outputs and basically are of two kind: sensors and actuators. The basic function of a sensor is to measure some feature of the world. An actuator “take a signal as input and change the state of something in the world� (a simple example is represented by a windmill). Devices are combinations of sensors and actuators. On a system the sensor is the input and the actuator the output (but can be that a sensor has an output and an actuator an input). How we imagine a system (out mental model) is not how it is in reality. We understand what are inputs and outputs but not how they are linked.
Interaction Designers, Service Designers, Architects, Ecological Activists
16
sensors enviroment touch mental picture movement time COOK FOR
DIFFICULTY
REFERENCES: Bill Moggridge, Designing Interactions, chap. 10 Dan Saffer, Designing for interaction, chap. 2 http://www.clear.rice.edu/elec201/Book/sensors.html http://en.wikipedia.org/wiki/Sensor
17
3) Stairs
Assignment 1
PICTURE A SMART ENVIRONMENT Imagine that your daily environment – where you live, where you study, and the route between them – contains wirelessly-linked systems of embedded, context-aware, personalized, adaptive and anticipatory devices. Then imagine a typical day, starting when you wake up – surrounded by helpful ambient intelligence.
“Smart” light for the stairs
Track calories loss
Sensors: Pressure/weight, Light/dark
1) Bedroom
4) Dining room
Alarm clock pillow
Download weather infos & news
Shutters up
Multi touch wardrobe
Sensors: Light/dark, Touchscreen, Proximity sensor
2) Bathroom
Multi touch mirror + water temperature controller
Wardrobe with weather informations & suggestions
Sensors: Proximity sensor, Touchscreen
5) Garage
Auto warm toilet closet
Toothbrush for body temperature + medical surveys
Sensors: Touchscreen, Warmth, Proximity sensor, Pressure/weight 18
Auto turn-on for the coffee machine
Device for the maintenance of the bicycle (tire pressure, saddle, etc)
Direct download on the mobile device
Sensors: Switch, Keyboard
6) On the street
9) From train station to university On the bike Sensors on the enviroment
Interactive glasses for:
Route and time remaining, traffic
Air cleaning, street holes
Route and time left
Sensors: Light/dark,Video tracking, Camera, Humidity, Air pressure
7) Train station
High water news
via mobile connections via sensors on the canals
Sensors on the enviroment
Sensors: Video tracking, Enviroment, Touchscreen
10) University Train position
Music or reading
On mobile devices
Touch screens Calendar and appointments
Sensors inside trains to see free seats
Sensors: Touchscreen, Pressure/weight, Video tracking
Depending on the time left
Auto connection with the coffee machine + payment
Sensors: Touchscreen, Proximity sensor
8) Train
Auto open files on laptop or tablet
Interactive windows Sensors: Touchscreen
Alarm clock before the arrival
= Timebomb for the latecomers 19
VIDEO PROTOTYPE NOODLES Make it real, make it emotional. Deal with “Who” and “What”.
The three main points where to start on focusing on a project are: the medium, the people and the technology. On the medium the designer deals with the aestetic, expressive or representation possibilities. On the technology side the choice is between an existing or a new/emerging technology. It’s also very important to consider the human factor, the problems and needs or desire (both latent and explicit). When the project idea is delineated an important phase is represented by the prototyping of the project. The two main questions that need answers on this phase are: Who is it for? What is it for? Dealing with the “Who”, a prototype can help to explore, to make the idea concrete, to see if it can work, to use it as inspiration for new ideas, to discuss on it. The prototype has to involve people in an active way, also to see if the idea is persuasive as for the designer and to change the point of view, test the usability and the desirability. On the “What” side, a prototype is useful to explore, test and demonstrate. It’s important to understand which role will take the artifact in people’s life and which sensory and perceptual experience will give on its use. For example, a type of prototyping often used is represented by a video prototype. It can show the context scenarios of the artifact, the interface and a simulation of the use, naturally giving an emotional tone to possible users.
INGREDIENTS Play Pause Rewind Forward Stop Repeat COOK FOR Product Designers, Interaction Designers, Video Makers, Movie directors
DIFFICULTY
REFERENCES: Dan Saffer, Designing for interaction, chap. 5 Bill Moggridge, Designing Interactions, chap. 10 http://www.interaction-design.org/encyclopedia/prototyping. html
20
21
Assignment 3
MAKE A VIDEO PROTOTYPE Each individual is assigned to a team. Each team designs an interactive service or device, and makes ‘quick and dirty’ prototypes of it. Make a paper prototype of your device, or of a relevant part of it. Use role-play to simulate its interactive behaviour. a) Makes a quick video without post- production editing b) Downloads the video to a computer c) Uploads it for final screening.
22
http://vimeo.com/55406751
23
SWEET AND SOUR INTERVIEW Participatory Design: creating the right thing in the right way together. Involve people who will use your design.
When we design something, we always have to relate to an user. and we need to follow two simple rules: design the right thing and design the thing right. The people are our only main inspiration, we have to understand their needs and what they want, we analyze their everyday life and work and we have to involve them on the design process. This is called Participatory Design, it can be applied to any design field and it’s a powerful tool for a better result. It’s a field that grew up in the ealrly 1970s in Norway, and started from the problem that designers don’t understand completely how a situation could evolve in the real life, real users can. As Pelle Ehn says...What we have to face are human actors, not human factors, we are talking to people, not performers of functions. We always have to deal with the context of tasks and we have to develop a social work, which involves cooperation and communication. User surveys and focus groups are useful, but they tend to be passive. A good way is to let users contribute on the design with their ideas, because it’s a balance of priorities often contradictory between them. There are many way to make a Participatory Design, one example is represented by the workshop: it’s used to engage people to develop ideas on what to design and how it should work. Another method is represented by the interview: the interviewed (listen and observe also his/her body langage) has to be relaxed and know the purpose of the interview, has to give expansive questions and think about possible product from his “latent” needs. 24
INGREDIENTS behavior desires notes photos audio ideas COOK FOR Any Designer, Journalists, Gossip people.
DIFFICULTY REFERENCES: Bill Moggridge, Designing Interactions, chap. 1 http://hci.stanford.edu/publications/bds/14-p-partic.html http://experientia.com/services/design/participatory-design/
25
Assignment 7
INTERVIEW SOMEONE YOU KNOW Find a self-employed artisan who agrees to take part in a participatory interview in person. Plan a sequence of questions to discover your interviewee’s needs and desires, conscious or unconscious, about that aspect of their life. Choose questions to discover not only facts, but also emotional attitudes.
Papers for the interviews 26
E
Tool finder
A device to detect and localize his tools on the laboratory tagging them on their position
D
A
Illutestrator
A software to design (without having computer skills) musical instruments A lot of different tools, some of them specialized, others normal.
He sees objects in a different way now (materials and construction)
E
e
Guitarometer
Weather and enviroment sensors to know how to calibrate their work on the instruments His job is his main Love. But he recognizes the lack of a real sentimental part in its life.
Don’t need special studies, some are only partly related.
Not only in the music, there is a great interest in creativity and jobs related with creations and constructions.
It’s a job that has many points of reference and heroes (and it’s hard not to have them always present)
Analysis & Ideas
A
G
iLuthier
An interactive guide for luthiers (it adapts depending on the ability of the luthierand depending on the point of reference of the luthier)
B
B
Lute/Love
Lutodesk
A translator for luthier’s girlfriend to have material for conversation with their boyfriends and understand their passions.
An interactive desktop with a adily timeline and the state of progress for the many musical instruments in processing
E
e
Wood inspector
A gadget to recognize the kind of wood and its quality (a scanner for the materials)
E
Spy Steps
Cameras on the laboratory to control the machining status. (for luthier and clients)
E
G
Facelute
A social network where clients can have estimates from other luthiers and choose the right one 27
CONCEPTUAL MODEL MEATBALLS The system in your head, the same on other people’s heads. The conceptual model.
Inside our head, an idea is something that potentially or actually exists in the mind as a product of mental activity. And we know what it is and how it works. In general that “something” can be called system. Our many conceptions of the system we have in our head are our conceptual models (or “mental models” or “device models”). In Interaction design we make a distinction between the designer’s conceptual model and the one of the user. And on the same system they can be very different from each other. Usually on simple systems the two conceptual models tend to coincide, but more complex the system become and higher is the risk of a big difference between the two. When there is a difference it can be: unintentional or intentional. It’s unintentional when is the system that suggest to the user an incorrect conceptual model. It’s intentional when the communicated designer’s model is the one that confuses the user. Harder is when we talk about electronic devices/systems: something invisible and complex to the eyes of an user. The duty of the designer is to start from his mental model and make it simpler and less confusing for the user. Indeed, a fiction. The designer has to act directly on the system because it’s there where the user deduces his conceptual model, an image of the system usually abstract and metaphorical. What we have to pay attention to is that in an interactive device the system image change depending on the user’s actions. 28
INGREDIENTS Actions Choices Inputs Outputs Diagrams Stories COOK FOR Interaction designers, Product Designers, Strategists, Psychologists
REFERENCES: DIFFICULTY
Bill Moggridge, Designing Interactions, chap. 6 Donald A.Norman, The Psychology of everyday things, chap. 1 http://en.wikipedia.org/wiki/Conceptual_model http://serc.carleton.edu/introgeo/conceptmodels/index.html
29
Assignment 4
start
IMPROVE A CONCEPTUAL MODEL
turned on?
0 initializing
Identify an artefact (not necessarily physical) where the conceptual model of how it works, in the head of most users, is probably confusingly false. Draw a picture of the artefact. Draw a) a diagram of the designer’s true conceptual model, and b) a diagram of the user’s confusingly false conceptual model. If the true conceptual model would also confuse the user, draw c) a diagram of a simplified fictional conceptual model which, although fictional, would allow the user to operate the artefact easily. Draw a picture of your improved artefact.
Y
10€ pressed add 10€ to the amount
1 idle
turn on the machine
pull the pump
set money amount to 0
set amount to 0
undo pressed
N [pump not insered]
1
pump
20€ pressed add 20€ to the amount credit amount [credit on the display added] 2 dispense gas set amount to 0
put down the pump
dispense [credit gasoline added] via pump
Designer’s true conceptual model
3 gas added stop the money timer
timer amount from 0 to credit added
credit added start
credit amount
turned on?
0 initializing turn on the machine
Y
10€ pressed add 10€ to the amount
1 idle
20€ pressed add 20€ to the amount
set amount to 0
set money amount to 0
credit amount [credit on the display added]
price for a liter of gas N
[pump not insered]
2
30
User’s confusingly false conceptual model
undo pressed put down the pump
pull the pump
2 dispense gas set amount to credit amount
3 gas added stop the money timer
dispense [credit gasoline added] via pump timer amount from 0 to credit added
can be pulled before or after (or during) the adding of credit pull the petrol pump (in any moment)
start turned on?
0 initializing
Y
turn on the machine
10€ pressed add 10€ to the amount
1 idle
20€ pressed add 20€ to the amount
set amount to 0
set money amount to 0
N [pump not insered]
credit amount on the display [credit added]
undo pressed put down the pump
2 dispense gas
status bar (decrease the bar on gas dispense)
at the press event set the amount to 0 start from the credit amount till 0
set amount to credit amount dispense [credit gasoline added] via pump
3 gas added 2
Simplified fictional conceptual model
stop timer to 0
timer amount from credit amount to 0
31
DESIGN OPPORTUNITY APPLE PIE Service Design: improve your (and the others) possibilities. Improve your tastes.
Service Design, basically, is the field of design that develops services to different kind of users in many kind of ambients. The designer starts making a deep and precise analisys of all the different factors involved on the service to develop. The most importants rules to follow are: usability, satisfaction, loyalty and efficiency. It’s a field that ranges over different areas (enviroment, communication, product, media and new technologies, etc.) but always with the goal to make something on the best way to serve people’s needs. Starting from a large number of solutions, the designer decides which one is the most appropriate, then he designs the service but also what is behind it to ensure a perfect performance. The first step is to find the problems related to the need and service to develop. Someone, instead of call them “problems”, prefers to use the word “opportunity”, that has a more positive value. Of course it’s impossible to solve all the problems, choose the ones that are more crucial. An Important factor is represented by the context of the service, “the specific frame in which the service takes place” (servicedesigntools.org). Studying the main users (and also the stakeholders), it’s important to understand the behavior of the customers, their needs and motivations, and no less important how they would react to the new service to design. An useful tool is the “Persona”, a user archetypes, with needs of many individuals based on the research made and on the users behaviours. Remember, users have to enjoy the service and be part of it. 32
INGREDIENTS Problems/Opportunities Personas Contexts Functions Services COOK FOR Any kind of designer, expecially product and interaction designer.
DIFFICULTY
REFERENCES: Bill Moggridge, Designing Interactions, chap. 6 Dan Saffer, Designing for interaction, chap. 2 http://www.servicedesigntools.org http://www.enginegroup.co.uk/service_design/
33
Assignment 8
DEFINE A DESIGN OPPORTUNITY
Context
Stakeholders
It is the city with the highest tourist influx in Italy, with a prevalence of foreign tourists on Italian ones. The flow is fairly constant, although the most intense periods are during the Carnival and between May and October.
Of any kind, age, language, religion, ethnicity. His time in Venice is limited and his daily timetable is quite frenetic. For many of them it’s the first time in venice and they feel a little disoriented for the uniqueness of Venice.
Design an evening companion finder app: a personal mobile device allowing someone, new to a city, to find other people to spend an evening with in a bar or club. Define the problem/ opportunity: What? Why? Who? Where? How?
2011 To preserv the privacy, the user surname will always be hidden.
ARRIVALS
PRESENCES
AVERAGE LENGTH OF STAY
4.199.098
9.497.653
2,26 days
Functions
Choose where are you from and the languages that you speak.
34
Use the map to orient inside the city. Choose between the typical view or challenge yourself with the “hot-warmcold” mode.
The offers you will display will expire in a certain time, and you will decide how long yours will be.
Don’t care about anything and go with the flow! Search for something or someone in real time.
Persona “Hi, I’m Zack. I’m 28 and I’m from the States. I’m finishing my ph.D in Philosophy at the New York University and I’m working as a teacher in an high school on the Upper East Side, Manhattan. I only know English. I like watching baseball and drinking beer (and maybe at the same time), I’m not a “party animal” but I like going to clubs and dance. I’m also quite technological... I do not have a favorite music genre, I listen more to the hits on the radio. I just broke up with my girlfriend, so I’m single. It’s the first time for me in Venice, and I am very fascinated by its atmosphere. I’m here with a friend, but we’ll stay here only for 2 days, then we’ll go to Florence. We took a room in an hostel in Giudecca. What I want to do in this 2 days is to see the main monuments of Venice (Piazza San Marco, Basilica, Rialto, Santa Maria della Salute,etc.) and then meet some italian girls (they told me they are beautiful and easy).”
Choose the sentimental state, so the app will filter the results displayed.
Choose the number of people you want to meet, from a romantic evening to a rave party.
Insert your interests, filter the results and maybe you will find the right place!
Decide your money plan for the evening and always check it.
35
ICE CREAM DROWNED IN COFFEE Diagrams and storyboards: plan your strategy and design.
Humans in every field found ways of abstracting the elements of a project to manipulate them. In architecture are used plans and elevations, designers search for the appearence and functions, on a movie directors write and draw storyboards to see actions and camera views, musicians for pitch and time. Notations is used to: analyse, design, refine, remember, discuss. Through it we can also see the actions over time, the choices, decisions and consequences, the use on the context, the quality of experience, inputs and outputs. The power of a diagram is to abstract all the possible activity (from the user or device’s point of view) and shows the logic or problems of a system in an easier way and all of this in a quick sketch. The only problem on the use of diagrams is that the human element not always is contemplated. A flowchart is a type of diagram that represents an algorithm or a process. It uses different kind of boxes connected with arrows. It has a start and continues one action (decision) after another. It’s a representation that can give a step-by-step solution to a problem. Their main use is to: analize, design, document, manage. The main elements of a flowchart are: start and end symbols (circles), arrows, generic processing steps (rectangles), conditional or decision symbols (rhombuses). It’s an old technique which is still used also on fields involving new technologies.
36
INGREDIENTS Interface Kinetic Tone Storyboard COOK FOR Interaction designers, Service Designers, Software Designers, Sleepwalkers
DIFFICULTY
REFERENCES: Dan Saffer, Designing for interaction, chap. 5 http://www.servicedesigntools.org http://www.enginegroup.co.uk/service_design/
37
Assignment 3
DESIGN A COFFEE DISPENSER INTERACTION Imagine an automatic coffee dispenser which offers an interaction which is ‘better’, in some way, than others you have seen. Focus on: the ‘user interface’, the emotional tone of the interaction, the kinetic and non-visual qualities of the interaction. Draw a flowchart and a storyboard which describe the interaction between the user and your new dispenser. Assume that the dispenser, but not the user, can do more than one action simultaneously. Analisys
Storyboard 38
turn on the mobile app
start
end N
accept notifications on the phone?
Y
reserve a coffee
N
arrive to the coffee machine
actions
outputs
- coins - mobile app - video tracking - gps sensor - human needs
- touch - movement - motion tracking - device sensor - human choices
- coffee - relax
Y check the number of people on the machine
wait for the coffee
ready?
Do you want a coffee?
inputs
go to the coffee machine
wait for your turn N
pay the coffee (coins, money, or with the mobile phone)
choose the product
select the button for the sugar
Y end
drink!
the machines gives you a cup
N
do you have a cup?
Y Y
do you have a spoon?
audio and visual feedback
Y
coffee ready?
check news and videos on the screen
wait for your coffee
put your cup on the machine
N N
end
drink!
push to have a spoon Flowchart 39
COLOPHON
A digestive with a full stomach
Combining all my assignents on a booklet gave me the possibility to make a general consideration on the course. Even if the name of it was “Teorie dell’interazione”, it wasn’t exclusively linked to Interaction Design. Indeed, I would’t have dealt with the course in another way even though with different interests. What I (and I hope to use also the “we” subject) learnt is a metodology of work useful for any kind of designer. Thats why my “recipes” have some suggestions for the possible consumers. Many times designer “make” things only for themselves, then wondering why things go wrong. On the Design Era, every businesses should recognize the power and the value of good design, and people should do it, too. It’s difficult to find a purpose of design, I think each designer has his own one. Mine is to be satisfied of what I do and of course to enjoy working. So please, leave a tip to the waiter. 40
Design and layout Ruggero Baracco Production details Chapter headings: Helvetica Light, 20pt Main text: Adobe Caslon Pro, 10pt Assignments: Helvetica Ligh