PowerPoint Presentation · dishwasher incoming cold water from supply line kitchen sink hot open thermal expansion tank kitchen sink hot Change this to red . What can we do with this

CMSC434

Group Project Description

Monday, January 30, 2012

Instructor: Jon Froehlich

TA: Kotaro Hara

Intro to Human-Computer Interaction

LastTime 1. In-class design activity

2. Motivations for HCI

3. High-level overview of syllabus

4. Four “small” assignments

1. The Reading: As We May Think

2. Who You Are

3. Who I Am

4. High-level Design Process Overview

5. Group Project Description

Assignments Due Now!

1. Sign-up for Piazza

2. Take background survey

3. Read As We May Think 4. Think about group project

Today

Who You Are

44

2 1 1 0

20

40

COMPUTERSCI

COMPENGIN

IS BMGT PHYSICS

YourMajors

COMPUTER SCI 92%

COMP ENGIN

4%

IS BMGT 2%

PHYSICS 2%

ProgrammingLanguage

100% 93%

80%

56%

42%

29% 29% 24% 24%

20%

9% 9% 9% 7%

0%

50%

100%

What programming languages do you have experience with and feel comfortable using?

N=30

ProgrammingLanguage

100% 93%

80%

56%

42%

29% 29% 24% 24%

20%

9% 9% 9% 7%

0%

50%

100%


N=30

ProgrammingLanguage

100% 93%

80%

56%

42%

29% 29% 24% 24%

20%

9% 9% 9% 7%

0%

50%

100%


N=30

ProgrammingLanguage

100% 93%

80%

56%

42%

29% 29% 24% 24%

20%

9% 9% 9% 7%

0%

50%

100%


N=45

PLFavorite What programming languages do you have experience with and feel comfortable using?

N=30 51%

18% 16%

7% 4%

2% 2% 0% 0% 0% 0% 0% 0% 0%

0%

30%

60%

PLFavorite What programming languages do you have experience with and feel comfortable using?

N=45 51%

18% 16%

7% 4%

2% 2% 0% 0% 0% 0% 0% 0% 0%

0%

30%

60%

InternshipExperience

24

21

19.5

20

20.5

21

21.5

22

22.5

23

23.5

24

24.5

Yes No

Yes 53%

No 47%

WhyThisClass?

“I like creativity and as much as I hate to say it, looks do matter. I believe

that a visually appealing application that is intuitive, has a short learning

curve is the most appealing to the users of the application. I hope to learn

how to make my future application this way.”

“I want to learn how to make software more user-friendly, so the older

generations will not have a problem using the software.”

“I am taking this class because interface design is an incredibly important

part of creating software and applications.”

“I believe one of the most important parts of making software, whether a

simple tool or a game, is making sure that the user can understand it and

easily use it to it's full potential.”

It looked like it might be a bit different to have a class focused on usability and interface, since most of the other classes don't really deal with that. Also, it was in a convenient time slot.

WhyThisClass?

“It looked like it might be a bit

different to have a class focused on

usability and interfaces, since most

of the other classes don't really deal

with that.”

WhyThisClass?

“It looked like it might be a bit

different to have a class focused on

usability and interfaces, since most

of the other classes don't really deal

with that. Also, it was in a

convenient time slot.”

YourSketches

SketchesBreakdown

0 1 0

7 9 10

13

1 0

5

10

15

0 1-2 3-4 5-6 7-8 9-10 11-12 13-14

Num

of

Stud

ents

Num of Sketches

0

5

10

15

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Num

of

Sket

ches

Student

Sketches N=41/48

YourNameTags

Who I Am

ProgrammingLanguage What’s my experience/comfort level with the following programming languages?

100%

60%

50% 50%

30%

15% 15% 15% 15%

5% 0% 0% 0% 0%

0%

50%

100%


100%

60%

50% 50%

30%

15% 15% 15% 15%

5% 0% 0% 0% 0%

0%

50%

100%


100%

60%

50% 50%

30%

15% 15% 15% 15%

5% 0% 0% 0% 0%

0%

50%

100%

Minneapolis, MN

Ames, IA

Orange County, CA

Portland, OR

Seattle, WA

Washington DC

WorkExperience

Software Engineer

HealthSystem Minnesota

CyberOptics Corporation

Intel Corporation

Unisys Corporation

Research Assistant

University of California, Irvine

University of Washington, Seattle

Intel Research

Microsoft Research

Telefónica Research

WorkExperience

Software Engineer

HealthSystem Minnesota

CyberOptics Corporation

Intel Corporation

Unisys Corporation

Research Assistant

University of California, Irvine

University of Washington, Seattle

Intel Research

Microsoft Research

Telefónica Research

SouthAmerica

Design4Good

For Example…

The following example is from my Phd dissertation

But also useful as a case study to illustrate iterative design

are the most water consuming

activities in the average North

American home?

Top Water Usage Activities

[Vickers, Handbook of Water Use and Conservation, 2001]

31.4%

18.3%

14.9%

11.5%

10.8%

9.4%

1.6%

1.2%

1.0%

0% 10% 20% 30%

Outdoor Use

Toilets

Laundry Machine

Showers

Faucets

Leaks

Other

Baths

Dishwasher

Title

How much water do people think

common activities actually use?

Water Usage Estimates (N=656)

3.5 gpm

35 gallons

2.5 gpm

25 gallons 3 gpm = 180 gal

4 gpm = 240 gal

5 gpm = 300 gal

What makes this even more surprising is that the individuals surveyed were greatly interested in water conservation!

88% interested in conserving water at home

84% try to limit their water usage

[Kempton & Layne, Energy Policy, 1994]

What if you could

get the same level

of feedback in the

home?

kitchen sink 28 gallons

refrigerator 0.3 gallons

dishwasher 6.5 gallons

Today‘s Usage

toilet 78.4 gallons

shower 62.4 gallons

bath 6.5 gallons

bathroom sink 1 4.2 gallons


Today‘s Usage

toilet 78.4 gallons

shower 10.4 gallons

bath 0.0 gallons



shower 52.4 gallons

bath 6.5 gallons



Today‘s Usage: hot vs. cold

Traditional water meters measure

aggregate consumption

Requires

cutting into

pipe to install

• Single, screw-on sensor

• Identifies fixture usage

• Estimates flow

HydroSense

Froehlich et al., UbiComp2009; Froehlich et al., Pervasive2011

water tower water tower

hose spigot

utility water meter

pressure regulator

laundry

bathroom 1

hot water heater bathroom 2

dishwasher

incoming cold water from supply line

toilet flushed

toilet

kitchen

thermal expansion

tank


hose spigot

utility water meter

pressure regulator

laundry

bathroom 1


kitchen

dishwasher


toilet

kitchen sink cold open

kitchen sink cold

thermal expansion

tank

Have another toilet as 2nd example rather than kitchen

sink


hose spigot

utility water meter

pressure regulator

laundry

bathroom 1


kitchen

dishwasher


toilet

kitchen sink hot open

kitchen sink cold

kitchen sink hot

thermal expansion

tank

Change this to red


hose spigot

utility water meter

pressure regulator

laundry

bathroom 1


kitchen

dishwasher


kitchen sink hot open

thermal expansion

tank

kitchen sink hot

Change this to red

What can we do with this data?

This is an interface design problem!

MetaphorView

SpatialView

Per-Occupant View

TimeSeries Day View

We also explored more ambient

displays that were less “data-centric”

and more fun and playful

water

savings

tracker

“Frank”

the fish

Water savings

goal met

“Frank” the fish

meets his mate

New water

savings goal met

Frank and his

mate have

children and so on…

display is also

interactive so

fish respond

to touch

AquaticEcosystem

Online survey of 656 respondents

exploring water usage attitudes, beliefs,

knowledge


evaluating design dimensions and design

probes

Interviews with 10 households examining

a greater set of designs and exploring

social dynamics within household

Ongoing…

1

2

3

StudyMethods

4


exploring water usage attitudes, beliefs,

knowledge


evaluating design dimensions and design

probes

Interviews with 10 households examining

a greater set of designs and exploring

social dynamics within household

Ongoing…

1

2

3

StudyMethods

4

Formative

Evaluative

OverallPreference

64% 14%

12% 10%

OverallPreference

PhysicalPrototyping

HomeInterviews

Display Location Preferences

Kitchen

Near thermostat

High traffic areas

Accessible when needed

DesignCycle

Design

Prototype

Evaluate

DesignCycle

Design

Prototype

Evaluate

DesignCycle

Lo-Fidelity

Prototype Mid-Fidelity

Prototype

DesignCycle

Hi-Fidelity

Prototype

ProjectOverview 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: Social value applications (i.e., applications that are targeted at improving a

person or persons health, welfare, and/or everyday life)

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.

ProjectDeliverables Individual brainstorming project ideas exercise

Group brainstorm project ideas

Project proposal and presentation

Contextual inquiry and needfinding

Task analysis, design sketches, and storyboarding

Lo-fidelity video prototypes and presentation

User testing analysis and report

Interactive prototype

Final prototype demo, video, and presentation

1

2

3

4

5

6

7

8

9

ProjectDeliverables Individual brainstorming project ideas exercise

Group brainstorm project ideas

Project proposal and presentation

Contextual inquiry and needfinding

Task analysis, design sketches, and storyboarding

Lo-fidelity video prototypes and presentation

User testing analysis and report

Interactive prototype

Final prototype demo, video, and presentation

1

2

3

4

5

6

7

8

9

I would rather you spend more

time picking a good project and

leaving less time for final

implementation than the

alternative.

ProjectChallenges Time management

Teamwork and equity

Not getting wedded to an early, suboptimal idea

Coding

Too Early!

"The first 90 percent of the code accounts

for the first 90 percent of the development

time. The remaining 10 percent of the code

accounts for the other 90 percent of the

development time." -Tom Cargill, Bell Labs

UnderstandingPeople

TaskAnalysis

You’ll define three tasks specific to your problem space

You’ll create storyboards and prototypes around those tasks

Sketching

StoryBoarding

MoreSketching

PaperPrototyping

PaperPrototypeTesting

LoFiVideoPrototyping

InteractivePrototype

VideoDemo Team Buddy Map : Scenario 1

VideoDemo Team Buddy Map : Scenario 2

WorkloadWarning

Hall of Fame/Shame

Class discussions

Posting content to Piazza including questions,

responses, clarifications, inspirations

ClassParticipation

ForWednesday

Watch IDEO Video

Post 1 to 2 paragraph

comment to Piazza

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

Documents

PowerPoint Presentation · dishwasher incoming cold water from supply line kitchen sink hot open thermal expansion tank kitchen sink hot Change this to red . What can we do with this