CMSC434
Sketching, Storyboarding, Critique
Wednesday, February 1st, 2012
Instructor: Jon Froehlich
TA: Kotaro Hara
Intro to Human-Computer Interaction
Who
I’m a teacher. I use Piazza. I don’t have a lot of experience with
computers.
Scenario
I want to post a new assignment for my students, which
involves writing a short textual description and attaching a file.
In-Class Activity
Create a simple UI to help me with this task. The UI must
support posting a question title, body, and attaching a file.
InClassActivity
HallOfFame/Shame
HallOfFame/Shame
HallOfFame/Shame
HallOfFame/Shame
HallOfFame/Shame
HallOfFame/Shame
Wrapping up some loose ends from last lecture.
Space/Thought
Stanford d.school
“The point is that we’re not actually
experts in any given area. We’re
experts in the process of how you
design stuff. We don’t care if you
give us a toothbrush, a tractor, a
space shuttle, or a chair.”
DavidKelley Founder and Chairman of IDEO
DesignProcess
IDEOBrainstormingRules 1. Be visual
2. Defer judgment
3. Encourage wild ideas
4. Build on the ideas of others
5. Go for quantity
6. One conversation at a time
7. Stay focused on the topic
[http://www.openideo.com/fieldnotes/openideo-team-notes/seven-tips-on-better-brainstorming]
IDEOBrainstormingSecrets 1. Sharpen the focus
2. Playful rules
3. Number your ideas
4. Build and jump
5. The space remembers
6. Stretch your mental muscle
7. Get physical
[Kelley, The Art of Innovation]
IDEOBrainstormingKillers 1. The boss keeps to speak first
2. Everybody gets a turn
3. Experts only please
4. Do it “off-site”
5. No silly stuff
6. Writing down everything
[Kelley, The Art of Innovation]
Sketching!
WhySketch?
[Greenberg, Sketching User Experiences: The Workbook]
WhySketch?
[Greenberg, Sketching User Experiences: The Workbook]
o Think more openly / creatively about your ideas
o Create abundant ideas w.out worrying about quality
o Invent/explore concepts by recording ideas quickly
o Record ideas that you come across
o Discuss, critique, and share ideas with others
o Choose ideas worth pursuing
o Archive ideas for later reflection
o Have fun creating while designing
o Not heavily invested in any one idea
TaccolaNotebook
DaVinciNotebook
DaVinciNotebook
[Greenberg, Sketching User Experiences: The Workbook]
SketchingIsAboutDesign
“Sketching is not about drawing.
Rather, it is about design. Sketching
is a fundamental tool to help
designers express, develop, and
communication ideas”
SaulGreenberg HCI Professor at U. of Calgary
[Greenberg, Sketching User Experiences: The Workbook]
SketchingIsAboutDesign
Idea
Generation
Design
Elaboration
Design
Reduction Engineering
Sketching is a critical part of the design process:
SketchExercise
[Greenberg, Sketching User Experiences: The Workbook]
10Plus10Method State your problem
Generate/sketch 10 or more concepts that address
the problem
Reduce the number of design concepts
Choose most promising design concept
Produce 10 variations of this design
Present your ideas and get feedback
As your ideas change, sketch them out
1
2
3
4
5
6
7
[Elaboration and Reduction, Laseau, 1980; Chart: Buxton, Sketching User Experiences]
Elaboration&Reduction
SketchBook
From B.Buxton, Sketching User Experiences
[Buxton, Sketching User Experiences]
From B.Buxton, Sketching User Experiences
[Buxton, Sketching User Experiences]
[Buxton, Sketching User Experiences]
[Buxton, Sketching User Experiences]
o Sketching is important to interaction design
o Sketching improves with practice
o There are a range of techniques and
technologies that can be used for sketching
o Rauschenberg Effect: limiting factor is
imagination, not technology or technique
“The main drawback of conventional sketching
has to do with its limitations in capturing time,
dynamics, phrasing—the temporal things that
lie at the heart of experience.”
RauschenbergEffect
ManualPhotocopy
[Buxton, Sketching User Experiences]
PhoneGraffiti
[Buxton, Sketching User Experiences]
PhotoGraphicComposition
[Buxton, Sketching User Experiences]
Tracing combined with a drawing can enable a well-crafted
photograph to serve as a sketch.
UseOfAnnotation
MaterialsOfSketch
SketchingFidelity
SketchingFidelity
How do we sketch behaviors?
ImageSequence
[Buxton, Sketching User Experiences]
ImageSequence
[Buxton, Sketching User Experiences]
The sequence of images sketches out a potential design for
interacting with a mobile calendar agenda application.
“I directed Jaws, Close
Encounters of the Third Kind,
and E.T.”
StevenSpielberg Movie Director Extraordinaire
WhoAmI?
StevenSpielbergStoryboarding
[http://youtu.be/nBH89Y0Xj7c]
[Buxton, Sketching User Experiences]
[Buxton, Sketching User Experiences]
FidelitiesOfDesign
SketchExercise
[Greenberg, Sketching User Experiences: The Workbook]
DesignExercise Challenge
We want to enable easily sharing information amongst co-located
mobile devices. Most current solutions rely on dialog boxes, cryptic
requests, etc. that inhibit local sharing.
Generate at least 10 competing (very different) design concepts.
Assumptions
Your mobile device detects all phones in a nearby range
You and the person can perform some action such that both phones
recognize this as a “handshake” affirming that a full connection can be
established
Timing
You have 10 minutes.
SketchExercise
[Greenberg, Sketching User Experiences: The Workbook]
2
SketchExercise
DesignExercisePart2 Direction
Present and get feedback about your various designs.
Select one of your design concepts
Storyboard a 3-4 panel design that depicts the usage of this design
Timing
You have 10 minutes.
HomeworkForWednesday Piazza response to Tom Kelley Art of Innovation
Read and rank 25-30 project proposals
On Wednesday, we will assign groups and
participate in a class-long brainstorm about your
project in your new team!
1
2
3