Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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.
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. Second, information needed in the overview
may be different from that needed in detail.
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. 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.
Stuart Card, Jock MacKinlay, Ben Shneiderman
Information Visualization: Using Vision to Think
Morgan Kaufman, 1999, Page 307
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
Original source: Paul Laseau,Graphic Thinking for Architects & Designers, 1980; Ref from Greenberg et al., Sketching User Experiences, 2012
Design Process
Elaboration and Reduction
Design Process Design Process
Original source: Paul Laseau,Graphic Thinking for Architects & Designers, 1980; Ref from Greenberg et al., Sketching User Experiences, 2012
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
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.
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]
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]
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
IMPLICATIONS FOR DESIGN
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.
IMPLICATIONS FOR DESIGN
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
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