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.

Sketching User Experience

13,827 views

Published on

Slides presenting the idea of Bill Buxton on designing for the wild and experience design.

Published in: Education, Technology, Business
  • Get Instant Access to 12000 SHED PLANS, Download plans now. =>> https://t.cn/A62YdyaM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download over *12,000* fully detailed shed plans and start building your next shed easily and quickly. ➢➢➢ https://t.cn/A62YdyaM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Sketching User Experience

  1. 1. Designing User Experiences« Getting the design right and the right design »Rémi BARRAQUANDhttp://www.slideshare.net/remibarraquandSketchingRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG
  2. 2. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 2Important. These slides are not yet finished,many references are missing.Main References:•  Bill Buxton – Books, Blog, Lectures•  Saul Greenberg – Lectures CPSC 581
  3. 3. What is this lecture about?"   It is not a lecture on design, but how designers (should) work…"   It is about the design process itself…the design process seen as the process of sketching.Sketching User Experience is, nominally, a bookabout product design. But it would be just as accurateto say that its a book about software development, or,more generally, about the often broken process ofbringing new products to market, with examplesranging from the iPod to an orange juicer.“When I see design I see sketching” − Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 3
  4. 4. The MasterBill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 4
  5. 5. The Master’s BookRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAGBill Buxton5
  6. 6. The Master’s Lecture @StanfordBill Buxtonhttp://www.youtube.com/watch?v=xx1WveKV7aERémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 6
  7. 7. Objectives of this course"   Better understand, distinguish and use"   Sketching, sketches, prototyping, prototypes, sketching vs.prototyping, sketches vs. prototypes"   Incorporate the “best practices” of experience design intoyour everyday skills"   Critical analysis of interface designs"   Creativity via applied exercises"   Idea brainstorming via sketching"   Sketches and prototypes development"   Implementation of a final product (TPI)"   Portfolio summariesRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 7
  8. 8. IHM vs. TPIThis CourseIHMTPIRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 8
  9. 9. About the Organisation"   2 classes of 3 hours each"   5 TAs sessions of 3 hours each"   Experience important aspects of the design process"   Generative"   Reductive"   Create a real product from scratch and experience each step"   Problem statement, state of the art, analysis of the users needs, etc."   Explore: sketching, sketching user experience"   Challenge: brainstorming, presentation"   Converge to a prototype and a final product (TPI)Are you experienced ? – Jimi HendrixIf not, get experienced, or get a new job – Bill BuxtonDesign FunnelRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 9
  10. 10. About the Evaluation"   Final Project"   Sketchbook"   Progressive description of visual ideas"   Habitual use – clever quantity!"   Portfolio"   Summary of accomplishment (synopsis of your work and progression)"   Organization, methods, archives of supporting documents"   Prototype(s) & Final Application"   IHM, Task Model, Ergonomic Criteria, Conception, etc."   Participation"   Class discussions and critics"   Presentation of your own workRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 10
  11. 11. About You"   Personal work…"   Sketching anywhere, anytime… carry onyour sketchbook wherever you go."   See what is out there, collect, generate,develop… your media choice affectswhat you create…"   Challenge the design of others constantly,understand the work of others, present yours…"   Think about your Portfolio, collect your works, be proud…“It take as much creativity to understand a good idea than to have it in the first place”“We are very good at judging each others work and skills”“Your better ideas are not kept in the process, be open to critics”“If you are not failing it means you are not trying hard enough”– Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 11
  12. 12. Design for the WildA shift from object-centered to experience-centered designRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 12
  13. 13. Plan"   What it is all about?"   Design For The Wild"   What is the object of design?"   Designing for the wild"   The role of design"   Sketching & Prototyping"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 13
  14. 14. What do we sell?Is it the object?What do wedesign? Is it theobject?What is the trueobject of design?Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 14
  15. 15. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 15
  16. 16. What we sell and design, is the experiencethat comes out of the box, engenders,advocates, supports… – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 16
  17. 17. Plan"   What it is all about"   Design For The Wild"   What is the object of design?"   Designing for the wild"   The role of design"   Sketching & Prototyping"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 17
  18. 18. Design for the Wild"   Kayaking along the coast of Greenland…"   How do you find your way:"   Paper map?"   Digital map on PC?"   On an internet PDA?"   Other ideas?Where am I?Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 18
  19. 19. Design for the Wild" Tactile 3D wooden maps"   You can use them wearing gloves"   They have infinite battery life"   Can be read during night"   They float in the waterRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 19
  20. 20. “It is not the physical entity or what is inthe box (the material product) that is thetrue outcome of design. Rather, it is thebehavioral, experiential, and emotionalresponses that come about as a result ofits existence and its use in the realworld” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 20
  21. 21. From a Materialist to ExperientialPerspective of Design| a shift from “object-centered to experience-centered” design“We are deluding ourselves if we think that theproducts that we design are the “things” that wesell, rather than individual, social and culturalexperience that they engender, and the value andimpact and they have.” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG
  22. 22. Design for the Wild"   Requires us to think of technologies as “social entities”which have the flexibility to respond in multiple ways,depending on how people appropriate them."   To design a technology, we must make our best efforts tounderstand the larger social and physical context withinwhich it is intended to function."   We must be able to experience our designs in the wild(i.e. the use-context in all its richness) during the earlystages of the process.“The only way to engineer the future tomorrow is to havelived in it yesterday” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 22
  23. 23. Plan"   What it is all about"   Design For The Wild"   What is the object of design?"   Designing for the wild"   The role of design"   Sketching & Prototyping"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 23
  24. 24. The Role of Design"   Design teams should be composed of people with differentbackgrounds and histories because all can bring valuable,complimentary skills to bear in the creation of new products. Itis a social thing."   Design must also include design of the engineering process,marketing plan and business plan."   Design is a professional discipline and requires methods notonly skills"   Every one is a designer – Don Norman"   Every one is not a designer – Bill Buxton“We need holistic approach to experience-baseddesign” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 24
  25. 25. The Role of Design"   Explicit Design Process"   Reproduction in film making"   Development of a new automobile"   Need to insert a design process at the front end ofproduct development"   The cost and time lost due to this additional stage will besignificantly less than the cost and time lost due to the poorplanning and overruns that will result if it is not included."   Dangerous Assumptions"   We know what we want at the start of a project"   We know enough to start building itRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 25
  26. 26. The Role of Design"   Problem setting"   What is the right thing to build?"   Problem solving"   How do we build this?“You must get the right design as well as thedesign right” – Bill Buxton“The role of design is to get the right design. Therole of usability engineering is to get the designright” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 26
  27. 27. Sketching & PrototypingSketching is a quintessential activity of DesignRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 27
  28. 28. Plan"   Introduction"   Design For The Wild"   Sketching & Prototyping"   Design Process"   What Is a Sketch? What Is Sketching?"   Sketches vs. Prototypes"   About Meta-Sketching"   Experience Design"   Sketching the Interaction"   Sketch’s Social Life"   The Sketchbook"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 28
  29. 29. Design Right vs. Right Design"   Getting the Design Right"   Generate an ideaIdeaideaideaRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 29
  30. 30. But is it the best idea?Design Right vs. Right Design"   Getting the Design Right"   Generate an idea"   Iterate and develop it Ideaideaidea ideaideaideaideaideaRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 30
  31. 31. But is it the best idea?Design Right vs. Right Design"   Getting the Design Right"   Generate an idea"   Iterate and develop it⇒  The problem"   Other better solutions may be available in different ideas"   Local vs. global maxima (local hill climbing)"   Often results from fixating on a single ideaIdeaideaidea ideaideaideaideaideaother idea?Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 31
  32. 32. idea4idea1idea2idea4idea5idea7Design Right vs. Right Design"   Getting the Design Right"   Generate an idea"   Iterate and develop it"   Getting the Right Design"   Generate many idea and variation (Generation)"   Reflect and choose (Reduction)"   Then iterate and develop your choiceIdeaideaidea ideaideaideaideaidea1idea2idea3idea4idea5idea6idea7idea5idea5Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 32
  33. 33. Design Right vs. Right Design"   Getting the right design"   Generate many ideas, e.g. inspired by brainstorming, discussions,lateral thinking, client discussions, observations, etc."   Reflect on all your ideas."   Choose the ones that look promising"   then Getting the design right"   Iterate and develop your choices"   Continually refine your choices as the better solutions becomeapparent"   Of course, add in new ideas as they come upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 33
  34. 34. The Ceramic ClassThe ceramics teacher announced on opening day that he was dividing theclass into two groups. All those on the left side of the studio, he said, wouldbe graded solely on the quantity of work they produced, all those on the rightsolely on its quality. His procedure was simple: on the final day of class hewould bring in his bathroom scales and weigh the work of the “quantity”group: fifty pounds of pots rated an “A”, forty pounds a “B”, and so on. Thosebeing graded on “quality,” however, needed to produce only one pot—albeit aperfect one—to get an “A.”Well, came grading time and a curious fact emerged: the works of highestquality were all produced by the group being graded for quantity. It seemsthat while the “quantity” group was busily churning out piles of work—andlearning from their mistakes—the “quality” group had sat theorizing aboutperfection, and in the end had little more to show for their efforts thangrandiose theories and a pile of dead clay. (Bayles & Orland 2001; p. 29)Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 34
  35. 35. Getting the Right Design"   Think it, sketch it, read it, make it quick, timely,disposable, plentiful… more than ever hour after ourwork is never over – Daft SketchRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 35
  36. 36. Keypads TouchDifferent Design Ideas For CellphonesRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 36
  37. 37. Design FunnelReductiondecision-makingElaborationopportunity seekingDesign processRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 37
  38. 38. Design Is CreativityDesign is choice. There are twoplaces where there is room forcreativity1.  the creativity that you bring to enumeratingmeaningfully distinct options from which to choose2.  the creativity that you bring to defining the criteria, orheuristics, according to which you make your choices.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 38
  39. 39. Another Design FunnelRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 39
  40. 40. Product View: The Status QuoSalesEngineeringRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 40
  41. 41. Product View: Integrating DesignSalesEngineeringDesignRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 41
  42. 42. Product View: No SiloSalesEngineeringDesignDesignEngineeringManagement& MarketingSalesRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 42
  43. 43. Design Process: Wrap up"   The design process is about"   getting the right design, and then getting the designright"   The design funnel is about iteratively"   generating and elaborating designs"   choosing and reducing between designs"   Design in product development is about"   using the design funnel to develop ideas for green/redlight appraisalRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 43
  44. 44. Plan"   Introduction"   Design For The Wild"   Sketching & Prototyping"   Design Process"   What Is a Sketch? What Is Sketching?"   Sketches vs. Prototypes"   About Meta-Sketching"   Experience Design"   Sketching the Interaction"   Sketch’s Social Life"   The Sketchbook"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 44
  45. 45. PART I: Design As DreamcatcherFigure 34: Details from Taccola’s Notebook (from first half of C15)Several sketches of ships are shown exhibiting different types of protectiveshields, and one with a “grappler.” These are the first known examples ofusing sketching as a tool of thought.Source: McGee (2004); Detail of Munich, Bayerische Staatsbibliothek.Codex Latinus Monacensis 197 Part 2, fol. 52’Details from Taccola’s Notebook (from first half of C15)Several sketches of ships are shown exhibiting different types of protective shields,and one with a “grappler.” (Source: McGee (2004); Detail of Munich, BayerischeStaatsbibliothek. Latinus Monacensis 197 Part 2, fol. 52’)Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 45
  46. 46. PART I: Design As DreamcatcherFigure 34: Details from Taccola’s Notebook (from first half of C15)Several sketches of ships are shown exhibiting different types of protectiveshields, and one with a “grappler.” These are the first known examples ofusing sketching as a tool of thought.Source: McGee (2004); Detail of Munich, Bayerische Staatsbibliothek.Codex Latinus Monacensis 197 Part 2, fol. 52’Details from Taccola’s Notebook (from first half of C15)Several sketches of ships are shown exhibiting different types of protective shields,and one with a “grappler.” (Source: McGee (2004); Detail of Munich, BayerischeStaatsbibliothek. Latinus Monacensis 197 Part 2, fol. 52’)Sketching is a tool of thoughtRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 46
  47. 47. Sketching is not (crappy) drawingRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 47
  48. 48. Sketching is not (crappy) drawingre 42: A Contrast in Skill: Two Drawings of a Housetop drawing was done by a 6-year old child and the one below by a professional designer. But I didn’t have to tell you that. Drawing skill is obvioushe resulting artifact. However, skill in reading sketches is far less obvious. The artifact, such as it is, is in the mind and is not tangible. Yet, skill inding is just as important as skill in rendering.res: Keegan Reid & Michael SaganRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 48
  49. 49. The Attribute of Sketches"   Quick"   To makeRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 49
  50. 50. The Attribute of Sketches"   Quick"   To make"   Timely"   Provided when neededRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 50
  51. 51. The Attribute of Sketches"   Quick"   To make"   Timely"   Provided when needed"   Disposable"   Investment in the concept,not the execution"   InexpensiveRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 51
  52. 52. The Attribute of Sketches"   Quick"   To make"   Timely"   Provided when needed"   Disposable"   Investment in the concept,not the execution"   Inexpensive"   Plentiful"   They make sense in aa collection or seriesof ideas.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 52
  53. 53. The Attribute of Sketches"   Quick"   Timely"   Disposable"   Plentiful"   Clear Vocabulary"   Rendering & styleindicates it’s a sketch,not an implementation"   Constrained Resolution"   No higher than requiredto capture its concept"   Consistency with State"   Refinement of renderingmatches the state of conceptdevelopmentRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 53
  54. 54. 108This is a refinement of thesketch seen in Figure 35.Through the use of shading,the sketch communicatesmore about the 3D form ofthe concept. Notice that de-spite this refinement linesstill extend through the “hardpoints.”Credit: Michael Sagan, TrekBicyclesRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 54
  55. 55. PART I: Design As DreamcatcherFigure 39: Thumbnail Sketches, Scanned from SketchbookIn what century were these made? Yesterday? During the renaissance?You can’t tell from the form, only from the content.Credit: Michael Sagan, Trek BicyclesPART I: Design As DreamcatcherRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 55
  56. 56. The Attribute of Sketches"   Quick"   Timely"   Disposable"   Plentiful"   Clear Vocabulary"   Constrained Resolution"   Consistency with State"   Suggest & explore rather than confirm"   Value lies in suggesting and provoking what could bei.e. they are the catalyst to conversation and interaction"   A catalyst"   Evokes conversations and discussionRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 56
  57. 57. The Attribute of Sketches"   Quick / Timely"   Inexpensive / Disposable"   Plentiful"   Clear vocabularyYou know that it is a sketch (lines extend through endpoints, …)"   No higher resolution than required to communicate the intendedpurpose/concept"   Resolution of the rendering does not suggest a degree ofrefinement of the concept exceeds its actual state"   AmbiguousRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 57
  58. 58. The Larger Family of RenderingSketch: This is mainly what we have been talking about. They are some-times referred to as Thinking Drawings, and are described as DesignDrawings by Lawson (1997). They are generally made by designers mainlyfor designers, and are central to the process of ideation.Memory Drawing: These are one of the oldest styles of drawing. These arerenderings made to record or capture ideas. Think of them as extensionsof one’s memory—like a hand-rendered photograph recording a thoughtor something seen.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 58
  59. 59. The Larger Family of RenderingPresentation Drawing: These are drawings made for the customer, client,or patron. As stated by Powell (2002, p.6), these people “usually lackedthe skill needed to read these drawings [sketches] and therefore under-stand what the product would be like before it was actually made.” Hence,just as the value of a sketch is in its ambiguity, and the “holes” that it con-tains, the value of a presentation drawing is in its ability to communicateand represent what is being presented to the untrained eye.122Technical Drawing: Technical drawings are a class of drawing that areprimarily intended for those who actually are going to build what is drawn.They are typically accurate and are at the drafting and blueprint end ofthe scale, rather than that of sketching.Description Drawing: This class of drawing is intended to explain some-thing, such as a how something works, or is constructed. It would includethings like cut-away or exploded-view drawings, or it could be broken upinto frames, like a cartoon, as with the emergency cards that one findsin the seat-back pocket on airplanes.Technical Drawing: Technical drawings are a class of drawing that areprimarily intended for those who actually are going to build what is drawn.They are typically accurate and are at the drafting and blueprint end ofthe scale, rather than that of sketching.Description Drawing: This class of drawing is intended to explain some-thing, such as a how something works, or is constructed. It would includethings like cut-away or exploded-view drawings, or it could be broken upinto frames, like a cartoon, as with the emergency cards that one findsin the seat-back pocket on airplanes.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 59
  60. 60. The Anatomy of Sketching"   To get the most out of a sketch, we need to leave bigenough holes"   Ambiguity creates the holes"   It enables a sketch to be interpreted in different ways,even by the person who created it.“The fundamental thing about sketching is that it isabout asking not telling” – Bill Buxton“A Sketch is more about feel than look” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 60
  61. 61. “If you want toget the most outof a sketch, youneed to leave bigenough holes forthe imaginationto fit in.” – BillBuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 61
  62. 62. “If you want toget the most outof a sketch, youneed to leave bigenough holes forthe imaginationto fit in.” – BillBuxtonThere has to beenough room forthe imagination.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 62
  63. 63. Figure 41: A Sketch of a Dialogue with a SketchThe “conversation” between the sketch (right bubble) and the mind (leftbubble). A sketch is created from current knowledge (top arrow). Reading,or interpreting the resulting representation (bottom arrow), creates newknowledge. The creation results from what Goldschmidt calls “seeingthat” reasoning, and the extraction of new knowledge results from whatshe calls “seeing as.”sketchrepresentationmind(new) knowledgeCreate(seeing that)Read(seeing as)Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 63
  64. 64. Figure 41: A Sketch of a Dialogue with a SketchThe “conversation” between the sketch (right bubble) and the mind (leftbubble). A sketch is created from current knowledge (top arrow). Reading,or interpreting the resulting representation (bottom arrow), creates newknowledge. The creation results from what Goldschmidt calls “seeingthat” reasoning, and the extraction of new knowledge results from whatshe calls “seeing as.”sketchrepresentationmind(new) knowledgeCreate(seeing that)Read(seeing as)“Sketching is about the activitynot the result” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 64
  65. 65. Sketching as a Tool of Thought"   Conversation between the designer and its sketches."   Sketching is more related to an activity or process ratherthan to a physical object (the sketch). The sketch is thevehicle, not the destination. Ambiguity help us find ourway."   Conversation with a sketch involves skills in both readingand writing (distinguishing designers from non-designers).“I take as much creativity to understand(read) a good idea (sketch) than to have(draw) it at the first place” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 65
  66. 66. Sketching is a quintessentialactivity of DesignRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG
  67. 67. Plan"   Introduction"   Design For The Wild"   Sketching & Prototyping"   Design Process"   What Is a Sketch? What Is Sketching?"   Sketches vs. Prototypes"   About Meta-Sketching"   Experience Design"   Sketching the Interaction"   Sketch’s Social Life"   The Sketchbook"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 67
  68. 68. A Sketch is not a Prototype"   Difference is"   A contrast of purpose/intent (always)"   A contrast in form (usually but not always)Sketch ≠ Low Fidelity Prototype"   Rather it is"   A continuumSketch PrototypeLow investmentMore opportunities to exploreFail early… learnRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 68
  69. 69. From Sketch to Prototype"   Sketches"   Early iteration stage of design"   Prototypes"   Capturing/detailing the actual designFigure 51: The Dynamics of the Design FunnelRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 69
  70. 70. Figure 52: The Sketch to Prototype ContinuumThe difference between the two is as much a contrast of purpose, or intent,as it is a contrast in form. The arrows emphasize that this is a continuum,not an either/or proposition.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 70
  71. 71. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 71
  72. 72. Early designLate designBrainstorm different ideas andrepresentationsChoose a representationRough out interface styleMultitude of sketchesSketch variations and detailsSketch or low fidelity prototypesTask centered walkthrough andredesignFine tune interface, screen designHeuristic evaluation and redesignUsability testing and redesignLow to medium fidelity prototypesLimited field testingAlpha/Beta testsHigh fidelity prototypesWorking systemsFrom Sketch to PrototypeRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 72
  73. 73. Sketch vs. Prototype: Wrap Up"   Attributes of a sketch"   Quick , timely, disposable, plentiful, clear vocabulary, constrainedresolution, consistent with design state"   A sketch is not a prototype"   Difference is a contrast of purpose/intent (always), and form (mostly)"   Sketch properties"   Evocative, suggest, explore, question, propose, provoke, t"   Prototype properties"   Didactic, describe, refine, answer, test, resolve, specific, depiction"   Don’t forget it is a continuum !Sketch PrototypeRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 73
  74. 74. Plan"   Introduction"   Design For The Wild"   Sketching & Prototyping"   Design Process"   What Is a Sketch? What Is Sketching?"   Sketches vs. Prototypes"   About Meta-Sketching"   Experience Design"   Sketching the Interaction"   Sketch’s Social Life"   The Sketchbook"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 74
  75. 75. What is Sketching ata Meta Level?Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 75
  76. 76. How do we recognizea sketch if it is not inits traditional form ?Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 76
  77. 77. Anything that sharethe property of asketch is a sketch…We now have criteria that describe a sketchWe just have to apply these metrics: is it fast,inexpensive, timely, etc.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 77
  78. 78. Sketching in Interaction Design"   Analogous to traditional sketching"   Shares all the same key attributes"   More feel than look"   Must accommodate time and dynamics"   Phrasing“When we have this description, of what a sketch is, itsattributes, we can then start inventing new things thatshare those attributes, and therefore improve our currenttechnics by inventing new and better tools that help ussketch.” – Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 78
  79. 79. Plan"   Introduction"   Design For The Wild"   Sketching & Prototyping"   Design Process"   What Is a Sketch? What Is Sketching?"   Sketches vs. Prototypes"   About Meta-Sketching"   Experience Design"   Sketching the Interaction"   Sketch’s Social Life"   The Sketchbook"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 79
  80. 80. What do wedesign today?What do we haveto deal with?How do (should)we design today?Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 80
  81. 81. Draw this phoneWhat kind of skill do you need toRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 81
  82. 82. Draw this phoneDraw this phone’sinterfaceWhat kind of skill do you need toRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 82
  83. 83. Draw this phoneDraw this phone’sinterfaceDraw the experience ofusing this phoneWhat kind of skill do you need toWhich is the true object of design?Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 83
  84. 84. Draw this phoneDraw this phone’sinterfaceDraw the experience ofusing this phoneWhat kind of skill do you need toWhich is the true object of design?SKETCHINGRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 84
  85. 85. Plan"   Introduction"   Design For The Wild"   Sketching & Prototyping"   Design Process"   What Is a Sketch? What Is Sketching?"   Sketches vs. Prototypes"   About Meta-Sketching"   Experience Design"   Sketching the Interaction"   Sketch’s Social Life"   The Sketchbook"   Wrap upRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 85
  86. 86. The Sketchbook"   Why a sketchbook?"   supports the design funnel processRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 86
  87. 87. The Sketchbook"   Why a sketchbook?"   Brainstorm many initial ideas – both good and bad"   Explore & refine ideas both in the large and in the small"   Develop variations, alternatives, details"   Archive your ideas for later review"   Reflect on changing thought processes over time"   Communicate ideas to others by showing"   Choose ones worth developing"   Record good ideas you see elsewhere"   Clip inspiring images from sources like magazines"   Shoot, print and collect inspiring photosRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 87
  88. 88. Best Practice"   Use your sketchbook regularly"   Sketch anywhere, anytime, frequently"   Only works if you carry it with youRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 88
  89. 89. Choose Your SketchbookTo considerDurability X X Ppage count P X Psize P P Pfold over X X Paesthetics X X PArchival X X PRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 89
  90. 90. Sketchbook Instruments"   The pencil"   Cheap, flexible"   Easy to carryRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 90
  91. 91. Sketchbook Instruments"   The pencil"   The eraser and sharpener"   Handy, but optionalRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 91
  92. 92. Sketchbook Instruments"   The pencil"   The eraser and sharpener"   Tape, scissors and glue"   For cutting and pasting in found objects"   Don’t have to carry it with youRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 92
  93. 93. Sketchbook Instruments"   The pencil"   The eraser and sharpener"   Tape, scissors and glue"   Small camera"   For taking photos of interesting ideas"   Select, print and tape photos into your sketchbookRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 93
  94. 94. Sketchbook Instruments"   The pencil"   The eraser and sharpener"   Tape, scissors and glue"   Small camera"   Other media & toolsRemember, sketches should be cheap, fast, easy to do, and often of low fidelity.Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 94
  95. 95. Filling Your SketchbookRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 95
  96. 96. You are not an ArtistIdeaRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 96
  97. 97. You are not an ArtistIdea, variationRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 97
  98. 98. You are not an ArtistIdea, variation,annotationRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 98
  99. 99. You are not an ArtistIdea, variation, annotation,flow over time,relationshipsRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 99
  100. 100. You are not an ArtistIdea, variation, annotation,flow over time,relationshipsRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 100
  101. 101. You are not an ArtistIdea, variation, annotation,flow over time, relationships,ScenarioRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 101
  102. 102. You are not an ArtistIdea, variation, annotation,flow over time, relationships,Scenario, CollectingRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 102
  103. 103. Sketch Examples – Idea variationsRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 103
  104. 104. Sketch Examples – Design variationsRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 104
  105. 105. Sketch Examples – VariationsRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 105
  106. 106. Sketch Examples – StoryboardRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 106
  107. 107. Sketch Examples – Storyboard transitionsRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 107
  108. 108. Sketch Examples – ScenarioRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 108
  109. 109. Sketchbook: Wrap Up"   Sketchbooks are for:"   Brainstorming, exploring, refining varying, archiving, reflecting,communicating and choosing ideas"   Recording good ideas you see elsewhere"   Sketchbooks are:"   Convenient (pages, size, fold over), durable archive, aesthetic"   Sketchbook instruments are:"   Pencil, optional eraser, sharpener, glue, tape, scissors, camera, and othermedia"   Sketchbooks can be filled with:"   Your sketches (many different kinds) and found objects"   Sketchbooks are used regularly"   Sketch anywhere, anytimeRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 109

×