49
CMSC434 Ideation and Brainstorming Wednesday, February 1st, 2012 Instructor: Jon Froehlich TA: Kotaro Hara Intro to Human-Computer Interaction

PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Embed Size (px)

Citation preview

Page 1: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

CMSC434

Ideation and Brainstorming

Wednesday, February 1st, 2012

Instructor: Jon Froehlich

TA: Kotaro Hara

Intro to Human-Computer Interaction

Page 2: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

HallOfFame/Shame The best and worst in interface design

Post your findings to Piazza. Tag them #halloffame or

#hallofshame and explain why they deserve such

recognition

We’ll discuss some of them in class

My preference is for more modern interface issues but if

you find something from Win3.1 or Win95 that you find

particularly glaring and useful to expose, please feel free

to post!

Page 3: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why
Page 4: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

HallOfFame/Shame

Page 5: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

HallOfFame/Shame

Page 6: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Turning now towards creativity and brainstorming…

#inspiration

#creativity

Page 7: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why
Page 8: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why
Page 9: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Professor,

This class is hard for me. I’m

just not that creative….

CMSC434 Student It’s hard for everyone!

IDEO video demonstrates that creativity can

be enhanced and directed by process! It’s also a function of experience and practice

Page 10: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

The best way to have a good

idea is to have lots of ideas.

LinusPauling Two-time Nobel Prize Winner

Page 11: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

MicrosoftMouse

Prototypes From Moggridge, Designing Interactions, Chapter 2.

Page 12: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Design Through a Computer Science Metaphor

Page 13: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

HillClimbing

Problem: algorithm can get stuck at a local maxima

Page 14: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

SimulatedAnnealing

Simulated Annealing can escape local minima with chaotic jumps.

Page 15: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Lo-fidelity prototyping and testing

Page 16: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

AnExperiment Design an egg drop vessel

[Dow, 2011]

Page 17: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

[Buxton, Sketching User Experiences]

Page 18: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

#inspiration

Page 19: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

The Single Lane Superhighway

[http://mrdoob.com/]

Page 20: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

[http://youtu.be/ne6tB2KiZuk]

BobbyMcFerrin Live crowdsourcing music, revealing social and cultural norms

Page 21: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Shut your laptops. Do not use your

phones or any other electronic devices.

Page 22: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

[Maier, 1930]

Connect all 9 dots with 4 lines

Page 23: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

[Maier, 1930]

Connect all 9 dots with 4 lines

Page 24: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Switch 1 Switch 2 Switch 3

Only one of the three switches

turns on the light upstairs.

You can only make one trip

upstairs.

You can only flip one switch at a

time.

You cannot see the second floor

light (or any ambient light) from

the first floor.

It’s a windowless building.

You have a flashlight.

There are two staircases.

How can you determine which of the three switches

turns on the second floor light?

incandescent

lightbulb

Scenario & Rules

Page 25: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

CandleProblem

[Duncker, 1945]

Who has seen this

problem before?

How to fix a lit candle on a wall in a way so the candle wax won't drip onto the table

below. To do so, one may only use a book of matches and a box of thumbtacks

Page 26: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Now, we’re going to break-up into groups.

Page 27: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

CandleProblem

[Duncker, 1945]

Page 28: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

CandleProblem

[Duncker, 1945]

Page 29: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

FunctionalFixedness

[Duncker, 1945]

Functional fixedness is a cognitive bias that limits a person to using

an object only in the way it is traditionally used

A “mental block against using

an object in a new way that is

required to solve a problem”

Page 30: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

FunctionalFixedness

[Adamson, 1952]

Group 1:

Preutilization Boxes presented as a

container with

materials inside them

Group 2:

No Preutilization Boxes were presented

empty

Page 31: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

BrickHouse

[Guilford, 1967]

Generate as many uses as you can for this brick.

Page 32: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

BrickHouse

[Guilford, 1967]

Generate as many uses as you can for this brick.

Two Minutes! Go!

Page 33: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

BrickHouse

[Guilford, 1967]

Let’s taxonomize!

How many of categories of use did you generate?

Page 34: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

IdeoVideo Keys to success?

Page 35: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

FinalDesign

Page 36: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

“Try stuff and ask forgiveness rather

than asking permission is the way

that people come up with new

ideas.”

DavidKelley Founder and Chairman of IDEO

BeDaring

Page 37: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

“Being playful is of huge importance

in being innovative. If you go into a

culture, and there’s a bunch of stiffs

going around, they are not likely to

invent anything.”

DavidKelley Founder and Chairman of IDEO

Playfulness

Page 38: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

NeedFinding Guiding the creative design process through contextual inquiry

Page 39: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Space/Thought

Stanford d.school

Page 40: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

“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

Page 41: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why
Page 42: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

“In a very innovative culture, you

can’t have a hierarchy of here’s the

boss and the next person down, and

the next person down, and the next

person down”

DavidKelley Founder and Chairman of IDEO

OrganizationalHierarchy

Page 43: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

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

[Kelley, The Art of Innovation]

Page 44: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

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]

Page 45: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

ProjectBrainstorm Individual Assignment

Due Sunday, February 5, 11:59PM

1. Brainstorm social problem domains

2. Brainstorm potential project ideas

3. Select two ideas from brainstorm

4. Write-up small project “elevator

pitch” for those two ideas. This pitch

should be no longer than two

paragraphs.

Domains

Hunger Global warming Car accidents Cancer Disease (e.g., AIDS) Food allergies Genocide Torture Access to clean water Literacy Education Obesity Addiction Homelessness Pollution

Page 46: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

InClassBrainstorm

If you cannot make it to class

on February 8th, please let me

know immediately.

Week 3, Class 5, Wednesday, February 8th

Page 47: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

events

Information Visualization for Medical Informatics Professor Ben Shneiderman Wednesday, February 1st, 4PM 1146 A.V. Williams Building

Quantified Self Meetup @ HacDC Headquarters Wednesday, February 1st, 7PM 1525 Newton St NW, Washington, DC http://www.meetup.com/DC-Quantified-Self/

HCIL Brown Bag Seminar Talk Thursday, February 2nd, 12-1PM HCIL: Hornbake Library, South, 2nd Floor http://hcil.cs.umd.edu

Page 48: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Backup Slides

Page 49: PowerPoint Presentation - cs.umd.edu fileHallOfFame/Shame The best and worst in interface design Post your findings to Piazza. Tag them #halloffame or #hallofshame and explain why

Let’s go shopping!

CartRedesign Start from existing shopping cart or

IDEO’s re-envisioned shopping cart

Groups of 4

10 Minutes for brainstorm

10 Minutes for presentation