Interaction   Design Master   Studio     Dave Malouf         @daveixdFriday, October 19, 12
Friday, October 19, 12
Dave Malouf  @daveixd  http://davemalouf.comFriday, October 19, 12
Peer Loft:  @peerloft  Amplifying Creativity                          TMFriday, October 19, 12
Dave Malouf Design  Helping organizations integrate holistic design for rapid  and smarter creativity.Friday, October 19, 12
Who are you?Friday, October 19, 12
What you are in for:                • Lots of theory                • Lots of opportunities to apply that theory          ...
This is Interaction DesignFriday, October 19, 12
Defining Interaction Design            The engineer’s perspective              Bill              Verplank                 ...
Exercise 1          How many unique          actions can you get out          of a single button?          • Either sketch...
Exercise 1a          Try now with a handle          5 minutesFriday, October 19, 12
Dialog          Product Behavior          Your Reaction          Product BehaviorFriday, October 19, 12
Soulless          Goalless          But the beginning          a storyFriday, October 19, 12
Leads to theatre          Actors & Audience          Aesthetic & emotional considerationsFriday, October 19, 12
Computers          as Theatre          Brenda LaurelFriday, October 19, 12
Dialog          Activity          EmotionFriday, October 19, 12
Exercise 2          Write a script of using          an IM application.          •                App Speech like         ...
Improvisation          It’s a Jazz Thing!Friday, October 19, 12
Defining Interaction Design            The philosopher’s perspective                         “To design the environments  ...
Exercise 2          • How many different                activities can you think                of to do on a chair?      ...
Foundations          What are foundations?          What are they good for?          What are they for Interaction Design?...
What are foundations                Simply put the principles that allow for both a                critical analysis and a...
Why have foundations?             • Creates a solid base of core theories and crafts                   - These can transce...
Let’s look at another          discipline          • There are 6 elements that every 3D designer                needs to k...
There is also a          progression             • In 3D design you can’t      • Primitives include               just jum...
Elements of Design: Roweena Reed Kostellow and the Structure of Visual Relationships by Gail Greet Hannah          Languag...
Foundations of          Interaction Design          • Time          • Metaphor          • Abstraction          • Motion & ...
Time          It has many sub-elements          • Duration          • Frequency          • Rhythm          • Delay        ...
Exercise          Design a chair now in          different ways          thinking about          different elements of    ...
Abstraction          • Level of directness                or interaction                - Command Line                - Vo...
Another          example          iPod Click-wheelFriday, October 19, 12
Direct          ManipulationFriday, October 19, 12
Is this more or less?          Leap Motion          http://youtu.be/_d6KuiuteIAFriday, October 19, 12
Metaphors          “Everything in          computers is a          metaphor”          - Dan Saffer, IA Summit 2005        ...
A cigar by          any other          name          Analogy helps          expand          understanding and          com...
Skeumorph          Not always          metaphor,          And not bad.Friday, October 19, 12
Movement (motion)          • Pleasing                movements          • Craft of motion          • Intuitive gesturesFri...
Pull to spring          Causes list to check for additions.Friday, October 19, 12
Exercise          Time Management          • Posture: Transient          • Metaphor: Clock/                Calendar       ...
Questions?          Comments?Friday, October 19, 12
Know your media          We have many and they are unconventionalFriday, October 19, 12
Pixels          Composition          Layout          Type          Negative SpaceFriday, October 19, 12
Servos          Actuators          Sensors          LEDs are good          too!Friday, October 19, 12
keyboard          mouse          trackpad          touchscreen          remote control          game controller          n...
Language          metaphor          frames          poetics          rhetoric          narrativeFriday, October 19, 12
People          cognition          behavior          cultureFriday, October 19, 12
Tinkering          Nearness by Touch & BERG          https://vimeo.com/6588461Friday, October 19, 12
Exercise          Time Management          • Change your media          • Change your actors          • New materials     ...
Would you like some ...          We will have our personal information          everywhereFriday, October 19, 12
What’s needed?          What’s there?          • Bandwidth          • Platforms          • Operators          • HardwareFr...
Is this our future?          Glass everywhere?          http://youtu.be/6Cf7IL_eZ38Friday, October 19, 12
It’s a services world          • Intangible          • Not consumed          • People + ProductsFriday, October 19, 12
What do we have today?Friday, October 19, 12
Paths tell our stories          Constantly changing micro contextsFriday, October 19, 12
Improvisation          Back to JazzFriday, October 19, 12
Prototype          Gotta experience          it to make it all          work.Friday, October 19, 12
Journey Maps          are our new sitemapsFriday, October 19, 12
Exercise          Time Management          • What changes if this                is a service instead                of an...
Tools          And places to put          them.Friday, October 19, 12
My Secret          Recipe          Here it goes!Friday, October 19, 12
My physical tool kit          • dotted notebook              • Posterpaper/pads          • fine point pen               • ...
My software tool kit          •     Adobe Ideas            • Comic Life          •     Adobe Proto            • iPhoto    ...
Structure of StoryFriday, October 19, 12
Comics          are our new sitemapsFriday, October 19, 12
Stories help by          • Situating the                context          • Humanizing                personas          • D...
One of my fave examples          Commuter Buddy          https://vimeo.com/3056252Friday, October 19, 12
Exercise          Time Management          Tell me a compelling          story.          Yes, I expect a guitar score in t...
Questions? Comments?Friday, October 19, 12
Dave Malouf             @daveixd             G+ dave.ixd             Dave Malouf Design             Peer Loft - @peerloftF...
Upcoming SlideShare
Loading in …5
×

Remix South: Advanced Interaction Design

3,359 views
3,284 views

Published on

Ok, it was called "Interaction Design Master Class", but what can you master in 3hrs.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,359
On SlideShare
0
From Embeds
0
Number of Embeds
104
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Remix South: Advanced Interaction Design

  1. 1. Interaction Design Master Studio Dave Malouf @daveixdFriday, October 19, 12
  2. 2. Friday, October 19, 12
  3. 3. Dave Malouf @daveixd http://davemalouf.comFriday, October 19, 12
  4. 4. Peer Loft: @peerloft Amplifying Creativity TMFriday, October 19, 12
  5. 5. Dave Malouf Design Helping organizations integrate holistic design for rapid and smarter creativity.Friday, October 19, 12
  6. 6. Who are you?Friday, October 19, 12
  7. 7. What you are in for: • Lots of theory • Lots of opportunities to apply that theory • Hopefully some interesting discussionFriday, October 19, 12
  8. 8. This is Interaction DesignFriday, October 19, 12
  9. 9. Defining Interaction Design The engineer’s perspective Bill Verplank http://www.ixda.org/resources/bill-verplank-opening- keynoteFriday, October 19, 12
  10. 10. Exercise 1 How many unique actions can you get out of a single button? • Either sketch them out, or • Write them 5 minutesFriday, October 19, 12
  11. 11. Exercise 1a Try now with a handle 5 minutesFriday, October 19, 12
  12. 12. Dialog Product Behavior Your Reaction Product BehaviorFriday, October 19, 12
  13. 13. Soulless Goalless But the beginning a storyFriday, October 19, 12
  14. 14. Leads to theatre Actors & Audience Aesthetic & emotional considerationsFriday, October 19, 12
  15. 15. Computers as Theatre Brenda LaurelFriday, October 19, 12
  16. 16. Dialog Activity EmotionFriday, October 19, 12
  17. 17. Exercise 2 Write a script of using an IM application. • App Speech like human • Add Setting, stage direction & emotion.Friday, October 19, 12
  18. 18. Improvisation It’s a Jazz Thing!Friday, October 19, 12
  19. 19. Defining Interaction Design The philosopher’s perspective “To design the environments where interactions take place.” Richard “[To design] how people relate Buchanan to other people through the mediating influence of product(s).” http://www.ixda.org/resources/richard-buchanan- keynoteFriday, October 19, 12
  20. 20. Exercise 2 • How many different activities can you think of to do on a chair? • How would you change the design of the chair based on those activities. 10 MinutesFriday, October 19, 12
  21. 21. Foundations What are foundations? What are they good for? What are they for Interaction Design?Friday, October 19, 12
  22. 22. What are foundations Simply put the principles that allow for both a critical analysis and a platform of studio education... ... blah blah blahFriday, October 19, 12
  23. 23. Why have foundations? • Creates a solid base of core theories and crafts - These can transcend all design disciplines ๏ Art History/Criticism ๏ Color ๏ 2D Design • Goal is to give broad understanding of theory, and opportunity to focus on craft before diving deeper into a chosen discipline.Friday, October 19, 12
  24. 24. Let’s look at another discipline • There are 6 elements that every 3D designer needs to know: • Line • Plane (surface) • Volume (space & form) • Value (Light & Dark) • Texture • ColorFriday, October 19, 12
  25. 25. There is also a progression • In 3D design you can’t • Primitives include just jump right in - Rectilinear Volumes - Curvilinear Volumes • “Primitives” must be - Rectilinear & Curvilinear mastered, - Fragments and in mastering these - Planar constructions you master craft - Lines in Space - Advanced Studies in Form ๏ Construction ๏ Convexity ๏ Concavity • Studies in SpaceFriday, October 19, 12
  26. 26. Elements of Design: Roweena Reed Kostellow and the Structure of Visual Relationships by Gail Greet Hannah Language for Criticism Aesthetic criticism ... Not quantitative evaluationFriday, October 19, 12
  27. 27. Foundations of Interaction Design • Time • Metaphor • Abstraction • Motion & Movement • Negativity (related to “negative [or white] space”) Article w/ links to previous written work on Foundations of IxD: http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09- reprise/ Video of my presentation on the Foundations of Interaction Design @ Interaction 09 | Vancouver http://vimeo.com/4500315Friday, October 19, 12
  28. 28. Time It has many sub-elements • Duration • Frequency • Rhythm • Delay Photo credit: Adam BrowdowskiFriday, October 19, 12
  29. 29. Exercise Design a chair now in different ways thinking about different elements of time 5 minutesFriday, October 19, 12
  30. 30. Abstraction • Level of directness or interaction - Command Line - Voice Command - Mouse - Point/Click - Stylus - Tap/Click - Finger - Tap click • Movement equals same direction responseFriday, October 19, 12
  31. 31. Another example iPod Click-wheelFriday, October 19, 12
  32. 32. Direct ManipulationFriday, October 19, 12
  33. 33. Is this more or less? Leap Motion http://youtu.be/_d6KuiuteIAFriday, October 19, 12
  34. 34. Metaphors “Everything in computers is a metaphor” - Dan Saffer, IA Summit 2005 • Trash can / recycle bin • Disk • File / folder • Shopping • Even ComputerFriday, October 19, 12
  35. 35. A cigar by any other name Analogy helps expand understanding and communicate meaningFriday, October 19, 12
  36. 36. Skeumorph Not always metaphor, And not bad.Friday, October 19, 12
  37. 37. Movement (motion) • Pleasing movements • Craft of motion • Intuitive gesturesFriday, October 19, 12
  38. 38. Pull to spring Causes list to check for additions.Friday, October 19, 12
  39. 39. Exercise Time Management • Posture: Transient • Metaphor: Clock/ Calendar • Abstraction: Direct • Movements: Choppy 15 minFriday, October 19, 12
  40. 40. Questions? Comments?Friday, October 19, 12
  41. 41. Know your media We have many and they are unconventionalFriday, October 19, 12
  42. 42. Pixels Composition Layout Type Negative SpaceFriday, October 19, 12
  43. 43. Servos Actuators Sensors LEDs are good too!Friday, October 19, 12
  44. 44. keyboard mouse trackpad touchscreen remote control game controller no controllerFriday, October 19, 12
  45. 45. Language metaphor frames poetics rhetoric narrativeFriday, October 19, 12
  46. 46. People cognition behavior cultureFriday, October 19, 12
  47. 47. Tinkering Nearness by Touch & BERG https://vimeo.com/6588461Friday, October 19, 12
  48. 48. Exercise Time Management • Change your media • Change your actors • New materials TINKER 15 minFriday, October 19, 12
  49. 49. Would you like some ... We will have our personal information everywhereFriday, October 19, 12
  50. 50. What’s needed? What’s there? • Bandwidth • Platforms • Operators • HardwareFriday, October 19, 12
  51. 51. Is this our future? Glass everywhere? http://youtu.be/6Cf7IL_eZ38Friday, October 19, 12
  52. 52. It’s a services world • Intangible • Not consumed • People + ProductsFriday, October 19, 12
  53. 53. What do we have today?Friday, October 19, 12
  54. 54. Paths tell our stories Constantly changing micro contextsFriday, October 19, 12
  55. 55. Improvisation Back to JazzFriday, October 19, 12
  56. 56. Prototype Gotta experience it to make it all work.Friday, October 19, 12
  57. 57. Journey Maps are our new sitemapsFriday, October 19, 12
  58. 58. Exercise Time Management • What changes if this is a service instead of an application? • Create a journey map expressing this change 15 minFriday, October 19, 12
  59. 59. Tools And places to put them.Friday, October 19, 12
  60. 60. My Secret Recipe Here it goes!Friday, October 19, 12
  61. 61. My physical tool kit • dotted notebook • Posterpaper/pads • fine point pen • Digital Camera • Whiteboard • Video Camera http://whiteyboard.com • Lighting Set • Sticky notes • Big open space • Cardboard box • People • Construction paper • iPad (or any tablet) • Stick glue Stylus optional • SharpiesFriday, October 19, 12
  62. 62. My software tool kit • Adobe Ideas • Comic Life • Adobe Proto • iPhoto • Adobe Collage • iMovie • Adobe Fireworks • Garageband • Adobe Dreamweaver • iA Writer • Omnigraffle or Axure • Keynote • Adobe Edge • Keynotopia/Keynote (Code & Animate) Kung Fu • Adobe StoryFriday, October 19, 12
  63. 63. Structure of StoryFriday, October 19, 12
  64. 64. Comics are our new sitemapsFriday, October 19, 12
  65. 65. Stories help by • Situating the context • Humanizing personas • Designing against scenariosFriday, October 19, 12
  66. 66. One of my fave examples Commuter Buddy https://vimeo.com/3056252Friday, October 19, 12
  67. 67. Exercise Time Management Tell me a compelling story. Yes, I expect a guitar score in the background. 30 minFriday, October 19, 12
  68. 68. Questions? Comments?Friday, October 19, 12
  69. 69. Dave Malouf @daveixd G+ dave.ixd Dave Malouf Design Peer Loft - @peerloftFriday, October 19, 12

×