CMSC434

Sketching

Tuesday, March 5, 2013

Instructor: Jon Froehlich

TA: Matthew Mauriello

Intro to Human-Computer Interaction

Hall of Fame Hall of Shame

Tesco: Homeplus Subway Virtual Store, http://youtu.be/nJVoYsBym88, submitted by Elissa Redmiles

Mor Naaman HCIL 30th Anniversary Talk

2119 Hornbake Building, S Wing

Time: Today @ 2PM

Final project proposal presentation

A Mobile App for Smarter, Easier Grocery

Shopping

grocer[E]z

Brandon Whitehead, Alex Brand, Aaron Eppinger, Britney Luckey

• People tend to spend more money at the grocery store

when they go without a pre-determined grocery list.

• Making a well rounded grocery list is extremely difficult to

do, and making sure you have everything to make

specific meals is even harder.

• Keeping track of your expenses through receipts is a

hectic and time consuming task.

Motivation

Problems

• Grocery stores can be overwhelming, without a list

people end up buying things they don’t necessarily need.

• Creating a list from scratch is time consuming and it is

often difficult to think of everything you might need to

make a complete meal.

• Grocery stores are setup in order to draw customers into

buying more expensive items.

• Retailers and packaged-food companies use promotions

to train shoppers to look for “great deals” rather than

items they needed, leading to impulse purchases [1].

Problems

• Creating a well rounded grocery list is also very difficult.

• It is often hard for people to think of new and healthy

foods, instead we end up buying things we have had

before and get stuck buying the same items over and

over.

• Without an organized and easy to

follow list, it is easy to feel lost

and return home with bags full

of random food items.

Past Solutions

Generic solutions

Issues with Generic Shopping Apps

• Non detailed product

names

• Missing Prices

• Lack of Nutritional

Information

Store Sponsored Apps

Issues with Store Sponsored Apps

Harris Teeter and Shoppers

• You can't browse

• Lacks prices

Target

• Incomplete nutritional information

Peapod

• Can only have one list

grocer[E]z

Past Solutions

• Solved a specific issue

Our Solution

• Solve the grocery shopping experience

Those who are:

• Organized or Bargain Hunters

Or have certain:

• Health Concerns or Lifestyle Choices

Target Users

• Streamlined

• Automatic list rearrangement

• Quick and easy sharing

• Discount & Inventory Awareness

• Assistance with goals

• Budgeting & History

Benefits

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

Sketching can capture ineffable ideas.

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

“I directed Jaws, Close

Encounters of the Third Kind,

and E.T.”

StevenSpielberg Movie Director Extraordinaire

WhoAmI?

StevenSpielbergStoryboarding

Steven Spielberg , On sketching, http://youtu.be/nBH89Y0Xj7c

[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]

PaperPrototyping

[http://bit.ly/zCn9is]

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

Pixar, Monsters, Inc., Progression Reel, http://youtu.be/9W6mArB7Ps8

What did you notice?

Pixar, Monsters, Inc., Progression Reel, http://youtu.be/9W6mArB7Ps8

What did you notice?

Pixar, Monsters, Inc., Progression Reel, http://youtu.be/9W6mArB7Ps8

What did you notice?

Pixar, Monsters, Inc., Progression Reel, http://youtu.be/9W6mArB7Ps8

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.

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

Storyboarding

Pixar, Toy Story, Storyboarding, http://youtu.be/QOeaC8kcxH0

The storyboard is a designed artifact useful for…

The storyboard is a designed artifact useful for…

Thinking about the continuation from one step to another

Communicating your design ideas to others

Receiving feedback and critique