Interactive Sketching Methods for non-sketchers

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

o arts, industrial design, community courses…

• bookso Drawing 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

o trace over image on a separate layer

Drawing skill required• almost zero

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

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

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

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 muchfidelity do wereally need?

How muchfidelity do wereally 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 Call Help

Technique: Annotations

Marks that augment a sketch• directly on sketch • as layer

o tracing o Photoshop layer

• over dynamic media

Bill Buxton Sketching User Experiences, see pages 175-185

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 175-185

Photo of Steve Langley

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

1From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann p31

Sketch examples – design variations

1From 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