IXD Interaction design booklet by Francesca Cremonese

Interaction Designers: The Tools of the Trade Francesca Cremonese

Cover: elaborated version of a Taddeo Zacchini’s photo

Interaction Designers: The Tools of the Trade Francesca Cremonese

Declaration of originality I submitted this document for the exam on 20th December 2007 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 written or created by me alone. Francesca Cremonese Venezia December 2007

Interaction Design Theory 1 course Facoltà di Design e Arti, IUAV University of Venice.

Contents

Introduction

vii

Principles of Good Design 1. MENTAL MODELS: from the mind to the real world and vice versa 2. AFFORDANCE: eloquent objects

3 5

Design Research 3. BRAINSTORMING: to unchain your mind 4. LATENT NEEDS AND DESIRES: inspirations from users

9 11

Design Models and Diagrams

Photo Taddeo Zacchini

5. PARTICIPATORY INTERVIEWS: to uncover attitudes and desires 6. PERSONAS: designersâ&#x20AC;&#x2122; actors 7. STORYBOARDS: stories to describe the design concept in use 8. FLOWCHARTS: to map out a design system 9. PROTOTYPING: what a project will look like

15 17 19 21 23

Final considerations Source list

25 27

Introduction

SPACE

What is Interaction Design?

TIME

Every day people use digital technology products like computers, mobile phones, TV, iPods, automatic machines, games. When you find easy to use these digital technology products it means that Interaction Designers have studied the behavior of the system (in response to users) in order to make it behaves like an human being’s mind. Interaction design makes tecnological devices not only useful, because it isn’t enough, but understandable, interesting, reassuring, beautiful, gratifying. Interaction Design is a new discipline (Bill Moddrige coined the term “Interaction Design” in the late 1980s) in the design field that studies the interaction between users and technological devices and services. Interaction Designers’s aim is to improve the usability and the emotional mood of technologies in order to create useful but also satisfactory objects. For designers is very important researching users’ need and desires: they observe people, analyse their difficulties, test products in order to understand what people think and would like.

MOTION

This booklet want to analyse the Interaction Designers’ tools of the trade in order to explain what Interaction Design really does.

SOUND vi

vii

Principles of Good Design

Photo Taddeo Zacchini

Principles of Good Design

1. MENTAL MODELS: from the mind to the real world and vice versa According to what Donald Norman wrote in his “The Psychology of Everyday Things”, when people use devices form “mental models” of how things work. To construct conceptual models designers have to observe some principles of good designing1: Visibility: object‘s properties and function, have to be visible and immediately understandable. Constraints: to limit the possibilities of operating and help not to make errors (for example you can insert plugs in only one way). Affordance: clues that help you to understand how to use objects (“Plates are for pushing. Knobs are for turning”) (Norman, p.19). Mappings: the natural relationship between the control-display (actions) and the resulting effect in the real world (when you want to go right with your car you turn the wheel right, this is very spontaneous). Feedback: it means all the informations that the user receives to know every action’s result and effect. Figure 1.1

Norman introduced three conceptual models2. 1 The design model, the one that the designer has in mind. 2 The user model, what the user perceives about the system based on his/her experience and use of the system’s structure. This is very important because it allows the user to predict the actions’effect. 3 The system image, the system’s appearance, “the designer’s materialised mental model”3, the means of communications between the designer an the user.

The conceptual model for driving a car is very natural to understand. The driver has an immediate feedback of his actions and knows the status of the system.

The system image is the visible aspect of the designer’s project and has to be clear, in this way the user can understand what the system is, how it works and how to avoid errors and frustration.

USER’S MENTAL MODEL

DESIGNER’S MENTAL MODEL

In a well designed system, the user model is very similar to the design model and for doing that the designers have to test their ideas on users.

DESIGNER

SYSTEM IMAGE

USER

Figure 1.2 Illustration to show: “Coffeepot for masochists” design by Jacques Carelman (1969). It’s easy to understand that it doesn’t work: you simulate the logical operation and construct a mental model. Figure 1.3

SYSTEM

(Adapted from Norman2) Conceptual models.

1. Norman, Donald A. 1997. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Florence: Giunti. (Trans. of The Psychology of Everyday Things. New York: Basic Books. 1988), chapter 1, 25-44. 2. Norman, Donald A. 1997. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Florence: Giunti. 29. 3. http://www.interactiondesign.org/encyclopedia/ mental_models.html, 9 December 2007

Principles of Good Design

2. AFFORDANCE: eloquent objects How many times have you not known if you have to push or pull a door? So you read what is written on the door and hope not to make the mistake of doing the opposite act you’ve just read because the door doesn’t communicate to you immediately how to behave. Object should tell us how to interact with them. Handles, openings, constraints give us clues to understand how to use objects, so for instance you push a button, grasp a handle, turn a knob because your experience tells you that normally you have to do that action. This property of an object that allows you to not think how to use it is called affordance. This term was coined by the cognitive psychologist James Gibson, in his book “The Ecological Approach to Visual Perception”, in 19791. But it was in 1988, with “The Psychology of Everyday Things” written by Donald Norman that the concept spreads into the design community. Norman’s wrote that affordance is “the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used ”2 (Norman, p.19). A well designed object shouldn’t need instructions or labels because clues should suggest to you the object’s function and use. “Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing.”3 (Norman, p.20). Figure 2.1

Sometimes affordance goes against the aesthetic sense of a designer but it doesn’t matter: an object has to be clear and all its functions visible.

Vending machines need instructions to help users to buy a product because otherwise they are not easy to use. Bad affordance.

What you perceive of an object depends from what you know, your culture, your experience. Designers analyze user’s mental models to design easily understandable objects which should behave like an human being.

constrain

Figure 2.2 The lever of the tablet in a train’s seat. You stand up the lever because there is a stop guide that constrain your behavior. Good affordance.

1. Gibson, James J. (1979): The Ecological Approach to Visual Perception. New Jersey, USA, Lawrence Erlbaum Associates. 2-3. Norman, Donald A. 1997. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Florence: Giunti. (Trans. of The Psychology of Everyday Things. New York: Basic Books. 1988), p.19-20.

Design Research

Photo Taddeo Zacchini

Design Research

3. BRAINSTORMING: to unchain your mind Brainstorming is a technique used by designers, in a team, to find innovative solutions and discover new ways of looking at things by generating ideas as fast as possible. When designers have to design something new (or a new version of something) they first start with a research fase when they analyse and understand what they have to design by “gathering information” 1. In this way they can have a clear idea of the“state of the art” 2 of what already exists, about the context of use, the users and goals of what they’re going to design. After that the ideation fase starts so they need thinking at innovative solutions and creative ideas. Brainstorming is the first step of the ideation fase. For a brainstorming session you need: Tools for writing and sketching such us pens, pencils, sheets of paper, white board, post-it. A recorder that means someone that notes the ideas that come from the group. Some place where you can put all ideas togheter, so than you can simply look at them to create connections. To define a time limit. It’s very important that before and during brainstorming people feel relaxed and fun to stretch their minds and release their imagination.

Figure 3.1

According to Alex F. Osborn, there are four basic rules in brainstorming3: More ideas you generate the better it will be. Not criticizes ideas: nothing is wrong. Every kind of idea is welcome: it’s doesn’t matter how strange, impossible, odd is an idea, just feel free and creative. Combine ideas in order to build on a great idea.

After brainstorming designers analyse the ideas and select the most interesting ones. Photo by Taddeo Zacchini

Once time is up look at all the ideas, analyse them and select the ones you find more interesting.

1. Dan Saffer, 2007, Designing for Interaction: Creating Smart Applications and Clever Devices, p.29.

Figure 3.2

2. Bill Moggridge, 2007, Designing Interactions, p.727. 3. The brainstorming method was invented by Osborn, A.F. (1963) Applied imagination: Principles and procedures of creative problem solving.

Design Research

4. LATEND NEEDS AND DESIRES: inspirations from users Designers need to be inspired by people. Listening people, observing what they do, making them testing products help designer to discover people feelings, desires, and thoughts and this is very useful both to improve products (or solve problems) and to define new opportunity and devices. Users don’t know what they need because they don’t know what is possible to do but designers can discover their desires using many participatory research methods, focus on users. According to “IDEO Method Cards”1 these methods that can be devided into four categories: Look. Observe how people interact with things, go in the environment where they perform activities and take notes, in this way designers can have a clear idea of user’s difficulties. Ask. Talk to people, hear their stories, ask people drawing experiences, records their activities and thoughts throw photos, video or just writing down things. Make people express themselves not only by talking but also by acting and doing things help designer to have a richer understanding of their needs and desires and of their context and environment. Maybe sometimes just interviewing people is not enough because often there are some differences from what people say and what they really think an do. Designers have to consider this aspect. Try being a user, simulate experiences (role playing), prototype things and try them to feel closer to people activities and thoughs.

Figure 4.1 Photo to explain: “Card Sorting exercise”, one of IDEO methods cards for researching. “On separate cards, name, possible features, functions, or design attributes. Ask people to organize the cards spatially, in ways that make sense to them. This helps to expose people’s mental models of a device or system.”2

Learn. After gathering data designers analyse and organize them into patterns and start designing something. The research fase is important to understand users’ goals and tasks, to develop interesting products and to avoid errors during the designing fase.

Figure 4.2 Observing how people do things is very useful to understand their mental attitudes and difficulties.

1. Bill Moggridge, 2007, Designing Interactions, p.669. 2. Bill Moggridge, 2007, Designing Interactions, p.675.

Design Models and Diagrams

5. PARTICIPATORY INTERVIEWS: to uncover attitudes and desires One of the most used method of researching user’s latent needs and desires are interviews. A participatory interview is a way to make people talking about their experiences, their attitudes, their difficulties with devices. An interaction designer uses this method to be inspired from people both for design better versions of products but also for designing new devices, based on new technology. Interviewers may ask users to describe a typical day, why they do things, what they do when some events occur, and so on. During the interview the designer takes notes and try to stimulate the interviewee imagination to discover new ideas and proposals regarding new design opportunities. It’s very important to try to discover the emotional attitudes of the interviewee because “products without an emotional component are lifeless and do not connect with people” 1. However interviews have also a problematic aspect that is that often what people say is different from what they do and think; for trying to avoid this problem designers ask people to tell stories about their experiences and interactions with objects (this approach is different and from just making questions). Another important thing is that designers should prefer how, what, why questions and avoid that which can be answered only with yes or no because the interviewee should be encouraged to analyze situations. Figure 5.1

Interviews or focus groups (that means assembling a group of experts in different fields to consider various professional points of view) may also include asking users to do simple sketches of a system, because drawings allow to explain choices afterwards.

During interviews is important to take notes about what users say and try to stimulate their imagination maybe with the help of sketches that visualize ideas.

After collecting data designers analyze them to identify patterns of responses.

Figure 5.2 Ask people to talk about they experience with products and services. For example: What do you think about it? When do you use it? Why do you like it? How do you do this?

1. Dan Saffer, 2007, Designing for Interaction: Creating Smart Applications and Clever Devices, p.8.

Design Models and Diagrams

6. PERSONAS: designers’ actors

Persona 1

Age 45 Nationality Italian Occupation Manager in an important business society. Features Very elegant man, tall and quite slim, busy. Family Married, one child. He lives in Milan but he comes from a small town near Bologna.

Persona 2

Education Graduated in economy with high marks. Physical condition Good health.

He loves - Confortable dirextor’s chair; - technology (tv, sound systems); - visiting new places; - good food.

Typical day He wakes up at 7, takes a shower, has breakfast and goes to the office. He needs always to hurry up. During the day he has important meetings. In the evening he is weary.

He hates - Traffic in the morning; - air travels (he becomes anxious); - queue in general.

Education Primary school

garden, go to the market, have lunch, help his wife.

Physical condition He has a dim view, he needs always eye-glasses but it isn’t enought to see well. He has a problem with his knee: it’s hard for him standing up for long time.

He loves - Fishing; - wathing sport; - old photos.

Features Not very tall, and quite fat, very active man. Family He lives with his wife, no child.

A persona represents a user group and is used by designers as a guide during the design process, when for instance they need to test features, create storyboards (the sequence of actions that need to understand how a product is used). Thinking at this imaginary character helps designers to design not for an anonymous user but for a real person with clear behaviors, goals, motivations, skills.

Typical day He gets up early in the morning, he stays in the

Designers image the persona’s reactions and mental models so when they design product’s features, system and interface ask themselves: What does Jim do after that? Would Jim use this? How does Jim feel? For each projects, there is a small set of personas, that goes from one to seven2 (it depends from the project).

He hates - Techological objects (he doesnt’t understand much about digital things); - dressing up.

The differences between each persona are based on people behavior, goals and motivations. For example if I have to design a kiosk at a vaporetto stop in Venice I should consider at least three types of personas: a venetian resident, a tourist and someone with physical disabilities: these three kind of users have different goals and motivations, so during the design phases I can consider all of them just asking me if the product satisfy the three personas.

Kim Carrey: the student Age 23 years old Nationality English Occupation College students, she is in erasmus in Venice, Italy to study architecture Features Pretty girl, shy, dreamer. Family Two sisters that live in London. An Italian boyfriend.

Education Graduated. Physical condition Good health. Typical day She never gets up at the same time. She goes to school, studies in the school’s library with other students, cooks. She goes to bank very often (she spends so much money).

She loves - Calling and video-callling her friends and her family (she misses them); -reading books and taking photographs (she has a blog); -new social network. She hates - Complex devices; - asking help to other people; - forgetting in new places.

Figure 6.1 Samples personas for designing a bank service.

A persona is a imaginary user archetype created after real researching (interviews for example) with people. It is a description of a fictional person which includes characteristics like name, nationality, job, age, education level, goals, tasks, skills, past experiences, hobbies. Usually there is also a photo that helps to make the profile more realistic.

Brandon Thomson: the pensioner Age 65 years old Nationality American Occupation He retired 3 years ago, he was a fur trader.

Persona 3

Alan Cooper coined the term “persona” in 1983 but the use of personas becames a practical interaction design tool in 1998 when he published “The Inmates Are Running the Asylum”1.

Tommaso Pavan: the business man

1. Source: http://www.cooper. com/insights/journal_of_ design/articles/the_origin_of_ personas_1.html. Consulted 6 December 2007 2. Dan Saffer, 2007, Designing for Interaction: Creating Smart Applications and Clever Devices, p.98.

Piled Higher and Deeper

Pagina 1 di 1

Design Models and Diagrams

7. STORYBOARDS: stories to describe the design concept in use Piled Higher and Deeper by Jorge Cham

www.phdcomics.com

Storyboards are short stories where personas are placed into a context (scenario) to show behaviors during an interaction with a device.

Figure 7.1 Comics are an example of storyboard.

The storyboarding technique comes from filmmaking and advertising.

First designers create a scenario (a context where personas are placed in) then, throw storyboards they describe in images and in words, step-bystep the persona’s experience with a device or a service. Designers use sketches which are quickly drawings, or photos (apposite created) to represent storyboards, they don’t need beautiful drawings because their goal is just to communicate what a device will be or, in analysis phases (interviews for example), to notate users’ stories.

title: "Apologies to Shakespeare" - originally published 2/18/1998

“I almost always begin design by talking with users. Initially, my goal is simply to collect people’s stories. I believe that the stories people tell about what they do and how they do it contain information vital to designing good interfaces. Stories reveal what people like about their work, what they hate about it, what works well, what sorts of things are real problems.” (Design as Storytelling; Thomas Erickson; Apple Computer, Inc.)1 Representing stories in images creates a more powerful simulation of physical interactions that just describing stories in words.

Figure 7.2 Storyboard created with sketches to illustrate the interaction of a kiosk service at a vaporetto stop. Interaction design Theory 1 course, IUAV, Venice, 2007.

http://www.phdcomics.com/comics/archive_print.php?comicid=43

Figure 7.3

16/12/2007

Storyboard created with photos to have a better visualization both of the scenario and the experience. Interaction design Theory 1 course, IUAV, Venice, 2007.

1. http://www.designcrux. netfirms.com/designex_ storyboard.html, 10 December 2007.

Design Models and Diagrams

8. FLOWCHARTS: to map out a design system When designers have a clear idea of what the product will be like they make some models and diagrams that represents the ideas that they have developed after the design research phase.

START

They make a list of all the activities that the project will support (task analysis) and then organize the logical connection between actions.

SELECT THE COFFEE

Flowcharts are step-by-step diagrams that show the logical order of actions in a design system, they are a very useful way to represent sequences of actions in time.

LOOK AT THE PRICE

ENOUGH MONEY ?

yes

CAN SOMEONE GIVE YOU MONEY ?

Flowcharts can be modular (a module for each step of the process) and work through the whole process, showing actions and decisions in the order they happen.

Flowcharts are made up of three types of symbol: Circle, which symbolizes the start or end of the process; Rectangles, which mean actions; Diamonds, which symbolize decisions. These symbols are linked together using arrows to show the logical flow of the process.

yes

INSERT MONEY

ARE MONEY MORE ?

yes

Flowcharts can consider the user point of view or the device-product point of view: they help the designer having a complete vision of the whole process and to focalize the attention on some aspects of the process to improve them.

TAKE THE CHANGE

Another important way of knowing how the system will operate are flowmaps (wireframes) which are a page-by-page (or screen-by-screen) detail of the system’s structure, which includes annotations (notes).

no WAIT FOR THE COFFEE

SUGAR ?

SELECT SUGAR

TAKE YOUR COFFEE Figure 8.1

END

Example of flowchart of a new coffee machine from the user’s point of view (user’s interaction).

Design Models and Diagrams

9. PROTOTYPING: what a project will look like A prototype is a model of the system that designers create to: demonstrate how a device could look like; explore and illustrate ideas; test user’s feedback; before investing time and money into the development of the final product or service. Prototyping is a very important tool for communicating that designers use for themselves (and for their team), for users and for stakeholders (clients for example). There are different types of prototypes1: paper prototypes; digital prototypes; physical prototypes. In the initial analysis designers usually create a paper prototype which are pieces of paper, one for each step of the process. For example, for a mobile software the first piece of paper (maybe a post it) can contain the first screen of the application, the second the “profile screen”, and so on. This kind of prototype (called a low-fidelity prototype) uses sketches and words just to put together ideas to verify if you are or not on the right track with your project. Instead, a high-fidelity prototype is very close to the final artifact.

Figure 9.1 A paper protoype created to demonstrate ideas in order to discuss them with the team. Subject: “masQuest” prototype, designed by Laura Bordin, Alessandro Carraretto, Francesca Cremonese, and Taddeo Zacchini, Interaction Design Lab1, IUAV, Venice, 2007.

Testing a prototype means that designers observe the user’s interaction and take notes to implement the final artifact.

“Language is convincing. Seeing is believing. Touching is reality.” 2 Alan Kay

Figure 9.2 A digital prototype, very close to what could be the final artifact. It is very useful to test user’s behavior. Photo by Taddeo Zacchini. Subject: “Operazione San Gennaro” prototype, designed by Enrico Ausiello, Roberto Ciarambino and Elvira del Monaco, Interaction Design Lab1, IUAV, Venice, 2007.

1. Dan Saffer, 2007, Designing for Interaction: Creating Smart Applications and Clever Devices, p.114. 2. Bill Moggridge, 2007, Designing Interactions, p.683.

Final considerations

Nowadays Interaction Design is a necessary discipline. Every time that I want to buy a technological devices I quicky try it in the shop and I’ve noticed that I always choose the one that seems to me more understandable and less hi-tech. Technology scares people because we think that it is too complex and far from our abilities; when we can’t use a tecnological product we always feel at fault and not able to understand technology. It’s wrong. Interaction Designers work for projecting devices and services that everyone can use with pleasure, avoiding frustration. They studies users in order to adapt the system’s structure to whom will use it. Personas for example, help designers not to forget how the system should behave and for whom (for what kind of user, with which needs and desires). A well designed technological device shouldn’t appear like an enemy but it’s structure should be very similar to the human being’s mind and way of operating. For this, using it should be very confortable like talking with someone else and not with a “machine”. Interaction Designers work to make people loving technology and for creating new opportunity to satisfy people’s desires.

Photo Taddeo Zacchini

Source list

Bibliografy AA. VV. 2006. Lâ&#x20AC;&#x2122;ambiente dellâ&#x20AC;&#x2122;apprendimento. Web design e processi cognitivi, Mc Graw-Hill. Gibson, James J. 1979. The Ecological Approach to Visual Perception. New Jersey, USA, Lawrence Erlbaum Associates. Moggridge, Bill. 2007. Designing Interactions. Cambridge: MIT Press. Saffer, Dan. 2006. Designing for Interaction: Creating Smart Applications and Clever Devices. Berkeley CA: Peachpit. Donald A. Norman. Le cose che ci fanno intelligenti (trans. of The Things that Make Us Smart) Jenny Preece, Yvonne Rogers, Helen Sharp. Interaction Design (Italian trans.) Donald A. Norman. 1997. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Florence: Giunti. (Trans. of The Psychology of Everyday Things. New York: Basic Books. 1988.) Studio 4.5 (Carola Zwick, Burkhard Schmitz, and Kerstin Kuhl). 2006. Designing for Small Screens: Mobile Phones, Smart Phones, PDAs, Pocket PCs, Navigation Systems, MP3 Players, Game Consoles. Switzerland: Ava.

Websites http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm http://www.cooper.com/insights/journal_of_design/articles/the_origin_of_personas_1.html http://www.designcrux.netfirms.com/designex_storyboard.html http://www.ideo.com/methodcards/MethodDeck http://www.interaction-design.org/encyclopedia http://www.ixda.org http://www.phdcomics.com/comics/archive.php?comicid=43 http://www.socialsignal.com/blog/rob-cottingham?page=2 http://www.smartdraw.com/tutorials/flowcharts/tutorial_02.htm