Tangible interaction 2011 spring

Tangible interaction Design
Spring

Learning Design Language
Expression
Form
Function
MaterialMovement
Interaction
Tangible
Metaphor
Synectics
Physical Computing

Enabling Function Connecting Digital/Analog

Studying Materials
Designed by Kouji Iwasaki 20X9X9cm

Thinking Metaphor
musicbottlesBeer bottle as musical instrument

Designing Expression
Dancerail Alarm clock anticipates sleepers’ emotions

Collaborative Project
• Expression of tangibility is of the most
significant value
• The beauty of material is highly concerned
• The quality of form and movement are at the
focus of interaction
• The function of emerging technology and
innovative usage is strongly welcome

1. How is "Design Basics" taught in design school?
• 相對詞
侷限突破
當侷限住一切即使希望的縫隙露出你仍然看不見

• 五組形容自己的相對詞

2. What is the basics of "Tangible Interaction
Design" as a design discipline?
• Interaction Design Process by Bill Verplank
• What are the significant contrasts for Tangible
Interaction?
• What principles are applicable? For example,
synectics triggers, (synnectics examples), basic
systems in nature.

3. Material
"Materials touch directly on three major topics:
• 1. A designer may be motivated and stimulated directly
by a particular material.
• 2. Materials are expressive, verying from fragile and
refined to earthy and coarse.
• 3.Certain materials are chosen for their inherent
physical properties that relate directly to the function
of the finished work."

4. Expression
• "Expression. Basically it describes any outward,
visible manifestation of an inward condition,
feeling, or mood: a shrug, a frown, a grimace,
a smile -- physical indicators of inner
emotional states. In design, expression refers
to the act of overtly communicating a visual
idea." Stoops & Samuelson.

"Three phases are involved in the design process, and
each contributes to individual expressiveness:
• 1. Recognizing and delimiting the visual problems to be
solved, and deciding what sort of action is needed.
• 2. Putting on paper a personal, imaginative, synthesis of
ideas as the specific form and arrangement of the concrete
physical solution develops. This middle phase, the
imaginative, creative one, is the most characteristic phase
of the whole design process. It embodies the designer's
expression.
• 3. Finally the design is translated, built, printed,
constructed, woven, fabricated by the designer or under
the designer's supervision." Stoops & Samuelson.

• "When designers reach the point in their
creative development where considerations of
placement, proportion, and empty space
occur without conscious effort, their work
may be called expressive." Stoops &
Samuelson.

• http://jazzliang.wordpress.com/2010/02/26/%E5%A6%82%E4%BD%95%E7%94%A
8-expression-%E9%96%8B%E5%B1%95%E8%A8%AD%E8%A8%88/

5. Function
• "Form follows function" is probably the most
often repeated statement about design.
Clearly, it means that the form of an object
should be defined by the work it has to do."

6. Form
• Tangible Interaction=Form+Computing

7. Movement
• Laban Movement Analysis
• Designing Behavior in Interaction: Using
Aesthetic Experience as a Mechanism for
Design

Reference
• Simplicity in Interaction Design
• Introduction to Interaction Design
• Expressive Interaction Design 2010 at NTUST

Grading rules
• 1. Final project 70%, Design and engineering
collaborative work. (Generally, every member
in a group has the same score, however,
participation in proposal, presentation, and
discussion will alter)
• 2.Personal studio action 30%, consists of 3~6
homeworks done individually

Things you might prepare
• 1. Sketching tools: sketchbook, drawing tools
(pencils, markers, crayon...), glue, tape...
• 2. Form-making tools: Foamcore, hard paper,
knife, nail
• 3. Function-making tools: Arduino, toolbox for
sensors and actuators, if necessary, NB, Digital
camera, projector...
• 4. Body and Brain.

1. Laban Movement Analysis (LMA)
• http://en.wikipedia.org/wiki/Laban_Movement_Analysis

Effort (dynamics)
• Space: Direct / Indirect
• Weight: Strong / Light
• Time: Sudden (or Quick) / Sustained
• Flow: Bound / Free

EIGHT COMBINATIONS OF THE FIRST
THREE CATEGORIES (SPACE, WEIGHT,
TIME):
Float, Punch, Glide, Slash(砍), Dab(輕拍), Wring(絞), Flick(輕彈, 抽打),
Press

Classification from Reference 1 (Ross et al.)
• Space: Direct: single-focused, channeled, pinpointed, lazer-like
• Indirect: multi-focused, flexible attention, all-around awareness, all-
encompassing
Weight: Strong: powerful, forceful, firm touch, impactful
• Light: airy, delicate, fine touch, buoyant
Time: Sudden: quick, urgent, instantaneous, staccato
• Sustained: leisurely, gradual, lingering, prolonging
Flow: Bound: controlled, careful, contained, restrained
• Free: outpouring, fluid, released, liquid

Vanessa Skantze butoh w/ Tatsuya Nakatani
• http://www.youtube.com/watch?v=tdecM3h5HaY&featur
e=player_embedded

Noh Theater
• http://www.youtube.com/watch?v=MUTG6N0KFj4&featu
re=player_embedded

SIMPLICITY V.S. COMPLEXITY
ABSTRACT ART V.S. PRACTICAL

Reference
• 1. Figure 4. in Designing Behavior in Interaction: Using
Aesthetic Experience as a Mechanism for Design
• 2. Move to get moved: a search for methods, tools and
knowledge to design for expressive and rich movement-based
interaction
• 3. other movement analysis:
http://en.wikipedia.org/wiki/Benesh_Movement_Notation
http://en.wikipedia.org/wiki/Eshkol-
Wachman_Movement_Notation

Exercise 1
Specify the 3 dimensions for 8
movements listed above

Exercise 2
Sketch at least 3 gradations for each
dimension of the four Effort
(dynamics)

Studio Action 1
1. observation:
Find representative tangible product pairs for each
dimension of the four Effort (8 in total)
2. create:
• Select a clip of music
• Analyze the clip with 4 dimensions in Effort of LMA
• Draw 2D representation of it
• Find a tangible product to match this clip
• Finish in form of video
TAG: SA1, id_number

Transforming Taiwan Aboriginal Cultural Features
into Modern Product Design:
A Case Study of a Cross-cultural Product Design Model
• (original paper in IJDesign)

A hierarchy of consumer needs by P. Jordan
• (image from slowdesign.org)

Timo Arnall: A form vocabulary for RFID
• (retrieved from nearfield.org)

Skål
• http://vimeo.com/6698128

"Forms in various materials invite
touch and manipulation"
• Retrieved from interactions

siteless book
• siteless book sample page

Move to get moved
• Retrieved from "Move to get moved"

Problems
1. How to design simple forms for rich
interaction? (including movement-centric,
social interaction, self-expression, etc.)
2. What's the relationship between movement
and form? Can we think "movement"
without form?

3. What kind of form is suitable for movement?

4. Echoing "tangible interaction = form +
computing" by Mark Baskinger and Mark
Gross, if "tangibility = movement + form", how
can Tangibility be explored?
5. Affordance: restriction or hint?

EX1
• regarding "functionality" of a music player, pick up 8
representative forms on the above siteless sample page for 8
Effort qualities of LMA

Studio Action 2
Prepare a A2 poster
collect music players and other inspiring form
make a physical model of a music player
show the picture of this model on poster, and
analyze according to LMA
Deadline: 3/22, 2011

1. FORM REVIEW
2. FEATURE INTERACTION DESIGNER:
DAN SAFFER

Tap is the New Click
• http://www.slideshare.net/dansaffer/tap-is-the-new-click-2495091

Ideation and Design Principles Workshop
• http://www.slideshare.net/dansaffer/ideation-and-design-principles-
workshop

The Role of Metaphor in Interaction Design
• http://www.slideshare.net/dansaffer/the-role-of-metaphor-in-interaction-
design

Arduino Intro
http://arduino.cc
http://fritzing.org/
http://spatialmedia.org/Arduino/
http://puredata.info/community/projects/software/pd-
extended
http://processing.org/

Arduino The Documentary (2010) English HD

Super Simple Arduino - Sylvia's Super-Awesome
Maker Show: Episode 03
• http://www.youtube.com/watch?feature=player_embedded&v=3xCY2K9k
Qz4

Arduino based PC ambient lighting
• http://www.youtube.com/watch?v=Am55k0k9eq8&feature=player_embe
dded

A Week In Making

Prototyping Desk Mates

Control
• Output:
1. Blink
2. Fading
PWM: http://www.arduino.cc/en/Tutorial/PWM
• Input:
1. Button
2. Piezo

connection
• 1. http://processing.org
2. http://puredata.info
3. flash...
4. others.....
iphone osc arduino

Arduino LEDs controlled by iPhone over WiFi
• http://www.youtube.com/watch?feature=player_embedded&v=-
XAwZynkwVM

Arduino + Eee PC Robot final (Road to CiclopEee)
• http://www.youtube.com/watch?v=VKftf8Ztisw&feature=p
layer_embedded

Cannot Look Away / Processing + Arduino
• http://www.youtube.com/watch?v=EtI3cC4DV5Y&feature=play
er_embedded

Arduino LDR test with Pure Data
• http://www.youtube.com/watch?v=FdGUKEZJy4M&feature=pla
yer_embedded

How-To Tuesday: Arduino 101 potentiometers
and servos
• http://www.youtube.com/watch?feature=player_embedded&v
=FKj9jJgj8Pc

Microcontroller Course - Arduino Project 1
• http://www.youtube.com/watch?feature=player_embedded&v
=jt2diwf_-3Q

CiiDMote

arduino 零組件參考
• http://www.aroboto.com/shop/

Expression
Artisan intentions towards artistic meaning have
become a major factor that distinguishes fine art
from craft in recent years (Risatti, 2007).
Risatti asserted that "if the maker is deprived of
choice, of free will in the making processing, he
or she also is denied any chance at expression.

" He also cited Husserl that "the concept of meaning is
reserved for the intention to mean." (Risatti, 2007) By placing
the artisan at the focus of meaning creation, Risatti extended
the notion of intentionality from Husserl to posit that
"meaning should be understood as being made into the object
as an intentional act of its maker.
" (Risatti, 2007) We can infer that the artisan's intention to
express more profoundly impacts artistic meaning than
expression does.
~Rung-Huei Liang

• 1. an expressional: a thing designed to be the
bearer of certain expressions
an appliance: designed to be the bearer of a
certain functionality
From use to presence
• 2. "A thing always presents itself through its
expressions."

• 3. "When we let things into our lifeworld and
they receive a place in our life,
they become meaningful to us. We can say
that this act of acceptance is in a
certain sense a matter of relating expression
to meaning, or of giving meaning
to expressions."

• 4. "When we think of the expressions of, for
example, a mobile phone in elementary phoning-
acts such as listening, talking, waiting, dialing,
etc., these are clearly related to some basic form
of mobile phone use. However, thinking about
the thing in terms of how it forms its presence by
means of its expressions in such acts is different
from thinking about its functionality, for example,
how it enables people to talk to each other
despite not being co-located."

• 5. "In, for instance, graphical design and many areas of
industrial design, form giving often means to design
the exterior of an object.
• This is reasonable when the object is sufficiently static
and when its internal workings do not contribute to the
overall expression. If we think about the material that
forms the expressions of computational things, it is
clear that it is a combination of computations and
interaction surfaces."

• 6. Assume that we will design a digital doorbell. A doorbell
is something we use to attract the attention of people
inside as we stand outside a door, to notify them that
someone is at the door.
• There is nothing in this description that refers to the
expression of a doorbell. We can also describe a
computational doorbell as a thing that displays the
execution of a certain program everywhere inside of a
compartment or a house as it is initiated outside a given
door. This is a distinction between describing the notion of
a doorbell in terms of use and describing what thing a
computational doorbell is in terms of its expression."

• 7. "To design a mobile phone as an
expressional means designing it on the basis
of a collection of generic expressions, that is,
the expressions associated with phones and
phoning. To do this, we typically bracket
functionality and focus on the expressions of a
mobile phone in use: How does it feel? How
does it look?

• How does it shape a gestalt of movements,
speech, and gestures?
• How does it transform and present my voice?
• How does it express time?
• Again, the expressions of a mobile phone in use
are different from what the phone expresses in
terms of being a part of my life, and here our
focus is on the expressions of the phone in use as
we try to understand these expressions as a
foundation for its presence in everyday life."

• 8. "As an expressional, the mobile phone with a hands-
free set is simply, among other things, a “talking-
loudly-to-yourself”-device. Being a “talking-loudly-
toyourself- device” is just one out of many things a
mobile phone can become as it is adopted as part of
someone’s everyday life. For instance, it might turn
into a “flirting-device” that is used to initiate and
ground a conversation (cf. Weilenmann and Larsson
[2001]), a “check-that-nothing-has-happeneddevice”
that is brought along just to see that no one has called,
a “walkingcompanion” that is brought when going for a
walk to ensure company for conversation, etc."

Slow Technology
• 1. "We do not talk about functionality and
design, but about the complete expression of
a thing as it appears in the given context."
• 2. " Why is it not enough to have a
reminder sign on the wall saying in capital
letters ‘‘SMILE’’ or ‘‘THINK OF YOUR
FAVOURITE PAINTING BY MATISSE’’, etc?

• A key reason why this substitution is pointless
is that the reminder sign is very imprecise in
telling me what my favourite painting by
Matisse is or why I should smile. It is the
expression of the Matisse painting itself – or
probably a reproduction – hanging on the wall
that is important.

• The function of a thing designed to invite and
make room for reflection is inherent in the
precise meaning of reflecting that is given by
the total expression of the given thing;
function is inherent in design expression."

• 3. "One of the basic ideas behind the
examples of slow technology is to use
simplicity in material in combination with
complexity of form. ... Simplicity in material
invites people to reflect when there is an
obvious complexity in form."

• 4. "The design should give time for reflection
through its slow form-presence and invite us
to reflect through its clear, distinct and simple
material-expression. It is a combination of
simplicity in material with a subtle complexity
in form focusing on time as a basic element of
composition."

Conceptual Designing and Technology
• 1. "I extensively used the method of
moving between analyzing expressionals in terms of
function, and
appliances in terms of finding expressions."
• 2. "To create the form-making qualities, the material
properties
were analyzed to find what transformation types the
material
could offer designers, by searching for variables that
designers
could manipulate through the design activity."

Reference
• 1. From use to presence: on the expressions and aesthetics of
everyday computational things
• 2. Slow Technology
• 3. Conceptual Designing and Technology: Short-Range RFID as
Design Material
• 4. Design for Internet of Things

Tangible interaction Design
week 9. project proposal

Metaphor in Interaction Design
Rung-Huei Liang, NTUST, OPENHCI 2009

Let’s talk about MusicBottles
Music is perfume.
音樂即香氣
[FORM] is[METAPHOR]

Dan Saffer says
Nearly everything one says about a computer is metaphoric.
Paul Tillich : “Everything one says about God is
metaphor”

Metaphors We Live by
Our conceptual system … is fundamentally metaphoric in nature
~Lakoff

Bill Verplank Interaction Design Sketch

Fishkin’s Metaphor Dimensions
• No metaphor
• Metaphor of Noun
• Metaphor of Verb
• Metaphor of Noun+Verb
• Full Metaphor

No Metaphor
The BitBall Programmable Beads

noun metaphor
Object looks like the real thing
Actions are at most weakly related to real-world

Metaphor of Verb
Object acts like the real thing
Shape of object irrelevant

noun and verb metaphor
Object looks and acts like the real thing –
but they are still different
URP: MIT Media Lab

FULL METAPHOR
Really Direct Manipulation
Illuminating Clay

Form and Metaphor
1D form: text and language

3D Physical Form
Aram Bartholl

Dan Saffer's Metaphor in Interaction Design
• http://www.slideshare.net/dansaffer/the-role-of-metaphor-in-interaction-
design?ref=http://tangibleinteraction2011.blogspot.tw/2011/05/week-10-
review-and-comment.html

comments on concept proposal issues:
reminiscence
1. Time factor
expression of "Time capsule"
pensieve
sound capsule
futureme.org

• 2.What is the expression ?

Other Brother Project
• http://johnhelmes.com/projectsOtherbrother.html

Caraclock
CaraClock photo viewer
http://www.slideshare.net/Chihyun/caraclock

3. LED expression for "秘密"
• 抽屜, 藥櫃

4. 4Photo: A Collaborative Photo Sharing Experience

6. Spatialization of Time
• Linear, circular, height, depth Form
KHRONOS Projector
http://www.youtube.com/watch?v=uUDvGJ5ZnY4&feature=player_embedded

week 12. visiting craft museum

week 13. Cross group evaluation

• 1. revisiting notions of "Form," "Expression," "Function,"
"Material."
• 2. Each group discusses with a brainstorming session, an
ideation session.
• 3. Both Meaning-making (Expression-making) and Form-giving
(with LMA) are of same importance.
• 4. Each group needs to work out a design process. Especially
identify "design problem," and "engineering problem."
• 5. One group is evaluated and criticized by another group.

Brainstorming
• THE SEVEN RULES OF BRAINSTORMING (FROM
IDEO)
• 1) Defer judgment
• 2) Encourage wild ideas
• 3) Build on the ideas of others
• 4) Stay focused on the topic
• 5) One conversation at a time
• 6) Be visual
• 7) Go for quantity

Brainstorming
• Seven Secrets to Good Brainstorming
• 1. Sharpen the focus.
• 2. Write playful rules.
• 3. Number your ideas.
• 4. Build and jump.
• 5. Make the space remember.
• 6. Stretch your mental muscles.
• 7. Get physical.

Inside IDEO Part 1
• http://www.youtube.com/watch?feature=player_embedded&v=oU
azVjvsMHs

Gamestorming
• http://www.youtube.com/watch?feature=player_embedded&v=3m
rtu4MmthE

Improv: Building Ideas With the Yes, and Principle :
Improv: "Yes, and" Marketing Brainstorm Exercise
• http://www.youtube.com/watch?v=eicyG2hPoIE&feature=player_e
mbedded

Go Into The Story by Scott Myers
• http://www.gointothestory.com/2009/11/brainstorming-
improvisation.html

The world cafe
• http://www.theworldcafe.com/

Form language
• http://tangibleinteraction2011.blogspot.com/2011/03/week-3-form-
making.html

CIID interaction design
• http://ciid.dk/education/portfolio/

week 14. Final project proposal

week 15. Term project
requirements

時間 & 地點
• :2011/6/21 pm 2:00
• 佈展時間：早上九點到下午兩點
• NTUST 設計系灰專廣場第二教學大樓三樓

展示要求
• A2 海報 (組員, 作品名稱, 概念, 技術, 照片...)
functional prototype (模型展示)
• A4 說明書一頁五十份
• 部落格上傳:
• 影片一支
高解析度 (1280x1024 以上)照片 2 張以上
• 概念說明 500 字
每位成員 200 字跨領域學習心得, 100 字給組員的話

Tangible interaction 2011 spring

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Destaque

Destaque (15)

Semelhante a Tangible interaction 2011 spring

Semelhante a Tangible interaction 2011 spring (20)

Mais de Rung-Huei Liang

Mais de Rung-Huei Liang (14)

Último

Último (20)

Tangible interaction 2011 spring