Need-finding and
Ideating
John C. Tang
September 4, 2007
Turn in your Idea Lists!
Sit at tables in groups of SIX (6)
Today’s newspaper (S.J. Merc)
Today


Complete intro to contextual inquiry
Other methods
– Task analysis
– Ethnography

Design
– Ideating
– Sketching
– Brainstorming
Intro Christine Robson
Last time: Doing a
Contextual Inquiry






Direct Observation + Interviewing
In natural context of activity
Intentionally pick participants,
location, time
Follow where the participant leads
(partner)
Learn user’s vocabulary
Gather artifacts, recordings
Outcome of CI


Experiencing it is perhaps the most
important!
What are we going to do with all this
data?
– Analyze
– Reporting
Goal: Gain understanding of user
Understanding of user


What resources are used to
accomplish task?
What hindrances encountered in
accomplishing task?
Analyze data to get better description
and understanding of resources and
hindrances
Resources used

Tools, devices
– Cell phone, computer, shovel

Information
– Web page, phone directory

Other people
– Expert, peer, grad student
Hindrances encountered

Not having the right tool
– Workarounds

Unable to access resources needed
– Can’t find information
– People unavailable

Unaware of important information
– Confusion
Analyzing data is
collaborative





Researchers involved in CI
Designers
Project leads
Software developers
Users
Multiple perspectives elicit details
Analysis session

Each researcher presents each CI case
– Resources used to accomplish activity
– Hindrances encountered
– Things that surprised you
– Things that seem unusual, interesting

Other participants ask questions, share
similar or contrasting examples from
their data
Analysis session (2)
After all cases are presented, team looks
for patterns across cases
 Commonly used resources
 Commonly encountered hindrances
 Common themes, patterns, sequences
 Try out possible design ideas
– What if…?
Report

Descriptive understanding of activity
– Common resources used
– Common hindrances encountered
– Common patterns
– Illustrated with stories, pictures, clips

Design implications / insights
Revisiting Jim and dating

Resources
– Great looks
– Witty stories
– Good listening skills

Hindrances
– Facial bruise from ultimate frisbee
– Matching story with prospect’s interests
– Noisy environment
Contextual Inquiry in
CS160




Asking for a Contextual Inquiry of
group project (future assignment)
Each group member should do at least
one contextual inquiry
Analysis done by whole group
Report
Task analysis

Goals
– A state of the system that the user
wishes to achieve

Tasks
– The activities required, used, or believed
to be necessary to achieve a goal

Actions
– Simple tasks that involves no problem
solving or control structure
ACTIONS
TASKS
GOALS
Task analysis example
Communicate
with family
student@berkeley.edu
MomandDad@home.net
Ask for $$
Add
personality
Write email
Open
Compose
window
Type
text
Add to
email
Type
text
Add
emphasis
Starting the school year
Hi Mom and Dad,
The school year has gotten off
to a fast start. I’m in a great
Human-Computer Interface
class!
Oh, by the way, please send
more money for books. Gotta
go!
ACTIONS
TASKS
GOALS
Task analysis example
Communicate
with family
student@berkeley.edu
MomandDad@home.net
Ask for $$
Add
personality
Write email
Open
Compose
window
Type
text
Add to
email
Type
text
Add
emphasis
Format
text
Starting the school year
Hi
Hi Mom
Mom and
and Dad,
Dad,
The
The school
school year
year has
has gotten
gotten off
off
to
to aa fast
fast start.
start. I’m
I’m in
in aa great
great
Human-Computer
Human-Computer Interface
Interface
class!
class!
Oh,
Oh, by
by the
the way,
way, please
please send
send
more
more money
money for
for books.
books. Gotta
Gotta
go!
go!
luv u bunches, student
TASKS
GOALS
Task analysis example
Communicate
with family
Identify bundles
Ask for $$
Add
personality
Write email
Add to
email
Add
emphasis
ACTIONS
Elicit breadth of tasks and goals
Open
Compose
window
Type
text
Type
text
Format
text
Use standard actions
student@berkeley.edu
MomandDad@home.net
Starting the school year
Hi Mom and Dad,
The school year has gotten off
to a fast start. I’m in a great
Human-Computer Interface
class!
Oh, by the way, please send
more money for books. Gotta
go!
luv u bunches, student
Ethnography
noun -- The branch of anthropology that
deals with the scientific description of
specific human cultures.

Typically applied to study of foreign
cultures
It’s a jungle out there
Ethnography in the workplace
Lucy Suchman, Human-Machine Reconfigurations:
Plans and Situated Actions
Ethnography

Natural settings
– a commitment to studying activities in the
“natural” setting in which they occur

Descriptive
– an interest in developing detailed descriptions of
the lived experience

Members’ point of view
– understanding the participant’s activity from the
participant’s point of view

Focuses on what people actually do
– understanding the relationship between activities
and environment
Ethnographic HCI studies




Long-term, direct observation
Rich, detailed, qualitative description
Analysis takes at least 2X duration of
data recorded
To learn, apprentice with a mentor
Other terms you’ll hear

Participatory Design (PD)
– Besides partnering in the observation
process, users can also actively
participate in the design process
– Primarily reacting to prototype designs

User-Centered Design (UCD)
– Focused on the user, not the technology
(we’ve been presuming this)
Design


Ideating – expressing ideas
Representing
– Sketching
– Enacting

Brainstorming
NEEDS
DESIGN
– More ideas  more creative
 better
EVALUATE
IMPLEMENT
– Group vs. individual creativity
Design “ideology”


Sketching – “Visual Thinking”
Number of ideas, alternatives
Sketching in design





Allows quick iteration through many
ideas (fast and cheap)
Suggests and explores rather than
confirm
Stimulates left-brain /
right-brain interaction
Invites sharing ideas
Product design roots
Sketching & Cartooning
Design sketch
http://www.visionunion.com/article.jsp?code=200504140031
Screen sketch
http://www.agilemodeling.com/essays/initialRequirementsModeling.htm
Screen sketch
http://www.graphicalwonder.com/?p=12
Sketching exercise




Buying / Pumping gas in 6-8 frames
From memory of using these devices
Draw actions  focus on goals and tasks
Individually create series of sketches
– Quality of drawings, details not important
– Must convey the interface and the interactions

Learning by doing!
10-minutes







Approach pump
Open gas lid
Payment mode
Type in zip code
Select grade of fuel (optional services)
Pumping gas (auto-on feature)
Do you want a receipt?
Reflecting on sketching




Hard? Easy?
Did exercise suggest any ways of
improving the taskflow to better match
users’ goals?
Collect: Please make sure your name
is on it
Discussion section: Perspective
drawing
Computational sketching


Many software tools for “sketching”
Freeware gimp – GNU Image
Manipulation Program
http://www.gimp.org/windows/
Screenshots (Windows)

Windows “Print Screen” key

Typically found in upper right corner

Puts screenshot into paste buffer
– Currently active window only
Screenshot (Macintosh)

Copy entire screen
– <command> + <shift> + 3

Copy region of screen
– <command> + <shift> + 4

Copy active item on screen
– <command> + <shift> + 4 + <space>
Brainstorming


Technique for facilitating group
creativity
Popularized by Alex Osborn, 1930s,
Applied Imagination
– Defer judgement
– Wildest possible ideas
– Go for quantity
– Build on others’ ideas
Rules for brainstorming
1.
2.
3.
4.
5.
6.
7.
Be visual
Defer judgment
Encourage wild ideas
Build on the ideas of others
Go for quantity
One conversation at a time
Stay focused on the topic
Brainstorming exercise
Create ideas that would help you
communicate with your family, from
your 90 yr. old grandfather, to your 10
yr. old younger sister
 What are their user characteristics?
 What kinds of info would you like to
communicate with them?
 Work in groups
15 minutes

Brainstorming +
1.
2.
3.
4.
5.
6.
7.

Be visual

Defer judgment

Encourage wild ideas
Build on the ideas of others 
Go for quantity

One conversation at a time 
Stay focused on the topic

Alternatives
Magnify
Minimize
Reverse
Leverage
Distort
Integrate
Reflecting on
brainstorming



Explore new ideas?
Surprised at number of ideas?
How much longer would you go?
“Manipulative” verbs








Adapt
Modify
Magnify
Minify
Substitute
Rearrange
Reverse
Combine











Multiply
Divide
Eliminate
Subdue
Invert
Separate
Transpose
Unify
Distort
Rotate
Flatten











Squeeze
Complement
Submerge
Freeze
Soften
Fluff-up
By-pass
Add
Subtract
Lighten
Repeat









Thicken
Stretch
Extrude
Repel
Protect
Segregate
Integrate
Symbolize
Abstract
Dissect
Processing a brainstorm






Take a short break
Poll on interesting ideas (~10%)
Group ideas together
Identify and apply criteria
Prioritize
Identify follow-up tasks
Assignment: Map of
Berkeley (Due Sept. 11)

Draw conceptual map of Berkeley that conveys
your experience of the area
– Introduce me to Berkeley!
– Express visually, not with words (like Pictionary)
– Create feature list

Show map to one other person not in CS160
– “Here’s a map of Berkeley I drew—tell me what you
learn from it”
– Record number of features they recognize

Hand in 2 copies (black & white copy OK)
Example
Feature list
 BART station
 Soda Hall
 Hill between
BART and Soda
 “The Play”, Cal
vs. Stanford,
1982
Next time


Return to Soda 405
Readings:
– Millen, Feinberg, & Kerr, "Dogear: Social
Bookmarking in the Enterprise"
– Kathy J. Lee "What Goes Around Comes Around:
An analysis of del.icio.us as social space“

Guest speaker from facebook:
– Dave Fetterman, Senior Engineer, founder of
Facebook Platform
– Ami Vora, Facebook Developer Community
My office hours TODAY 2:00-3:00 6th floor alcove