cmsc434 week 02 | lecture 03 | sept 09, 2014 design … · 2014-09-09 · leaving behind digital...

Human Computer Interaction Laboratory

@jonfroehlich Assistant Professor Computer Science

CMSC434 Introduction to Human-Computer Interaction

Week 02 | Lecture 03 | Sept 09, 2014

Design Approaches (Continued)

Understanding Users I

TODAY

1. Logistics

2. Hall of Fame/Shame

3. Design Approaches

4. Understanding Users Humans

5. Pitch Feedback

Source: http://www.silentjourney.com/blog/wp-content/uploads/2012/03/voice.jpg

Let’s go shopping!

IDEO SHOPPING CART

REDESIGN VIDEO

IDEO ABC Nightline, July 1999

Source: http://goo.gl/eyTsLU

What does the Canvas interface for this assignment look like to you?

Individual Assignment (IA)

Group Project Assignment (TA)

Reading Assignment (R)

Event/Holiday

Lecture (L)

Hall of Fame Hall of Shame

Hall of Fame Hall of Shame

ACHIEVEMENT UNLOCKED First Student Submission!

MULTIPLE DATA VIEWS/REPRESENTATIONS

MULTIPLE DATA VIEWS/REPRESENTATIONS

By supporting further exploration of data items, interaction

enables users to have multiple perspectives and gain insight

on the data set. It is what separates an information

visualization system from a static image.

Ji Soon Yi, Youn ah Kang, John T. Stasko

IEEE Transactions Visualization and Computer Graphics, 2007

FOCUS + CONTEXT

FOCUS + CONTEXT

Context view quickly shows current day and currently selected week (i.e., is immediately responsive to user interaction)

FOCUS + CONTEXT

Focus+Context starts from three premises:

Stuart Card, Jock MacKinlay, Ben Shneiderman

Information Visualization: Using Vision to Think

Morgan Kaufman, 1999, Page 307

FOCUS + CONTEXT

Focus+Context starts from three premises: First, the user

needs both overview (context) and detail information (focus)

simultaneously.




FOCUS + CONTEXT



simultaneously. Second, information needed in the overview

may be different from that needed in detail.




FOCUS + CONTEXT



simultaneously. Second, information needed in the overview

may be different from that needed in detail. Third, these two

types of information can be combined within a single

(dynamic) display, much as in human vision.




design through

ideation

We covered most of this on Thursday, but I just want to reiterate the

Elaboration and Reduction cycle in the design process.

Greenberg et al., Sketching User Experiences: The Workbook, p. 8

Reduction

Follow best idea,

refine, and continue

prototyping

Elaboration

Idea generation

& prototyping

Elaboration

Design Process

Original source: Paul Laseau,Graphic Thinking for Architects & Designers, 1980; Ref from Greenberg et al., Sketching User Experiences, 2012

Elaboration and Reduction

Design Process


Design Process

Elaboration and Reduction

Design Process Design Process


Can continue to happen at various stages in the design process!

Design Funnel

Original source: Stuart Pugh,Total Design: Integrated Methods for Successful Products Engineering, 1990; Image from Greenberg et al., 2012

The alternating trend between idea generation and convergence with a

process of reduction towards the final concept

Design Funnel

UXBooth, Concerning Fidelity in Design, http://www.uxbooth.com/articles/concerning-fidelity-and-design/

Manifestation progression

The best way to have a good idea is to have

lots of ideas.

Linus Pauling Professor of Chemistry

Caltech, UC San Diego, Stanford

Only person awarded two unshared Nobel Prizes

Bayles and Orland, 2001, Art & Fear: Observations On the Perils (and Rewards) of Artmaking

Quantity Group

Graded solely on the quantity of work they produced

Quality Group

Graded solely on the quality of work they produced

DESIGN EXPERIMENT

Source: Bayles and Orland, Art & Fear: Observations On the Perils (and Rewards) of Artmaking, 2001.

Originally found in Bill Buxton’s Sketching User Experiences, 2007

Quantity Group

Graded solely on the quantity of work they produced

“It seems that while the quantity group was

busily churning out piles of work — and

learning from their mistakes — the quality

group had sat theorizing about perfection,

and in the end had little more to show for

their efforts than grandiose theories and a

pile of dead clay.”

- Bayles and Orland, 2001, p.29

DESIGN EXPERIMENT

Source: Bayles and Orland, Art & Fear: Observations On the Perils (and Rewards) of Artmaking, 2001.

Originally found in Bill Buxton’s Sketching User Experiences, 2007

IMPLICATIONS FOR DESIGN

1. Exploring a quantity of ideas can lead to

quality

2. Find the right time to refine—refining too

early can lead to sub-optimal designs (get

the right design, then that design right).

3. Fail early and learn from your mistakes!

design through

iteration

Design

Build

Evaluate

Human-Centered Design

Iterative Design

Dow et al., Parallel prototyping leads to better design results, more divergence, and increased self-efficacy, ACM TOCHI 2010

[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

CANDLE PROBLEM

[Duncker, 1945]

Spend 2 minutes

thinking about it.



CANDLE PROBLEM

[Duncker, 1945]



CANDLE PROBLEM

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

FUNCTIONAL FIXEDNESS

[Adamson, 1952]

Group 1:

Preutilization Boxes presented as a

container with

materials inside them

Group 2:

No Preutilization Boxes were presented

empty

FUNCTIONAL FIXEDNESS


1. Configure and reconfigure your

materials

2. Incorporate new materials/tools into your

design process

3. Iterate!

4. Soliciting feedback from a range of

people (some novice, some experts) can

help you view a problem differently

design through

remix I sometimes call this creation through curation

Disney’s Copy/Paste http://youtu.be/vh84g8rC2oA

“PLAGIARIZE” IN DESIGN

You should find existing interfaces that work for users and

then build ideas from those interfaces into your systems as

much as practically and legally possible. This kind of

copying can be effective both for high-level interaction

paradigms and for low-level control/display decisions.

Clayton Lewis and John Rieman

Task Centered User Interface Design

Chapter 1: The Task-Centered Design Process

An Example

I like your web page and layout. How did you

make it? What software/template would you

suggest?

— CS Department Chair Anon University

Leah Buley, The User Experience Team Of One, 2013

Keep an Inspiration Library

Creation through curation

Light-weight (lo-fi) prototyping

About Me I am an Assistant Professor in the Department of Computer Science at the University of

Maryland, College Park and a member of the Human-Computer Interaction Laboratory

(HCIL) and the Institute for Advanced Computer Studies (UMIACS).

I received my Phd in Computer Science from the University of Washington where I was a

Microsoft Research Graduate Fellow and a MS in Information and Computer Science

from the University of California, Irvine. During my graduate studies, I interned at

Telefónica Research in Barcelona, Microsoft Research in Redmond, and Intel Research in

Seattle.

My Research My research focuses on designing, building, and evaluating interactive technology that

addresses high value social issues such as environmental sustainability, computer

accessibility, and personalized health and wellness. My work often involves the entire

spectrum of information flow: from sensing physical events, to intelligently

interpreting/classifying this data, to building visualizations that inform and motivate

behavior.

Sensing and Feedback Systems for Environmental Behaviors There is often a profound disconnect between our everyday behaviors and the effects

those behaviors have on our health and the environment around us. In this work, I

explore how technology can be used to effectively sense and report information about

environmental behaviors to promote awareness and enable positive behavior change.

Smart Cities and Sustainable Transport City-wide urban infrastructures are increasingly

reliant on network technology to improve and

expand their services. As a consequence, our

interactions in the physical world are increasingly

leaving behind digital footprints. In this work, I

explore how these digital footprints can reveal

otherwise latent patterns of human behavior as

well as implications for the improvement of city

infrastructures themselves (e.g., shared bicycling

programs, rail and bus systems).

Personal Health and Wellness

Accessible Computing

Data Collection Tools

12.10 - CHI2012 Paper Accepted

Our paper entitled "The Design and

Evaluation of Prototype Eco-Feedback

Displays for Fixture-Level Water Usage

Data" was accepted to CHI2012. This

paper is based on a chapter in my

dissertation.

10.31 - CHI Workshop Accepted

Our CHI workshop entitled ”Personal

Informatics in Practice: Improving

Quality of Life Through Data" was

accepted to CHI2012. Submission

deadline Jan 13th.

10.17 - South America

My wife and I are off for a two month

adventure in South America. I will have

limited email while traveling. This also

marks our last day in Seattle as we fly

back to our new city, Washington DC,

on our return.

10.14 - Dissertation Submitted

My dissertation was submitted and

approved by the UW Graduate School.

NEWS

Jon Froehlich

Assistant Professor

University of Maryland, College Park

Oct 17 – Dec 8, 2011

Personal travel

South America

Dec 19 – Dec 30, 2011

Personal travel

Minneapolis, Minnesota

May 5 – May 10, 2012

CHI Conference

Austin, Texas

TRAVEL

CONTACT twitter: @jonfroehlich

email: [email protected]

AV Williams 3137

Department of Computer Science

University of Maryland

College Park, MD 2XXXX

Home | Publications | Talks | Calendar

teaching

STUDENTS I am looking for students passionate

about investigating the role of

technology in solving high-value social

problems . If this interests you, drop me

a line.

Environmental

Sustainability

Smart Cities /

Urban Informatics Accessibility Health and

Wellness

Creation through remixing

Would you mind if I "borrow"

very heavily from your webpage?

— Random Internet User

I just love your style! So I decided

to get inspired by you :)

— Random Internet User 2

Austin Kleon, Steal Like An Artist, http://youtu.be/oww7oB9rjgw

This Class

“Good artists copy, great artists steal.”

— attributed to Pablo Picasso

Tjeerd Hoek, How Design Triggers Transformation, Frog Design, Oct 2010, http://slidesha.re/Ogs0qL

Design decisions should be intentional. That

we should understand the reasons for what we

do even if we’re using other people’s work for

inspiration.

Jeffrey Veen Founding Partner of Design UX Consulting Group: Adaptive Path

Now Vice President of products for Adobe Quote found: https://vimeo.com/7353260

SOME CAVEATS

In this class, for your designs.

It’s OK to remix.

In fact, remixing is encouraged.

however…

Rules of Remixing You’ve got to cite your source(s). Consistently &

constantly.

We, your audience, will determine whether

you’ve innovated. Whether the idea is simply

“copied”, or it’s remixed anew.

Be original.


1. Create and curate an inspiration library. I

often start here!

2. Steal/remix ideas into your own designs.

3. Always be on the lookout for

inspiration—it need not come from a

directly related product/application.

4. Design is intentional; know why you are

remixing something.

The Fighting Temeraire JMW Turner, 1839

How do we know what to design?

The “getting the right design” part

How do we establish these requirements?

UNDERSTANDING HUMANS

Before You

Design

While You

Design

After You’ve

Finished Your

First Design

UNDERSTANDING HUMANS Finding Out About Humans: 3 Stages in Design Process

Before You

Design

While You

Design

After You’ve

Finished Your

First Design

UNDERSTANDING HUMANS Finding Out About Humans: 3 Stages in Design Process

Formative Inquiry/Evaluation

Summative Evaluation

Source: http://people.uwec.edu/ivogeler/w188/IdeasBehaviorLandscapeDiagram.jpg

Let’s brainstorm some formative inquiry methods.

How can we find out about ideas, ideals, beliefs?

How about behavior?

Culture?

Accessibility?

User Research Methods

Formative Evaluative Build

Ethnography

Interviews

Surveys

Cultural Probes

Focus Groups

Diary Studies

Experience Sampling Studies

Studying Similar Products

Interaction Logging of Past Product /

Early Prototype

Studying Past Product Documentation

…

Ethnography

Interviews

Surveys

Focus Groups

Diary Studies

Experience Sampling Studies

Interaction Logging

…

Dark Palette

Light Palette

Smartsheet Gantt Palette

Light Palette

cmsc434 week 02 | lecture 03 | sept 09, 2014 design … · 2014-09-09 · leaving behind digital...

Documents