Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interaction 09 Introduction to Interaction Design

24,729 views

Published on

Slides from a 1/2 day workshop introducing interaction design.

Published in: Design

Interaction 09 Introduction to Interaction Design

  1. Introduction to Interaction Design Interaction 09 | Vancouver Dave Malouf Professor of Interaction Design Savannah College of Art & Design
  2. Workshop Schedule and Content 9:00 am – 1:00 pm <ul><li>Before the break: 110min. </li></ul><ul><li>Introductions </li></ul><ul><li>Setting the scene </li></ul><ul><ul><li>What is IxD? </li></ul></ul><ul><ul><li>How does it fit with UX? </li></ul></ul><ul><ul><li>History(ies) of IxD </li></ul></ul><ul><li>Open Questions </li></ul><ul><li>After the 20min. Break </li></ul><ul><li>DOING IxD—a Framework </li></ul><ul><li>Foundation </li></ul><ul><li>Tools </li></ul><ul><li>Next Steps For You </li></ul><ul><li>Open questions </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  3. WHO ARE WE? <ul><li>Let’s learn about the people with whom we are spending 4 hours today. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  4. Who are we? <ul><li>Name </li></ul><ul><li>Company (if any) </li></ul><ul><li>Title/role What do you call yourself @ a party? </li></ul><ul><li>What interests you about IxD? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  5. SETTING THE SCENE Interaction 09 | Vancouver Introduction to Interaction Design
  6. What is Interaction Design anyway? <ul><li>Is it a practice? </li></ul><ul><li>A discipline? </li></ul><ul><li>What do interaction designers design? </li></ul><ul><li>Can do they make anything? </li></ul><ul><li>Can they create a “whole” something alone? </li></ul><ul><li>Where does IxD and Information Architecture fit? And usability? And HCI? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  7. Let’s take a look what other people think? <ul><li>Let’s look at a few </li></ul><ul><ul><li>Jesse James Garret’s Elements of User Experience </li></ul></ul><ul><ul><li>Dan Saffer’s UX Ven Diagram </li></ul></ul><ul><ul><li>Challis Hodge’s – Make up of Experience Design </li></ul></ul><ul><ul><li>Nathan Shedroff’s – Roles of Experience Design </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  8. The Elements of User Experience Interaction 09 | Vancouver Introduction to Interaction Design
  9. Dan Saffer’s look Interaction 09 | Vancouver Introduction to Interaction Design
  10. Challis Hodge – Breaking down Experience Design Interaction 09 | Vancouver Introduction to Interaction Design
  11. Hodge again – now on role relationships Interaction 09 | Vancouver Introduction to Interaction Design
  12. Nathan Shedroff - What do we do? Interaction 09 | Vancouver Introduction to Interaction Design
  13. Exercise 1 Sketch 20min <ul><li>How would you do it? </li></ul><ul><li>Sketch model </li></ul><ul><ul><li>Task </li></ul></ul><ul><ul><li>Process </li></ul></ul><ul><ul><li>Make up of elements </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  14. Breaking it down <ul><li>Potential </li></ul><ul><li>Research </li></ul><ul><li>Strategy </li></ul><ul><li>Tactics </li></ul><ul><li>Telling </li></ul><ul><li>Presentation </li></ul><ul><li>Throughout </li></ul><ul><ul><li>Evaluation </li></ul></ul><ul><ul><li>Narrative </li></ul></ul><ul><ul><li>Visualization </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  15. Adam Interaction 09 | Vancouver Introduction to Interaction Design
  16. Olivia Interaction 09 | Vancouver Introduction to Interaction Design
  17. Robert Interaction 09 | Vancouver Introduction to Interaction Design
  18. Kyle Interaction 09 | Vancouver Introduction to Interaction Design
  19. Marcus Interaction 09 | Vancouver Introduction to Interaction Design
  20. LET’S TAKE A STEP BACK <ul><li>We are talking about designing digital products & services, right? So … </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  21. QUESTION <ul><li>What is interactivity? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  22. Another one <ul><li>What’s a GOOD interactive product? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  23. Last one <ul><li>What’s a good product? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  24. Let’s go WAY back <ul><li>firmitas, utilitas, venustas </li></ul><ul><li>-- Vitruvius, “De Architectura” </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  25. What does this mean? <ul><li>Mitch Kapor’s take </li></ul><ul><li>Firmness: A program should not have any bugs that inhibit its function. </li></ul><ul><li>Commodity: A program should be suitable for the purposes for which it was intended. </li></ul><ul><li>Delight: The experience of using the program should be pleasurable one. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  26. Back to our 1 st 2 questions <ul><li>What is interactivity? </li></ul><ul><li>What is a GOOD interactive product? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  27. Interactivity? <ul><li>Well 1 st what is an interaction? </li></ul><ul><ul><li>Conversation? </li></ul></ul><ul><ul><li>Play? </li></ul></ul><ul><ul><li>Back & Forth? </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  28. Interactivity? <ul><li>Requires 2 or more entities </li></ul><ul><li>All entities have the ability to receive input </li></ul><ul><li>All entities have the ability to produce output </li></ul><ul><li>All entities’ output is in direct relationship to the content of input </li></ul><ul><ul><li>Highly interactive systems can provide output to itself, to create a level of intelligence. </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  29. Interactive Product? <ul><li>Does it have to have a computer? </li></ul><ul><ul><li>Do you have an example of an interactive product without one? </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  30. Interactive Product? <ul><li>Basics </li></ul><ul><li>Listens for requests </li></ul><ul><li>Determines ability to perform request </li></ul><ul><li>Does request </li></ul><ul><li>Sends results of request </li></ul><ul><li>iPod </li></ul><ul><li>User moves click-wheel to desired location (screen immediately responds to these micro requests by changing the screen) </li></ul><ul><li>System looks for song </li></ul><ul><li>System starts song </li></ul><ul><li>Music is piped through headphones and screen changes. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  31. A good interactive product <ul><li>Does the job I expect it to when I want it to. </li></ul><ul><li>Does the job in a way that I expect it should </li></ul><ul><li>Delights – what’s this? </li></ul><ul><ul><li>Aesthetics: Beauty is not in the eye of the beholder but it is a (cross-)cultural response to elements of presentation </li></ul></ul><ul><ul><li>Engagement: The way a situation/product can draw your focus on it. </li></ul></ul><ul><ul><li>Ego or soul: Elements of the personal that add value by conveying human connection to a greater whole. </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  32. Properties of interactive products <ul><li>They are “used” </li></ul><ul><li>They only exist in 4 dimensions </li></ul><ul><ul><li>Interactivity can only take place over time </li></ul></ul><ul><li>All series of interactions create a narrative </li></ul><ul><li>There is always a human motivation for use towards achieving some describable set of motivations & goals. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  33. LET’S DEFINE IT FOR REAL Interaction 09 | Vancouver Introduction to Interaction Design
  34. A terse definition Interaction 09 | Vancouver Introduction to Interaction Design
  35. Interaction Design Defined Another try (Robert Reimann) <ul><li>A design discipline dedicated to: </li></ul><ul><ul><li>Defining the behavior of artifacts, environments, and systems (i.e., products ) </li></ul></ul><ul><ul><li>… and therefore concerned with: </li></ul></ul><ul><ul><li>Anticipating how use of the products will mediate human relationships and affect human understanding </li></ul></ul><ul><ul><li>Guiding the form of products to the extent that it influences/is influenced by their behavior and use </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  36. A new “medium”, a new kind of design <ul><li>Interactive digital products require and respond to human input, and change their own content or behavior based on that input. </li></ul><ul><li>Form, behavior , and content must all be defined. </li></ul><ul><li>Traditional design disciplines do not have methods that address complex behavior. </li></ul><ul><li>Non-design disciplines are not geared toward generating desirable solutions. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  37. A great perspective … Interaction 09 | Vancouver Introduction to Interaction Design Bill Verplank http://billverplank.com/Lecture/
  38. It is a DESIGN discipline <ul><li>Science </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design Art
  39. The lab & The data Interaction 09 | Vancouver Introduction to Interaction Design
  40. Beauty for beauty's sake Interaction 09 | Vancouver Introduction to Interaction Design
  41. Can't we all just get a long? Salvador is a Interaction 09 | Vancouver Introduction to Interaction Design
  42. 2008: Year of the SKETCH There is no *D*esigning without sketching <ul><li>Multiplicity </li></ul><ul><li>Disposability </li></ul><ul><li>Associative Thinking </li></ul><ul><li>More on this later </li></ul>
  43. The Designer's Path Bill Buxton's Sketching UX
  44. Communicating our ideas
  45. Making ideas into things
  46. Creating narratives
  47. There is an aesthetic to interaction More on THIS later (I hope)
  48. HOW DID WE GET HERE? Interaction 09 | Vancouver Introduction to Interaction Design
  49. In the beginning … <ul><li>What is interaction? </li></ul><ul><ul><li>The listening and responding between at least 2 entities. </li></ul></ul><ul><ul><li>Action by an initiation (passive or active) and a listener’s reaction, which leads to the initiator’s own reaction </li></ul></ul><ul><ul><li>EXAMPLE: </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design Excess material is removed To reveal new object Whack with stone axe
  50. If only it stayed that simple? Interaction 09 | Vancouver Introduction to Interaction Design
  51. Eco-systems Interaction 09 | Vancouver Introduction to Interaction Design
  52. Social Interactions Interaction 09 | Vancouver Introduction to Interaction Design
  53. Open Data – The “unproduct” Interaction 09 | Vancouver Introduction to Interaction Design
  54. Gestures Interaction 09 | Vancouver Introduction to Interaction Design
  55. Ambient & Ubiquitous & Passive Bio-feedback Interaction 09 | Vancouver Introduction to Interaction Design
  56. That was all about mediums … <ul><li>What about the focus of the designer? </li></ul><ul><li>What about the practice? </li></ul><ul><li>Where are we today? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  57. Marc Rettig’s – goals of the process Interaction 09 | Vancouver Introduction to Interaction Design Marc Rettig – http://fitassociates.com/
  58. Historical view of the focus in terms of practice <ul><li>Human Factors </li></ul><ul><li>Leads to Human Computer Interaction </li></ul><ul><li>Leads to Usability Evaluation </li></ul><ul><li>Leads to early Interaction Design </li></ul><ul><ul><li>Enter (Design – aesthetics & story telling) </li></ul></ul><ul><li>Leads to Social Interaction Design </li></ul><ul><ul><li>Participatory story telling </li></ul></ul><ul><ul><li>Designer enables his own loss of control over the system </li></ul></ul><ul><li>Leads to co-designing Interactive Systems </li></ul><ul><ul><li>As the data opens up, all control is lost, and the eco-system’s infrastructure is what is designed, NOT the interfacing points. </li></ul></ul><ul><ul><li>But they still have to be imagined and modeled and exemplified. </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  59. Human Factors Interaction 09 | Vancouver Introduction to Interaction Design
  60. Human Computer Interaction Interaction 09 | Vancouver Introduction to Interaction Design
  61. Usability Evaluation Interaction 09 | Vancouver Introduction to Interaction Design
  62. Software Design Manifesto <ul><ul><li>1991 (and again in 1996) </li></ul></ul><ul><ul><li>Mitch Kapor outlines the need for software to be designed, not just engineered. </li></ul></ul><ul><ul><li>Firmness, commodity and delight </li></ul></ul><ul><li>Despite the enormous outward success of personal computers, the daily experience of using computers far too often is still fraught with difficulty, pain, and barriers for most people, which means that the revolution, measured by its original goals, has not as yet succeeded. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  63. 2 directions creating a continuum of practice <ul><li>N. America remains focused on research & evaluation tools </li></ul><ul><ul><li>Cooper, “Tog”, J. Raskin </li></ul></ul><ul><li>Europe takes aim at aesthetics, expressionism, and experimentation. </li></ul><ul><ul><li>Gillian Crampton Smith </li></ul></ul><ul><ul><ul><li>Royal College of Art </li></ul></ul></ul><ul><ul><ul><li>Interaction Design Institute of Ivrea </li></ul></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  64. System & Experience Design <ul><li>1998 – Everyone wants to become an Imagineer! </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design <ul><li>Experience Design takes off as new “brand value” </li></ul><ul><li>All touch points inform “the brand” </li></ul><ul><li>Story telling </li></ul><ul><li>Service Design </li></ul>
  65. Web 2.0 + iPod increase the need and expectation for IxD Interaction 09 | Vancouver Introduction to Interaction Design
  66. Bringing it all together Interaction 09 | Vancouver Introduction to Interaction Design
  67. More context <ul><li>Designers are still primarily educated focused on their current medium of choice and the associated tools. </li></ul><ul><li>Interaction Designers are still arguing over definitions. </li></ul><ul><li>An immature design discipline, Interaction Design, still does not contribute to design foundation in every design education program. </li></ul><ul><li>In practice, those doing Interaction Design, do so as “non-designers”. </li></ul><ul><ul><li>Collaboration with visual or industrial designers is weak </li></ul></ul><ul><ul><li>Interaction Designers often do not have basic design language education. </li></ul></ul><ul><li>The demand for Interaction Design practice is outpacing the numbers of qualified Interaction Designers out there today. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  68. QUESTIONS? COMMENTS? THOUGHTS? INSIGHTS? Interaction 09 | Vancouver Introduction to Interaction Design
  69. WELCOME BACK! Interaction 09 | Vancouver Introduction to Interaction Design
  70. DOING INTERACTION DESIGN Interaction 09 | Vancouver Introduction to Interaction Design
  71. But now really, what do we DO? <ul><li>Sketch </li></ul><ul><ul><li>Ideate </li></ul></ul><ul><ul><li>Visualize </li></ul></ul><ul><ul><li>Communicate </li></ul></ul><ul><ul><li>Evaluate </li></ul></ul><ul><li>Tell </li></ul><ul><ul><li>Humanize </li></ul></ul><ul><ul><li>Situate </li></ul></ul><ul><ul><li>Contextualize </li></ul></ul><ul><ul><li>Empathize </li></ul></ul><ul><ul><li>Connect </li></ul></ul><ul><ul><li>Envision </li></ul></ul><ul><li>Frame </li></ul><ul><ul><li>Structure </li></ul></ul><ul><ul><li>Translate </li></ul></ul><ul><ul><li>Prototype </li></ul></ul><ul><li>Refine </li></ul><ul><ul><li>No quick catch-all here </li></ul></ul><ul><ul><li>Depends on roles </li></ul></ul><ul><ul><li>Includes </li></ul></ul><ul><ul><ul><li>Graphic production </li></ul></ul></ul><ul><ul><ul><ul><li>Typography </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Iconography </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Grid layouts </li></ul></ul></ul></ul><ul><ul><ul><li>Transitions </li></ul></ul></ul><ul><ul><ul><li>Writing </li></ul></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  72. What’s a sketch Interaction 09 | Vancouver Introduction to Interaction Design Taken from the notes of J. Spool on BrainSparks Blog of a talk given by Bill Buxton to Boston-SIGCHI. http://www.uie.com/brainsparks/2006/11/16/buxton-on-sketching-and-experience-design/ Sketch Prototype Invitation Attendance Suggestion Description Question Answer Propose Test Destructive Constructive
  73. What is a sketch? (Pt. 2) Interaction 09 | Vancouver Introduction to Interaction Design What do you see here? Rapid & Rough Disposable Multiplicity Associative (not serial) Communicate CONCEPTS
  74. Thinking tool <ul><li>Clarify </li></ul><ul><li>Evaluate </li></ul><ul><li>Associate </li></ul><ul><li>Build </li></ul><ul><li>Deconstruct </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  75. Verbs & Modifiers <ul><li>Warp </li></ul><ul><li>Burn </li></ul><ul><li>Stretch </li></ul><ul><li>Crease </li></ul><ul><li>Shrink </li></ul><ul><li>Skew </li></ul><ul><li>Scale </li></ul><ul><li>Tint </li></ul><ul><li>Highlight </li></ul><ul><li>Darken </li></ul><ul><li>Add </li></ul><ul><li>Subtract </li></ul><ul><li>Obscure </li></ul><ul><li>Decorate </li></ul><ul><li>Minimize </li></ul><ul><li>Clarify </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  76. Exercise 2 Sketching 20min. <ul><li>Pick any object in the room </li></ul><ul><li>Redesign it </li></ul><ul><ul><li>Whatever that means to you </li></ul></ul><ul><li>Stretch for over 20 ideas </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  77. Tell It is a story <ul><li>Interaction Design IS storytelling! </li></ul><ul><li>How? </li></ul><ul><ul><li>Write a script </li></ul></ul><ul><ul><ul><li>Plot </li></ul></ul></ul><ul><ul><ul><li>Characters </li></ul></ul></ul><ul><ul><ul><li>Dialog </li></ul></ul></ul><ul><ul><ul><li>Setting </li></ul></ul></ul><ul><ul><ul><li>Audience </li></ul></ul></ul><ul><ul><li>Use comics </li></ul></ul><ul><ul><ul><li>Read Understanding Comics </li></ul></ul></ul><ul><ul><li>Create your package or advert </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  78. Tell Keep it situated <ul><li>Always focus on human beings </li></ul><ul><li>Who are doing something </li></ul><ul><li>Someplace specific </li></ul><ul><li>For specific reasons </li></ul><ul><li>To achieve specific goals </li></ul><ul><li>The interfaces themselves are less important than the tasks, contexts, and goals. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  79. Tell Example Interaction 09 | Vancouver Introduction to Interaction Design By Scott McCloud for Google Chrome http://www.google.com/googlebooks/chrome/
  80. Tell Examples – a progression <ul><li>Cooper Drawing Board </li></ul><ul><li>Adaptive Path Aurora </li></ul><ul><li>Nokia & Cambridge University </li></ul><ul><li>Intel & IDEO </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  81. Tell The Goal <ul><li>Create a compelling story that is human situated to place your designs in </li></ul><ul><li>Telling early on also allows for you to find breakdowns in core paths and situations </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  82. Framing Language <ul><li>Designing interactions requires you create (or translate) the language: </li></ul><ul><li>Nouns </li></ul><ul><ul><li>What are the objects of the system </li></ul></ul><ul><li>Verbs </li></ul><ul><ul><li>What actions act on those objects </li></ul></ul><ul><li>Modifiers </li></ul><ul><ul><li>What are the properties of nouns and verbs (adjectives & adverbs) </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  83. Framing Interactivity <ul><li>What is listening </li></ul><ul><ul><li>& for what? </li></ul></ul><ul><li>What is responding </li></ul><ul><ul><li>& to whom/what? </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  84. Framing Layout & Prototype <ul><li>Make it real through layout attempts </li></ul><ul><ul><li>Wireframes are more than appropriate here </li></ul></ul><ul><li>Make it more real through interactivity </li></ul><ul><ul><li>Prototype interactively </li></ul></ul><ul><li>Create a clear hierarchy of navigation, objects, actions, information, etc. </li></ul><ul><li>GOAL </li></ul><ul><li>Mold the clay of your craft’s foundations (more later) </li></ul><ul><li>Make it alive for heuristic evaluation </li></ul><ul><li>Enable it for truer end-user validation </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  85. Framing Example Interaction 09 | Vancouver Introduction to Interaction Design
  86. Exercise 3 Framing – 30min. <ul><li>Groups of 4 </li></ul><ul><li>Design an online travel system </li></ul><ul><li>Tell a story </li></ul><ul><li>Using framing to capture key language & structure </li></ul><ul><li>Focus on ONE aspect of travel (fly, stay, drive) </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  87. Refine Overview <ul><li>It’s time for the details </li></ul><ul><li>Get emotional </li></ul><ul><ul><li>Delight </li></ul></ul><ul><ul><li>Engage </li></ul></ul><ul><ul><li>Create desire or joy </li></ul></ul><ul><li>Be clear(er) </li></ul><ul><li>All the states! (micro & macro) </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  88. Refine What are you doing? <ul><li>Pixel perfect </li></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>Type </li></ul></ul><ul><ul><li>Iconography </li></ul></ul><ul><ul><li>Imagery </li></ul></ul><ul><li>Communicate </li></ul><ul><ul><li>Write (your interface, YOUR words) </li></ul></ul><ul><ul><li>Metaphor (especially in iconography) </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  89. Refine the kicker <ul><li>It is during refinement that you also design the exceptions </li></ul><ul><ul><li>Error messaging </li></ul></ul><ul><ul><li>Help systems </li></ul></ul><ul><ul><li>Alternate flows </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  90. Refine Example Interaction 09 | Vancouver Introduction to Interaction Design
  91. RESEARCH ANYONE? Interaction 09 | Vancouver Introduction to Interaction Design
  92. Where’s the research? <ul><li>There was definitely research up there on your elements slide, right? </li></ul><ul><li>What is research anyway? </li></ul><ul><ul><li>Is all research user-centered? </li></ul></ul><ul><ul><ul><li>Market/Biz? </li></ul></ul></ul><ul><ul><ul><li>Technology? </li></ul></ul></ul><ul><ul><ul><li>Design? </li></ul></ul></ul><ul><li>Research is outside of IxD though. IxD exists with or without research. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  93. Yes, yes, yes … <ul><li>Generative research </li></ul><ul><ul><li>Observe </li></ul></ul><ul><ul><ul><li>Contextual Inquiry </li></ul></ul></ul><ul><ul><ul><li>Ethnography </li></ul></ul></ul><ul><ul><li>Interview </li></ul></ul><ul><ul><ul><li>Probe </li></ul></ul></ul><ul><ul><li>Engage </li></ul></ul><ul><ul><ul><li>Create </li></ul></ul></ul><ul><ul><ul><li>Think </li></ul></ul></ul><ul><ul><ul><li>Discuss </li></ul></ul></ul><ul><ul><ul><li>Participatory Design </li></ul></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design Janchipchase.com
  94. More on research <ul><li>Evaluative </li></ul><ul><ul><li>Test (Usability Testing) </li></ul></ul><ul><ul><li>Evaluate (Heuristics) </li></ul></ul><ul><ul><ul><li>Nielsen’s Ten Heuristics </li></ul></ul></ul><ul><ul><ul><li>Tog’s 1 st principles of IxD </li></ul></ul></ul><ul><ul><li>Observe (again!) </li></ul></ul><ul><ul><li>Data mine </li></ul></ul><ul><ul><ul><li>Read logs </li></ul></ul></ul><ul><ul><ul><ul><li>Site logs </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Call center logs </li></ul></ul></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  95. FOUNDATION Interaction 09 | Vancouver Introduction to Interaction Design
  96. What is foundation? <ul><li>It is a group of core courses that design students start with to build a base in theory & craft. It is usually pretty intense. </li></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Drawing </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>And various craft classes </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  97. Another take on Foundation <ul><li>A group of courses or topics that are “required” for true understanding of what it is your craft as a designer of the discipline you’ve chosen. </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  98. Rowena Reed Kostelow <ul><li>She created the Pratt Industrial Design Program </li></ul><ul><li>She also created the Elements of Foundation that the 1 st year of education is based on. </li></ul><ul><li>You do learn skills, but in context of theory. </li></ul><ul><li>Foundations are specific to the medium </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  99. What are IDs Elemental Foundations <ul><li>Color </li></ul><ul><li>Value (light & dark) </li></ul><ul><li>Line </li></ul><ul><li>Volume (Form & space) </li></ul><ul><li>Plane (Surface) </li></ul><ul><li>Texture </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  100. Does IxD have Foundation? <ul><li>No </li></ul><ul><li>Do we need them? </li></ul><ul><ul><li>YES! </li></ul></ul><ul><li>Why? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  101. What is the value of foundation <ul><li>Defines the clay </li></ul><ul><li>Gives us a language for what it is we craft </li></ul><ul><li>Sets up a parameters for critique </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  102. Let’s start the discussion <ul><li>Here are my early attempts </li></ul><ul><li>Time </li></ul><ul><li>Metaphor </li></ul><ul><li>Abstraction </li></ul><ul><li>Movement (a new one for me) </li></ul><ul><li>Negativity </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  103. Time <ul><li>Well interactivity exists in time, right? </li></ul><ul><ul><li>Duration </li></ul></ul><ul><ul><ul><li>Attention, or “posture” </li></ul></ul></ul><ul><ul><li>Frequency </li></ul></ul><ul><ul><ul><li>How many times in X period </li></ul></ul></ul><ul><ul><li>Rhythm </li></ul></ul><ul><ul><ul><li>Predictable or syncopated </li></ul></ul></ul><ul><ul><li>Delay </li></ul></ul><ul><ul><ul><li>In our response </li></ul></ul></ul><ul><ul><ul><li>In the system’s response </li></ul></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  104. Abstraction Ok, wait for it! <ul><li>I can’t tell you what it is, I just have to show you. ;-) </li></ul><ul><li>Google Maps </li></ul><ul><li>iPod click wheel </li></ul><ul><li>Touch </li></ul><ul><li>Where is Command Line? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  105. Metaphor <ul><li>Everything in digital is metaphor </li></ul><ul><ul><li>Folder </li></ul></ul><ul><ul><li>Trash can </li></ul></ul><ul><ul><li>Dock </li></ul></ul><ul><ul><li>Even the name computer </li></ul></ul><ul><li>Our choice of metaphor dramatically effects the interaction design aesthetics </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  106. Metaphor brings meaning <ul><li>No true affordances in the virtual </li></ul><ul><li>Need metaphors to trick the mind </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  107. Movement A new one (for me) <ul><li>This is a new theory of mine </li></ul><ul><li>Popularity of gestural interfaces begs a few observations </li></ul><ul><li>Yes, abstraction, is part of this b/c Gestures is often about direct manipulation. </li></ul><ul><ul><li>Moving feels good </li></ul></ul><ul><ul><li>Our choice of motion effects the design </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  108. What feels better to use? <ul><li>Classic up/down </li></ul><ul><li>Contemporary up/down </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  109. Maybe this is clearer <ul><li>Up/Down </li></ul><ul><li>Knob </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design Slide & Tap
  110. LET’S TALK ABOUT TOOLS <ul><li>Gotta use some tools, right? </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  111. Tools for different things <ul><li>Doing Tools </li></ul><ul><ul><li>Drawing </li></ul></ul><ul><ul><li>Organizing </li></ul></ul><ul><ul><li>Communicating </li></ul></ul><ul><li>Tools for process (AKA Methods) </li></ul><ul><ul><li>Research </li></ul></ul><ul><ul><ul><li>Generate Ideas </li></ul></ul></ul><ul><ul><ul><li>Evaluate/Validate Ideas </li></ul></ul></ul><ul><li>Tools for memory & learning </li></ul><ul><ul><li>Patterns </li></ul></ul><ul><ul><li>Knowledge bases or Communities of Practice </li></ul></ul><ul><ul><li>Online Libraries </li></ul></ul><ul><ul><li>Publications </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  112. What you are comfortable with Interaction 09 | Vancouver Introduction to Interaction Design
  113. Don’t be afraid to try things Interaction 09 | Vancouver Introduction to Interaction Design
  114. But you have to pick something Interaction 09 | Vancouver Introduction to Interaction Design
  115. My Tools for Doing <ul><li>Ideating </li></ul><ul><ul><li>Pen & Paper (analog) </li></ul></ul><ul><ul><ul><li>#1 tool </li></ul></ul></ul><ul><ul><li>Clipping </li></ul></ul><ul><ul><ul><li>Evernote </li></ul></ul></ul><ul><li>Flow charts & Task flows </li></ul><ul><ul><li>Visio (OmniGraffle) </li></ul></ul><ul><li>Modeling </li></ul><ul><ul><li>Visio </li></ul></ul><ul><ul><li>Illustrator </li></ul></ul><ul><ul><li>Fireworks </li></ul></ul><ul><li>Prototyping </li></ul><ul><ul><li>Fireworks </li></ul></ul><ul><ul><ul><li>Hopeful about Flash Catalyst </li></ul></ul></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><li>Blend </li></ul></ul><ul><li>Communicating </li></ul><ul><ul><li>PowerPoint (Keynote) </li></ul></ul><ul><ul><li>Videos </li></ul></ul><ul><ul><li>Sequential Storyboard </li></ul></ul><ul><ul><ul><li>Illustrator </li></ul></ul></ul><ul><ul><ul><li>Comic Life </li></ul></ul></ul><ul><ul><ul><li>Other! </li></ul></ul></ul><ul><ul><li>Email </li></ul></ul><ul><ul><li>IM </li></ul></ul><ul><ul><li>PHONE </li></ul></ul><ul><ul><li>MEETINGS </li></ul></ul><ul><ul><li>Collaboration Software </li></ul></ul><ul><ul><ul><li>Basecamp </li></ul></ul></ul><ul><ul><ul><li>Wikis </li></ul></ul></ul><ul><li>Documenting </li></ul><ul><ul><li>MS Word </li></ul></ul><ul><ul><li>InDesign </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  116. Tools for Process <ul><li>Generative Research </li></ul><ul><ul><li>Participant Design </li></ul></ul><ul><ul><li>Ethnography </li></ul></ul><ul><ul><ul><li>Participant Observation </li></ul></ul></ul><ul><ul><ul><li>Contextual Inquiry </li></ul></ul></ul><ul><ul><li>Interviews </li></ul></ul><ul><ul><li>Brainstorming </li></ul></ul><ul><ul><li>Market Research </li></ul></ul><ul><ul><li>Trending </li></ul></ul><ul><li>Modeling Data </li></ul><ul><ul><li>Affinity Maps </li></ul></ul><ul><ul><li>PersonasTask Flows </li></ul></ul><ul><ul><li>Sketch Modeling </li></ul></ul><ul><ul><li>Situated Narratives </li></ul></ul><ul><ul><ul><li>Scenarios </li></ul></ul></ul><ul><ul><ul><li>Comics </li></ul></ul></ul><ul><ul><ul><li>Videos </li></ul></ul></ul><ul><li>Evaluation/Validation </li></ul><ul><ul><li>Ethnography (again) </li></ul></ul><ul><ul><li>Usability Testing </li></ul></ul><ul><ul><ul><li>Think Aloud </li></ul></ul></ul><ul><ul><li>Heurisitic Evaluation </li></ul></ul><ul><ul><li>Competitive Analysis/Comparison </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  117. Tools for Memory & Learning <ul><li>Patterns </li></ul><ul><ul><li>Yahoo Pattern Library </li></ul></ul><ul><ul><li>Designing Interfaces </li></ul></ul><ul><ul><li>Mobile Patterns </li></ul></ul><ul><ul><li>Social Interaction Patterns </li></ul></ul><ul><ul><li>Quince </li></ul></ul><ul><ul><li>Interaction Patterns </li></ul></ul><ul><ul><li>Weil UI Patterns </li></ul></ul><ul><ul><li>Knowledge bases </li></ul></ul><ul><ul><ul><li>Wikis </li></ul></ul></ul><ul><ul><ul><ul><li>Interaction-design.org </li></ul></ul></ul></ul><ul><ul><ul><li>IxDA Discussion Archive </li></ul></ul></ul><ul><ul><ul><li>ACM Digital Library ($) </li></ul></ul></ul><ul><ul><li>Communities </li></ul></ul><ul><ul><ul><li>IxDA </li></ul></ul></ul><ul><ul><ul><li>IAI </li></ul></ul></ul><ul><ul><ul><li>Local CHI/UPA/UX </li></ul></ul></ul><ul><ul><li>Publications </li></ul></ul><ul><ul><ul><li>Boxes & Arrows </li></ul></ul></ul><ul><ul><ul><li>UX Matters </li></ul></ul></ul><ul><ul><ul><li>Interactions </li></ul></ul></ul><ul><ul><ul><li>JohnnyHolland.org </li></ul></ul></ul><ul><ul><ul><li>Digital-Web </li></ul></ul></ul><ul><ul><li>Blogsphere </li></ul></ul><ul><ul><ul><li>Way too many to list </li></ul></ul></ul><ul><ul><li>TWITTER!!!!! </li></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  118. WHAT ELSE DO YOU NEED TO KNOW <ul><li>Things you have to really explore for yourself </li></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  119. Direct IxD Theory Topics & Good Sources <ul><li>HCI </li></ul><ul><ul><li>How does the mind and the computer meet </li></ul></ul><ul><ul><ul><li>Design of Everyday Things </li></ul></ul></ul><ul><ul><ul><li>HCI Remixed </li></ul></ul></ul><ul><li>UI Design </li></ul><ul><ul><li>How to control visual elements on a 2D screen </li></ul></ul><ul><ul><ul><li>Designing Visual User Interfaces </li></ul></ul></ul><ul><ul><ul><li>Web Form Design </li></ul></ul></ul><ul><li>Evaluation Methods </li></ul><ul><ul><li>How to evaluate your designs </li></ul></ul><ul><ul><ul><li>Observing the User Experience </li></ul></ul></ul><ul><ul><ul><li>Usability for the World Wide Web </li></ul></ul></ul><ul><li>Deeper Interaction Theory </li></ul><ul><ul><li>Understanding the design of behavior within digital products, services and systems </li></ul></ul><ul><ul><ul><li>Designing for Interaction </li></ul></ul></ul><ul><ul><ul><li>About Face 3 </li></ul></ul></ul><ul><ul><li>Connecting what we do to the history of Interaction Design </li></ul></ul><ul><ul><ul><li>Designing Interactions </li></ul></ul></ul><ul><ul><ul><li>Thoughts on Interaction Design </li></ul></ul></ul><ul><ul><ul><li>Thoughtful Interaction Design </li></ul></ul></ul><ul><ul><li>Discovery of common solutions to repeated problems (Patterns) </li></ul></ul><ul><ul><ul><li>Designing Interfaces </li></ul></ul></ul><ul><ul><li>Information Architecture </li></ul></ul><ul><ul><ul><li>Information Anxiety 2 </li></ul></ul></ul><ul><ul><ul><li>Information Architecture for the World Wide Web </li></ul></ul></ul>Interaction 09 | Vancouver Introduction to Interaction Design
  120. Questions??? David Malouf Interaction Design Savannah College of Art & Design http://davemalouf.com/ http://scad.edu/industrial_design http://twitter.com/daveixd http://iact.in/ (Students @ SCAD; coming soon) Interaction 09 | Vancouver Introduction to Interaction Design

×