PowerPoint Presentation · o Think more openly / creatively about your ideas o Create abundant...

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