Interaction Design by Mario Hecht

Mario Hecht

Interaction Design

and the story of what I have learned and will take home with me

n ! pe e O er h 1

Declaration of Originality

I submitted this document for the exam on 02.11.2011 of the Interaction Design Theory course (Teorie dellâ&#x20AC;&#x2122;interazione) given by Gillian Crampton Smith with Philip Tabor at the FacoltĂ di Design e Arti, Iuav University of Venice. For all word-sequences which I have copied from other sources, I have: a) reproduced them in italics, and b) placed quotation marks at their start and their end, and c) indicated, for each sequence, the exact page number or webpage URL of the original source. For all images which I have copied from other sources, I have indicated: a) the creator and/or owner of the image, and b) the exact page number or webpage URL of the original source. I declare that all other word-sequences and images in this document were written or created by me alone.

_____________________________________________________________________

Title

Mario Hecht

Interaction Design

and the story of what I have learned and will take home with me

Index

Declaration of Originality Title Index Introduction Interaction Design Assignments 1. intelligent ambience brainstorming 2. affordances 3. notations 4. metaphors, conceptual models 5. visualizing data. users? different approaches 6. service design Conclusion Sources List Production Details

3 5 7 9 10 11 15 16 21 25 29 35 36 41 42 43

Introduction

The main reason for me to attend the class „Theory of Inter-

hope that you can learn all the things out of this book that I

action Design“ was the circumstance that there is nothing

learned in the class.

really similar to this at my university. We have interactiondesign-classes but they are always connected with a big project that has to be done in the end. That is, at my home university we don‘t have a lot of theoretical classes in general. For that cause, I wanted to get the understanding of what is going on with Interaction Design without doing a huge, time consuming project in the end. And the other reason was that the class is in English, and my Italian skills are unfortunately rather weak. The biggest and, in fact, most important thing I have learned is that the ways of working are universal and can be applied to almost every design process in almost every design discipline. It is, in my opinion, very common at my university, that we have to learn our methods and techniques by ourselves. Thus, unfortunately, you sometimes don‘t know if you should do a brainstorming right now or if a flowchart is the way to go or better a small comic or organizing a play. This is on the one hand good because you know later if a choice was good or bad and why it was good or bad. Unfortunately, when it was bad, often you just lose time which is in a project very precious. So you sit there working on charts etc. and after you‘ve finished, you‘re not one step further than before; what a pity. This class was so interesting because it showed me different techniques for different purposes and how they are performed in the right way. So everything I know right now about Interaction Design and design processes I would like to share with you. I also

So please enjoy this small booklet, and „note-toself “: look at it from time to time, and remember what you have learned!

Interaction Design First of all, what is Interaction Design –or design in general?

History Of Interaction Design'(Saffer, Dan. 2007. Designing

My relatives often ask me when they‘re visiting us what I am

for Interaction. Berkeley. New Riders. p. 9) out of his Book

actually doing at my university. I‘m usually very puzzled be-

„designing for interaction“, Interaction Design evolved simi-

cause I have no idea how to explain it to them. In their eyes

lar. The first computers were „juggernauts“, hard to under-

I am the weird art-guy who doesn‘t want to get a proper job

stand for normal people, big as halls, and the interaction was

and work for his money. So I usually just say something like

coordinated in the way that the machine could use it –punch

that:“Do you see this glass or the coke-can or the plate you‘re

cards, for example. Only a few people in the whole world

eating from or the fork or the table or everything else? Do

worked with this and could build them; the engineers were

you think this stuff just fell down from the sky? No, because

working almost like craftsmen. But the more the technology

there are people who thought about creating this stuff and

evolved, the more people worked with it and soon a compu-

designed it“. This is usually keeping them calm but you can

ter was a normal thing to have in an office. It became neces-

always see in their eyes that they now know that there are

sary to design the „behavior“ of working with a computer

people creating stuff like that but still they have no idea of

and of how a computer works. This point was maybe the

how they do it.

birth of Interaction Design as discipline. The name for it was

So I think this quote: 'With art –if you like, you can be

invented much later in 1990 by Bill Moggridge from IDEO

really weird. But in design you have to think about what other

who wanted to find out what they are actually „designing“

people will like. Ghisli, age 10'(Moggridge, Bill. 2007. Desig-

and they didn‘t think it was industrial design, nor graphic

ning Interactions. Cambridge. MIT Press. p. 648) is good

design but some hybrid out of both and it included interac-

and true because it exactly divides, in my opinion, art from

tion and connection. Maybe that‘s why he named it Interac-

design and this is definitely the thing I am going to say the

tion Design (Saffer, Dan. 2007. Designing for Interaction.

next time I meet my relatives. And I hope that they will get

Berkeley. New Riders. p. 3 - 22)

this. I hope then, I am no longer the lazy „art-guy“ in their eyes.

Again to the question how to create this „design.“ According to Bill Moggridge the elements of designing are:

But let‘s get back to Interaction Design. It is about

'constraints, synthesis, framing, ideation, envisioning, uncer-

connecting and interacting people with people for example

tainty, selection, visualization, prototyping, and evaluation'

telephones or IMs. Connecting people with information like

(Moggridge, Bill. 2007. Designing Interactions. Cambridge.

Wikipedia or translation tools. Connecting people with de-

MIT Press. p. 729) This can also be seen as a „workflow“

vices like getting money from the „bankomat“ or again the

with the constraints in the beginning, following the path in

telephone or simply a watch.

the middle, and having a result in the end. But to be true, it

It developed like all other design disciplines almost

doesn‘ t work like this. You jump wildly between the single

naturally because of changing circumstances. For example

aspects and end up often with uncertainty. This is what Mog-

the book pressing machine with movable letters invented by

gridge calls: ' more like playing with a pinball machine, where

Gutenberg made it possible for people to create cheaply and

one bounces rapidly in unexpected directions.'

quickly a huge number of printed media. It then was possi-

(Moggridge, Bill. 2007. Designing Interactions. Cambridge.

ble to make newspapers and posters, so it became necessary

MIT Press. p. 650). This jumping and rethinking at any time

for people to create font layouts, page layouts, type faces etc..

of the process is what the subconscious does and this is what

There was no need anymore for monks to copy books by

creative working is about. Knowing what is right by intuition

hand. In my opinion, this was the beginning of Graphic De-

and by having proper constraints, research, prototyping etc..

sign. In Industrial Design, like the name implies, the Indus-

Now I hope you read this and get an understanding of Inter-

trial Revolution and the invention of the steam engine made

action Design. (Moggridge, Bill. 2007. Designing Interac-

it possible to build machines that were able to create a large

tions. Cambridge. MIT Press. p. 729 - 735)

amount of produced goods. Again, the craftsmen who created unique furniture, pottery, etc. needed to create something that can be produced in large quantities in an industrial, automated way. The birth of Industrial Design. And also, according to Dan Saffers ' A (Very) Brief

11 10

Assignments 1. intelligent ambience

The first assignment was about „picturing an intelligent am-

that is the reason why I am still super tired. To get a bit

bience“ that is all around us. The scenario was from getting

more awake a turn on some nice tunes (usually old punk

or waking up until we are at university.

rock from the late 70s). After undressing and fearing that

This exercise covers a lot of the previously mentioned

I am not blessed with warm water in the shower, I actually

parts of the design process. You need to set constraints. This

go there, and am wondering why there is still liquid water

is the environment you are working in, the rules you need

coming out of the shower head and not hail. I wash myself

and the problems there are. The best thing that can happen

then I get out of the shower to brush my teeth. I dress up,

is that you know all the constraints for a project by heart.

pack my stuff(on monday it is usually way to heavy), leave

You need to synthesize about the topic –what is important?

the house. So now I am on the street, but of course, I can‘t

The mind is always busy with the merging of ideas and con-

remember if i locked the door, so I turn back check the

straints and opportunities. Framing, how is the way you

door, it is locked, dammit!, Well I leave the house again,

work? Is it diagrammaticaly? Based on research or based on

and I am on the streets for real now.

your experience? It brings the first wave of systematics in the

vast amount of ideas. Ideation –what do you think of ? What

crowded, in the beginning I also got lost a lot along my

ideas do you have? Visualization –how does it look, how do

way to the „Terese“. I wasn‘t able to figure out how whole

I make it that other people understand what I want? Of

venice works, and that it means nothing to go the right

course, selection and uncertainty. (Moggridge, Bill. 2007.

direction, because most of the times you end up standing

Designing Interactions. Cambridge. MIT Press. p. 729 - 735)

in front of a canal without a bridge and catch yourself

Intelligent ambience is, let‘s say, an ambience that is

thinking:“this damn city, why is there always water…“.

aware of you and can act to help you or make things easier

When I then finally found my way, I entered the „Terese“

or even make things you are not fully aware of. It makes life

more comfortable. Automatically controlled heaters, for ex-

climb ( I don‘t know why I haven‘t used the elevator).

ample, imagine a system that checks somehow your body-

Then I enter the classroom and follow the lecture.

Along Strada Nova, it gets each meter more

Inside the „Terese“, there are a lot of stairs to

functions and notices that you are freezing and turns on the

After doing this I said to myself that I can‘t get the data

heat automatically. It also can be a device that does a lot of

out of a continuous text. I need a list. I splitted my morning

things that you do unconsciously like checking if you have

into three parts: „1. in my accommodation, 2. in the streets

locked the door, setting the music for your mood. Important

and 3. in the IUAV.“ This helped to get an understanding of

for an intelligent ambience is that it can learn and it knows

what I am actually doing every morning and what I really

to whom it belongs and what the owner wants and needs.

hate about how some things work (especially the shower).

In my case, to start with the assignment, I wrote a small story of what I am doing in the morning. This should set my constraints and let me know what I am actually doing: I get up at 7:30 in the morning which is pretty early, 11

THE LIST -Getting up at 7:30. -Still being really tired. -Turning on music(usually Old Punk Rock) -Undress and and hoping the shower has enough warm water. -Going into the shower. -Wash. -Getting out of the Shower. -Brushing my Teeth. -Drying my Hair. -Dress up. -Smear hair gel on my head. -Pack my Stuff. -Leave the House. -Turn back because I canâ&#x20AC;&#x2DC;t Remember if I locked the door. -Leave the House again. In the Streets. -Going along Strada Nova -Passing a few Bridges - Itâ&#x20AC;&#x2DC;s getting more and more crowded. -Being in a hurry. -Forgot the exact way. -Get lost. -Finally arrive. In the IUAV: -Entering the building. -Climbing the Stairs. -Sitting down in the Classroom. -Sitting there following the lecture..

lists a re usefu l! 13 12

And this is my imagination of an intelligent ambience that is fitting for me.



7: 30

It is still 7:30h in the morning but everything is better

The Shower actual knew that I‘m awake and tells me

with music and my alarmclock now knows how I slept,

„enough warm water“. Additionally, it has pumped out the

and plays exactly the music that I want to hear.

cold water which was left in the pipes and has actually

Of course, over a period of time the alarmclock has learned

immediately warm water. Great!

what I prefer at what time and what I usually listen after going out in the evening etc.

8°C While I was in the shower, the heating has been turned on

It tells me the weather forecast and if I should take my

so that I won‘t freeze when I‘m getting out of the shower.

umbrella. Additionally, the umbrella in the corner begins to shine brightly.

This way, It is not crowded there

Interaction Design Books etc...

lock the door

I can see my schedule and the information about what

It wishes me a nice day and tells me which streets are

things I should bring written on the door.

already crowded and what‘s the quickest way today. And by the choice of my music it knows if I‘m in lack of coffee.

Friend A

Friend D Friend B Friend C Mood: OK 20 People in the classroom 6 Friends.

There are augmented signs which I can use if I want to

A device knows who is there and knows how the overall

find the way. Also it shows me if and where my friends

mood of the people is. So the ambient of the room is

are in the streets. I can easily meet them or „cross“ their

cheering them up or calming them down.

ways.

15 14

So what have I done? Actually I set the constraints: In this

there is just text explaining the situation. Also people get

scenario the constraints are obvious: It is my room and Ve-

a „mood“ transferred from a picture. So, for example,

nice. In a technical/scientific way there aren‘t any contraints

when I say: „Here I got a bad morning“ on the phone

because it is just an imagination, just ideas. The ideas you can

everybody gets it but they are not very compassionate.

see in the pictures.

Instead, when I show up and look horrible because I

To visualize them I drew a small comic of my morning but

haven‘t slept all night, they see me and for that reason

first, to get order in my „ideas“, I made a list of my day how

they can feel my discomfort.

it actually is and marked everything what I don‘t like in it. After doing this I thought of what would‘ve been better and

So to sum up what is important for me:

there was a lot of stuff. After having written down my ideas

- Know the constraints, get to know them by writing

I kicked out the stuff that was cool but really unnecessary.

and telling

This is were the first „uncertainties“ and a lot of ideas had

- A picture is worth a thousand words

to go then. I checked everything again and, when I thought

- To make a Comic you need to understand

that the things I came up with matched the things I would

- Making small comics launches you right into a project

like to have, I started drawing.

- After doing it you are kind of inside the problem.

The comic really helped me to get a knowing of what I have done here. I could see immediately if it works or not. You can almost feel what it would be, other than when you just would have had text. Text leaves to much fantasy. You

- For understanding, lists are very useful - Keep your comics and use them all over and adjust them to the state of a project - A good way to start is writing stories

can then show this to anyone (I explained it to my parents) and they understood much easier how it could work as if

Draw a ! n o o cart

Brainstorming In the lecture we were introduced to „brain storming“ as a technique to generate as many ideas as possible in a short time. In my opinion brain storming is a mighty tool at my home university we do brain storming on a regular base to keep the routine and we always try to get ideas to generate other ideas. Usually this is working pretty good. Though we learned how to do brain stormings I have never read texts on it. I read about some thingst we haven‘t done but I am looking forward to try them out. For example, Dan Saffer recommends to warm-up what we never did because we were just starting out of the blue. We never used clear rules, we just let everything flow but sometimes it happens, as described, that you get stuck with one idea and admire it too much, or worse start discussing it. But this is, like I said, not the point of brain storming. So what I really learned was that some rules like only one person has the word at a time or being as graphic as you can really smoothen the process and you are much faster and much more productive. Some other good and important rules for me are to be really prepared for the brainstorming, have the exact idea on what problems you are working, don‘t drift too far away and, if this happens, don‘t discard your ideas but keep them somewhere where you can‘t talk about them but maybe use them later. Doing research and brainstormings in a good way is what Saffer calls: the 'interaction design‘s secret sauce' (Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 88). I believe this is true because the amount of ideas produce with a brainstorming is hard to get when you just sit there and think. Here it is important to have a lot and to later pick out the pearls out of the ideas. (Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 86 - 88)

17 16

2. affordances

Affordances are a part of the appearance; they are not the

course it would be even better if you move the mouse wheel

„thing“ in whole but a part of the characteristics of an object.

up and down but this simple transmission is done easily by

Affordances are, if you like, the „silent“ language of things.

the brain. It is always good to try to use, when it is possible,

The language that tells you what to do with a thing and what

a 'natural mapping[, and logical arrangement], by which I

it is for. For example, 'a chair affords („is for“) support, there-

mean taking advantage of physical analogies and cultural

fore, affords sitting' (Norman, Donald A. 1988. The Design of

standards,'(Norman, Donald A. 1988. The Design of Everyday

Everyday Things. New York. Basic Books. p. 9). The nice

Things. New York. Basic Books. p. 23). So this means, mo-

thing about a good affordance is that you don‘t have to think

ving something forward should result in moving something

long about how something works; it just functions naturally.

forward, making something more, should add things, and so

But of course you need some previous experience with simi-

on. Logical analogies are good. (Norman, Donald A. 1988.

lar objects. Let‘s say a Martian comes down to earth, he has

The Design of Everyday Things. New York. Basic Books. p.

never seen a door before. Why should he know how to use

23 - 27)

it? This is what Dan Saffer means when he says, 'Affordances

Mapping and Affordances are in my opinion „multi

(or, technically, perceived affordances) are contextual and cul-

layered“. So when you have, for example, a single switch.

tural' (Saffer, Dan. 2007. Designing for Interaction. Berkeley.

There is on and off, you just push the part that stands out of

New Riders. p. 49). We just know how to use a door handle

the wall. If this switch is the only switch to control the lights

because we grew up with it and they are fitting the logic and

it is pretty simple: everything is either on or off, depends in

the structure of our body and the physics of the earth. Good

which state the switch is. But confusion already starts in my

affordances usually don‘t need some texts or instructions that

bathroom where there are two switches for two lights. Well,

help you deal with an object if the topic is simple enough. A

that is manageable and I don‘t care which light is on. But in

computer, of course, will always need some instruction even

the „Terese“ for example there are like, 10000 switches for

though the affordances are not that bad but the whole thing

10000 lights. I guess no one will ever find out which switch

is just very complex. (Norman, Donald A. 1988. The Design

operates which light. This thing should maybe be better ar-

of Everyday Things. New York. Basic Books. p. 9 /75 - 78 |

ranged, maybe in a way that Don Norman describes as 'na-

Saffer, Dan. 2007. Designing for Interaction. Berkeley. New

tural mappings' (Norman, Donald A. 1988. The Design of

Riders. p. 48- 50)

Everyday Things. New York. Basic Books. p. 75). So the swit-

Affordances are also about mapping. You need to know how a thing works, how it is moved, how it is manipulated

ches are arranged in a way, that represents that what they control. It would be much easier.

and what the outcome of it is.

(Norman, Donald A. 1988. The Design of Everyday Things.

So for example the mouse wheel has a good affordance. The

New York. Basic Books. p. 75 - 79 / 92 - 99)

first time you lay your hand on it you know how to move it,

This assignment asked to find examples for good and bad

roll it forwards or backwards. The analogy is also as good on

affordances, here are my favorites:

the computer screen. You scroll a page up and down. Of

good ones

Very simple and very clear: a coin slot. The only affordance

A computer mouse is a pretty good example. The hand au-

is a slot which tells you:â&#x20AC;&#x153;put something in me!â&#x20AC;&#x153;. The other

tomatically knows where and how it fits. There are exactly

good thing about this is that the only logical thing that a

two buttons for the index and the middle finger. The wheel

vending machine wants from you is money and the slot has

to scroll is an almost natural mapping.

the right height and width to fit coins.

Ligh switches are, as I have described before, very good. The part which stands out has to be pushed, the feedback -lightcomes immediately.

19 18

bad ones

The double switch is the start can be the start of a confusion

But worse than the double light switch is the double USB

between the switches. Although the switch as itself works

connector. To be honest, I know why they are around since

very good. Mapping usually doesn‘t work with double ore

some Computers don‘t provide enough power for a HDD

more light switch matrices since nobody knows which switch

through a single USB-Port, so you need another one. But do

controls which light. Two switches are managable but twen-

they have to be so similar? There wasn‘t just one time when

ty switches aren‘t.

I was frustrated and thought:“Dammit, My HDD broke!“ It took me always quite a while to figure out that I just plugged the wrong one in. Even more confusing, the HDD seems to work because all the control lights flash but the HDD isn‘t visible on the desktop.

In our dorm whe have also one of the cookers, with a better mapping, but still it is not perfect, two similar knobs control two stoves. But still I manage on a regular base to turn on the wrong one and wonder why my water isn‘t getting even slightly warm.

The hunt is a pretty good way to see things. And maybe the best way to capture problems that could be solved. To observe certain things, situations and see that people struggle with the affordances, is practical if you want to learn what the problem of a thing is. Is it the affordance? Is it the mapping? Is it just a wrong label? Everything is often obvious after observation, sketching and photographing. The records and notes you took to your discoveries are powerful implements that are useful through the whole process. When you know what problems there are, how the story is of people using something, you are able to think about opportunities that are useful and helpful for people and are maybe able to solve the difficulties.

y r e v â&#x20AC;&#x153; e e t m o e l N ob d r n a â&#x20AC;&#x17E;p n w o e d k ta res! u t pic 21 20

3. notations

One of the most important tools for Interaction Design is

For example, you can use a flow chart. This helps you to de-

the different kinds of notations. There are of course certain

termine all the single operations and choices you can make.

notations for different purposes.

Usually the choices you have are „yes“ or „no“ to a certain

In architecture and industrial design there are plans

question. This setting makes it really easy to understand and

and drawings, and diagrams of parts and how they work.

is very usable for complex situations.

Technical drawings are used to show how a thing is and

(Saffer, Dan. 2007. Designing for Interaction. Berkeley. New

works. In movie and theater there are scripts which are then

Riders. p. 104 - 105)

transferred to storyboards to plan out what we would see on

Another way to show this are „state diagrams“ which

the stage or the cinema. In music we have sheets with notes

show all the different states an object could possibly be in,

on it for one instrument or „sequences“ that show exactly

and connects them through „triggers, actions and cons-

when an instrument has to be played in an orchestra. Even

traints.“

for dancing there is a certain way to show what part of the

In this assignment I thought about a coffee dispenser

body has to do which action at what time –We all know the

which works also as a punching bag to replace the buttons.

foot-prints with numbers on them, drawn on the floor to

To find out what actually is happening I began with a flow

learn the waltz…

chart of a normal coffee dispenser. This, however, was the

In interaction design it is pretty important to get an

base for the flow chart of my dispenser. It shows the actions

idea of what a thing will be and feel like. To achieve this it is

the person has to perform (round shape), as well as the ac-

a good idea to make a storyboard. The storyboard supports

tions the machine executes (rectangular shape). After I did

different things. On the one hand, you have a clear row of

this I drew a small storyboard to get a feeling of how it

actions. You see exactly what happens one after another and

would be to operate. My storyboard works a lot with the

what action leads to which result. On the other hand, you

„language“ of comics because I think this is a pretty graphic

get an impression of size, mood and the context something

and accessible way to a topic.

would be used in. You can use it further for showing complex movements that otherwise are hard to „illustrate“. The storyboard lets you see what the important things in an interaction are. (Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 103- 104) After or before having the exciting, well made storyboard, it is your choice, you will need to split everything that your device/program does to have a clue about what happens when you try to operate it. It lets you see if everything is in a logical order that could be understood by a possible user.

4/5

It is morning and you are

But everything gets better

You see the coffee machine

You take 50 cents, even

as usually not in a perfect

when you notice you have

and you are cheerfull.

though 10 cents are lost

mood and too tired to talk.

50 cents and time for a

because the machine

coffee.

doesnâ&#x20AC;&#x2DC;t provide change. The punching bag comes down.

You see what you have to

The bag turns, you hit

The coffee pours into the

The machine has no change

do and punch the coffee of

sugar and end to get your

cup

but you get a free punch

your choice.

coffee; it feels like boxing.

for the 10 cents. 23 22

start: oval shape

human action:

waiting

start

machine

going around

action: rectangular

do i want coffee? yes

circular enough coins?

get coins

can I get it right?

yes

decision: diamond

right amount of coins? yes

yes

get it!

recieve money

throw it in!

is it engough?

wait longer

yes

see punchingbag

extend punching-bag

see diffrent coffees written on it

wait

punch field with desired product on it!

recieve choice

see other side of bag

turn bag 180째

see choices for sugar, milk, end

wait do I want sugar?

yes punch sugar field

more sugar?

get information

prepare right amount of sugar

get information

prepare right amount of milk

get information

give cup

yes

how about milk?

yes punch milk field

more milk?

yes

no punch field end!

pour coffee into cup

take coffee

say take your coffee

is there change?

yes

no say goodbye

punch!

say free punch!

say goodbye

It was and is really important for almost all design purposes to clarify what actions are performed with the thing you are designing. Sometimes even when it is „just“ a spoon. To know what happens, flow charts are the first choice. They let you see exactly when something happens or should happen and when something is maybe in a place or happens to a time when it just doesn‘t make sense and shouldn‘t be there. The storyboard gives them a good idea of what something is about, even though not everything is exactly termed out and nobody exactly knows what happens inside the machine. But as explained before, this is what you can see in diagrammatical representations not on the storyboard. So for me now, everytime I need to work on a project that has just the slightest connection to interaction design, I will try to figure out what a thing does and try to make representative flow charts and comic strips just to be sure for myself and present it to other people. (Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 103 - 105)

Use flow and cart charts neve oons w h r it just seem ea bi s t u you sefu c l, an t muc h ink h be tter one! with

25 24

4. metaphors, conceptual models Metaphors are one conceptual model to use, the others are

man, Donald A. 1988. The Design of Everyday Things. New

diagrammatically models –plans if you like.

York. Basic Books. p. 16), he needs to know how a thing

A conceptual model is needed to understand how to

works and how to translate this so that the user can deal with

operate a thing. It is truly the idea of how a thing works. I

it. The second part is the 'user‘s model' (Norman, Donald A.

take my parents as an example. They really have wrong mo-

1988. The Design of Everyday Things. New York. Basic Books.

dels of almost everything that happens inside a computer, on

p. 16), the user needs to understand through „observation“

the internet, with the printer and so on. I tried to explain to

of the affordances etc. - how a thing works so that he is able

them countless times how things work and why they work

to use it in the right way. The third part is the picture in our

as they do without any success. My parents aren‘t bad at

head which is created by the observal parts of the system.

using a computer but it is like Don Norman says: „As long as

(Norman, Donald A. 1988. The Design of Everyday Things.

things work properly, we[they] can manage“ (Norman, Do-

New York. Basic Books. p.12-16)

nald A. 1988. The Design of Everyday Things. New York. Ba-

So we, in the role of users need to know what we can

sic Books. p. 13). But when something fails they are clueless

do with something, how we can perform the action we want

and need to call me because they have a model that a com-

to and then just do it. After that we just need to observe and

puter is too complicated. They think they aren‘t able to fix it

understand if the action we did served the reason we did it

on their own and also they are afraid to destroy something.

for. So often to provide a good mental model for the users

Furthermore, they do weird stuff like going back all the pages

metaphors are very useful. One of the best known is maybe

in an internet browser before they are closing it. I have no

the „desktop“ metaphor, on the computer. This was invented

idea who told them to do that but I can tell them as often as

in the 70‘s at Xerox PARC. In the beginning it was not the

I want that it‘s not needed; they are still doing it. I think it

desktop as we know it but something similar. It should more

is all to blame on the wrong models that are in their minds.

resemble an office work atmosphere than an actual desktop.

They still can‘t tell me why they are doing this and what use

The interesting thing of the desktop is, of course, that it is

it has.

abstract and workable. The actions you perform in an office 'Conceptual models' (Norman, Donald A. 1988. The

were forming the analogies, not the symbolism of the desk-

Design of Everyday Things. New York. Basic Books. p. 16) are

top, they just support it. (Moggridge, Bill. 2007. Designing

our own instructions and explanations to things, formed by

Interactions. Cambridge. MIT Press. p. 19 - 22 /53 - 54)

a logical consequence from observed, experienced and alrea-

Inspired by the machine which uses water to represent

dy known hints that are within the design of a thing. If you

the British economy I started with creating a concept of whe-

see a thing that is pretty obvious where all the important

re my money comes from and where I‘m spending it.

parts –the constraints, mappings and affordances are easily to spot– our mind simulates how to act with that object. If it is logical and doesn‘t end in something we don‘t get, we usually can handle it. The „conceptual model“ is structured in three parts. The one part is according to Donald A. Norman: that what the designer does, called, 'design model' (Nor-

The Money List. Savings Income: Erasmus Parents Grandparents Christmas Birthday Coming Home Money spending for: Train tickets Rent Going out Buying food Buying something to drink Buying clothes

lists again! remem ber

27 26

My metaphor uses eating and doing sports and represents my

I chose then that when eating is money, then my â&#x20AC;&#x17E;savingsâ&#x20AC;&#x153;

Erasmus time here in Venice.

are my weight. So in the beginning I am fat and am getting

You can see, the small sandwich is my Erasmus-money,

thinner because sports represent the things I spend money

the big chicken legs with sauce and dumplings is the money

on; like food, rent, train tickets. You can see how I am really

from my parents, the apple is the money from my grandma

thin until christmas, then there is a small chicken-leg which

and the big dinner table is the day of my returning to Ger-

symbolizes again a bit money but it is not enough because

many and having a job again.

in february I will be pretty skinny after all.

In this scenario metaphors were pretty useful and worked as

have an idea but I understand the folder analogy. And for

a „mental model“. They provide a feeling for what is happe-

this reason I can work with a computer because the brilliant

ning and also the „face that is getting thinner and sadder“

designers/programmers/engineers of Xerox came up with

symbolizes a emotional value which shows that without mo-

this metaphor. This metaphor is maybe one of the best and

ney it would not be so enjoyable to be on Erasmus. The me-

easiest and most understandable ones for almost anyone who

taphors also don‘t need, in this case, to show the right

has ever worked with a computer and knows the „symbo-

amount of money, they just need to show what happens ove-

lism“.

rall if I saved more or spent more. So to choose as a source eating and targeting money was in my opinion a pretty logical choice because you can connect the „energy-budget“ of your body almost completely to a financial system. And it is more graphic than just writing income and pure numbers; you get a feel of what is happening. Similar to the desktop metaphor nobody really knows, except engineers and computer-geeks maybe, what exactly happens when you take a file and put it into another folder. Nobody knows where on the HDD the files are then stored, or what command connects them to the new folder or if the file is moved at all? Maybe there is just a line in the file code, telling in which folder it is. Obviously I also don‘t

Metaphors are good if everybody knows what they are refering to! 29 28

5. visualizing data. users? A big issue in Interaction Design is of course the visualizati-

find out if it works. And think also of the way you would like

on of data, of actions, of behavior, of information, of oppor-

something to be controlled. (Moggridge, Bill. 2007. Desig-

tunities, of methods and so on. It is the thing that connects

ning Interactions. Cambridge. MIT Press. p. 128 - 134)

the user to the device, service or system; it is the thing which

For finding out about people there are a lot of methods.

makes it workable. A good visualization gives an understan-

An interesting approach was made by IDEO, with their „me-

dable way of operation. As in the last chapter, it was about

thod cards“. 51 cards with design method recommendations

the concepts of how a thing works and how metaphors can

printed on them. The cards are divided into 4 categories:

support this –they are also in some point a visualization for

'Learn, Look, Ask, and Try: „Learn“ from the facts you gather,

themselves, even though they are not grabable and not see-

„Look“ at what users do, „Ask“ them to help, and „Try“ it for

able they create pictures in our mind and this pictures are

yourself.' (Moggridge, Bill. 2007. Designing Interactions. Cam-

then often the visualization– this now is about how to

bridge. MIT Press. p. 669) This cards are a entertaining and

„pack“ informations that a user can deal with them. There

useful way of researching about users. And they can be used

are several ways to do this. It depends on what a user needs

all over the design process. You just pick the cards you think

and what he wants and what he is able to understand. Work

that are good for a project and then work with the cards. The

for the weakest link –for example old people who aren‘t used

cards give you examples of what method you should use, like

to work with computers. It is important to know for which

„brainstorming“ or „user interview“. (Moggridge, Bill. 2007.

group of people you are working. Are these computer scien-

Designing Interactions. Cambridge. MIT Press. p. 665 - 681)

tists who want to test a robot or normal people who just

So how does the information you get from users help you by

want to buy a ticket for the railway –which in germany, for

thinking of a data visualization? The user is the scale of what

example, never works.

you are doing. When you think of datasets in different layers

'Who are the users? What do they want from the experience?

you can provide one information in one visualization or a

What will give them satisfaction and enjoyment?' (Moggridge,

combination to gather further understanding. For example

Bill. 2007. Designing Interactions. Cambridge. MIT Press. p.

the cholera outbreak in 1854 in London. With pure statistics

665)

the people back then knew how many people were infected So you really need to talk to the people you are working

- important information but not so useful for finding out

for. You need to understand in what situation they are, what

what‘s going on. Putting the information onto a map of Lon-

background they have, in what context your design should

don they got more detailed information. They drew every

work. But apart from talking to people you should also

case as a small bar on the map and where the bars were more

quietly observe what is going on. Sometimes people don‘t

concentrated the more cases of cholera infections there were.

even know that something is not working well until a better

The picture got clear; the most cases were near water pumps.

design shows up. You need to understand that something is

It was then obvious that the bacteria had spread through the

not working to provide this better design. Try your designs.

drinking water supplies. They could immediately take action

Everything you design, try it also on yourself and you will

against it. If they would‘ve tried something like this through

statistics they never would have found out. Maybe there was a bit of coincidence in the whole but this helped to save lifes. So good visualization is really powerful to get basic understanding and to help people. This assignment asked to create a better data representation for the Alilaguna service of the „Linea Rossa“ which should be better to handle for the users and be more practical. I decided first to think about what is really a necessary information and then how to put it in order. I decided that a map is not so important, it is just a „hint“ of where you are. Really interesting are stops, times and prices. So my design evolved all around the linear representation of the „route“. The interactive route works in a different wayh. There it is important to find the places you want to go, so you first pick start and end point, then you pick times and prices. For interactive data representation it is important to know how the information changes or what it represents. Is it travel time? Is it distance? Is it just a collection etc.?

31 30

static map Linea Rossa

way tickets

time tickets 15 € / Online 15 € / VC 7, 50 € 13 € / Online 12 €

Prices

VC 3 €

group tickets

20≤ people

60€

intermedia: 5 € each

26 €

Airport-Venezia: 9, 50 € each

6,50 € / VC 6 € Airport

Murano

Lido

23‘

30‘

Stops Timetable

9:15 10:15 11:15 12:15 13:15 14:15 15:15 16:15 17:15 18:15 19:15

9:45 10:45 11:45 12:45 13:45 14:45 15:45 16:45 17:45 18:45 19:45

Tronchetto

S. Marco

19‘ 10:08 11:08 12:08 13:08 14:08 15:08 16:08 17:08 18:08 19:08 20:08

27‘ 10:27 11:27 12:27 13:27 14:27 15:27 16:27 17:27 18:27 19:27 20:27

10:54 11:54 12:54 13:54 14:54 15:54 16:54 17:54 18:54

Airport

Murano

Tronchetto

S. Marco

Lido

My try on the static design was to take what I got provided

tation you can see in the middle the stops –the lines inbet-

from Alilaguna and try to merge it. What I did was to take

ween are longer or shorter, depending on the time the boat

the prices on top and the timetable on bottom. In the midd-

needs– and the time written in minutes that is needed from

le you have the stops. Every information is now refering to

one stop to another. Refering to the stops the timetable-grid

the stops. I was thinking what a person would want to know

is below. And on top, also refering to the stops, there are the

when he or she looks at a map and how this information

prices listed. You can just look from where to where you want

should be presented.

to go then look a bit up and see the price and look a bit down

In my opinion, for the need of finding out when a boat

and see the time. I think this is a useful way to provide this

leaves, where and when it stops and what it costs, it would

information in one „graphic“ and not in several grids and

be more useful to put it into one „diagram“. In my represen-

maps.

All informations from Alilaguna: http://www.alilaguna.it/linearossa.html

start

show line-red map; say: select start-spot

see map

waiting

picking startspot

get info

highlight start-point. pull it out show details say: select end-spot

e in giv

see details pick end

get info

highlight end-point. pull everything in a diagrammatical view show all details and prices

ask: want to buy a ticket?

33 32

Alilaguna Linea Rossa

Alilaguna Linea Rossa Airport

Airport

Murano

Murano Tronchetto

Tronchetto

S. Marco

S. Marco Lido

Lido

Please select the point from where you would like to start

At first you are asked to select they place you

After touching the „start point“, in this case the

The start location pulls itself out and has more

want to start from. It doesn‘t provide too much

airport, it gets highlighted.

information written then underneath it. Infor-

information at one sight. So it looks more clea-

mation like timetables, services etc..

ned up.

Alilaguna Linea Rossa

Airport

Alilaguna Linea Rossa

Airport

9:15 10:15

Murano

Airport

9:15 10:15

Murano

Tronchetto

9:15 10:15

Murano

Tronchetto

S. Marco

Lido Airport

9:45 10:45

10:08 Murano

Tronchetto

S. Marco

Lido

S. Marco

Lido

Plese select point you would like to get off board

Lido

Plese select point you would like to get off board

Now you are asked to select an exit location. You

When you select the location it gets highlighted

Then it pulls itself up like when you are opening

can see that everything you have already chosen

again.

a sewing. It is animated and shows you then all

turns transparent which means you cannot

the information you need at that time.

choose it again.

All informations from Alilaguna: http://www.alilaguna.it/linearossa.html

way tickets time tickets

Alilaguna Linea Rossa 15 € / Online 15 € / VC 7, 50 € 13 € / Online 12 €

Prices

VC 3 €

group tickets

20≤ people

60€

intermedia: 5 € each

26 €

Airport-Venezia: 9, 50 € each

6,50 € / VC 6 € Airport

Murano

Lido

23‘

30‘

Stops Timetable

9:15 10:15 11:15 12:15 13:15 14:15 15:15 16:15 17:15 18:15 19:15

9:45 10:45 11:45 12:45 13:45 14:45 15:45 16:45 17:45 18:45 19:45

Tronchetto

S. Marco

19‘ 10:08 11:08 12:08 13:08 14:08 15:08 16:08 17:08 18:08 19:08 20:08

27‘ 10:27 11:27 12:27 13:27 14:27 15:27 16:27 17:27 18:27 19:27 20:27

10:54 11:54 12:54 13:54 14:54 15:54 16:54 17:54 18:54

select your time, do you want to buy a ticket?

This task needed thinking about what to do first. What does the user want to know? What do you have to provide? How should you operate? What does he or she see? I sketched and tried different more „elaborate“ but also then more complicated versions. So I thought that the people who are trying to use this are maybe from 10 years to 100 years old and everybody has to understand this map. I then tried to cut it down until I just had this very simple linear representation. The full table with all the information is now available and you are able to purchase tickets.

It is understandable because of its clear references to the stops. Also it was a good way of thinking how an animated thing would look like because the story board was pretty much explaining what is happening here. It has a clear understandable transmission from map, to linear-graph, through the „sewing“ metaphor.

ur o y ut o b k a sers hey n i u at t Th wh d to . d an nee tand ut rs abo e d un think tion! n za the isuali v

All informations from Alilaguna: http://www.alilaguna.it/linearossa.html

35 34

different approaches After I read about this I didn't want to leave it out just because I don't put the interview assignment in the book. It was highly interesting to me to find out the differences between the design approaches described by Dan Saffer. From one starting point that completely relies to users as a source of inspiration and information and is using the opinions of the users as a big part of the design. To another that is completely crafted without any user-participation just by the mind and thought of a designer. It was so interesting to read because I could understand better what we actually learn at my university and it is somehow a mixture of the four of the mentioned approaches. We usually start in different directions. At first we usually start with a broad research with the different mentioned methods to get later into interviews and talking with users about existing products in the domain in which we want to go. Then we switch to the thing he calls 'Genius-design' (Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 41). But we always consider the actions you should perform during the process. Also we try to use „playonwords“ to create ideas.(Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 35). Then at some point of the project you need to think about the interior and if everything –in case of a electronic-device– would fit into it. So here again I think sometimes you have to choose and again jump like the ball in the pinball-game mentioned by Bill Moggridge (Moggridge, Bill. 2007. Designing Interactions. Cambridge. MIT Press. p. 650), between methods and approaches as how the project needs it.

6. service design

Service design is not just about designing a physical thing,

Another important thing is the image of a company.

like in ID, or designing visuals like in graphic-design or de-

When it is not a complete new company, the service has to

signing the ways of behavior and interaction like IxD. It is

fit into the existing public-image of the company.

one step farther than IxD. It is the designing of whole sys-

„Touchpoints“ are then the things that make the „in-

tems which then form all together a service. Therefore, the

visible“ service visible. It is like a „CD“ for a service where

service itself is invisible.

you have all from small business cards to complex adverti-

For example, a home care service. For the home care service

sing, devices that may be needed for the service, websites etc..

somebody has to think about the cars. So one system is the

According to the design philosophy of Live|Work they

choice of cars. Contracts with gas stations are another sys-

use a term, called 'Service Envy'(Moggridge, Bill. 2007. Desi-

tem. Then you need to have a system of how to share the care

gning Interactions. Cambridge. MIT Press. p. 423) This me-

recipients between the employees. The next system is the

ans, that when you design a service the best you can do is to

time management and so on. In the end, there is a health care

design also a value with it, so it becomes something desirab-

service which is there but you still cannot touch nor see the

le, something where people who don‘t use it are maybe jea-

service itself.

lous about others who are using it.(Moggridge, Bill. 2007.

Before you can start designing a service you need to

Designing Interactions. Cambridge. MIT Press. p. 420 - 426)

know where your service is taking place. In a whole city, just

(Saffer, Dan. 2007. Designing for Interaction. Berkeley. New

in a small cafè or your own room?

Riders. p. 174 - 198)

You need to know who your stakeholders are. Stakeholders are people who are affected by your service design.

This assignment asked to create a service. It was an

There are some which are logical and obvious, like employees

assignment who asked to take an opportunity for designing

of the service and the people who should use the service, but

something innovative. I choose to create a „restaurant finder“

there are also some who are not that obvious. Dan Saffer

that helps busy business people that don‘t want to eat fast

gives a small overview of stakeholders of a bus route where

food but their „slow food“ really fast. I started with the sta-

some are really not that obvious but very logical when you

keholders and went through the different questions to get

think about it: 'the newsstand that depends on the riders for

my thought of a service which helps them finding restau-

business, drivers in cars, the people living on the bus route, city

rants.

officials, taxi drivers who compete with the service, and so on.'(Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 189) After knowing who your stakeholders are you need to set priorities. For example, when the bus route changes maybe the kiosk needs to close; sometimes these are hard decisions. (Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders. p. 189)

37 36

What & Why?

What info do I get?

A restaurant finder called „FindmyFood“ for business peop-

Near restaurants; Ratings; Friend map which shows me whe-

le. The idea came when I thought about all the busy people

re my colleagues are going for lunch; After a while it can

in Frankfurt they are often really unpolite when the waiters

learn and give you recommendations for some places.

aren‘t quick enough. So I thought of a system that they can order and pay and make an appointment for eating in advan-

What info do I have to give?

ce so that a lot of waiting time can be spared. So they can eat

Paying info; The place where I am; Which meal I like;

„slow food“ almost as quick as „fastfood.“ It also gives them

Which kind of restaurant I want to go to.

the chance to give ratings for a restaurant and see if colleagues are eating in the same place. They don‘t need to be

Persona?

unpolite to the staff anymore.

A persona for representing this service could be: John Smith,

Who?

32 yo, single, lives in Berlin but original he is from Dublin. He likes to spend spare time swimming or hitting the bars

Business people who have not much time and are in a hurry

with his friends. He works for the Commerzbank as a risk-

but still want to eat „healthy“ normal food instead of bur-

analyzer.

gers.

He travels a lot between Frankfurt, Munich, Hamburg and

Where? In every bigger city. Cities with financial districts. Used on a mobile phone in every place.

How?

Berlin. He likes to listen to 80‘s pop music. He has still a very close contact to his family. He speaks 4 languages: English, German, French and Spanish.

Restaurant as usual? Usually you enter the restaurant, maybe with an idea of what

By having a mobile phone application as described on the

you want to eat. So you enter and need to wait for an emplo-

next pages.

yee to show you a table. Then you get the Menue and choo-

Stakeholders?

se everything. You wait for your meal. You eat and then wait again for an employee for paying. You leave.

Restaurant owners; Business people; Waiters; Companies;

My restaurant finder is able to skip all the waitings.

Fast food places; The nextdoor „frittenbude“; Bakeries; Pu-

With the restaurant finder the only thing that is left in the

blic transport; Colleagues; And much more...

process is : entering the restaurant, getting place and food,

What can it do?

eating and leaving.

It helps you to find restaurants when you don‘t have a lot of time to waste on eating. You can browse restaurants that are close to your location or that have a quick service.

On the next page you can see the interaction in a small sto-

Also you can prenotate a place for a certain time connected

ryboard.

with your desired meal. This should then allow you to get your food by entering. You can also pay in advance. You just go to a place, eat and return to work. 37

browse restaurants by

When you open the app, it shows you the city you are in, and

You then get the criteria for the different listing of the res-

the big button „browse restaurants by..“

taurants. Style: Asian or american food?, rating, how do other users like it and so on.

After you choose the „closest“-criteria the map opens and

Now you get an overall view of the restaurant. Its rating on

shows you where the closest restaurants are and how far they

top, then again how far you have to go from your current

are away in minutes. Then you choose to take a meal in the

location and how many of your friends/colleagues are signed

closest.

up to eat there. You can then browse the menue. 39 38

You see the different menue and can choose the one you

You can check if everything is right.

want to eat. Also you can choose your drinks.

Set the time when you want to eat!

Send it to the restaurant! And be there at time!

The service and the interaction for the service are pretty clear. The assignment was finished at this but it would take further steps to create a service. You need to create something similar to what Live|Work calls creating faked evidences. This can be used to test if people are even interested in a certain service and will be published on online community services. After ensuring that it is something people would want to use you can start with making all the important and necessary things like creating the „touchpoints“, build prototypes, etc.. In this assignment it was pretty interesting to think about something that could innovate or kind of improve services that are already around. In my case I started then with the stakeholders to see who is affected and in which way. And designed my service mostly around the stakeholder and the „one persona.“ So it was in away a „peoples“ approach to this problem which was very useful in this case. Eating is something cultural. I think it has to be centered around people even though the concept tries to fasten the way the „restaurant“ process works. Also I looked on how it normally works when you are in a restaurant and what will be left after you have the restaurant finder. (Moggridge, Bill. 2007. Designing Interactions. Cambridge. MIT Press. p. 420 - 426)

e h t e k Ta ight : h r c a o , r p ap eople or P um, y! di olog e M hn Tec 41 40

Conclusion I really hope that after reading this book you have a general idea of Interaction Design and its theoretical background. Also I hope you understood the way I worked and what I learned about this topic. The different techniques shown in this book are crucial for IxD but also crucial for almost every other design discipline. I really believe that even if I maybe donâ&#x20AC;&#x2DC;t do IxD projects as a graduated designer later, I will still benefit a lot of the knowledge I could gather through the lectures, exercises, reading and the assignments. It was the best combination because it was a theoretical class where we had to do exercises and had also practical assignments. When you try new techniques it is just better to perform them instead of just reading about them. Before I started with this book, I read everything again and made notes for it. I immediately tried to use this notes onto the assignments. In a way this really helped me for further understanding of the topic. A mixture between theories and practical work is a very memorizable way to keep the information and ideas you had for a thing in your mind. The structure of the book follows the structure of the lectures. For me it was the best way to do this because I think it was logical how the class was build up and for you I think it would also be logical. My insights now about IxD are a lot bigger then before. I had one project in Germany which was related to IxD where I started to think about these topics but the general understanding for them grew after writting this small book and reading the books and taking the class. There were a lot of things we did similar for the project we did that year earlier but we werenâ&#x20AC;&#x2DC;t able to name it and understand the background of it. We lacked a lot of information for IxD. Now I am looking forward to trying out this understanding and all the techniques in my next project. And last but not least: Interaction Design and Service D esign, in my opinion, are the big thing in the future. I think it has started already that almost every design whether it is a chair or a computer has parts of interaction design or service design in it. For example, when you design a kitchen. I think it will be somehow equipped with a micro chip that needs to be programmed and controlled. There we have IxD. To end this book now, I think there is only one thing left to say and this is: Thank you a lot for reading! 41

Sources List - Moggridge, Bill. 2007. Designing Interactions. Cambridge. MIT Press - Saffer, Dan. 2007. Designing for Interaction. Berkeley. New Riders - Norman, Donald A. 1988. The Design of Everyday Things. New York. Basic Books

Alilaguna Service: Linea Rossa - http://www.alilaguna.it/linearossa.html - http://www.alilaguna.it/img/linearossa-small.jpg

43 42

Production Details Fonts: Chapter Headings: Garamond Premiere Pro Regular 48 pt Subheadings: Garamond Premiere Pro Regular 36 pt Sub-Subheadings:Garamond Premiere Pro Regular 14 pt Text: Garamond Premiere Pro Regular 9 pt Captions: Garamond Premiere Pro Italic 9 pt

Camera: Canon IXUS 100 IS