Interactive Sketching Methods for non-sketchers

Part 1. The Vanilla Sketch Captures: an essence of an idea a moment in time the look of an interface multiple variations of the concept Carloyn Snyder,Paper Prototyping (2003) Morgan Kaufmann Morgan Kaufmann p31 Carloyn Snyder,Paper Prototyping (2003) Morgan Kaufmann Susannah McPhail

Technique: Just Draw Something Don’t worry about aesthetics the sketch is for your eyes and the sketch is a social thing: a conversational prop that engages others in talk about your ideas But if you want to learn how to draw sketching courses oarts, industrial design, community courses… books oDrawing on the Right Side of your Brain by Betty Edwards

Technique: Just Draw Something Scribble drawing sketch anywhere, anytime, sketch in the dark (while watching a movie) speed sketching (1 minute or less) Trick draw only essentials scribbles suggest details

Time to draw: 30 seconds

Technique: Just Draw Something Exercise: draw this powerpoint screen you have 45 seconds

Time to draw: 45 seconds

Technique: Tracing Basic idea copy / trace the fixed elements of an existing interface/screen leave your design space empty Technology camera, photograph, tracing paper or Photoshop or equivalent otrace over image on a separate layer Drawing skill required almost zero

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279

Generate blanks for your designs Screen can be filled in, phone is constant

Technique: Hybrid Sketches Mixes full and low fidelity elements Full fidelity portions: fixed design elements Low fidelity portions speculative components Contrast makes certain parts of sketch stand out over others

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279 Detail = fixed elements Hybrid Sketches Lo-fi = speculative…

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 98, p 281 Hybrid sketches

How much fidelity do we really need?

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 105 (from Scott McLaoud, Understanding Comics, p30)

How much fidelity do we really need? Constrained resolution no higher than required to capture its concept Consistency with state rendering fidelity matches the actual state of development of the concept Suggest & explore rather than confirm suggests and provokes what could be A catalyst evokes conversations and discussion

Picasso’s The Acrobat

Picasso’s Engravings for Carmen

Picasso’s Sleeping woman

Picasso’s Woman with yellow hair

Picasso’s Don Quixote

Computer Telephone Last Name: First Name: Phone: Place CallHelp

Technique: Annotations Marks that augment a sketch directly on sketch as layer otracing oPhotoshop layer over dynamic media Bill Buxton Sketching User Experiences, see pages

Technique: Annotations Textual notes name and / or explain things add detail lists of items questions / issues about design… Graphical marks connects notes to sketch elements relates sketch elements show dynamics of elements or interaction over time… Bill Buxton Sketching User Experiences, see pages

Photo of Steve Langley

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 95, p277

Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 64, p 174

portion of a page from Saul Greenberg’s sketchbook

Vanilla Sketch Examples -screen snapshot 1 From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann p31

Sketch examples – design variations 1 From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p350

Sketchbook examples – details to prototype buddy bugs - sketches and final prototype, by former 581 student Susannah McPhail

Exercise –tracing / copying Choose a handheld device cell phone, PDA, watch… Photograph the device and screen contents choose a good angle/size take several photos of it at different angles/sizes just in case Trace over the phone On paper, or in sketching program capture its essence, not literal high fidelity details