Tangible interaction 2011 spring


Published on

Tangible Interaction Design Course at NTU & NTUST, 2011 Spring

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tangible interaction 2011 spring

  1. 1. Tangible interaction Design Spring
  2. 2. week 1. Introduction
  3. 3. Learning Design Language Expression Form Function MaterialMovement Interaction Tangible Metaphor Synectics Physical Computing
  4. 4. Studying Movement
  5. 5. Making Physical Forms
  6. 6. Enabling Function Connecting Digital/Analog
  7. 7. Studying Materials Designed by Kouji Iwasaki 20X9X9cm
  8. 8. Thinking Metaphor musicbottlesBeer bottle as musical instrument
  9. 9. Designing Expression Dancerail Alarm clock anticipates sleepers’ emotions
  10. 10. 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
  11. 11. 1. How is "Design Basics" taught in design school? • 相對詞 侷限 突破 當侷限住一切 即使希望的縫隙露出你仍然看不見
  12. 12. • 五組形容自己的相對詞
  13. 13. • 觸覺拼貼 (修改)
  14. 14. 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.
  15. 15. 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."
  16. 16. 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.
  17. 17. "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.
  18. 18. • "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.
  19. 19. • 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/
  20. 20. 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."
  21. 21. 6. Form • Tangible Interaction=Form+Computing
  22. 22. 7. Movement • Laban Movement Analysis • Designing Behavior in Interaction: Using Aesthetic Experience as a Mechanism for Design
  23. 23. Reference • Simplicity in Interaction Design • Introduction to Interaction Design • Expressive Interaction Design 2010 at NTUST
  24. 24. 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
  25. 25. 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.
  26. 26. week 2. Movement
  27. 27. 1. Laban Movement Analysis (LMA) • http://en.wikipedia.org/wiki/Laban_Movement_Analysis
  28. 28. Body Effort Shape Space
  29. 29. Effort (dynamics) • Space: Direct / Indirect • Weight: Strong / Light • Time: Sudden (or Quick) / Sustained • Flow: Bound / Free
  30. 30. EIGHT COMBINATIONS OF THE FIRST THREE CATEGORIES (SPACE, WEIGHT, TIME): Float, Punch, Glide, Slash(砍), Dab(輕拍), Wring(絞), Flick(輕彈, 抽打), Press
  31. 31. 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
  32. 32. Vanessa Skantze butoh w/ Tatsuya Nakatani • http://www.youtube.com/watch?v=tdecM3h5HaY&featur e=player_embedded
  33. 33. Noh Theater • http://www.youtube.com/watch?v=MUTG6N0KFj4&featu re=player_embedded
  35. 35. 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
  36. 36. Exercise 1 Specify the 3 dimensions for 8 movements listed above
  37. 37. Exercise 2 Sketch at least 3 gradations for each dimension of the four Effort (dynamics)
  38. 38. 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
  39. 39. week 3. Form making
  40. 40. Transforming Taiwan Aboriginal Cultural Features into Modern Product Design: A Case Study of a Cross-cultural Product Design Model • (original paper in IJDesign)
  41. 41. persuasive design
  42. 42. A hierarchy of consumer needs by P. Jordan • (image from slowdesign.org)
  43. 43. Timo Arnall: A form vocabulary for RFID • (retrieved from nearfield.org)
  44. 44. Skål • http://vimeo.com/6698128
  45. 45. "Forms in various materials invite touch and manipulation" • Retrieved from interactions
  46. 46. siteless book • siteless book sample page
  47. 47. Move to get moved • Retrieved from "Move to get moved"
  48. 48. 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?
  49. 49. 3. What kind of form is suitable for movement?
  50. 50. 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?
  51. 51. EX1 • regarding "functionality" of a music player, pick up 8 representative forms on the above siteless sample page for 8 Effort qualities of LMA
  52. 52. 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
  53. 53. week 4. Form Practice
  54. 54. Foam core
  55. 55. week 5. Form Review
  57. 57. Tap is the New Click • http://www.slideshare.net/dansaffer/tap-is-the-new-click-2495091
  58. 58. Ideation and Design Principles Workshop • http://www.slideshare.net/dansaffer/ideation-and-design-principles- workshop
  59. 59. The Role of Metaphor in Interaction Design • http://www.slideshare.net/dansaffer/the-role-of-metaphor-in-interaction- design
  60. 60. week 6. Arduino Intro
  61. 61. Arduino Intro http://arduino.cc http://fritzing.org/ http://spatialmedia.org/Arduino/ http://puredata.info/community/projects/software/pd- extended http://processing.org/
  62. 62. Arduino The Documentary (2010) English HD • http://vimeo.com/18539129
  63. 63. Super Simple Arduino - Sylvia's Super-Awesome Maker Show: Episode 03 • http://www.youtube.com/watch?feature=player_embedded&v=3xCY2K9k Qz4
  64. 64. Arduino based PC ambient lighting • http://www.youtube.com/watch?v=Am55k0k9eq8&feature=player_embe dded
  65. 65. A Week In Making • http://vimeo.com/19997661
  66. 66. Prototyping Desk Mates • http://vimeo.com/10059896
  67. 67. Control • Output: 1. Blink 2. Fading PWM: http://www.arduino.cc/en/Tutorial/PWM • Input: 1. Button 2. Piezo
  68. 68. connection • 1. http://processing.org 2. http://puredata.info 3. flash... 4. others..... iphone osc arduino
  69. 69. Arduino LEDs controlled by iPhone over WiFi • http://www.youtube.com/watch?feature=player_embedded&v=- XAwZynkwVM
  70. 70. Arduino + Eee PC Robot final (Road to CiclopEee) • http://www.youtube.com/watch?v=VKftf8Ztisw&feature=p layer_embedded
  71. 71. Cannot Look Away / Processing + Arduino • http://www.youtube.com/watch?v=EtI3cC4DV5Y&feature=play er_embedded
  72. 72. Arduino LDR test with Pure Data • http://www.youtube.com/watch?v=FdGUKEZJy4M&feature=pla yer_embedded
  73. 73. How-To Tuesday: Arduino 101 potentiometers and servos • http://www.youtube.com/watch?feature=player_embedded&v =FKj9jJgj8Pc
  74. 74. Microcontroller Course - Arduino Project 1 • http://www.youtube.com/watch?feature=player_embedded&v =jt2diwf_-3Q
  75. 75. CiiDMote • http://vimeo.com/19701784
  76. 76. arduino 零組件 參考 • http://www.aroboto.com/shop/
  77. 77. week 7. Arduino tutorial
  78. 78. class note
  79. 79. week 8. expression
  80. 80. 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.
  81. 81. " 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
  82. 82. • 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."
  83. 83. • 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."
  84. 84. • 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."
  85. 85. • 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."
  86. 86. • 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."
  87. 87. • 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?
  88. 88. • 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."
  89. 89. • 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."
  90. 90. 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?
  91. 91. • 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.
  92. 92. • 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."
  93. 93. • 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."
  94. 94. • 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."
  95. 95. 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."
  96. 96. 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
  97. 97. Tangible interaction Design week 9. project proposal
  98. 98. week 10. metaphor
  100. 100. Metaphor in Interaction Design Rung-Huei Liang, NTUST, OPENHCI 2009
  101. 101. Let’s talk about MusicBottles Music is perfume. 音樂即香氣 [FORM] is[METAPHOR]
  102. 102. Desktop and Windows
  103. 103. Dan Saffer says Nearly everything one says about a computer is metaphoric. Paul Tillich : “Everything one says about God is metaphor”
  104. 104. Microsoft BOB
  105. 105. Metaphors We Live by Our conceptual system … is fundamentally metaphoric in nature ~Lakoff
  106. 106. abstract tangible
  107. 107. Bill Verplank Interaction Design Sketch
  108. 108. Fishkin’s Metaphor Dimensions • No metaphor • Metaphor of Noun • Metaphor of Verb • Metaphor of Noun+Verb • Full Metaphor
  109. 109. No Metaphor The BitBall Programmable Beads
  110. 110. No Metaphor
  111. 111. noun metaphor Object looks like the real thing Actions are at most weakly related to real-world
  112. 112. Metaphor of Verb Object acts like the real thing Shape of object irrelevant
  113. 113. noun and verb metaphor Object looks and acts like the real thing – but they are still different URP: MIT Media Lab
  114. 114. FULL METAPHOR Really Direct Manipulation Illuminating Clay
  115. 115. Form and Metaphor 1D form: text and language
  116. 116. 2D Visaphor
  117. 117. 3D Physical Form Aram Bartholl
  118. 118. 4D Form: Ritual Aram Bartholl
  119. 119. 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
  120. 120. comments on concept proposal issues: reminiscence 1. Time factor expression of "Time capsule" pensieve sound capsule futureme.org
  121. 121. • 2.What is the expression ?
  122. 122. Other Brother Project • http://johnhelmes.com/projectsOtherbrother.html
  123. 123. Caraclock CaraClock photo viewer http://www.slideshare.net/Chihyun/caraclock
  124. 124. 3. LED expression for "秘密" • 抽屜, 藥櫃
  125. 125. 4. 4Photo: A Collaborative Photo Sharing Experience
  126. 126. 5. Ritual • 量身高
  127. 127. 6. Spatialization of Time • Linear, circular, height, depth Form KHRONOS Projector http://www.youtube.com/watch?v=uUDvGJ5ZnY4&feature=player_embedded
  128. 128. week 11. project proposal II
  129. 129. week 12. visiting craft museum
  130. 130. week 13. Cross group evaluation
  131. 131. • 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.
  132. 132. 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
  133. 133. 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.
  134. 134. Inside IDEO Part 1 • http://www.youtube.com/watch?feature=player_embedded&v=oU azVjvsMHs
  135. 135. Gamestorming • http://www.youtube.com/watch?feature=player_embedded&v=3m rtu4MmthE
  136. 136. 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
  137. 137. Go Into The Story by Scott Myers • http://www.gointothestory.com/2009/11/brainstorming- improvisation.html
  138. 138. The world cafe • http://www.theworldcafe.com/
  139. 139. Form language • http://tangibleinteraction2011.blogspot.com/2011/03/week-3-form- making.html
  140. 140. CIID interaction design • http://ciid.dk/education/portfolio/
  141. 141. week 14. Final project proposal
  142. 142. week 15. Term project requirements
  143. 143. 時間 & 地點 • :2011/6/21 pm 2:00 • 佈展時間:早上九點到下午兩點 • NTUST 設計系灰專廣場第二教學大樓三樓
  144. 144. 展示要求 • A2 海報 (組員, 作品名稱, 概念, 技術, 照片...) functional prototype (模型展示) • A4 說明書一頁五十份 • 部落格上傳: • 影片一支 高解析度 (1280x1024 以上)照片 2 張以上 • 概念說明 500 字 每位成員 200 字跨領域學習心得, 100 字給組員的話