Exercises: Teaching and Learning Aesthetics of Interaction

advertisement
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
WELCOME
The exercises in the collection on the following pages have been thoroughly described in
Lundgren, S. (2010) Teaching and Learning Aesthetics of Interaction Thesis for the degree
of Doctor of Philosophy, Chalmers University of Technology.
Available from http://www.ixdcth.se/teaching/
If you want to know more on how to run the exercises, what might be the outcome and what
can happen, things you need to consider when combining them etc, read more there.
However, in order to facilitate your selection of exercises, here’s a short summary:
REUSING THE EXERCISE S IN OTHER COURSES
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
(X)
Embodied Interaction,
Tangible Interaction etc.
X
(X)
(X)
(X)
(X)
(X)
X
X
X
Persuasive Technology
X
(X)
(X)
X
Ubiquitous Computing,
Physical Computing etc.
X
Interaction Design
Basics
Affective Design
X
GUI Design
Design Methods
EXERCISE
Animal Expression Transfer
Calculator on the Runway
Character of Things
Designing Emotions
Design the Apple
Expressions of Interaction
Face…what?!?
Informative Art
The New Office Assistant
The Schizophrenic iPod
Design Analysis
Since the exercises are stand-alone learning objects, the exercise collection can be split up
and reused in lots of different contexts. Here, every exercise will be described shortly, together
with a motivation to why it can be reused in other courses and how. For longer descriptions on
how each exercise “works”, including design issues, pitfalls and outcomes, see section
“Design Exercises” (pp. X-y).
To further facilitate a search or design exercises, the below table serves as a quick
reference (however there may be several other topics where the exercises can be used):
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Animal Expression Transfer
Task in short: To create a hybrid object, combining and mapping expressions and behaviors
from an animal to the expressions and functions of an everyday object.
Aim: To explore expressions of interaction and coherency.
Possible courses/contexts: Design Analysis, Design Methods, Affective Design, GUI Design,
Interaction Design Basics, Ubiquitous Computing or Physical Computing, Persuasive
Technology
As is described in Lundgren (2006, pp. 55-78) Animal Expression Transfer can be used as a
design method e.g. for designing for emotions and/or playfulness, but also as a means to
explore interaction design aesthetics (Landin 2006, pp. 43-46). Moreover it can sometimes
be used to change the use of an artifact by adding animal traits, e.g. taking more care of
one’s pig-like vacuum cleaner than of your average vacuum cleaner, and vacuuming more
often. This means that the exercise works well in a design methods context, especially if
designing for emotions or affections. If used to change behavior it could be a part of a course
on persuasive technology. One could also choose to focus on the “material”-aspect of the
task, i.e. the interplay and wished coherency between expressions, interactions and functions.
As such it could be a part of a basic course, discussing interaction in itself, or a course on
design theory. Also if any of the above issues should be explored in detail, the exercise could
serve as a starting point or theme for a course in physical or ubiquitous computing, since
actually prototyping the concept will give additional insights on coherency issues (cf. Landin
2009, p. 139), and additionally the prototypes could be explored or tested to see which kind
of emotional response they evoke. Lastly one could also utilize the emotional response
towards the animal, using the exercise in a course on affective computing.
Calculator on the Runway
Task in short: To create two different calculators based on two different aesthetic ideals.
Aim: To explore some aesthetic ideals and how an ideal skews a design in a certain
direction.
Possible courses/contexts: Affective Design, GUI Design, Interaction Design Basics,
Ubiquitous Computing or Physical Computing.
If one wants to explore the ideals thoroughly one could either demand a physical prototype or
a software prototype, placing them in the context of either a GUI design course or a course on
ubiquitous computing or physical computing. As such the exercise can serve as a starting
point for a larger project and will give the added benefit of exploring ideals together with
applying one’s skills in GUI design or physical computing. If one wants to explore how different
ideal or approaches can affect the design and more importantly the interaction of and with an
artifact, the exercise can be used in some kind of basic course. One could also utilize the ideal
Emotion, letting students design for two different emotions, in which case the exercise could
fit in a course on affective computing.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Character of Things
Task in short: To inscribe a character into an everyday thing, changing its behavior.
Aim: To explore using a character as a means for coherency.
Possible courses/contexts: Design Methods, Affective Design, GUI Design, Interaction Design
Basics, Ubiquitous Computing or Physical Computing, Persuasive Technology.
Just like Animal Expression Transfer, to which it is somewhat similar, Character of Things can
be seen as an idea generation method or a method to propose new or changed use, thus
fitting in a course on design methods or, in the latter case, persuasive technology. It can also
be used as the starting point for a longer project in ubiquitous computing. Similarly, and if the
“everyday thing” is instead a software, it could be a part of a course in GUI Design as well. If
utilizing the emotional response to the inscribed character the exercise could possibly be used
in a course on affective computing although in that case, Animal Expression Transfer is
probably more suited.
Designing Emotions
Task in short: To design a ticket machine that either expresses or evokes angst.
Aim: To explore form, material, interaction and designing for emotion.
Possible courses/contexts: Affective Design, GUI Design, Interaction Design Basics,
Ubiquitous Computing or Physical Computing, Embodied Interaction or Tangible Interaction.
Given the first part of the aim, “to explore form, material and interaction” the exercise works
well in some kind of basic course on interaction, since it, with its extreme goal of aiming for
angst – opens up for a very thorough use of materials and form in that the environment too is
often designed. Additionally it can open up students’ minds towards not-so-common means of
interaction. The second part of the aim, “designing for emotion” of course makes it well
suited for a course on affective computing or similar. Additionally the focus on new types of
interaction in combination with exploration of form and physical interaction means that the
exercise can also be used in courses on embodied interaction, tangible interaction and
similar. Since the task is also about constructing a concept for a physical object, often evoking
unusual ways of interaction, it can also be used in a course on ubiquitous computing or
similar, where the aim is to explore not-so-common interaction.
Design the Apple
Task in short: To take the interaction aesthetics of e.g. Google and transfer them to e.g. a
bike.
Aim: To explore analyzing and applying someone else’s aesthetics of interaction.
Possible courses/contexts: Design Analysis, GUI Design, Interaction Design Basics.
Since this exercise very much builds on analyzing an existing software and then transfer the
“soul” of that software, it is well suited for any course discussing analysis of interaction and
interaction per se. Additionally, if wanting to make the exercise more life-like it can be skewed
into an exercise where a certain software is given, and it is the student’s task to create a new
module/feature/part/application for it, that fits the interaction “character” of the initial
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
software, i.e. not only look but also feel. As such, the exercise is well suited for a course on
GUI design.
Expressions of Interaction
Task in short: To design interaction that appears in a certain way.
Aim: To explore how interactions express themselves, highlighting the difference between
interacting in a certain way and experiencing something in a certain way.
Possible courses/contexts: Design Analysis, Interaction Design Basics, Embodied Interaction
or Tangible Interaction.
In all its oddness, this is an exercise that tends to make a very strong impression on students
when it comes to looking at interaction per se, here separating it from emotion, intention and
everything else. As such, it works well when analyzing design or looking at interaction in theory
and similarly it can be a part of a basic course in interaction design – but if so as one of the
last parts. Since it explores bodily movement it could also be a part of a course on embodied
interaction or similar.
Face…what?!?
Task in short: To combine two given ideals in a Facebook-like design.
Aim: To explore designing for, and combining different ideals.
Possible courses/contexts: Affective Design, GUI Design, Interaction Design Basics,
Persuasive Technology.
Combing different demands and constraints (in this case aesthetic ideals) into one design is
an everyday design dilemma and as such the exercise is well suited for a course in interaction
design basics, with the added benefit of exploring ideals. It can also serve as a staring point
for a longer GUI design project where student thoroughly explore what it is like to design for a
combination of ideals as well as practice their GUI design skills. If the ideals are Criticism and
Emotion, the exercise can be used in a course on affective computing as well, or possibly even
persuasive technology.
Informative Art
Task in short: To design informative art according to a given artistic style.
Aim: To explore coherency and how temporal aspects affect expression.
Possible courses/contexts: GUI Design, Interaction Design Basics.
Since the task demands the design of a software prototype it fits into any course on GUI
Design, especially as a means to explore non-efficiency and temporal aspects. Due to the
latter the exercise is also well suited for some kind of basic course in interaction design,
especially if emphasizing the temporal aspects.
The New Office Assistant
Task in short: To make a coherent version of Microsoft Words helping agent, the Office
assistant.
Aim: To explore coherency.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Possible courses/contexts: GUI Design, interaction Design Basics.
This exercise explores coherency, and also raises issues like how far it should be pursued.
This discussion fits well in a basic course on interaction design, but one can also choose to
explore coherency further in a course on GUI design, asking for a more elaborate prototype
with animated characters and different assistants affecting certain functions (e.g. search
algorithms) differently.
The Schizophrenic IPod
Task in short: To combine different notions on interaction, here from Landin (2009) and
Löwgren (2002).
Aim: To explore how various aspects of interaction can affect design.
Possible courses/contexts: Design Analysis, Design Methods, Interaction Design Basics,
Ubiquitous Computing or Physical Computing.
Many of the students perceived this exercise as a method for generating new ideas, which it
(also) is, wherefore it can be used in a course on design methods. In the form of an idea
generating method it can also serve as a staring point for a longer project in ubiquitous
computing or physical computing, exploring effects of design choices. However the general
aim is to explore how changing aspects of interaction can affect design, and in that respect
the exercise can also be used in a basic course on interaction or when practicing design
analysis.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
ANIMAL EXPRESSION TRANS FER
Task in short: To create a hybrid object, combining and mapping expressions and behaviors
from an animal to the expressions and functions of an everyday object. On expressions of
interaction and coherency.
Aim: To explore how behaviors and interactions express themselves, sometimes only over
time and in use. To get a better understanding of the interplay between expressions,
interactions and functions. To design for coherency.
Prerequisites: None, but having read either Landin et al (2002) or pp. 56-78 in Lundgren
(2006) can be helpful.
Time + material: At least three hours, preferably five, allowing for a second iteration, given
that the deliverable is only a concept sketch.
Organization: Since the task is quite “odd” and relies much on coming up with a suitable
combination, working in groups of 2-3 students is probably best.
TASK
Your task is to start out using the expressions of an animal, mapping them onto an object,
thus creating a novel object. You will work in groups of two or three, and you will do it twice, in
four steps:
Step 1: Choose an animal (ca. five minutes)
Choose any one of the following animals:
–
–
–
–
–
–
bees
ants
parrot
dog
sloth
elephant
–
–
–
–
–
–
tiger
squirrel
donkey
hedgehog
cobra
killer whale
Check out Wikipedia or some other source to learn more about the animal you chose. Then,
make two lists. The first of the animals expressions (how it looks, sounds, moves, feels smells
– anything that can be noticed within five minutes of observation, e.g. “cute, black, roars,
wriggles, furry” etc.). The second list should cover the animals’ behaviors and skills (migrates,
lives in groups, excellent sense of smell, hears ultra sound etc.).
Step 2: Create a novel object (ca. two hours)
Come up with an already existing, man-made object (a physical thing, not software) that is
suitable for being enhanced with a few of the animal’s expressions. Again, make one list of
the expressions of the object and one of its functions, but this time also add how the
functions express themselves; e.g. a lawn mower mows grass which is expressed by it moving
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
forward, making a roaring sound and spitting out cut grass somehow (or possibly collecting it
in a bag).
Now, study the lists you’ve made concerning the animal and the object. Do some things
coincide? Based on the similarities between the animal and your chosen object, consider
which expressions and behaviors to transfer, and which ones to leave out. Also consider how
the user’s interaction with the novel object will result in certain behaviors and expressions (i.e.
if I use the novel object in a certain way, how will it respond?). Remember to strive for
coherency in design, i.e. your object should look and behave “logically”, everything should
make sense. This means that you may well add or remove new functionality or change
interaction, if need be.
Step 3: Sketch (ca 20 minutes)
Make a large sketch of your novel object and describe how it works. Supply your lists with
expressions and behaviors and motivate why you transferred some and left some out.
Step 4: Analyze (ca 10 minutes)
If you compare your novel object with the old already existing object, did you:
– Change only the interaction
– Change only the functionality
– Both
Redo the entire process, but now aim to create a novel object that differs from your first
created one in the analysis-phase, i.e. if you’ve already created an object where both
functionality and interaction was changed, try to create an object where either interaction or
function changes but not both, etc.
DELIVERABLES
– The sketches, which should include your design rationale.
– A written reflection: When you created you novel objects, did you then enhance existing
expressions using expressions from the animals, (e.g. making a fast car even faster or a
reliable printer even more reliable), or did you add entirely new expressions from the
animals? What’s the difference between using the animal expressions to change the
expressions of functionality vs. the expressions of interaction? How can this way to
design be used to alter behavior and relations to an existing object by turning it into an
animal expression object? Which one transferred expression or behavior do you think
was the most important or interesting?
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
CALCULATOR ON THE RUNWAY
Task in short: To create two different calculators based on two different aesthetic ideals. On
aesthetic ideals and how an ideal skews a design in a certain direction.
Aim: To base design an aesthetic ideal, learning how the same artifact can turn out very
different depending on the underlying rationale for design.
Prerequisites: Having read about aesthetic ideals of interaction:
Lundgren, S. (2010) Teaching and Learning Aesthetics of Interaction. Dissertation for the
degree of Doctor of Philosophy, Chalmers University of Technology. (pp.97-125)
Available from http://www.ixdcth.se/teaching
Time: Ca 6 hours if the deliverable is only a concept sketch.
Organization: Alone, or possibly in pairs.
TASK
Your task is to design two different versions of a calculator, applying different ideals to each
one of them to see how the ideal can affect the design. Choose from the following ideals:
–
–
–
–
Emotion (which one?)
Criticism (what do you wants to criticize, more exactly)
Sensing
Playfulness
Choose your ideal first, so that it then really serves as an aim for your design. Write it on a
note that you give to the teacher, as a kind of “contract”.
The calculators shouldn’t be complex in the sense that they have a lot of functionalities;
being able to deal with addition, subtraction, division, multiplication and square roots is all
they need – but you can add more functionalities if you like, even “negative” functionalities
like never showing decimals but rounding off to the closest whole number, or delivering a
wrong result every tenth time… it all depends on your chosen ideal.
It’s up to you whether you want to make physical prototypes or just a graphical ones. In any
case consider (and preferably implement/fake/demonstrate) how to interact with it and how it
responds to interaction. How does one go about to calculate 34x4575, for instance?
Consider:
– The behavior: Is it active, seeking contact (e.g. via pop-ups), 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? How do these manifest
themselves?
– The appearance: Shape, size, arrangement of buttons, graphic style etc.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Tip: Don’t forget to make a coherent design; if you aim for for instance playfulness, that
should permeate your design. E.g. both input and output should be playful in some respect. As
a result you should focus on interaction firstly.
DELIVERABLES
– Your prototypes and a description of how each calculator works (this could be a part of the
prototype if you want).
– A design rationale for each calculator.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
CHARACTER OF THINGS
Task in short: To inscribe a character into an everyday thing, changing its behavior.
Aim: To explore how to base coherency on a character.
Prerequisites: None. Possibly one can read Janlert and Stolterman’s “The Character of
Things” (1997) for inspiration and theoretical foundation.
Time: Ca 3-4 hours if the deliverables is only a concept sketch.
Organization: Alone or in pairs.
TASK
Today it’s your task to design an object with a certain character. In doing this you will design
not only the functionality of the object, but also the form, and how one interacts with it.
Step 1: Defining the character (ca 1 hour)
Start by choosing and analyzing a character; pick one of the following:
Teacher! Insert images here; the original ones not entered due to copyright issues. In the
original exercise, pictures of an old Chinese woman, rock star Nikki Six, a golden retriever
puppy and a painting of Queen Elisabeth I were used. However you can replace them with
any other characters you think will result in interesting designs.
Discuss how your character behaves in general, and how he/she/it interacts with people.
Note that you should not create a complex and skewed background for your character, go with
the cliché.
– What is your character’s general attitude towards life (e.g. friendly, shy, cynic,
aggressive, ignorant, accommodating…)?
– What is your character’s general attitude towards other people?
– How do other people interact with your character?
– How does your character get others’ attention?
– How does your character flirt?
– What does your character like to do together with others?
– What is your character’s primary need (e.g. love, attention, piece & quiet, revenge)?
Now you shall use an approach that is sometimes called Chinese Portraits. Take a few
minutes to separately (and quietly) ask yourself the following questions.
–
–
–
–
If your character was a material, which one would it be? Why?
If your character was a tool, which one would it be? Why?
If your character was a color, which one would it be? Why?
If your character was a sound, which one would it be? Why?
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
– If your character was a feeling, which one would it be? Why?
– If your character was a shape, which one would it be? Why?
Discuss your answers in the group and agree on one joint portrait.
Step 2: Choosing and designing the object (ca 1.5 hours)
Once you’ve gotten all this figured out, it is finally time to choose the object you will design.
So, choose one of the following: A printer, a car, or a camera. Focus on your object for a while.
List its functions and how users interact with the object – not only in relation to the functions,
but also in general, i.e. in carrying it, cleaning it, using it as status item or whatever.
Then, try to find mappings between your character’s behaviors and your objects functions.
Try to leave the human/dog dimension behind in doing this, i.e. do not let your object talk or
write things as a way to communicate its personality. And do not give your object a face or
facial expressions. It should be an object with character, not a personality dressed up as an
object (as in many Disney movies). Instead, try to take the “soul” of your character, and place
it into your object, and let the soul manifest itself in how the object acts and interacts rather
than in how it looks. Note that you mustn’t go to far from what a printer/car/camera “is”; you
can add new functionalities, but not drastically change the appearance of it. Try to utilize its
already existing expressions and functions instead.
Example: Imagine a toaster with the personality of a very aggressive and
destructive person. It would probably always burn the bread, and would
aggressively spit it out, high up in the air. This action comes with a very loud
mechanical noise. Also, the cover would lead heat very well so that whoever
tries to touch the toaster will burn themselves.
Does your object have some extra functionalities due to its character? Or does it miss
functionalities that it should have?
Example: The aggressive toaster lacks a control for stating how much you want
to toast your bread. It decides that by itself and is unpredictable. Most of the
time the bread is burnt black, but sometimes it is instead spat out at once, not
burned at all. Even more seldom the aggressive toaster delivers a perfect toast.
It has an extra “functionality”; it is very hostile towards strangers. If a stranger
appears in the kitchen it will turn on itself, become hot and repeatedly make
the spit-out-the-bread-movement with the accompanying sound. This sideeffect of its aggressiveness can be used as an alarm.
How do people interact with your object and how does it react? Like, the aggressive toaster
burning everyone who tries to touch it.
Step 3: Shaping the object (ca 1.5 hours)
Now, start giving your object a physical design. Go back to the Chinese portrait and look at
your answers for inspiration.
Example: The aggressive toaster is made of pitch black metal with a matte
finish, somewhat stained. The little handle that can be used to eject the bread
with is made if shiny stainless steel whose shape is not rectangular as usual,
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
but instead looks like an arrowhead. There are no soft edges; they are all very
sharp. The shape is compact, more like a cube than a rectangular cuboid. It is
very heavy.
Make lots of small sketches before you turn it into your final drawing. You may not use a
photo or someone else’s pre-made drawing you must design the object from scratch, because
every design decision matters in expressing your character! Consider shapes, angles,
material, color, surface, size, weight… everything. Make a poster with the drawing of your
object plus thorough explanations of the functionalities and how to interact with the object
and how it in turn interacts with you.
DELIVERABLES
– Your design in the form of sketches. Clearly explain how it works.
– A design rationale.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
DESIGNING EMOTIONS
Task in short: To design a ticket machine that either expresses or evokes angst.
Aim: To explore form, material, interaction and designing for emotion.
Prerequisites: None.
Time: Ca 6 hours if the deliverables is only a concept sketch.
Organization: Preferably the first step (The Chinese Portrait) is carried out in groups of 3-4
students, thereafter alone or in pairs.
DEFINITION
The emotion you are about to explore is angst 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 deep-seated spiritual
condition of insecurity and despair in the free human being.
TASK
Your task is to create a ticket vending machine that either expresses or evokes angst. It is up
to you to decide when and where it is used and by whom, which kind of tickets it sells and
exactly which functions it provides, but it must function; in one way or the other you can buy
tickets using it, however reluctantly!
To get a wide scope of ideas you will 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 sensation, (as in something you can pick up with your sense) which one
would it be?
– If angst was a movement, 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 sound, which one would it be?
– If angst was a sport, which one would it be?
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Thereafter, (still individually) try to figure out why you answered the way you did (e.g. “If angst
was a kind of weather it would be fog, because it is wet and cold and hides everything and
distorts sounds”)
Discuss you answers with 2-3 other participants and try to see how you can use them to
get inspiration for your vending machine. 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.
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.
When you design, focus on the interaction firstly; you will probably have to come up with
some more unusual interaction than just walking up to a machine and put money into it, press
a button and get the ticket; that’s not very angst-related. Then adapt the rest of the design
(form, material, context) to the interaction (yes, it’s an iterative process and that it is partly
impossible to do only interaction first, without considering the rest, but try). If you want to you
can design an entire context for your vending machine; maybe it’s situated in a special room?
Don’t forget to consider which kind of tickets it sells and how this (e.g. choices the buyer has
to make) affects interaction.
If you are designing a ticket machine that expresses angst, utilize what the machine is and
does to express the angst, i.e. do not “glue on” human behavior (e.g. facial expressions) just
for the sake of expressing angst. Instead use the machine’s natural sounds and capabilities.
Tip: If you lack ideas, imagine that you are designing something for a dystopic movie.
Tip: Angst is composed by a series of other emotions; which ones? Use these as inspiration, or
evoke several of them in the hop of evoking angst as a result.
Make sketches and write one or two scenarios of use (i.e. a small fictional story about
someone who uses your machine). If your sketches are on paper, scan them or photograph
them.
DELIVERABLES
– Your sketches. Clearly describe how your design works.
– Your scenarios.
– A design rationale.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
DESIGN THE APPLE
(VERSION 1)
Task in short: To take the interaction aesthetics of e.g. Google and transfer them to e.g. a
bike.
Aim: To analyze and apply someone else’s aesthetics of interaction
Prerequisites: The exercise requires some insight in the difference between interaction,
function and expression.
Time: Ca 3-4 hours if the deliverables is only a concept sketch.
Organization: Alone or in pairs, or in pairs or groups during the analysis phase and then
alone.
TASK
Study any of the following softwares: Adobe Photoshop, Microsoft Word, Facebook or iTunes.
How does it feel to interact with it? Are there special interaction traits? What does it “do” for
you, and what does it demand from you? E.g. Photoshop is very much about exactness and
previews whereas Word is much about modeless feedback and trying to think for you. Study
the most common activities.
Design either a bike or an old-fashioned phone (ca 1980ies; no color screens, no QWERTY
keypads etc) and try to give it the “soul” of your software by applying the interaction traits of
your software. Ask yourself how the most common activities are carried out. Don’t be afraid to
stretch the boundaries somewhat. Remember that you shall mimic how it feels to interact with
the program and how it appears, rather than exact functionality, i.e. you shouldn’t make your
bike write documents just because you chose Word.
Some functions that you want to add/change may depend on equipping your bike/phone
with things like sensors or speakers. However you can’t add too much; don’t turn your
bike/phone into an alternative computer with color screen, keypad, various ways to input data
etc… choose add-ons with care.
Example: The Bus Company 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.
Lastly, consider the look&feel of your bike/phone, again mimicking the software as much as
possible. Then, make detailed sketch/sketches of your product, including explanations of the
functions and what they are inspired by in the original software.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
DELIVERABLES
– Your sketch/sketches. Carefully describe how your design works.
– A design rationale.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
DESIGN THE APPLE
(VERSION 2)
Task in short: To take the interaction aesthetics of e.g. Facebook and transfer them to e.g. a
bike, using Lim’s gestalt attributes.
Aim: To analyze and apply someone else’s aesthetics of interaction
Prerequisites: Having read Lim, Y., Stolterman, E., Jung, H. and Donaldson, J. (2007)
Interaction gestalt and the design of aesthetic interactions, In: Proceedings of the 2007
conference on Designing pleasurable products and interfaces , 22-25 August 2007, Helsinki,
Finland, ACM Publishing
Time: Ca 3-4 hours if the deliverables is only a concept sketch.
Organization: Alone or in pairs, or in pairs or groups during the analysis phase and then
alone.
TASK
Study any of the following softwares: Adobe Photoshop, Microsoft Word, Facebook or iTunes.
How does it feel to interact with it? Are there special interaction traits? What does it “do” for
you, and what does it demand from you? E.g. Photoshop is very much about exactness and
previews whereas Word is much about modeless feedback and trying to think for you.
Study the most common activities, e.g. reading, making and commenting on posts in
Facebook. Analyze the program (as a whole) in terms of Lim et al’s attributes.
Then, choose either a bike or an old-fashioned phone (ca 1980ies; no color screens, no
QWERTY keypads etc). Make the same analysis for that too, and when you are finished, try to
alter those gestalt attributes that differ from your software’s by redesigning it. The aim is to –
via the gestalt attributes –give the bike or phone the “soul” of your software by applying the
interaction traits of your software. Don’t be afraid to stretch the boundaries somewhat.
Remember that you shall mimic how it feels to interact with the program and how it appears,
rather than exact functionality, i.e. you shouldn’t make your bike write documents just
because you chose Word. Note also that in some cases it is impossible or not suitable to
change an attribute, e.g. Facebook is very dynamic to its nature something that is hard to
apply entirely onto a bike or phone.
Some functions that you want to add/change may depend on equipping your bike/phone
with things like sensors or speakers. However you can’t add too much; don’t turn your
bike/phone into an alternative computer with color screen, keypad, various ways to input data
etc… choose add-ons with care.
Example: The Bus Company 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
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
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.
Lastly, consider the look&feel of your bike/phone, again mimicking the software as much as
possible. Then, make detailed sketch/sketches of your product, including explanations of the
functions and what they are inspired by in the original software.
DELIVERABLES
– Your sketch/sketches. Carefully describe how your design works.
– A design rationale.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
EXPRESSIONS OF INTERACTION
Task in short: To design interaction that appears in a certain way.
Aim: To explore how interactions express themselves, highlighting the difference between
interacting in a certain way and experiencing something in a certain way.
Prerequisites: None.
Time: Ca 6 hours since the deliverable is a physical item. As a consequence students should
be given access to different materials (typically what’s already in a design studio) or extra
time to look for materials outside school.
Organization: Since the task requires a certain insight it’s best to let students work alone, lest
they can just rely on their partner.
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 feel for instance 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!)
The easy way out is to make a device that evokes your certain feeling and then design the
interaction accordingly. Try to avoid this; challenge yourself and 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).
Start by 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. You
decide yourself if the object has some function, or if its only function is for people to interact
with it in that way. When designing your thing, you can use any physical materials you like.
You should make a physical prototype, so that you really explore physical expressions of
interaction. If you are not satisfied with your prototype, 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.
Note: Although this exercise may seem strange, it has some very real-life implications. E.g,
when designing interactive installations in for instance a museum you want the users to not
only enjoy them but also appear as if they are enjoying themselves, in this way encouraging
others to try. This can be hard since people who are concentrated, often appear to be bored,
dismissive or even angry.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
DELIVERABLES
– Your thing and a written description of how it works (but not why!).
– A design rationale that explains your design.
These two should be separate documents.
FEEDBACK: GUESSING C ONTEST
Note that part of the feedback session will be a guessing contest. This is why your word has to
be secret, I mean really secret!
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
FACE…WHAT?!?
(VERSION 1)
Task in short: To combine two given ideals in a Facebook-like design.
Aim: To explore designing for, and combining different ideals.
Prerequisites: Knowledge of what Facebook is and how it works. Having read about aesthetic
ideals of interaction:
Lundgren, S. (2010) Teaching and Learning Aesthetics of Interaction. Dissertation for the
degree of Doctor of Philosophy, Chalmers University of Technology. (pp.97-125)
Available from http://www.ixdcth.se/teaching
Time: Between 8 and 16 hours, depending on how detailed the deliverables should be, and
how much interaction there should be between the students.
Organization: This is a hand-over exercise, so students work alone, but as part of a chain
TASK
Today’s task is to come up with a concept design for an alternative version of Facebook. This
is done in a cooperative form; you will build on other’s work, and others will build on yours.
Step 1: (ca 60 minutes) – Can be done in advance
Decide on an aesthetic ideal that you want to apply to Facebook. Write down a vision or goal
for your design; it should be rather specific. Not “This version of Facebook should criticize
modern society” which is too wide, but something more specified like “This version of
Facebook should criticize the over-consumption of food”.
Then, start redesigning the functionality of Facebook accordingly. At this stage, do not
consider or specify how anything looks, or specific interaction, just write a list of ca seven
suggested new or redesigned functions and how they work in terms of consequences and
restrictions. If needed also motivate the function. Examples:
– “The user can connect with friends in the standard way, but all the user’s friends must be
of different ages. This motivates relatives of different generations to befriend each other.“
– “The user can upload pictures of others, but a special software will automatically distort
them before putting them online. In this way, that person’s privacy is being protected.”
Deliverables: Your vision and the list of functions (Don’t forget to write your name!). Give it to
the person next in line.
Step 2: (ca 60 minutes)
You have gotten a list with suggested functionality supporting a certain aesthetic ideal from
someone else. Read the list and then, decide on another aesthetic ideal that you also would
like to add to this design, (e.g. combining playfulness with criticism, or emotion with sensing).
Rewrite the vision so that it incorporates both ideals. Try to combine them rather than just
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
adding one to another. E.g. “This version of Facebook should criticize the over-consumption of
food by encouraging exercise via a tangible user interface.”
Then, extend the list with some four new or redesigned functions that support “your” aesthetic
ideal without contradicting the original vision, preferably combining both. Consequently, you
should also go through the list of already suggested functions that you got, and alter as many
as possible to fit the entire, new, vision.
Deliverables: The new vision and the updated list of functions (Don’t forget to add your
name!). Give it to the person next in line.
Step 3: Merge (at least 4 hours)
So, you’ve gotten this vision and a list of functions supporting it. Now, it is your task to take all
of this into account when creating a concept sketch for this new facebook-variant. Your aim is
to create a coherent design that combines these two ideals, without annoying the two people
who wrote the list of functions. So, you must respect their vision and their thoughts. Thus you
must carefully balance between creating coherency, choosing some of the suggested
functions and excluding others, and possibly even add new ones that support both ideals.
Write the final list of functions. Now, you can consider interaction specifically; if it is nonstandard please describe it.
Example: A standard way to get a profile picture is to upload a photo. A non-standard
way would be to instead supply a small drawing program with limited functionality for
drawing one’s picture.
From an interaction-point of view the first way is very effective, whereas the second
one can be perceived as being both “slow”, fun and/or frustrating.
In doing this you may or may not return to the two people who have written the list, in order to
ask them what they mean, or to negotiate changes. Then, make a mock-up graphic design of
the interface.
DELIVERABLES
– The final list of functions.
– The mock-up of the interface. Clearly describe how it works.
– A design rationale.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
FACE…WHAT?!?
(EXTENDED VERSION )
Task in short: To combine two given ideals in a Facebook-like design.
Aim: To explore designing for, and combining different ideals.
Prerequisites: Knowledge of what Facebook is and how it works. Having read about aesthetic
ideals of interaction:
Lundgren, S. (2010) Teaching and Learning Aesthetics of Interaction. Dissertation for the
degree of Doctor of Philosophy, Chalmers University of Technology. (pp.97-125)
Available from http://www.ixdcth.se/teaching
Time: Between 16 and 20 hours, depending on how detailed the deliverables should be, and
how much interaction there should be between the students.
Organization: This is a hand-over exercise, so students work alone, but in groups of three or
six, handing the exercise over.
TASK
Today’s task is to come up with a concept design for an alternative version of Facebook. This
is done in a cooperative form; you will build on other’s work, and others will build on yours.
Step 1: The First Vision (ca 60 minutes) – Can be done in advance
Decide on an aesthetic ideal that you want to apply to Facebook. Write down a vision or goal
for your design; it should be rather specific. Not “This version of Facebook should criticize
modern society” which is too wide, but something more specified like “This version of
Facebook should criticize the over-consumption of food”.
Then, start redesigning the functionality of Facebook accordingly. At this stage, do not
consider or specify how anything looks, or specific interaction, just write a list of ca seven
suggested new or redesigned functions and how they work in terms of consequences and
restrictions. If needed also motivate the function. Examples:
– “The user can connect with friends in the standard way, but all the user’s friends must be
of different ages. This motivates relatives of different generations to befriend each other.“
– “The user can upload pictures of others, but a special software will automatically distort
them before putting them online. In this way, that person’s privacy is being protected.”
Deliverables: Your vision and the list of functions (Don’t forget to write your name!). Give it to
the person next in line.
Step 2: A Combined Vision (ca 60 minutes)
You have gotten a list with suggested functionality supporting a certain aesthetic ideal from
someone else. Read the list and then, decide on another aesthetic ideal that you also would
like to add to this design, (e.g. combining playfulness with criticism, or emotion with sensing).
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Rewrite the vision so that it incorporates both ideals. Try to combine them rather than just
adding one to another. E.g. “This version of Facebook should criticize the over-consumption of
food by encouraging exercise via a tangible user interface.” Do NOT choose the same ideal as
you chose in Step 1!
Extend the list of functions with some four new or redesigned functions that support “your”
aesthetic ideal without contradicting the original vision, preferably combining both.
Consequently, you should also go through the list of already suggested functions that you got,
and alter as many as possible to fit the entire, new, vision.
Deliverables: The new vision and the updated list of functions (Don’t forget to add your
name!). Give it to the person next in line.
Step 3: Merge, part I (ca 3-4 hours)
So, you’ve gotten this vision and a list of functions supporting it. Now, it is your task to take all
of this into account when creating a concept sketch for this new facebook-variant. Your aim is
to create a coherent design that combines these two ideals, without annoying the two people
who wrote the list of functions. So, you must respect their vision and their thoughts. Thus you
must carefully balance between creating coherency, choosing some of the suggested
functions and excluding others, and possibly even add new ones that support both ideals.
Write the final (?!) list of functions. Don’t forget to consider interaction specifically.
Only make rough sketches at this point in time. Consider all parts of Facebook: Making
posts, commenting on posts, commenting on comments, uploading pictures, music movies
and links, connecting to friends, suggesting friends or getting friends suggested, applications,
games – all of it, not only the parts the other two considered.
Step 3: Negotiation (1,5 hours, i.e. ca 30 minutes per design)
Meet with the people who have given you directions in steps 1 and 2 to get feedback on the
design so far. If you did this in a circle of three, just sit down and go through the three designs
one by one. If you did it in a circle of six do as follows (the bold number represents who is
getting feedback):
First session
Second session
Third session
Persons 1, 2 and 3
Persons 2, 3 and 4
Persons 3, 4 and 5
Persons 4, 5 and 6
Persons 5, 6 and 1
Persons 6, 1 and 2
Regardless if giving or getting feedback try to be constructive. This step is about team work,
not one person defending a design against two others. Remember that the aim is a coherent
whole that supports both aspects of the vision. This may require redesign of some functions,
some ways of interaction and possibly even a slight reformulation of the vision.
Step 5: Merge, part II (ca 8 hours)
Based on the discussion you had in the previous step, finalize your design. Make mock-ups of
The “standard” Facebook page
How friends are managed
The things that differ radically (graphically) from the standard Facebook –design.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Write a description of hw the interface works. If interaction is non-standard please describe it
and comment on it.
Example: A standard way to get a profile picture is to upload a photo. A non-standard
way would be to instead supply a small drawing program with limited functionality for
drawing one’s picture. From an interaction-point of view the first way is very effective,
whereas the second one can be perceived as being both “slow”, fun and/or frustrating.
Lastly, write a rationale for your design. This is built on the vision, the list of functions and
their motivations, and what came out of the discussion in Step 4.
DELIVERABLES
– The mock-up of the interface. Clearly describe how it works.
– A design rationale.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
INFORMATIVE ART
Task in short: To design informative art according to a given artistic style.
Aim: To explore coherency and how temporal aspects affect expression.
Prerequisites: A couple of works from example artists, e.g. Mark Rothko, Frank Stella, Theo
van Doesburg, Josef Albers (Hommage to the Square), Kenneth Noland, Barnett Newman.
One can also read the following for inspiration:
Redström J, Skog T, Hallnäs L. (2000) Informative art: using amplified artworks as
ambient displays. In: Proceedings of DARE 2000. Elsinore, University of Aarhus, 2000
Time: Ca 4 hours with an animated prototype as deliverable.
Organization: Alone or – if not all students are skilled in prototyping (e.g. Flash) – in pairs.
BACKGROUND
The basic idea with Informative Art is to take artworks, and inscribe
information to them, the rationale being that such an artwork can be
both beautiful and informative at the same time – but since trapped in
the context of the (abstract) artwork the coupling between data and
the graphic expression of it can be somewhat obscure.
TASK
You will get a sheet with four paintings made by the artist whose style
you should analyze and copy. (Use only these paintings in your
analysis, because “your” artist may well have gone through lots of
different phases in his or her life, which you should not take into
account!). What characterizes the artwork? Which elements are always
present, and which properties do they have (e.g. color, size,
placement)? Or, in other words, what are the “rules” for you artist’s
artwork?
Then, create a working piece of Interactive Art showing any of the
following over a period of time:
– The use of the coffee machines at a big university or working
place.
– The weather.
– The people logged in at the network of a big university or
working place.
– Time table for the buses that pass at the closest bus stop
that has some 6-12 lines passing by.
– The workload for a printer.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Which parameters are interesting to visualize? There should be plenty in each case; choose
the most interesting ones (at least four) and try to make the mappings between the data and
the visual elements as logical as possible (yes, hard and sometimes impossible, but
sometimes also very easy!).
Then, design a temporal behavior for your paintings, i.e. design how, why and when they
update. When does “new” information come? Is it a continuous flow (weather) or discrete
events (getting a cup of cappuchino)? Should one try to forecast information (e.g. buses
scheduled to arrive soon)? Which time span should be shown – the last hour, the last day,
yesterday, today and tomorrow? Experiment with different periods of time. How should the
update be carried out? Jerky? Smooth? Instantly? As a transition over several minutes? Why?
Is there a “time-axis” in your painting, if so in what direction (e.g. left-right, down-up, towards
the viewer)?
Note: Do not forget to consider the extreme scenarios; e.g. when there is extremely much
– or little – data coming in, because…
Note: The informative artwork should at any point in time look like a painting made by your
artist!
Note: How your informative artwork “works” must not be intuitive at first glance, but when
one knows how to decipher it, it should be easy, logical in its own obscure way!
Create a simple prototype of your artwork where you show how it changes and make a written
explanation as well, since your work will be feedbacked in the form of an interactive art
exhibition, i.e. people will see the prototype and read your explanations; you will not explain it
to them!
DELIVERABLES
– Your prototype plus a description of how to decipher the information.
– A design rationale that explains your design.
– A discussion regarding how the choice of time span changes the behavior and look of your
painting.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
THE NEW OFFICE ASSISTANT
(CLOSED VERSION)
Task in short: To make a coherent version of Microsoft Words helping agent, the Office
assistant.
Aim: To explore coherency.
Prerequisites: None.
Time: Ca 2-3 hours if the deliverables is only a concept sketch.
Organization: Alone or in pairs.
INTRODUCTION
Consider the assistant in Word. It comes in a lot of different versions (a paper clip, a cat, a
dog, etc.) let’s consider the dog: As you can see it displays some special actions/animations
as a reaction to what you do:
Screen dumps from Microsoft Word, showing the dog-version of the Office Assistant.
The upper row shows some normal dog behaviour, like appearing from the doghouse, looking
in different directions depending on where the cursor is, occasionally scratching himself, or
falling asleep.
The second row however shows a lot of non-dog behavior. E.g. the dog produces a diskette
from under its collar to illustrate the Save-action. When invoking Search, it first takes a note
on what you need to find out, and then collapses the desk in a very odd way in order to
(seemingly) run and find the answer to the question. It also sometimes skims a book. Lastly,
and for unknown reasons it every once in a while produces a fusing burner with which it
incinerates its doghouse.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
As you can see, in several cases, there is no logical coupling between what the assistant is,
what it does and what you ask it to do. A dog would never sit behind a desk and take notes for
instance!
TASK
It is your task to design a coherent Office-assistant. Choose an animal (not a dog!), and
create a logical behavior that it can display when you carry out the following actions:
–
–
–
–
–
New
Save
Open
Print
Find and Replace
In doing this, continuously ask yourself if the behavior is typical for the creature you chose,
and if the actions are coherent (really coherent) in relation to each other. You may have to try
out several animals before you find one that works.
Consider the Find-algorithm, that looks for a word or phrase in the text. How could it be
rewritten to reflect your chosen animal? (E.g. one could expect a dog to systematically go
through the text from beginning to end, stopping at each entry, just like when a dog follows a
track and marks findings.) Also find another action that – due to the character of your animal
– works different than normally. (E.g. if your assistant had been a UFO and not an animal, one
could imagine that the Save-algorithm would be somewhat unreliable, sometimes files could
be saved onto a faraway server instead of one’s local computer, paraphrasing how aliens in
most stories take samples of terrestrial life and bring it back to their distant planet.)
If you have time, make an image or animation of your assistant responding to one of the
actions listed above.
DELIVERABLES
– A description of how – and why – your assistant acts when the user evokes New, Save,
Open, Print and Find and Replace respectively
– A description of how Find and some other action are coded differently because of your
animal’s character
– A rationale/discussion regarding the coherency issues that you encountered in the design
process.
– (Image/images if you had time left to make some.)
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
THE NEW OFFICE ASSISTANT
(SEMI-OPEN VERSION)
Task in short: To make a coherent version of Microsoft Words helping agent, the Office
assistant.
Aim: To explore coherency.
Prerequisites: None.
Time: Ca 2-3 hours if the deliverables is only a concept sketch.
Organization: Alone or in pairs.
INTRODUCTION
Consider the assistant in Word. It comes in a lot of different versions (a paper clip, a cat, a
dog, etc.) let’s consider the dog: As you can see it displays some special actions/animations
as a reaction to what you do:
Screen dumps from Microsoft Word, showing the dog-version of the Office Assistant.
The upper row shows some normal dog behaviour, like appearing from the doghouse, looking
in different directions depending on where the cursor is, occasionally scratching himself, or
falling asleep.
The second row however shows a lot of non-dog behavior. E.g. the dog produces a diskette
from under its collar to illustrate the Save-action. When invoking Search, it first takes a note
on what you need to find out, and then collapses the desk in a very odd way in order to
(seemingly) run and find the answer to the question. It also sometimes skims a book. Lastly,
and for unknown reasons it every once in a while produces a fusing burner with which it
incinerates its doghouse.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
As you can see, in several cases, there is no logical coupling between what the assistant is,
what it does and what you ask it to do. A dog would never sit behind a desk and take notes for
instance!
TASK
It is your task to design a coherent Office-assistant. Choose an animal (not a dog!), and
create a logical behavior that it can display when you carry out the following actions:
– New
– Print
– Find and Replace
…plus any two of the following
–
–
–
–
–
Open
Save
Save As
Help
Copy
In doing this, continuously ask yourself if the behavior is typical for the creature you chose,
and if the actions are coherent (really coherent) in relation to each other. You may have to try
out several animals before you find one that works.
Consider the Find-algorithm, that looks for a word or phrase in the text. How could it be
rewritten to reflect your chosen animal? (E.g. one could expect a dog to systematically go
through the text from beginning to end, stopping at each entry, just like when a dog follows a
track and marks findings.) Also find another action that – due to the character of your animal
– works different than normally. (E.g. if your assistant had been a UFO and not an animal, one
could imagine that the Save-algorithm would be somewhat unreliable, sometimes files could
be saved onto a faraway server instead of one’s local computer, paraphrasing how aliens in
most stories take samples of terrestrial life and bring it back to their distant planet.)
If you have time, make an image or animation of your assistant responding to one of the
actions listed above.
DELIVERABLES
– A description of how – and why – your assistant acts when the user evokes New, Save,
Open, Print and Find and Replace respectively
– A description of how Find and some other action are coded differently because of your
animal’s character
– A rationale/discussion regarding the coherency issues that you encountered in the design
process.
– (Image/images if you had time left to make some.)
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
THE SCHIZOPHRENIC iPOD
(VERSION1)
Task in short: To combine different notions on interaction, here from Landin (2009) and
Löwgren (2002).
Aim: To explore how various aspects of interaction can affect design.
Prerequisites: Being familiar with the following texts:
Landin, H. (2006) Fragile and magical interaction forms: an approach to interaction
design aesthetics. Licentiate thesis, Chalmers University of Technology, Gothenburg,
Sweden. http://www.landin.nu/thesis/
Löwgren, J. and Stolterman, E. (2004) Thoughtful interaction design. MIT Press,
Cambridge, MA.
Time: Ca 3 hours if the deliverables is only a written description.
Organization: In groups of four or five.
PREPARATIONS
Today, you will work in a group of four people cooperating in different constellations. To every
constellation, i.e. every design, each one of you should bring your dedicated interaction form
or use quality. Divide yourselves so that:
–
–
–
–
–
One person is the expert on changeable interaction form (Landin)
One person is the expert on magical interaction form (Landin)
One person is the expert on use quality of playability (Löwgren & Stolterman)
One person is the expert on use quality of personal connectedness (Löwgren & Stolterman)
The fifth person, if there is one, is the expert on the use quality of elegance (Löwgren &
Stolterman)
TASK
The group’s task today is to design four different music players (e.g. a iPod-like thing),
applying different combinations of interaction forms and use qualities, and compare the
outcomes. You do this in pairs, in two design sessions, switching partners. When you’re done
you as a group should have designed the following four combinations:
– Changeable interaction form + playability (and possibly
elegance too)
– Magical interaction form + personal connectedness
– Changeable interaction form + personal connectedness (and
possibly elegance too)
– Magical interaction form + playability
} First design session
} Second design
session
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Although you should give some thought to the physical appearance of the player, the main
design focus should be on interaction and behavior. Consider the typical functions a player
has, and how they can be altered to fit your use quality and interaction form. Which other
functions could be added, or should some be removed? How do the altered functions express
themselves. How does the user invoke a function – or is it automatic? In each design session,
make a sketch of your device and thoroughly describe the functionality and means of
interaction.
After the second session, sit down and compare the four music players. Did the
forms/qualities express themselves differently in different designs or were they rather stable?
Is there a difference between forms and qualities in this respect? Why, or why not? What do
you think affects the interaction more; the form or the use quality?
DELIVERABLES
– Your sketch/sketches and descriptions, four in all
– From each team member, a short essay (0,5-1 page) discussing a possible difference
between forms and use qualities
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
THE SCHIZOPHRENIC iPOD
(VERSION2)
Task in short: To combine different notions on interaction, here from Landin (2009) and
Löwgren (2002).
Aim: To explore how various aspects of interaction can affect design.
Prerequisites: Being familiar with the following texts:
Landin, H. (2006) Fragile and magical interaction forms: an approach to interaction
design aesthetics. Licentiate thesis, Chalmers University of Technology, Gothenburg,
Sweden. http://www.landin.nu/thesis/
Löwgren, J. and Stolterman, E. (2004) Thoughtful interaction design. MIT Press,
Cambridge, MA.
Time: Ca 4 hours if the deliverables is only a written description.
Organization: In pairs or groups of three.
TASK
The group’s task today is to redesign an iPod-like music player. The work is carried out in
three phases: analysis, design and analysis/comparison.
Step 1: Analysis (20- 30 minutes) – Use Qualities
Start by analyzing an average iPod-like mp3-player using Löwgren’s and Stolterman’s use
qualities, as listed below. Go through each quality. Is it present? Weak? Strong?
–
–
–
–
–
Motivational qualities: Anticipation, Playability, Seductivity, Relevance and Usefulness
Interaction qualities: Pliability, Fluency, Immersion and Control/Autonomy
Qualities of sociality: Social Action Space, Identity, Personal Connectedness
Structural qualities: Transparency, Efficiency and Elegance
Qualities of meaning-making: Ambiguity, Surprise and Para-functionality
Step 2: Design (5x15 minutes)
Pick one use quality from each of the five categories mentioned above. Take the one that you
think is the most extreme (i.e. not present/most weak or most strong). Redesign the player in
such a way that your chosen quality changes towards the other extreme; if it was strong make
it extremely weak or even missing, if it was weak or missing, make it strong.
When redesigning you can make very drastic changes, although there are a few
boundaries. Firstly, it still has to play music. Secondly, it still has to be considerably small –
not bigger than a pocket book. The rest you can change…. Functions, behavior, means of
input, appearance. Rock it!
Write a short description of the new player and how you changed the certain quality.
This exercise comes from Teaching and Learning Aesthetics of Interaction by Sus Lundgren (2010).
Feel free to use and alter it according to your own needs and wishes.
For instructions, inspiration and more exercises, see www.ixdcth.se/teaching.
If you have any comments or questions, contact sus.lundgren@chalmers.se.
Step 3: Analysis – Expressions of Interaction (2 hours)
Now, each one of you picks one of the players you designed in the previous step – pick the
ones that are more unusual or odd. (Whoever has the most songs stored on their personal
music player gets to start.) Then, each one of you spends some 20 minutes on writing a use
scenario for the player you chose/got. Don’t forget to consider unintended/unwanted use –
from the designer’s perspective that is (e.g. mailing oneself large files as a form of backup
was an unintended use of email account quota).
Read your stories to each other, and for each player, discuss in the group which
expressions of interaction it displays; there may be several. Start with Landin’s list (Anxiety,
Alienation, Indifference, Confusion, Imagination, Dependence, Suspiciousness, Thrill and
Trust), but you can also consider defining your own expression of interaction. Remember that
expressions of interaction are not necessarily what the users actually feel, but how their
actions suggest that they are feeling something, e.g. Anxiety. Spend ca 20 minutes on each
player.
Then, each of you return to your use scenario, possibly alter it somewhat. Add a new first
section where you describe the redesign process of that particular player; which quality you
changed and how, and if any other qualities were affected too. Also add a final section where
you discuss which expressions of interaction you found.
DELIVERABLES
– From each team member, a description of his/her chosen player with the following
sections: Redesign – Use scenario – Expressions of Interaction. Send your texts to your
team members as well.
Download