Revision of Ideas
• Revise design, develop requirements, sketch UI.
Today lecture on sketching.
• Draw wireframes, build paper prototypes. On Friday
lecture on paper prototyping.
• Prepare and conduct a formative usability test. The
following groups can be test users for each other:
group 1 and 12; 2 and 11; 3 and 10; 4 and 9; 5 and
8; and 6 and 7. Study class November 19.
• Analyze test results and discuss consequences for
design.
• Supervision in week 47: Checkpoint for UI sketching,
paper prototypes and formative usability test.
UI Sketching
from presentations accompanying the
book ‘Sketching User Experiences, the
Workbook’, by S. Greenberg, S.
Carpendale, N. Marquardt and B.
Buxton
http://sketchbook.cpsc.ucalgary.ca
Sketching is not about drawing
It is about design.
Sketching is a tool to help you:
o express
o develop, and
o communicate design ideas
Sketching is part of a process:
o
o
o
o
idea generation,
design elaboration
design choices,
engineering
Sketching User Experiences: The Workbook
Why Sketch?
• Create
o
o
o
o
o
o
early ideation
think openly about ideas
think through ideas
force you to visualize how things come together
brainstorming: generate abundant ideas without worrying about quality
invent and explore concepts
• Record
o ideas you develop
o ideas that you come across
o archive ideas for later reflection
• Reflect, share, critique, decide
o communicate ideas to others
o invite responses, criticisms, and alternatives;
o choose ideas worth pursuing
Sketching User Experiences: The Workbook
Exploring an idea
Getting the Design Right
The Problem
fixates on first idea
local hill climbing issue
did you reach local vs. global maxima?
Sketching User Experiences: The Workbook
Exploring alternatives
Getting the Right Design
•
•
•
•
•
•
generate many ideas and variations
reflect on all ideas
choose the ones that look most promisting
develop them in parallel
add new ideas as they come up
then iterate your final choice
Sketching User Experiences: The Workbook
Elaboration and Reduction
• Elaborate - generate solutions. These are the opportunities
• Reduce
- decide on the ones worth pursuing
• Repeat
- elaborate and reduce again on those solutions
Elaboration
Reduction
opportunity seeking
decision-making
Design process
Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons
Sketching User Experiences: The Workbook
Elaboration and Reduction
Design is choice.
There are two places where there is room
for creativity
1.
creativity you bring to enumerating meaningfully distinct options
from which to choose
2.
creativity you bring to defining the criteria, or heuristics,
according to which you make your choices.
Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons
Sketching User Experiences: The Workbook
What is a sketch?
Chapter 1.2 addendum
Sketching User Experiences: The Workbook
Sketching User Experiences: The Workbook
The attributes of sketches
Quick
• to make
Sketching User Experiences: The Workbook
The attributes of sketches
Quick
Timely
• provided when needed
Sketching User Experiences: The Workbook
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
Sketching User Experiences: The Workbook
The attributes of sketches
Quick
Timely
Disposable
Plentiful
• they make sense in a collection
or series of ideas
• meaning & relevance in context
Form studies for a digital alarm clock
Image source: Baskinger, M. (2008) Pencils before Pixels.
ACM Interactions, March+April,
page 32.
Sketching
User Experiences: The Workbook
The attributes of sketches
Quick
Timely
Disposable
Plentiful
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
Sketching User Experiences: The Workbook
Openess and freedom vs.
Tight and precise
• incomplete, room to create
• complete, nothing left to do
Sketching User Experiences: The Workbook
Minimal detail
•
Include only what is required to
render the intended purpose or
concept
Sketching User Experiences: The Workbook
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
Sketching User Experiences: The Workbook
The attributes of sketches
Quick
Constrained resolution
Timely
Consistency with state
Disposable
Suggest & explore rather
than confirm
Plentiful
• suggests /provokes what could be
A catalyst
Clear vocabulary
• evokes conversations & discussion
Sketching User Experiences: The Workbook
From Sketches to Prototypes
• Sketches: early ideation stages of design
• Prototypes: capturing /detailing the actual design
investment
Image from Bill Buxton’s Book Sketching User Experiences (2007) MorganSketching
KaufmannUser Experiences: The Workbook
From Sketches to Prototypes
Early design
Brainstorm different ideas and
representations
Choose a representation
Rough out interface style
Task centered walkthrough and
redesign
Multitude of sketches
Sketch variations and details
Sketch or low fidelity prototypes
Low to medium fidelity prototypes
Fine tune interface, screen design
Heuristic evaluation and redesign
Usability testing and redesign
High fidelity prototypes
Limited field testing
Alpha/Beta tests
Working systems
Late design
Sketching User Experiences: The Workbook
excessive instruction
Sketching User Experiences: The Workbook
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
The Sketchbook
Chapter 1.4 in Sketching User Experiences: The Workbook
Sketching User Experiences: The Workbook
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 photos
Sketching User Experiences: The Workbook
Best practices
Carry and use your sketchbook regularly and frequently
• sketch anywhere, anytime, frequently
• only works if you carry it with you
Sketching User Experiences: The Workbook
Best practices
Fill your pages
• a single well composed idea
• a series of related drawings about a design idea
• things you see that inspire ideas
Sketching User Experiences: The Workbook
Best practices
Sketch alternatives (getting the right design)
• different aspects of the interface
• different interface representations
• different contexts of use…
Sketch details (getting the design right)
• detailed sketches that elaborate on interface nuances…
Annotate drawings
• descriptions that you cannot draw, textual addendums, sources of ideas,
date, any other relevant details…
Don’t erase ideas
• it’s a record of all developing ideas, good and bad
Don’t use it for other things
• for design only
Sketching User Experiences: The Workbook
You don’t need to be an artist
portion of a page from Saul Greenberg’s sketchbook
Sketching User Experiences: The Workbook
Sketchbook examples
Artist
• ideas
• variations
artist's sketch page by Emily R. Feingold
Sketching User Experiences: The Workbook
Sketchbook examples
Artist
• variations
• studies
Sketching User Experiences: The Workbook
artist's sketch page http://www.fmhs.cnyric.org/art/StudioFoundation/Sketchbook/sketchbook.html
Sketchbook examples
Industrial designer
• ideas
• variations
• annotations
Form factors for wearable computer watch
Source: sketch page from student Industrial designer Samnang Eav
Sketching User Experiences: The Workbook
Sketchbook examples
Idea variations
Four different versions of an idea
Source: Nicolai Marquardt sketchbook, with permission.
Sketching User Experiences: The Workbook
Sketch examples – design variations
From Carloyn Snyder’s Book: Paper Prototyping (2003) Morgan Kaufmann, p350
Sketching User Experiences: The Workbook
Sketchbook examples
Computer science student Andrew Seniuk – a metaprogramming environment (with permission)
many ideas +
variations
Sketching User Experiences: The Workbook
Sketchbook examples
Overviews
• flow over time
• relationships
Arrows indicate relationships and flow
Source: Nicolai Marquardt sketchbook, with permission.
Sketching User Experiences: The Workbook
Sketch examples – storyboards
Overviews
• flow over time
• relationships
Storyboard
Source: Nicolai Marquardt sketchbook, with permission.
Sketching User Experiences: The Workbook
Sketch examples – storyboard transitions
From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p11
Sketching User Experiences: The Workbook
Sketchbook examples
Scenarios
• stories of envisaged
uses
Five envisaged scenarios of a technology in action
Source: Nicolai Marquardt sketchbook, with permission
Sketching User Experiences: The Workbook
Sketchbook examples
Collecting
• materials related to
an idea
Information visualization techniques – from magazines
Source: Nicolai Marquardt sketchbook, with permission
Sketching User Experiences: The Workbook
Sketchbook examples
crude
drawings
annotations
portion of a page from Saul Greenberg’s sketchbook
Sketching User Experiences: The Workbook
Sketch examples – screen snapshot
From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann p31Sketching User Experiences: The Workbook
Sketchbook examples – details to prototype
Concept:
• IM contacts as
bugs on a leaf
McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows® Instant Messenger.
Western Computer Graphics Symposium (Skigraph’02), MarchD
Sketching User Experiences: The Workbook
Sketchbook examples – details to prototype
Design sketches
McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows® Instant Messenger.
Western Computer Graphics Symposium (Skigraph’02), MarchD
Sketching User Experiences: The Workbook
Sketchbook examples – details to prototype
Physical icons
• clay, glass
• also a sketch!
McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows® Instant Messenger.
Western Computer Graphics Symposium (Skigraph’02), MarchD
Sketching User Experiences: The Workbook
Sketchbook examples – details to prototype
Prototype
• Papier mache
• also a sketch!
• see video [.wmv]
McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows® Instant Messenger.
Western Computer Graphics Symposium (Skigraph’02), MarchD
Sketching User Experiences: The Workbook
You now know
Sketchbooks are:
• a designer’s most fundamental tool
• convenient (pages, size, fold over), durable archive, aesthetic
Sketchbooks are for:
• brainstorming, exploring, refining varying, archiving, reflecting, communicating and
choosing ideas
• recording good ideas you see elsewhere
Sketchbook instruments are:
• pencil
• optional eraser, sharpener, glue, tape, scissors, camera, and other media
Sketchbooks can be filled with:
• Your sketches (many different kinds) and found objects
Sketchbooks are used regularly
• sketch anywhere, anytime
Sketching User Experiences: The Workbook
Scribble Sketching
Chapter 2.1 in Sketching User Experiences: The Workbook
Sketching User Experiences: The Workbook
Ideas can occur any time
•
•
•
•
•
•
reflection while walking inspires different solution
conversation sparks a thought
a sci-fi movie depicts something interesting
an interaction element in something you are using
wake up from a dream
eureka moment
Image from
http://skyvington.blogspot.ca/2010/11/eureka.html
Sketching User Experiences: The Workbook
How do you capture that idea?
Scribble sketching
• Sampling the real world by rapidly sketching out
ideas to capture the essence of the idea
How
•
•
•
•
draw very quickly (few seconds)
very low fidelity
focus and emphasis on idea essence
sacrifice all other details
Sketching User Experiences: The Workbook
Try it
I will show you an image
15 seconds: choose a single idea or concept from
that image to capture
30 seconds: scribble-sketch it
Sketching User Experiences: The Workbook
Sketching User Experiences: The Workbook
Sketching User Experiences: The Workbook
Example results
Emphasis: layout
Details: highlight structures of panes, key buttons & fields
Abstracted: icons/labels/ text as caricature scribbles
Left out: decorations, actual text, lesser interface controls
Sketching User Experiences: The Workbook
Sketching User Experiences: The Workbook
Example results
Emphasis: folder navigation
Details: annotated interaction methods in the navigation bar
Abstracted: icons/labels/ text as caricature scribbles
Left out: decorations, actual text, lesser interface controls
Sketching User Experiences: The Workbook
Design Rationale
•
•
•
•
•
? Issue (What, Why, How)
# Option
+ Pro
- Contra
! Decision
Sketching User Experiences: The Workbook
Sketching in the dark
So you can do it even when not looking
•
movie theatre, meetings…
Example: While watching Avatar: transparent displays for communication
Photo from the movie Avatar,
20th Century Fox
Sketching User Experiences: The Workbook
You now know
Scribble sketches
•
•
•
•
are done very rapidly (few seconds)
serve to capture critical ideas on the fly
sacrifice detail and fidelity to speed
Can even be done without looking
Sketching User Experiences: The Workbook
The Vanilla Sketch
Captures and explains a moment in
interaction time
Comprises several basic elements
Sketching User Experiences: The Workbook
Drawings – vary in fidelity & detail
Sketching User Experiences: The Workbook
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Help
Sketching User Experiences: The Workbook
Annotations
Sketching User Experiences: The Workbook
Annotations
Names labels, explanatory notes
• location identifies sketch parts they refer to
Example
• proximity to area
• braces for large areas
• arrow to specific area
Sketching User Experiences: The Workbook
Arrows as Annotations
Can also
•
•
•
•
•
emphasise area of interest
relate different parts of a sketch
indicate direction
show movement
indicate a sequence of events (interaction flow)
Sketching User Experiences: The Workbook
Arrows example
• direction and movement
• interaction flow across sketches
Sketching
User Here.
Experiences: The
Image from: Mijksenaar and Westendorp,
Open
Workbook
Annotations and Arrows example
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 64, p 174
Sketching User Experiences: The Workbook
Annotations and Arrows example
portion of a page from Saul Greenberg’s sketchbook
Sketching User Experiences: The Workbook
Annotations and Arrows example
Sketching
User Experiences: The
buddy bugs - sketches and final prototype, by former 581 student Susannah
McPhail
Workbook
Notes
Text where spatial location is not important
Sketching User Experiences: The Workbook
Notes
ideas about design elements
left out of the drawing
alternate design options of
sketch elements
design
issues
Sketching User Experiences: The Workbook
Notes
• ideas about design elements left out of the
drawing
• outstanding questions
• assumptions
• context of use…
• ?, #, +, -, !
Can be
• words, lists, paragraphs, sentence fragments…
Sketching User Experiences: The Workbook
Annotations, Notes, etc
Can be drawn
• directly on sketch
• as a layer
o tracing paper
o digital layer
Image from http://www.shop.casaleganitos.com/silkscreens/architecture-drawings/
Sketching User Experiences: The Workbook
You now know
Sketches capture a moment in interaction
time
They are more than just drawings
• textual annotations are spatially relevant
• arrows have illustrative power
• textual notes are stand-alone
Sketching User Experiences: The Workbook
As a single sketch
Sketching User Experiences: The Workbook
The Branching Storyboard
• Chapter 4.3 in Sketching the User
Interface: The Workbook
Image from:
Storyboards will Contain Branches
• Multiple transitions from a state
• Result of
• user actions
• environmental actions
• system configuration…
Image from: Anderson et. Al. Buttress. Usenix Fast ‘04
Sketching User Experiences: The Workbook
The Abstract Branching Diagram
Sketching User Experiences: The Workbook
Visual Interface Branching Diagram
Sketching User Experiences: The Workbook
Visual Interface Branching Diagram
• By interface hot spots…
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Help
Computer Telephone
Help
You can enter either the
person's
name or their
Last Name:
number.
Then hit the
First Name:
place
button
to call them
Phone:
Place Call
Return
Help
Computer Telephone
Computer Telephone
Last Name: Greenberg
First Name:
Phone:
Dialling....
Last
Name: Greenberg
First Name:
Cancel
Phone:
Place Call
Place Call
Help
Help
Sketching User Experiences: The Workbook
Indexed Branching Diagram
Sketching User Experiences: The Workbook
Indexed Branching Diagram
Sketching User Experiences: The Workbook
Interacting with a PDA-based Agenda
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
Interacting with a PDA-based Agenda
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
Interacting with a PDA-based Agenda
The Overview map
(where are we?)
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
Interacting with a PDA-based Agenda
Looking at the agenda and
seeing that there is a 10am
meeting with someone
named Mary Ford
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
Check to see what the
meeting is about
Click on that time slot
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
Choosing how to
contact Mary
Click on Mary’s name
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
Sending Mary a text
message concering
the ‘Tour’ which is the
topic of the meeting
Select Message from menu
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
Select Message
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284
Sketching User Experiences: The Workbook
1From
Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p11
Sketching User Experiences: The Workbook
You Now Know
• Branching storyboards
• multiple transitions from a state
• illustrate decision paths
• manage complexity
• can be decomposed to sequential
storyboards or simple branching
storyboards
Sketching User Experiences: The Workbook
Sketching Vocabulary
•Chapter 3.4 in Sketching User
Experiences: The Workbook
Drawing objects, people, and
their activities
Basic sketch elements
• Lines, rectangles, and circles will be essential
visual elements for many of you sketches
• Become familiar with this variety of shapes
(play with line thickness and hatching styles)
Sketching User Experiences: The Workbook
Composing objects
Combine basic sketch elements to compose a
variety of shapes and objects
Sketching User Experiences: The Workbook
Sketching vocabulary: best practices
• Simplicity is key: try to simplify sketched
objects to the minimum necessary detail
• Icons can be a good source of inspiration
for simple shapes representing objects
• 3D is not necessary (most of the time)
• Sketch with fast, long strokes
Sketching User Experiences: The Workbook
Sketching User Experiences: The Workbook
Drawing people
• Sketches of interactive systems often
include people
• Many possible techniques for drawing a
person:
Sketching User Experiences: The Workbook
Drawing people
Comic-like sketches can also represent people
Sketching User Experiences: The Workbook
Activities
By varying people’s poses you can express a
variety of activities
Action lines can emphasize a person’s movements
Sketching User Experiences: The Workbook
Bodies and emotions
• Postures can express the emotional state of a person.
• Symbols next to the person can emphasize this effect
Sketching User Experiences: The Workbook
Faces and emotions
Express people’s emotions through simple
variations of how you draw a face
Sketching User Experiences: The Workbook
Faces and emotions
Express people’s emotions through simple
variations of how you draw a face
Sketching User Experiences: The Workbook
Faces and emotions
Express people’s emotions through simple
variations of how you draw a face
Sketching User Experiences: The Workbook
Combining postures + faces
Sketching User Experiences: The Workbook
Combining sketched elements
Combine the postures of people, facial
expressions, and other sketched elements to
illustrate specific situations and actions.
Sketching User Experiences: The Workbook
You now know
• Sketching vocabularies are your basic
toolset for sketching
• Simplicity is key
• People’s postures and emotions can be
expressed through simple line sketches
• Learning a basic sketching vocabulary
lets you sketch more efficiently
•
Sketching User Experiences: The Workbook
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.
Sketching User Experiences: The Workbook