What is a sketch?

Chapter 1.2 addendumSketching User Experiences: The Workbook

Recap

Sketching is about DesignSketching is about Design

Remember the Design Funnel

Modified from Pugh, S. (1990) Total design: Integrated methods for successful products engineering. Addison-Wesley. P. 75

Iterative: General Iteration 1 Iteration 2 Iteration 3overall concepts exploratory clarification resolution

Granularity: General Course Medium Fineoverall big intermediate detailed concepts gestures development refinement

The attributes of sketches

Quick • to make

The attributes of sketches

Quick

Timely • provided when needed

The attributes of sketches

Quick

Timely

Disposable • investment in the process and

concept, not the execution• if you can’t afford to throw it

away, it’s not a sketch

The attributes of sketches

Quick

Timely

Disposable

Plentiful • they make sense in a collection

or series of ideas• meaning & relevance in context

Image source: Baskinger, M. (2008) Pencils before Pixels. ACM Interactions, March+April, page 32.

Form studies for a digital alarm clock

The attributes of sketches

Clear vocabulary • rendering & style indicates it’s a

sketch, not an implementation

Constrained resolution• no higher than required to

capture its concept

Consistency with state• refinement of rendering

matches the state of concept development

Quick

Timely

Disposable

Plentiful

Openess and freedom vs.• incomplete, room to create

Tight and precise• complete, nothing left to do

Minimal detail• Include only what is required to

render the intended purpose or concept

Appropriate Degree of Refinement

Make the sketch be as refined as the idea:

(a) If you have a solid idea, make the sketch look more defined

(b) If you have a hazy idea, the sketch will look much rougher and less defined

The attributes of sketches

Constrained resolution

Consistency with state

Suggest & explore rather than confirm

• suggests /provokes what could be

A catalyst • evokes conversations & discussion

Quick

Timely

Disposable

Plentiful

Clear vocabulary

A Sketch is not a Prototype

Difference is• a contrast of purpose (always)• a contrast in form (usually, but not always)

But• it’s a continuum

sketch prototype

From Sketches to Prototypes

• Sketches: early ideation stages of design• Prototypes: capturing /detailing the actual design

Image from Bill Buxton’s Book Sketching User Experiences (2007) Morgan Kaufmann

investment

From Sketches to Prototypes

Early design

Late design

Brainstorm different ideas and representations

Choose a representation

Rough out interface style

Multitude of sketches

Sketch variations and details

Sketch or low fidelity prototypesTask centered walkthrough and redesign

Fine tune interface, screen design

Heuristic evaluation and redesign

Usability testing and redesign

Low to medium fidelity prototypes

Limited field testing

Alpha/Beta tests

High fidelity prototypes

Working systems

excessive instruction

Sketches suggest

If you want to get the most out of a sketch…

…you need to leave big enough holes for the imagination to fit in

Microsoft clipart

You now know

Attributes of a sketch• quick , timely, disposable, plentiful, clear vocabulary,

constrained resolution, consistent with design state

A sketch is not a prototype• difference is a contrast of purpose (always), and form (mostly)

Sketch properties• evocative, suggest, explore, question, propose, provoke, t

Prototype properties• didactic, describe, refine, answer, test, resolve, specific,

depiction

Permissions

You are free:• to Share — to copy, distribute and transmit the work• to Remix — to adapt the work

Under the following conditions:•Attribution — You must attribute the work in the manner specified by the author (but not in any way that suggests that they endorse you or your use of the work) by citing:

“from presentations accompanying the book ‘Sketching User Experiences, the Workbook’, by S. Greenberg, S. Carpendale, N. Marquardt and B. Buxton”

•Noncommercial — You may not use this work for commercial purposes, except to assist one’s own teaching and training within commercial organizations.•Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.

With the understanding that:•Not all material have transferable rights — materials from other sources which are included here are cited •Waiver — Any of the above conditions can be waived if you get permission from the copyright holder.•Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status is in no way affected by the license.•Other Rights — In no way are any of the following rights affected by the license:

• Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations;• The author's moral rights;• Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy rights.

Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.