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