cmsc434 week 01 | lecture 01 | sept 02, 2014 design ... › class › fall2014 › cmsc434-0101 ›...

Human Computer Interaction Laboratory

@jonfroehlich Assistant Professor Computer Science

CMSC434 Introduction to Human-Computer Interaction

Week 01 | Lecture 01 | Sept 02, 2014

Design Activity, Intro to HCI, Intro to Class

Remixed from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

GOAL: Build the tallest freestanding structure. The winning team is the one with the tallest structure measured from the table top surface to the top of the marshmallow.

Remixed from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

RULES: 1. The structure cannot be suspended from a higher structure, like a chair,

ceiling, light

2. The structure cannot be taped to the desk/table.

3. The entire marshmallow must be on top—cutting/eating part of the marshmallow is not allowed

4. Use as much or as little of the kit; however, you cannot use the paper bag as part of your structure

5. You can break up the spaghetti, string, or tape in anyway you want.

6. The challenge lasts 18 minutes. You cannot hold/touch the structure after time runs out. You cannot open the bag until the timer starts.

GOAL: Build the tallest freestanding structure. The winning team is the one with the tallest structure measured from the table top surface to the top of the marshmallow.

Remixed from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

RULES: 1. The structure cannot be suspended from a higher structure, like a chair,

ceiling, light

2. The structure cannot be taped to the desk/table.

3. The entire marshmallow must be on top—cutting/eating part of the marshmallow is not allowed

4. Use as much or as little of the kit; however, you cannot use the paper bag as part of your structure

5. You can break up the spaghetti, string, or tape in anyway you want.

6. The challenge lasts 18 minutes. You cannot hold/touch the structure after time runs out. You cannot open the bag until the timer starts.

GOAL: Build the tallest freestanding structure. The winning team is the one with the tallest structure measured from the table top surface to the top of the marshmallow.

Remixed from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

1. TEAM: LUKA – 26.25

2. TEAM: HALLEY – 25

3. TEAM VICTOR – 37.5

4. TEAM IZZY – 15

5. TEAM PETE – 0

6. TEAM ALEX – 0

7. TEAM JASON – 19.5

8. TEAM JAKE – 27.25

9. TEAM ERICA – 22.5

10. TEAM ANDREW – 19.5

11. TEAM SAM – 22

12. TEAM EILEEN - -2

TEAM MEASUREMENTS:

*Red teams had previous Marshmallow challenge experience

Remixed from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

DEBRIEF:

1. How did you approach the task? What was your building process?

2. How did you collaborate and work together?

3. What is the key to a tall structure? Why?

4. What do you think are shared attributes between the most successful teams?

MY THOUGHTS

To me, this task represents a microcosm for the entire semester. This

course is fundamentally about design, which requires creativity,

iteration, and collaboration.

It’s also about working with and within constraints—be it time, money,

or resources. You cannot escape constraints in life or work.

Slide from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

PETER SKILLMAN’S TAKEAWAYS

You learn by doing

Work in parallel

On being first to market

Multiple iterations

All projects have resource

constraints

Peter Skillman, Original Marshmallow Challenge Talk TED, 2006, http://youtu.be/1p5sBzMtB3Q

Learning from the mistakes of others* is

the best way to launch an idea.

* or yourself

Multiple iterations almost always beats

the single-minded commitment to building

your first idea

Slide from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

Video from http://marshmallowchallenge.com/Welcome.html

Slide from http://marshmallowchallenge.com/Instructions_files/TED2010_Tom_Wujec_Marshmallow_Challenge_Web_Version.pdf

Video from http://marshmallowchallenge.com/Welcome.html

COURSE SCHEDULE

Generated with the online Gantt chart tool from smartsheet.com

! WARNING

HIGH

WORKLOAD

AHEAD

! WARNING “This class is certainly a fun, interesting course to take .. it

will keep you quite busy and you can easily fall behind if

you don't stay on top of your workload.” -CMSC434 Student

“Course was actually intensive in terms of workload, but

we learned more…” -CMSC434 Student

“Overall, the course was a lot of work (as you warned us

in the beginning of the semester), but I learned a lot.

One of the best CS courses I've taken at UMD.” -CMSC434 Student

! WARNING “This class is certainly a fun, interesting course to take .. it

will keep you quite busy and you can easily fall behind if

you don't stay on top of your workload.” -CMSC434 Student

“Course was actually intensive in terms of workload, but

we learned more…” -CMSC434 Student

“Overall, the course was a lot of work (as you warned us

in the beginning of the semester), but I learned a lot.

One of the best CS courses I've taken at UMD.” -CMSC434 Student

ACHIEVEMENT UNLOCKED CMSC434 Metacomment

Workload was appropriate.

- CMSC434 Student

Really appreciated the process of learning how to

brainstorm, sketch, plan, and build. Will be useful in

many future endeavors…

- CMSC434 Student

I would have prefer a programming unit in this class

to show us how we can use today's technologies to

connect to what he said in class.

- CMSC434 Student

ASSIGNMENTS & ASSESSMENT 70% of your grade is based on your performance on assignments

ASSIGNMENTS & ASSESSMENT 70% of your grade is based on your performance on assignments

THE LECTURES

“The professor tries very hard to make the classroom into

a friendly, interactive community where every student is

engaged in learning from the material, the professor, and

each other; and I think he has overwhelmingly

succeeded.”

-CMSC434 Student

ASSIGNMENTS & ASSESSMENT 70% of your grade is based on your performance on assignments

ASSIGNMENTS & ASSESSMENT 70% of your grade is based on your performance on assignments

ASSIGNMENTS & ASSESSMENT 70% of your grade is based on your performance on assignments

ASSIGNMENTS & ASSESSMENT 70% of your grade is based on your performance on assignments

Project Overview Goal: Apply and integrate user-centered concepts learned in this class along with your

other (current and prior) computer science education.

Secondary Goal: Work on real problems! Intense end-to-end design.

Focus: Mobile Applications With Sensor Integration

1. You pitch project ideas

2. We will sketch, prototype, test, and iterate.

3. You have to implement the final prototype in code.

Teams: Divided up based on skills and interest. If you have a significantly good

practical reason for working with someone, let me know.

You must be committed to working with your team throughout the semester.

Design

Build

Evaluate

Human-Centered Design

Iterative Design

TA04: SKETCHES, STORYBOARDS, & CRITIQUES

TA05: PAPER PROTOTYPING AND USER TESTING

TA06: MID-FI PROTOTYPES & CRITIQUES

TA07: FINAL INTERACTIVE PROTOTYPE

TA09: FINAL VIDEO

Source: Anand Agrawala, University of Calgary, http://youtu.be/_66uD0AKiJc

Icon from http://thenounproject.com/term/trophy/412/

The class will vote on the best interactive

prototype as well as best final video. The

winning team will get an award.

Group Project

FEEDBACK

Design Critiques

CMSC434 Design Critique

I think it'd be good to have a say in what group you'll be in, after indicating your initial topic preferences. I got stuck in a group that is pretty apathetic, and it's come through the most with our final project. I've coded 98% of it, and I can't do anything about it, because we set a mutually agreed schedule for adding code. There's only so many times I can keep asking for contribution when the group members don't care.

DESIGN CRITIQUES / PEER REVIEW

Really liked how we reviewed the class' works and that you

guys actually handed us these peer reviews back. Definitely a

good way to get good feedback.”

- CMSC434 Student

Group Project

FEEDBACK

Design Critiques

User Testing

Peer Assessment

I think it'd be good to have a say in what group you'll be in, after indicating your initial topic preferences. I got stuck in a group that is pretty apathetic, and it's come through the most with our final project. I've coded 98% of it, and I can't do anything about it, because we set a mutually agreed schedule for adding code. There's only so many times I can keep asking for contribution when the group members don't care.

ABOUT GROUP WORK

I think it'd be good to have a say in what group you'll be in,

after indicating your initial topic preferences. I got stuck in a

group that is pretty apathetic, and it's come through the most

with our final project. I've coded 98% of it, and I can't do

anything about it, because we set a mutually agreed schedule

for adding code. There's only so many times I can keep asking

for contribution when the group members don't care.

- CMSC434 Student

Slide from Björn Hartmann & Maneesh Agrawala

Note: These are private and will not be shared with your teammates

Group Project

FEEDBACK

Design Critiques

User Testing

Peer Assessment

Feedback from TA/Prof

Hall of Fame Hall of Shame

As you watch the following video, think about why designing such

an interactive system is hard and why the user struggles

Touchscreen Soda Fountain Submitted by: Jon Froehlich

Why is this a hard design problem?

Why did the user struggle?

Facebook Inline Translation Submitted by: Jon Froehlich

Hall of Fame Hall of Shame

Submit your video recording (screen capture or cell phone) along with a

paragraph (or two) description of why its Hall of Fame or Hall of Shame. Your

description must include principles learned from class.

Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L)

Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L)

THIS WEEK

Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L) Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L)

R01: BRAINSTORMING

This is due: Thursday by classtime. Fill out your response in Canvas. http://cmsc434-f14.wikispaces.com/R01+Brainstorming

Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L) Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L)

Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L)

TODAY’S KEY LEARNING TAKEAWAYS

1. The value of iteration in design

2. Thinking through doing

3. Thinking through materials

4. The value of trying and failing early

5. Course mechanics/logistics

NEXT TIME About you

About me (and my research)

What is HCI?

Design and Design Processes

Dark Palette

Light Palette

Smartsheet Gantt Palette

Light Palette