Aesthetics of Interaction, fall 2008

EX 1: SUPER HERO GADGETS Material: Any kind of drawing program (Photoshop, gimp, llustrator, CorelDRAW! etc) Aim: To work with expressions and gestalt. Learning outcomes: An understanding of the coupling between form, meaning and interaction. Organization: You work in pairs.

TASK Your task is to design a super hero symbol/logo and also an interactive item shaped like the logo or having the logo as a significant part of its design. The item should not be complicated; perhaps it only has two states, on and off. Start out by defining your super hero. What is he or she striving for (e.g. world piece) or fighting against (e.g. crime)? Which power(s) does she or he have and how did he or she get them? What are your hero’s weaknesses? Now, design a super hero logo for him or her. Consider meanings of symbols etc, and strive for connotations that fit your super hero’s goal and powers. Don’t forget to communicate this in choosing symbols but also in the specific design (i.e. using typography or drawing styles as a means of communication). Look at www.symbols.com to get inspiration and information on what symbols to use. Also consider the three-dimensional form of the logo (e.g. the “S” in the logo above is slightly embossed) Also, more or less simultaneously consider what kind of gadget you would like to design for your hero. Is it a belt buckle that after a single press releases some kind of gas? Or a ring containing a communication device? What? How is it used? Try to somehow incorporate the logo in the design of the gadget. Try to design a gadget that fits with the shape and the meaning or the symbol. How can the three-dimensional form of the logo, be used or utilized in interaction?

DELIVERABLES – The super hero logo in itself and a sketch of the gadget. Send this to Sus and the rest of the class. – The background story of your super hero and a design rationale where you describe your design, i.e. why you have made the design decisions you made, but send this only to Sus. – Feedback to the team that is getting it from you. Send it to them and to Sus. – A large, printed version of your super hero logo to bring to the feedback session.

12

Aesthetics of Interaction, fall 2008

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

IMPROVE & EXTEND If you want to put this exercise in your portfolio, you should change the super hero logo according to the inspiration you got from the feedback. In addition, you should create a real physical prototype of your gadget so that it is possible to try out the interaction. Deliverables: The prototype and a rationale

13

Aesthetics of Interaction, fall 2008

EX 2: CARTOON Preparation: Bring a digital camera & cables if you got one. Material: A digital camera and any kind of graphics program. Aim: To explore the rich language of posture, practice the noble arts of cropping images, depicting temporality, use semantics and symbols and tell a story on a limited space. Learning outcomes: Knowing how to convey a message using tools as body postures, symbols, semantics and image-cutting. Organization: You work in groups of 2-3 students.

TASK The task is to carefully create a cartoon. You can choose any story you like, as long as it spans over at least two days and includes at least one person who feels strongly about something. He or she can be angry, happy, upset or whatever. Of course he or she can display different emotions in different parts of the cartoon. – The story doesn’t have to be funny, the important part is that you have some kind of point or message. – Your final cartoon should be no larger than ca 2400 square pixels, i.e. it can be 800x300 pixels, or 400x600 or… you get it. :) – You may not use text Start by coming up with a story. Then, start discussing the layout and which images you need. Do a lot of sketching on paper (and these sketches can be very crude!). Thereafter, take photos of these scenes – and take lots of photos, even ones you think you will not need. Try out different angles and different levels of zooming. Also try out different body postures and mimics. Do take photos of alternative scenes as well, in case you change your mind. Look through your collection of images and choose the ones you want. See if you can improve them even more by cropping them or applying image processing to them, you can also image process them in order to get a more cartoon-like effect if you like.

14

Aesthetics of Interaction, fall 2008

DELIVERABLES – Your cartoon, as .gif, .jpg or .png. Email it to Sus and the rest of the class. – A design rationale that explains your design, but send this only to Sus. – Feedback to the team that is getting it from you. Send it to them and to Sus.

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

IMPROVE & EXTEND If you want to put this exercise in your portfolio, you should improve your original cartoon using the inspiration you got during the feedback session. In addition, you should make a second cartoon (with the same constraints) that continues the story. Deliverables: The two cartoons and a rationale.

15

Aesthetics of Interaction, fall 2008

EX 3: DESIGNING EMOTIONS Material: Paper and pencils or a drawing program. Aim: To explore how different emotions can be created, utilizing aspects of form, material and interaction. Learning outcomes: To be able to create an aesthetic aimed at evoking or expressing a certain feeling. Organization: In the inspiration phase you work in groups of 3-4, but in the design phase you work alone.

DEFINITION The emotion you are about to explore is angst (=ångest), which can be defined as: – A feeling of anxiety or apprehension often accompanied by depression – An acute but unspecific feeling of anxiety; usually reserved for philosophical anxiety about the world or about personal freedom – Angst is a German word for fear or anxiety. It is used in English to describe a more intense feeling of internal emotional strife. A different but related meaning is attributed to Danish philosopher Søren Kierkegaard (1813–1855). Kierkegaard used the word angst (Danish, meaning "dread") to describe a profound and deepseated spiritual condition of insecurity and despair in the free human being.

TASK Your task is to create a ticket vending machine that expresses or evokes angst. It is up to you to decide when and where it is used and by whom, and exactly which functions it provides, but it must function; in one way or the other you can buy tickets using it, however reluctantly! Inspiration phase In this part of the task, you work together in groups of 3-4 people. To get a wide scope of ideas you shall use an approach that is sometimes called Chinese Portraits. Take a few minutes to separately (and quietly) ask yourself the following questions. (Just follow your gut feeling when answering): – – – – – –

If angst was a sound, which one would it be? If angst was a tool, which one would it be? If angst was a color, which one would it be? If angst was an activity, which one would it be? If angst was a material, which one would it be? If angst was a natural phenomenon, which one would it be?

16

Aesthetics of Interaction, fall 2008

Thereafter, (still individually) try to figure out why you answered the way you did (e.g. “If angst was an everyday object I think it’d be a huge bill which I am unable to pay, because that would mean that I would have to give up something important in order to save money”) Discuss you answers. How many of your answers are related to genuine expressions of angst (i.e. the activity to curl up like a fetus and cover your ears) vs. things that generate angst (i.e. the action of taking a job that you are not really qualified for)? If a vast majority of your answers are targeted towards one type of answers (i.e. only expressing or generating angst respectively) do the portrait once more, trying to focus on the opposite. Design phase This part of the task is carried out individually. Analyze the input from the inspirational phase and see how it can be used in your vending machine. Then, finally, start designing! Here, you have a choice! You can either design a ticket vending machine that expresses angst, i.e. that seems to feel angst, or, you can design a vending machine that evokes angst, i.e. makes the user feel angst. Focus on as many senses as possible; use the outcome of your associations. Discuss materials, forms and behavior alike. If you want to you can stretch the boundaries of what the ticket machine “is” to its environments, e.g. you can design a special booth or room or whatever for it. Make sketches and write one or two scenarios of use. If your sketches are on paper, scan them or photograph them.

DELIVERABLES – Your sketches and scenarios. Send these to Sus and the rest of the class. – A design rationale that explains your design, but send this only to Sus. – Feedback to the person that is getting it from you. Send it to him/her and to Sus.

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

IMPROVE & EXTEND If you want to put this exercise in your portfolio, you should improve your original design using the inspiration you got during the feedback session. In addition, you should create yet another ticket vending machine, but this one should deal with some other emotion. Also, if your current ticket vending machine expresses angst the new one should evoke which ever emotion you choose, and vice versa. Deliverables: Sketches, use scenarios and rationales for both ticket vending machines.

17

Aesthetics of Interaction, fall 2008

EX 4: INTERACTION THEMES & THINGS Material: Paper, clay, fabric – whatever you can find in the design studios. A word. Aim: To explore the connections between the expressions of physical form and interaction, and to work with physical form. Learning outcomes: To be able to design expressions which invoke a certain interaction/behavior. To learn the difference between interacting in a certain way and experiencing something in a certain way. Organization: You work alone. Comment: Note that we now, unlike in the last exercise, focus on how to design a certain type of interaction, rather than emotions or expressions. It is still interrelated of course, but this time you look at it from a different angle.

TASK You will get a word, e.g. “aggressive”. It is SECRET. Your task is now to create a simple thing (not using any electronics or computational technology) that makes people want to interact with it in that way. So, if we watch a person interacting with your thing she or he should appear to be very aggressive. (Note that they don’t necessarily have to feel that way! For instance beating a punching bag is an aggressive interaction but you mustn’t necessary feel very aggressive when interacting with it. ) You decide yourself if the object has some function, or if its only function is for people to interact with it in that way. The easiest way is in most cases to make a device that evokes your certain feeling and then design the interaction accordingly. But if you want to challenge yourself, design an object that is neutral in its expressions but still invites to a certain type of interaction (again, the punching bag is the perfect example). Anyhow, start with figuring out what signifies “your” type of interaction. For instance aggressive interaction is probably signified by hard grasps, harsh movements, a lot of force, etc. When designing your thing, you can use any physical materials you like; go into the studios and take your pick. You should make a prototype. If you are not satisfied with it, you can complete it with elaborate sketches (including material descriptions and sound descriptions) and provide samples of the materials you would like to use in your design, e.g. fabrics. Do also write a short description of how your ting works, if it is not already obvious.

DELIVERABLES – Your thing and a written description of how it works (but not why!). Give it to the person who is supposed to give you feedback no later than Thursday (or arrange for a later meeting).

18

Aesthetics of Interaction, fall 2008

– A design rationale that explains your design, but send this only to Sus. – Feedback to the person that is getting it from you. When writing feedback, first report your observations about the thing. How did you want to interact with it? What did you feel when interacting. Then, try to analyze what the designers were actually aiming for and why. Send it to him/her and to Sus.

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

IMPROVE & EXTEND If you want to put this exercise in your portfolio, you should improve your original design using the inspiration you got during the feedback session. In addition, you should create yet another thing that invokes some other type of interaction. The result should be two well-made physical prototypes. Deliverables: Two prototypes and design rationales for both of them.

19

Aesthetics of Interaction, fall 2008

EX 5: TEMPORAL PAINT Material: Pen & paper. An online computer. Aim: To explore the connection between temporality and interaction. Learning outcomes: An understanding of how temporal aspects in a design can change interaction. Organization: You work in pairs.

TASK Brainstorming (30-45 min) Imagine a very simple drawing program. The only thing you can do in it is draw lines using the mouse. (No choice of color, line width, erasing, no nothing!). Normally, if you take a pen and draw a line (regardless if on paper or in a program) the line is static. It does not change. But – what if it would? What if lines or the canvas get a kind of behavior, triggered by the passing of time. What would happen? How would it look? And how would it affect the use? Come up with a few ideas for a temporal drawing program. For each idea, try to foresee how users would interact with the program. Does the added temporality change the way people will draw? Testing (75-90 min) Then, go to a web address that Sus or Theo gives you. Explore all of the applications except Base (which is the static version). What do they “do” – what is their behavior? How does the behavior affect how you draw in them? Is there a way to work with the effect, utilizing it? Echo has a special feature – ask us after you have tried out the initial version and we will tell you the secret trick. How does this change the interaction? Is any one of these drawing programs similar to something you came up with? If so, did you interact with it the way you foresaw? Which of the drawing programs did you like best? Why? (You can have different opinions!) Discussion (ca 30 min) – We meet in class and discuss how the temporal aspects affected interaction. ...............................................................................

IMPROVE & EXTEND If you want to put this exercise in your portfolio, you should create an interactive “real” prototype of a simple program using temporality as a major part of the design. (Yes, sorry, this required programming skills). It can be a drawing program (but obviously not to similar to one of those you’ve seen today) or some other kind of program. Deliverables: The program and a rationale.

20

Aesthetics of Interaction, fall 2008

EX 6: INFOART PART II Material: Any program for interactive graphic prototypes, e.g. Flash or PowerPoint. Aim: To create a simple graphical style with clear guidelines and stick to it. To explore how temporal aspects change the experience of the artifact. Learning outcomes: To become aware of different aspects of temporality. Organization: You work alone.

TASK You start out by creating a “simple” artistic style. Make a few typical “paintings” and write down the “rules” for them as well as the design variables. Try to create a style you really like. Then, create a working piece of Interactive Art showing any of the following: – The use of the coffee machines at ITU over a period of time – The weather over a period of time – The people logged in at the ITU network over a period of time – Time table for the buses that pass at the Lindholmen bus stop, over a period of time – The workload for a printer over a period of time – How – and which – people move across a certain space (e.g. a shopping center or a square) over a period of time Which parameters are interesting in each case? There should be plenty in each case; choose the most interesting ones (at least four). Figure out a logic in how to visualize the information flow you’ve chosen. Also apply a temporal behavior to it. How does it change, when and why is it updated? Is the update done regularly (if so, how often) or is it triggered by some kind of event? How long is “the period of time” that you choose? The last five minutes? The coming hour? Today plus minus a week? The last thousand buses/cups of coffee/documents? How does this affect your piece of art and how it is updated? Construct a scenario that runs over your chosen time and create an active prototype of it (i.e. it must show how the updates are done).

21

Aesthetics of Interaction, fall 2008

DELIVERABLES – Your prototype plus a description of how to decipher the information. Email it to Sus and the rest of the class. – A design rationale that explains your design. Send this only to Sus. – Feedback to the person that is getting it from you. Send it to him/her and to Sus.

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

IMPROVE & EXTEND If you want to put this exercise in your portfolio, you should improve your Informative Art-piece using the inspiration you got during the feedback session. In addition, you should use the same graphic style and create another two pieces of Informative Art, displaying any of the other types of information that were suggested. These too, should be active prototypes. Make sure you use the same types of reasoning in all of them, e.g. if time “flows” through them in a direction, it should be the same direction for all, etc. Deliverables: The three prototypes and a rationale for each of them.

22

Aesthetics of Interaction, fall 2008

EX 7: DESIGN THE APPLE Preparations: Study any of the following softwares: Adobe Photoshop, Microsoft Word, iTunes, LinkedIn or Google. Material: Any sketching tool, be it pen and paper or some kind of drawing program. Aim: To study an aesthetic in terms of look&feel plus interaction style created by someone else, and practice in applying it. Learning outcomes: To be able to identify and apply an aesthetic created by someone else. Organization: You work alone.

TASK Study the software you’ve chosen, the look&feel as well as how it feels to interact with it. Are there special interaction traits? E.g. Photoshop is very much about exactness and previews whereas Word is much about modeless feedback and trying to think for you. At some point you also have to choose a few activities (e.g. saving, searching, formatting text etc.). Then, design either a bike of a coffee machine, applying the look&feel and the interaction traits of your software. Ask yourself how your chosen activities are carried out, how the bike or coffee machine looks, and don’t be afraid to stretch the boundaries! If this requires that your bike/coffee machine has to be equipped with different types of extra stuff like sensors or speakers or whatever, feel free. Example: The Västtrafik coffee machine delivers a cup at irregular intervals, however mostly within 5-10 minutes. Is it not possible to choose what one gets in the cup, one has to wait for a cup with the content one wants. If one studies the coffee machine carefully, one can find certain patterns, and learn when one can get a cappuccino. This would be the analogy of standing at a bus stop waiting for the right bus. (Note that the example only deals with one activity – waiting for a delivery of drink vs transport – and that look & feel is not considered!) Make a detailed sketch/sketches of your product and create 2-3 scenarios of use, describing the features of your product. If you make paper sketches, photograph them.

DELIVERABLES – Your sketch/sketches, your scenarios and your design rationale (yes really!). Send this to Sus and the rest of the class. Don’t forget to tell which of the softwares that inspired your design! – Feedback to the person that is getting it from you. Send it to him/her and to Sus.

23

Aesthetics of Interaction, fall 2008

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

IMPROVE & EXTEND If you want to put this exercise in your portfolio, you should improve your design using the inspiration you got during the feedback session. In addition, you should create yet another product of your choice, however inspired by the same software. Deliverables: Sketches, scenarios and design rationales for both products.

24

Aesthetics of Interaction, fall 2008

PORTFOLIO EXERCISE: CALCULATOR ON THE RUNWAY Material: Some kind of drawing program and a sound library. Aim: To work with “personality” as a concept for creating a working aesthetic. Learning outcomes: Learning how to use the notion of “personality” in design. Organization: You work alone.

TASK Your task is to design three different versions of a calculator, each with its own personality. It shouldn’t be complex in the sense that it has a lot of functionalities; being able to deal with addition, subtraction, division, multiplication and square roots is all it needs – but you can add more functionalities if you like. You can of course do this any way you like, but here is a suggestion. Start out by creating fourfive personalities (so that you can exclude the ones that don’t “work”). There are lots of ways to do this. If you want to you can check out for instance: http://similarminds.com/global5/ rcoai.html and use the links on that page to surf personality descriptions that you can use as a basis for a fictional person. Or, work with a stereotype personality from a book or movie. Once you have fleshed out these personalities, start thinking about how they would manifest themselves in a calculator. Consider – The behavior: Is it active, seeking contact, or passive. Is it accommodating or demanding? Does it make any sounds; if so, when and which ones? Does it animate certain actions? What does it do when a button is pressed? – Extra functionalities: Does it have any special functionalities because of its personality? How do these manifest themselves? – The surface: Shape, size, arrangement of buttons, graphic style etc. Regardless of how you’ve come up with your personalities, you must create a clickable prototype in PowerPoint, HTML or Flash. I prefer if all three calculators demonstrated in the same prototype, but if it does not fit your overall portfolio design, then separate them.

DELIVERABLES – Your prototype and a description of how each calculator works (this could be a part of the prototype if you want), plus the character descriptions that inspired each calculator. Note that no design rationale should be written. The personality descriptions together with the prototype should suffice.

25

Aesthetics of Interaction, fall 2008

PORTFOLIO EXERCISE: THE NEW OFFICE ASSISTANT Material: Microsoft Word1 and a drawing program. Aim: To study an aesthetic, analyze it and improve it significantly using common sense and the notion of personality. Learning outcomes: To be able to identify and apply an aesthetic created by someone else. Organization: You work alone.

TASK Consider the assistant in Word. It comes in a lot of different versions (a paper clip, a cat, a dog, etc.) Choose one2 and study it for a while. As you can see it displays some special actions/animations as a reaction to what you do:

The first image is the non-active version of the office dog. The second two images shows it looking in different directions depending on what happens on the screen. The 4th and 5th image shows how it produces a diskette from under its collar so that you can save. The 6th and 7th images show how it first takes a note on what you need to find out, and then collapse the desk to (seemingly) run and find it.

In most cases, there is no logical coupling between what the assistant does and what you ask it to do. A dog would never sit behind a desk and take notes for instance. Now, decide upon some kind of being that you want to work with; you can either start out from the existing dog, cat, wizard or robot and improve them (and their depictions) or you can create a new being from scratch. It must be something “living” like an animal (e.g. another type of dog) or a monster or a robot, it can’t be a “thing” like a paper clip or a car.

You don’t actually need to have Word on your own computer to carry out this exercise, but, you need access to a computer that has Word on it, to do the initial studies. If this is a problem, let me know.

1

2

If you don’t have one go to Help > Show the Office Assistant. I you have one and want to change it, right click it.

26

Aesthetics of Interaction, fall 2008

Then, create a logical behavior that it can display when you carry out the following actions: – – – – –

Save Print Ask a question Search and replace Two other actions of your choice

In doing this, continuously ask your self if the behavior is typical for the creature you chose. Also ask yourself if the behavior would be applicable to any of the other types? If so, it is probably too general. Also, ask yourself how this can be reflected in code, just not in animation (E.g if your assistant was an UFO it would perhaps abduct files sometimes, which from a coding perspective would mean that the files are transferred to somewhere else outside the computer, i.e. via Internet to some server far away). Make new images, at least one for each action and write a description on what the assistant does and how this is affected in the code (if applicable). If you want to, you can animate one or a few of the actions as well.

DELIVERABLES – Image(s) or animations of each action plus descriptions of what the assistant appears to be doing and, if applicable, how this affects coding. Note that no design rationale should be written.

27

Aesthetics of Interaction, fall 2008

PORTFOLIO EXERCISE: THE CUBE Material: It depends! Aim: To design something following your own aesthetic codex. Learning outcomes: To be true to your one view on aesthetics. Organization: You work alone.

TASK You may have noticed the big white cube next to Stora Teatern on the Avenue. The cube is part of an artwork commemorating the millennium shift. It has a side of 2 meters, and under ground below it, four video projectors are mounted in a control room. This means that any kind of digital material can be projected onto the cube’s four sides. The cube is currently not used, since it is unclear who has the rights to it, but there are ideas about an upcoming design contest3 about what it should be used for. Your task is to come up with a design proposal. What should be done with the cube? Should it show art? Information? User generated content? Data mined content? Some kind of game? Digital graffiti? What? Open up your mind! You can do anything you like, but keep consequences like feasibility, cost, copyright, legal issues, maintenance and stability into account.

DELIVERABLES – A description, two scenarios of use and/or images and or/prototype of your design. Note that no design rationale should be written.

Yes, it’s true that there may be a contest. I heard it at a lecture at the Centre of Visualization, but at that point in time they hadn’t made up their mind yet. 3

28