Tangible interaction Design

Spring

week 1. Introduction

Learning Design Language

Expression

Form

Function

MaterialMovement

Interaction

Tangible

Metaphor

Synectics

Physical Computing

Studying Movement

Making Physical Forms

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%A8-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.

week 2. Movement

1. Laban Movement Analysis (LMA)

• http://en.wikipedia.org/wiki/Laban_Movement_Analysis

BodyEffortShapeSpace

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-encompassingWeight: Strong: powerful, forceful, firm touch, impactful

• Light: airy, delicate, fine touch, buoyantTime: Sudden: quick, urgent, instantaneous, staccato

• Sustained: leisurely, gradual, lingering, prolongingFlow: Bound: controlled, careful, contained, restrained

• Free: outpouring, fluid, released, liquid

Vanessa Skantze butoh w/ Tatsuya Nakatani

• http://www.youtube.com/watch?v=tdecM3h5HaY&feature=player_embedded

Noh Theater

• http://www.youtube.com/watch?v=MUTG6N0KFj4&feature=player_embedded

SIMPLICITY V.S. COMPLEXITYABSTRACT 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_Notationhttp://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

week 3. Form making

Transforming Taiwan Aboriginal Cultural Features into Modern Product Design:

A Case Study of a Cross-cultural Product Design Model

• (original paper in IJDesign)

persuasive design

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 formmake a physical model of a music player

show the picture of this model on poster, and analyze according to LMA

Deadline: 3/22, 2011

week 4. Form Practice

Foam core

week 5. Form Review

1. FORM REVIEW2. 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

week 6. Arduino Intro

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

• http://vimeo.com/18539129

Super Simple Arduino - Sylvia's Super-Awesome Maker Show: Episode 03

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

Arduino based PC ambient lighting

• http://www.youtube.com/watch?v=Am55k0k9eq8&feature=player_embedded

A Week In Making

• http://vimeo.com/19997661

Prototyping Desk Mates

• http://vimeo.com/10059896

Control

• Output:1. Blink2. FadingPWM: http://www.arduino.cc/en/Tutorial/PWM

• Input:1. Button2. Piezo

connection

• 1. http://processing.org2. http://puredata.info3. 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=player_embedded

Cannot Look Away / Processing + Arduino

• http://www.youtube.com/watch?v=EtI3cC4DV5Y&feature=player_embedded

Arduino LDR test with Pure Data

• http://www.youtube.com/watch?v=FdGUKEZJy4M&feature=player_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

• http://vimeo.com/19701784

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

week 7. Arduino tutorial

class note

week 8. expression

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 expressionsan 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 acertain sense a matter of relating expression to meaning, or of giving meaningto 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 reflectionthrough its slow form-presence and invite us to reflect through its clear, distinct and simplematerial-expression. It is a combination ofsimplicity in material with a subtle complexityin form focusing on time as a basic element ofcomposition."

Conceptual Designing and Technology

• 1. "I extensively used the method ofmoving between analyzing expressionals in terms of function, andappliances in terms of finding expressions."

• 2. "To create the form-making qualities, the material propertieswere analyzed to find what transformation types the materialcould offer designers, by searching for variables that designerscould 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

week 10. metaphor

REVIEW AND COMMENT

Metaphor in Interaction Design

Rung-Huei Liang, NTUST, OPENHCI 2009

Let’s talk about MusicBottles

Music is perfume.音樂即香氣[FORM] is[METAPHOR]

Desktop and Windows

Dan Saffer says

Nearly everything one says about a computer is metaphoric.

Paul Tillich : “Everything one says about God is metaphor”

Microsoft BOB

Metaphors We Live byOur conceptual system … is fundamentally metaphoric in nature

~Lakoff

abstract tangible

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

No Metaphor

noun metaphor

Object looks like the real thingActions are at most weakly related to real-world

Metaphor of Verb

Object acts like the real thingShape 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 METAPHORReally Direct Manipulation

Illuminating Clay

Form and Metaphor

1D form: text and language

2D Visaphor

3D Physical FormAram Bartholl

4D Form: Ritual 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 factorexpression of "Time capsule"pensievesound capsulefutureme.org

• 2.What is the expression ?

Other Brother Project

• http://johnhelmes.com/projectsOtherbrother.html

Caraclock

CaraClock photo viewerhttp://www.slideshare.net/Chihyun/caraclock

3. LED expression for " 秘密 "

• 抽屜 , 藥櫃

4. 4Photo: A Collaborative Photo Sharing Experience

5. Ritual

• 量身高

6. Spatialization of Time

• Linear, circular, height, depth Form

KHRONOS Projectorhttp://www.youtube.com/watch?v=uUDvGJ5ZnY4&feature=player_embedded

week 11. project proposal II

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=oUazVjvsMHs

Gamestorming

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

Improv: Building Ideas With the Yes, and Principle : Improv: "Yes, and" Marketing Brainstorm Exercise

• http://www.youtube.com/watch?v=eicyG2hPoIE&feature=player_embedded

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 字給組員的話