Interaction Designer: the tools of the trade

Laura Bordin Interaction designers: the tools of the trade

1

Declaration of originality I submitted this document for the exam on the 10th of Jenuary 2008 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.

02.01.2008 Laura Bordin

2

Laura Bordin Interaction designers: the tools of the trade

3

Contents .......................................................................

Hello! P.07 Brainstorming P.08 Affordance P.11 Partecipatory Interviews P.12 Personas P.15 Flowcharts P.16 Metaphors P.19 Dynamic Informations P.20 Video Prototypes P.23 Goodbye! P.24 Source List P.27

.......................................................................

4

5

6

Hello! .......................................................................

What is interaction design?

Interaction design is a new discipline that have its root in “industrial design, human sciences and human-computer interaction”.

Its purpose is to facilitate relationships between people through the use of technological services or to make easier the interaction between people and modern devices. It is very important in this moment of omputerization of most of the services or products (ticket machines, cash machines, coffee machines, etc). It depends upon new technologies, computer, internet, telecommunication and human factors, that’s why you can’t do it on your own: there must be a working team with writers, sociologists, designers, artists, programmers, and so on.

The difference between interaction and industrial design is that interaction design “solves specific problems under a particular set of circumstances”, it deals with particular contexts and above all with time. It’s unpredictable: when you start a project you don’t know how it is going to end.

The most important thing about interaction design that it deals with people: they will be the users of what interaction designers create, they are the inspiration for new ideas, in a way they are the fulcrum of any interaction design projects.

This book tryes to give readers an idea of how you can deal with this discipline.

Each tool I described here has a particular evaluation: I gave four marks (from * to * * * * *) to each tool. These marks are related to four parameters: the difficulty a designer encounters using that tool, the tool’s usefulness for the designer (during a project development) and for possible user (on project’s results) and how strong the relationship between designer and people created using that tool - is. Clearly if there is no contact between designer and people or people won’t ever see the results of that tool (e.g. for brainstormings) the mark will be *.

Both the choice of the four parameters and the evaluation are personal: different people could give different marks.

.......................................................................

7

Brainstorming .......................................................................

Quite often the real problem for interaction designers and for designers in general is to find new, interesting ideas.

Many things can limit our range of thinking: too specific targets, client’s demands or even our own experience.

Brainstorming is the fastest way to free your mind.

When you brainstorm your principal task is to give a name to what you have to think of, the object of your research.

After that start thinking of something which is still undiscovered or how to improve existing things or service. Fix a precise lenght of time for your brainstorming, it will help you not to distract and dispel.

You have to write all that comes to your mind even if you think that is a strange, impossible thing to realize. Maybe at the end you can just set right something and from a completely crazy idea will come up a fantastic, possible opportunity. Writing your ideas on post-it helps you making groups of similar thoughts and change their positions in a second moment.

If you feel completely without ideas do brainstorming with other people: maybe their ideas can stimulate your imagination.

In brief there are four rules for brainstorming tool: . produce as many ideas as you can . do not censor your or others’ ideas . crazy ideas are welcome . try to connect two or more ideas in order to improve them and make your project complete.

DIFFICULTY LEVEL: * * UTILITY FOR DESIGNERS: * * * * * UTILITY FOR PEOPLE: * DESIGNER-PEOPLE RELATIONSHIP: * .......................................................................

8

.........................................................................................

When you do brainstromings the ideas you might have could be very different to each other. Don’t care too much about this: write all that comes up to your mind, you will evaluate your ideas later.

9

ON/OFF MACBOOK PRO BUTTON . it’s separate from the rest of the keyboard . it uses a conventional symbol . it’s at the same level of the topcase, so you can only push it . it has a good design

IPOD CONTROLLER . it’s really simple . it uses conventional symbols . it has only the main function . it has a good design

SYMBOLS ON “LE BARCHE“ DOORS . it’s an example of correction: there weren’t these little hands before but people didn’t know which door they have to pushed

STOVE MAPPING . they use very simple and useful mapping . they used bad materials for that mapping because cleaning it has deleted maps . in the picture there is all that you can see now

IPOD CONTROLLER . you don’t know how to move the pointer . at the beginning I tryed to move it with the “arrows models”

ACOUSTIC SIGNAL OF MY CAR . in my car the acoustic signal (the one that inform you if you have left the headlamps on) starts only when you turn back to your car and open the car door, but it’s too late!

10

Affordance .......................................................................

“The term indicates the real and percepite properties of an object”:1 the ones that show or suggest how the object could be used without instructions booklet. For me to project a good afforndance is a way to speak with the users without saying a word: the object or the service itself tells the users about its function. For example a cup is concave, so it could be filled, a chair has an orizontal plan where you can sit or lean on something, and so on. The clearer affordance is, the less is the time people has to spend to understand how using objects.2 Designers can help users drawing map near the principal elements of objects. In Mestre, where I live, there’s a centro commerciale with two rows of glass doors. Each door has an orizontal bar in its center and a vertical one on the side where it opens, but the two rows are sfalsate: if in the first row the first door opens on the right, in the second row the first door on the left opens on the right, so usually people enter from the first but stop on the second one. Some months later stickers with drawn hands have been hung on the opening side, that was cheaper than changing all the market’s doors!

At this moment, when most of the old objects are being replaced with new, technological ones it’s really difficult to design good affordances: computers hide their functions, that’s why it’s difficult to use it and to learn everything about it; luckily there’s some rules you can try to respect when study an affordance: . visibility: make visible what people want to see and where they axpect to see it (hide what is less used); . mapping to give more informations; . give feedback: people want to know if something is happening, if the system has reacted to their inputs; . error constraints: build something which is unambiguous (this is really important in medical design, where there mustn’t be mistakes) . test affordance with people to see if it could work.

DIFFICULTY: * * * * * UTILITY FOR DESIGNERS: * * * * UTILITY FOR PEOPLE: * * * * * DESIGNER-PEOPLE RELATIONSHIP: * * * * .......................................................................

1 Norman D., La caffettiera del masochista, p.19, Giunti, Firenze, 2005.

2 Good affordances work in every country or situation: keep in mind that different countries could have different usi (e.g. in some countries taps turn in a certain direction and in others they do it in the opposite).

11

Partecipatory Interviews .......................................................................

Interviewing people is one of the best way to discover their needs and desires and to develope ideas that give them new opportunities.

Unfortunately it is not so simple: most of time “designers do need to be careful: what people say they do and what they actually do are tipically two very different things”3 and their desires aren’t so clear and visible. That’s why designers usually do particular interviews.

A partecipatory interview is a way to talk to people, without imposing your own point of view, but letting your interviewee guide you through a journey in his life, his habits. It should be like looking through his eyes.

The first thing to do is making your interviewee feel comfortable.

You can also interview him in his house or in a place he knows well, to avoid diseas caused by worryngly, cold rooms.

The questions have to be simple and focused on the experience to which your project is related, finding out not only physical experiences but “emotional attitudes”.

Try not to judge his answer, because this could stop him feeling free and useful. While you are talking, you have to push him gradually to think about what kind of new service or product could help him or give him new opportunities and why it would be useful and appreciated. For that reason try to avoid questions that can be answered with yes or no and focus on question beginning with what, why, how or when.

You have to register both his answers and his behave: if he touches his hair, if he changes continuously positions, in brief if his body is trying to tell you something he hasn’t said yet.

DIFFICULTY: * * * * UTILITY FOR DESIGNERS: * * * * * UTILITY FOR PEOPLE: * * * DESIGNER-PEOPLE RELATIONSHIP: * * * * * .......................................................................

3 Saffer D., Designing for interactions, p.79, New Riders, CA, 2007.

12

.........................................................................................

These ideas have come from my interview with a young, Venetian mother. I try to make her talking freely about her problems, but also about what could give her new opportunities. Then I started proposing possible services or devices and asking her what she thought about them. Her evaluation is represented by the smiles on the left and her motivations are written in Italic.

13

.........................................................................................

This is an example of persona I have created to study an electronic self-service menu for restaurants or pubs’ tables. This persona would have ambiguous behaviour with this service: he would appreciate the fact that he wouldn’t have to wait for the waiter to order in fast-foods, but maybe would be unsatysfied because he likes when waiters in restaurants describe him his dinner’s courses.

14

Personas .......................................................................

Designing personas means creating imaginary people profiles. A persona has a name, an age, nationality, job, a daily routine, something he likes/hates, priorities, missions, goals, motivations, and so on. Their “personalities” comes up from a mix of real people personalities: they could belong to a similar cathegory of people (e.g. the hard working managers), but they can have different motivations and goals.

When designers start developing new projects, they know that “users” will use their product, but “users” is an undefined word.

If they don’t care about defining who the users will be, they can fall in two kinds of danger: develope an object or a service for a closed and stereotypical cathegory of people (e.g. only for Italians who obviously like spaghetti, pizza and mandolino!) or they can be guided only by their personal experience. Using personas makes designers focusing on people who present most of the caracteristic of a certain group of people, but whom motivations can be very different from the common ones.

Personas by themselves are almost unuseful: they become really important when you start thinking about possible scenarios for your new service and help you to discover how it could be used, why it could be appreciated or not, what kind of emotions it could give people, etc.

In practice, to create personas, you have to imagine one people in his/her totality. Decide what his name is, how old he is, a nationality, a job, what he is like, imagine his typical day, what he loves/hates, and, last but not least, his goals and motivations.

To make them more real draw an image of them or choose a photo of a real people that could be appropriate for them, you can also give them a nickname to remember easily (e.g. Massimo, the dadmanager). Try not to have lots of personas: if a device tries to satisfy everybody will end with discontent them all. Unless you’re designing for the whole humanity fix personas’ number in 7, if you touched the right different motivations, “they should be enough to cover 95 percent of the users”4.

DIFFICULTY: * * * UTILITY FOR DESIGNERS: * * * * * UTILITY FOR PEOPLE: * * DESIGNER-PEOPLE RELATIONSHIP: * * .......................................................................

4 Saffer D., ivi, p.98.

15

Flowcharts .......................................................................

Drawing flowcharts allows you to visualise all the steps you have to complete to do something. This tool is most used in mathematic and computer science to represent algorithms. In interaction design it could concern “how” a product or service works or represent the interaction’s step. It could help designers to understand what are the actions that an hypothetical user has to do to reach that goals.

Every flowchart begins with an oval box containing the word START and finishes with an oval box with END in it. The rectangular boxes contain simple actions (e.g. “Select a drink”) while the lozenge ones describe conditions (e.g. “Is the sugar enough?”).

Boxes are linked one to the other by arrows that define their sequentiality.

A little suggestion: when you do the first version of your flowchart, write instructions and questions on post-it: it will allow you to change their order in a second moment.

At the first sight flowcharts can seem very technical and cold, but the collections of actions and decisions and their order determine emotive reactions in users. For example in a coffee machine you have to set how much sugar do you want before you select your drink. This is completly different from our mental model: in a bar or in our house we first get or prepare our drink and then put the sugar in it. So we would expect that the machine asks us to set the sugar, after we select the drink. The result is that our coffee will be too sweet or too bitter!

Moreover at this moment interactive services or products’ flowcharts are very linear and repetitive: everytime you use that service or product you must restart from the beginning repeating all the actions you did last time. Interaction designers should consider this aspect: maybe the next generation of services will recognise you from the second time you use them and record all the informations about your old choices.

DIFFICULTY: * * * UTILITY FOR DESIGNERS: * * * * * UTILITY FOR PEOPLE: * * DESIGNER-PEOPLE RELATIONSHIP: * * .......................................................................

16

.........................................................................................

A flowchart of a coffe machine for Universities: students get a “credit card”, when they pay the first tax’s instalment, that will bill what they spend in University’s services (copies, food machines, library, etc.) in the next instalment, or degree’s tax, so they haven’t to have lots of coins everytime they want a coffee! Moreover the card is personal and recognizes you and your preferences.

17

.........................................................................................

Money-lake is a visual metaphor that describes the mechanism of money incomings and expenses. The lake change his water level depending on how much money you have. The tributary river represents the salary which is the only sure incoming. The precipitations that will make the water level higher, are other possible incomings. The effluents and the sun describes outgoings.

18

Metaphors .......................................................................

Using metaphors is a way to describe something by comparing it to something else. Metaphors can be based on an activity, an object, or a combination of both.

“They work with users’ familiar knowledge to help them understand ‘the unfamiliar’”5.

Most of times the users of a system or of an application don’t know and don’t want to know technically how that system works.

They are more interested in the superficial operation, in what they see, shortly, in what they need to see to achieve their goals. Metaphors help them to understand the system’s functions and capabilities in a simple way, or, better, in a way in which they don’t have to have particular technical skill. To understand if a metaphor is helpful or not, it would be better to test it with people. It would also be interesting to ask them what kind of metaphor or comparison could describe a particular system in a clearer way.

The most famous metaphor is the “desktop metaphor” used by Macintosh and Windows in their operating systems’ development. In this example the computer’s monitor represents the user’s desktop where he puts documents and folders of documents. A document can be opened, seen and modified into a window, which contains a paper copy of it. There are also other small applications called Accessories, such as notepad, calendar, clock, calculator, and so on, that correspond to accessories people might have on their real desk. At that time, the use of this metaphor made this new technological things - the computers - closer to everyday-life objects, and users more comfortable in interacting with them.

DIFFICULTY: * * * UTILITY FOR DESIGNERS: * * * * UTILITY FOR PEOPLE: * * * * * DESIGNER-PEOPLE RELATIONSHIP: * * * .......................................................................

5 http://en.wikipedia.org/wiki/Interface_metaphor

19

Dynamic Informations .......................................................................

Dynamic informations are what designer and their services have to deal with. An interaction designer has to be able to represent multidimensional data, or to put it better, that kind of informations that can change in the course of time. Graphic or 3D designers have no problems to represent something, but interaction designers, as I have already said,6 have to manage with the fourth dimension: time. That’s why notation for our dicipline could be more similar to those of dance and music: they could be bidimensional drawings or symbols that imply a development in time and space (e.g. the notes coming one after the other on a musical staff).

Notation is really important to analyse things that are happening all the time, to be able to remember something, to design, to refine, or eventually to discuss on something with other people.

This is a tool that can concern both the analysis of a project and the final products (in the case where it has to show some multidimensional and dynamic informations; e.g. a train timetable, which shows you also the delays of the trains).

There are many ways to represent dynamic informations: maps, tables, story tellings, diagrams, flowcharts, pictures. Each of them has its qualities and its disadvantages: for instance a story could be understood differently because of our imagination, on the contrary a flowchart is very precise, but could forget the human element.

My piece of advice is to remember that there are different levels of users, the principiant, the medium and the expert: make possible to have all the informations principiants might need or to go directly to the kind of informations that expert users might want to know, be as direct as possible, simple and immediate (using icons can substitute lot of words and be clearer), and, last but not least ,make visible the unexpected: usually it is properly what people want to know!

DIFFICULTY: * * * * * UTILITY FOR DESIGNERS: * * * * * UTILITY FOR PEOPLE: * * * * * DESIGNER-PEOPLE RELATIONSHIP: * * * .......................................................................

6 See Hello!, p.7 of this booklet.

20

A user starts seeing a general map of the whole area in which are indicated all the machines.

The exclamation marks indicate emergency.

When he selects a building he will see how to reach it, in the bar below, the building plan and the informations about the kind of machines, the building timetable, lifts, etc.

Then he selects a floor, seeing its plan bigger and having more informations about when it is the best time to go there and where the machines are.

Touching the machines he can have precise information on what kind of products he needs to re-fill.

!

Expert users who already know how to reach the building and where machines are, can touch directly the exclamtion marks to accede to the final screen and have immediately the informations he wants to know.

.........................................................................................

Sketches for a touch-screen service that monitors all the automatic food machines in a certain area (in this case, Venice). Users jump from one screen (information level) to another by zooming in, as if he was looking with a magnifying glass.

21

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16 17 .........................................................................................

This a video prototype for “City Keys”, a “vaporetto” service for Venice.

My team and I have first shown a scenario with extreme users, a Chinese family (fig. 1,2), their goal (fig.3) and the problems they might have trying to reach it (fig.4,5,6).

Then we describe how could it be better if they could have used “City Keys” (fig. 7-16), and the now possible happy ending (fig.17)! To see the whole video go to http://www.youtube.com/watch?v=1gA27vUvVDM.

22

Video Prototypes .......................................................................

Prototypes are the last step before starting to produce devices or services.

As Dan Saffer says “prototyping is where, finally, all the pieces of the design come together in a holistic unit”7. They can be physical models of an object or videos in which the product behaviour is shown. Their role is to explore, test, demonstrate.

Infact they help the design team’s persons making their work visible, in a way they are something physical on which discussing could be easier: videos can show a possible scenario, what kind of role can the artefact assume in people’s life and the sensory and perceptual experience coming from using it. It’s important to see how the implementation works and what kind of reactions there could be in the users. They are also very useful to present the product to possible clients that might have had some difficulties to understand the project without seeing it.

There are two parameters for video prototypes: the video’s resolution, which is related to the number of details shown, and the product’s fidelity or how is the product in the video similar to its final version. There can be lo-fidelity but high resolution video prototypes that, for instance, can present lot of options given by the device, but the device itself could be a rough, post-it model. On the contrary high fidelity but lo-resolution videos can show a perfect prototype of the device, working in few, or just one, situations. The highfidelity and high-resolution prototypes are really helpful and beautiful but have a flaw: it could seem that the product shown in the video is the final one, that it couldn’t be changed anymore.

Remember that a video-prototype is a tool to complete the design research, not the final presentation, although it could be a good starting point for it.

DIFFICULTY: * * * UTILITY FOR DESIGNERS: * * * * * UTILITY FOR PEOPLE: * * * * * DESIGNER-PEOPLE RELATIONSHIP: * * * * .......................................................................

7 Saffer D., ivi, p.114.

23

Goodbye! .......................................................................

I like to think of an interaction designer as a melting-pot of an inventor, an artist and a humans’ scholar.

An inventor because he finds out new devices or new ways to make old systems working better.

An artist because he put an aesthetic value in everything he does, obviously it is not a futile aesthetic.

A humans’ scholar because all he creates has to deal with people’s needs, habits and ways of learning.

In a way, interaction designers help people to understand and exploit opportunities given by machines without losing time. Less time with machines means more time with people!

.......................................................................

24

25

26

Source list .......................................................................

Bibliography: Moggridge Bill, Designing Interactions, MIT Press, 2006.

Norman Donald, La caffettiera del masochista, Giunti, Fi, 2005.

Saffer Dan, Designing for interactions, New Rider, CA, 2007.

Web: www.wikipedia.org Other contents: Some of the texts in this booklet draw inspiration from classes attended during the Interactions Design course given by Philip Tabor with Gillian Crampton Smith at the FacoltĂ di Design e Arti, IUAV University of Venice (October - December 2007).

Images: All the images in this book are made by me, for the assignments of the Interaction Design course.

The only image I took from a web page is the one shown in P.14.

Its source is: http://www.collective.se/mode/2007/05/manligt/ljung-nyttsvenskt-marke/

.......................................................................

27

28