intera 路 ction design a brief guide to understand tools and interfaces Graziana Saccente
IUAV University of Venice Master in Design Visual and Multimedia Communication Interaction Design Theory 1 2012-2013 Gillian Crampton Smith Philip Tabor
interaction design a brief guide to understand tools and interfaces
Graziana Saccente
Declaration of originality I submitted this document for the exam on 28-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. 28/01/2013 Graziana Saccente
content
1.
Introduction
5
2.
Smart environment
7
3.
Affordance
8
4.
Mental models
11
5.
Idea and method
13
6.
Users and Personas
14
7.
Prototyping
16
8.
Conclusions
19
It is essential to the success of interaction design that designers find a way to understand the perceptions, circumstances, habits, needs and desires of the ultimate users. Jane Fulton Suri
1. introduction Our minds are always trying to interpret and find a reason for events in our life like a cause-effect operation. In our daily lives, we constantly utilize tools and interfaces to satisfy our needs. But the objects do not always contain clear and visible instructions and our tasks become more difficult. The washing machine has numerous functions, but we are just satisfied that we are able to choose the right program and our laundry looks clean. Interactive design deals with the relation between the user interfaces and the tools operation system. This investigation concerns the human behaviors and the interaction with digital-analogic product and services. Its purpose is to make visible the invisible working flow of the objects in an easy way, helping with user experience. A complicated system is composed in a simple manner. Usability, utility, and satisfaction are the most important values of a good project based on the human interactions. This brief guide explains the significance of interaction design, how it works, and what the tools are of its trade through some case studies.
5
6
2. smart environment I’m always late. In my every day life I would like a device that helps me to remember my tasks and don’t waste time. I imagine a magic box with a microphone that follow me and calculate step by step how much time I spend to wake up, to have breakfast, to choose clothes and then to take my keys and my phone. Moreover I’d like to make adjustable and interactive the screen like windows or doors thank to an application ables to control amount of light, colors or panorama.
Ambient intelligence refers to electronic environments that are sensitive and responsive to the presence of people. A smart environment is characterized by a hidden network that supports people in their everyday life activities and it's ready to fit to different persons. The opportunity to have readily available intelligent devices may seem very comfortable, but often we are not able to totally control the system. We need to be free to choose between automatic and manual mode. Good interaction interfaces should make the relation between user and objects easier and not enslave the desires to the functions. We need to learn and make mistakes by doing. Ambient intelligence is not an enemy but an old friend that moves up the intentions and responds to commands. Writers and directors have already imagined a future in which machines take control with disastrous consequences for men such as The Time Machine, War of the Worlds, Minority Report or Robopocalypse. The best ambient intelligence is unobtrusive. It does not destroy the imagination, it allows us discover our skills. The interaction designer has the task to project an invisible technology and an intuitive visual for different cultural context and users. He should pick up from multidisciplinary areas, balancing between technological mood, and perception with a suitable emotional tone.
7
3. affordance The characteristic and the ergonomics of the objects remind us of their proper use and functions. Good design and the components of an instrument allow us to understand how it works with an intuitive approach. For example, the constraints oblige us to push a button, to hold a knife, and turn a knob. Theorized by James J. Gibson in 1966, affordance refers to the opportunities for action provided by a particular object or environments. His ecological psychology states that perception of an object involves not only perception of the visual characteristics of that object, but also involves perception of what the object affords, without the aid of an intervening mental process. The affordance creates a feeling between objects and human interaction. Main clues come from proportion, structure, dimension, shape, weight and colour. This particular kind of synesthesia produces a feedback and helps us to decode the quality of an object. There are two types of affordance: Real affordance physical properties of the objects Perceived affordance contextual and familiar to the user An efficient project tries to combine these two points of view with a creative and innovative solution.
8
I think a good affardonace is intuitive and ergonomic. As in these examples in the hook of the safety belt, in the pump of the bicycle and in the handle of the sprayer. In these cases, mapping and form help the user. Affordances are bad when the process to get it back is not clear as in the case of new tents. The shape of the blade canopener does not tell us how to hold it. Moreover when there are too many buttons and function that I need is just one as in the case of modern intercom.
good affordance
bad affordance
9
10
4. mental models I have represented
my economic
system by a visual metaphor. I chose the water cycle because I think that nature provides us perfect examples of systems. The water symbolizes money. The drops fall from a cloud. The cloud is the source of my savings. The water is collected from a gardener in a watering can. Through this tool, I manage my savings by sector and decided to water the plants in my garden or save water for dry season. The plants grow depending on the amount of drops that they receive.
The human being accumulates cognition of the world thanks to the events in daily life. Every new experience can be compared with a previous knowledge. Our mental model of functioning works like a big wardrobe where each drawer coincides with an area of interest, giving us an easier explanation. As in literature, the use of metaphors for an interaction designer is very useful because it enables the user to associate something foreign to something familiar. We can pick up from other cultural context such as paraphrasing or being ironic, to explain a complex system in a simple way. For example, the computer interface became more democratic when visual designers chose to apply the desk metaphor to the operating system. Sometimes it’s quite dangerous to trust only in our unconscious mental model. Therefore, our interaction should be guided in the right direction with limitations, clarifying the relation input-output. For this reason, a designer conceptual model must be tested on the final users to predict their behavior and the cultural level, and if necessary, simplify the mechanism. In the fifteenth century, the metaphor of understanding the universe, changed completely. Until that moment, the cosmos was imagined as a living organism or an animal like Aristotle. Descartes revolutionized the metaphor that the universe functions like a machine or a clock-like mechanism and from that moment everything changed.
11
S T A R T
go to the coffee machine
insert coin don don don
it says good morning
check the price
sugar?
add teaspon of sugar sound
yes
no
choose type of coffee
it gives change
wait 10 second countdown
the coffee is ready?
start don raffaè (clarinet version)
yes
sound term pin
no
end don raffaè
take the coffee
it says thanks
E N D
5. idea and method I imagine an automatic coffee dispenser which offers an interaction which is better, in some way, than others I have seen at my university. The habit of drinking coffee during the break is for the students very important. In addition, the Italians love coffee at the bar because it’s like a ritual with sounds, smells and typical gestures of a café. I think, therefore, to make more interactive the dispenser through more authentic sounds and a soundtrack during the seconds of preparation. In the end I’d like a machine more friendly like a barman who greets me and give thanks.
Every device is born to satisfy a need over it’s appearance. It comprises an interface where the inputs and outputs work together to achieve the purpose. From the beginning, the interaction designer must analyze these tasks step by step in order to find consequential logic to the actions and give the right feedback to the user. Organize task flow means giving clear connections. It suggests the order of commands and the information and menu position. Mapping is a logical spatial relationship between elements and the result of an action. Natural mapping uses physical and conceptual analogies and cultural standards to make evident the mechanism. Every action corresponds to visible and audible feedback, so the user can interpret what’s happening. Navigability is also essential, particularly on screen. You need to know where you are in the system, where you can go next, and how to get back. Designers can explain this sequence of actions through two methods: Flowchart graphic diagram that represents the whole process using different symbols linked together with arrows. An oval flow indicates the start and the end. The rectangular box represents every action, and the rhombus is a branch in the flow. Storyboard graphic organizer used to describe a scenario with a specific emotional tone. Like comics, it consists of sketches and text displayed in sequence. it’s very
13
6. users and personas When people become part of a project, their preferences and perceptions condition design and reference market. Users are a resource for new ideas and solutions. By focusing on the user, the designer is able to involve every aspect and to discover the numerous opportunities and limits of a project or service. Defining a target in particular, helps us to imagine the probable reaction and possible correlations. Often we experiment illogical difficulties with some technological devices, likely because the designers don’t test their projects on the final user. The user should be in the centre of our creative process and be accounted for step by step from the research phase to prototyping. Who are the users? What do they want from the experience? What will give them satisfaction and enjoyment? These are the questions we must ask for participatory design process. Observation is a useful and easy technique to learn about people, to understand what is important for them and to integrate human factors in the project. We can imagine Personas, fictional characters, and hypothetical subjects with specific habits. These help us to define the context of use, the interaction approach and to show quality and defects of an idea. Personas are representative of the typical user. Through planned questions we try to discover the interviewee’s needs and desires, some aspect of their life, their emotional attitudes and their technological skills. By analyzing the collected information, we can make assessments, identify the problems and opportunities and reach the final goal.
14
Anna Rosa Schiraldi 66 years old italian She lives alone in Bitonto (Bari). She is retired. She was teaching Letters to the middle school. She likes technology. What are your major interests?
Reading, photography, film, knitting and crochet
Do you like technology?
I love technology
If so, what kind of technology do you use most frequently?
The computer of course! Especially for internet (but not only). I could not do without it and then, if the connection is less I feel anxious. Then the camera, I have more than one and change them often. Finally the mobile phone that is not of those complexes; I need a mobile just to be in contact with the other in case of necessity. For me technological devices for the house are less important but I really appreciate the advantages.
What websites do you visit daily?
Especially those of newspapers. Before the two local online newspapers , after the national ones. Then the social networks, especially facebook and twitter, but also google+. I use facebook to keep in touch with people, family and friends, but also to be informed about events and problems in my city. I follow also online groups , sharing hobbies and experiences with other persons. I think it’s very useful and funny for me.
Has technology changed your habits? How?
My habits have definitely changed. For twelve years I have been a member of the editorial staff of a local newspaper and everything becomes much more rapidly than at the beginning, from seeking information and news to send articles and photos. Friendships have changed because the old friends have not adapted to the new fast communication, but I’ve found other younger friends. I find it much more interesting to be online than watching stupid TV programs. At Christmas my grandchildren give me an eBook as a gift and I think it is much more convenient than reading on paper, I don’t miss the smell of printed paper or the rustle of pages.
Have you ever wanted a service or product technology closer to your needs. If so, when?
No, I’m not able to imagine something that has not yet been invented. I observe the society transformation with amazement and admiration. I am grateful to the designers for modern life that I lead today.
7. prototyping Testing the usability of the service and the context of uses is very important. After drawing a main scenario, sketching a short storyboard and getting a clear flowchart, the designer can think to make a paper prototype to test a product or service. It’s a tool for simulating and testing interactions in a fast and rough way. Prototypes represent a combination of the way to design looks, feels, behaviors and experiences. The sensory experience of using a tangible object allows us to explore and to communicate context, interaction and mood. It gives us the final sense of the project. A possible user gives us direct feedback and he evaluates idea, design and graphic direction. Thanks to paper prototypes, people are able to express their opinion and make suggestions at an earlier phase. Even if the project isn’t complete, they have an active role in the creative process. In the final phase, it could be fun planning a video where we show the main scenario and the operating principles through a quick simulation of the screen transitions. With video editing, sounds and eventually a soundtrack, we can give a clear meaning to the project. Our team has imagined a restaurant finder application for smartphone. Mash Meal allow to find restaurant in Venice and reserve a table in a particular way. It works with by using an ingredient filter and users can select food categories. The system would then compare the selections with restaurant menus where those ingredients are available.
16
Shoot a video for our application was very fun and useful. We first analyzed the flowchart of our project. Then we imagined a storyboard and finally we made a paper prototype. We found the location in a cafè and we simulated a credible situation: three hungry friends with different tastes decide to go to lunch. Thanks to Mash Meal they come to an agreement and the app finds the right place for them.
17
18
8. conclusions An interaction designer is an expert in habits, behaviors and communication. His job is to make proposals and think about the messages that have a positive impact on the relationship between man and machine. Works of art or design find their functionality only if there is communication with the world. The reality is flexible and evolving. The technological revolution produces a huge amount of data, new rules and new ways of working. The interaction designer designing behaviors, should be closer to society changes, implementing concepts, ideas and methods. He must be a keen observer who is able to create a common language between man and devices through a personal creative process. He may be the architect of a modern revolution, solving problems and concretely helping people in daily life, thanks to an ethical approach and innovative solutions.
19
sources list Norman, Donald A. 1990. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti (Trans. of the Psychology of Everyday Things. New York, Basic Books, 1988.) Saffer, Dan. 2007. Design dell’interazione: Creare Applicazioni Intelligenti e Dispositivi con l’Interaction Design. Berkeley CA, Peachpit. Moggridge, Bill. 2007. Designing Interactions. Cambridge, MIT Press. Preece, Jenny; Sharp, Heln; Rogers, Yvonne. 2004. Interaction Design. Milano, Apogeo Editore www.ilpalo.com/cervello-coscienza-mente/ www.ideo.com