Design Process-Representing
September 11, 2007
Turn in your Conceptual Map
assignment
NEEDS
DESIGN
EVALUATE
IMPLEMENT
Idea Commercials

Materials for projection by midnight
tonight!
– Email to btsao@berkeley.edu
– [cs160] in Subject line

Presented in discussion section
tomorrow
– I’m planning to attend
facebook application
review

Resources for finding interesting
applications
– http://www.insidefacebook.com/category/
applications/
– http://www.techdigest.tv/2007/07/the_10
1_best_fa.html
– http://www.bestfacebookapplications.com/
Today


Social software / facebook followup
Understanding users, a few more
techniques
– Diary study
– Experience Sampling Method
– Personas

Design, representing ideas
– Scenarios
– Storyboard
– Role-playing
Social software followup

Wikipedia
– How many people use Wikipedia?
– How many people have contributed to
Wikipedia?


Demonstration of “social leveraging”
Why does Wikipedia work?
Virtual economy

Point system, currency
– Rewards for valued activities
– Amount of “interaction time”

Transform points  social status
– Visible markers
– Acknowledge leaders
– Exploit scarcity

Finding right balance of money supply
Social networking

MySpace
– 200M users
– Focuses on music interests

facebook
– 39M users
– Photo sharing

LinkedIn
– 14M users
– Oriented toward professional networking, hiring

Viral invitations, interoperability
About the facebook
platform

After 3 months
– 3,261 applications vetted by facebook
– 46 applications attracted > 1M installs

Platform is still evolving
– We may experience change along the way

Server support
facebook project ideas







Photos
Games
Shared Interests
Productivity
Location sharing
Finding employment / grad school
Mashups
Meta-comment

Mostly describing a variety of tools
– Exercised a few in assignments
– Will need to pick appropriate ones to
apply in group project


Grasp of tools tested in midterm
Group project pulls threads of class
together
Additional observation
tools



Diary study
Experience Sampling Method
Personas
Diary study

Asking people to keep a diary of their
interactions with a computer system,
any significant events or problems
during their use of a system, or other
aspects of their working life
– Record the date and time of an event
– Where they are
– Information about the event of
significance
– Ratings about how they feel, etc.
Diary study variations

Vocally recording diary entries
– Give them recording device (iPod + mic)
– Attach list of questions to device

Use cell phone to call recording service
to capture entries
Why use a diary study?

For situations that don’t afford direct
observation
– Occur infrequently
– In dispersed settings
– Additional observers awkward



Collects data from actual experience
Collecting data over longer time span
Example: When do you think of
communicating with your family?
Diary study constraints

Requires high incentives for participants
– Reminder prompts
– Reward per entry



Self-reporting mechanism
Access to recording instrument
Palen & Salzman, “Voice-mail diary studies
for naturalistic data capture under mobile
conditions”
http://doi.acm.org/10.1145/587078.587092
Experience Sampling
Method (ESM)



Getting user reactions in the moment
Also known as Ecological Momentary
Assessment (EMA)
From psychology
ESM


Participant asked to carry “beeper”
When beeper activates
– Fill out short survey (using device)
User’s context
 Reaction to stimulus


Programmed alerts at “random” times
– Several times / day over a week
– Scope time intervals appropriately (i.e.,
awake hours)

Large enough users, samples  model
ESM resources

Open source tool for ESM
– http://web.media.mit.edu/~intille/caes/
– http://seattleweb.intelresearch.net/projects/esm/

Kellogg et al., “I’d be overwhelmed, but
it’s just one more thing to do”
– http://doi.acm.org/10.1145/503376.503394
Why use ESM?

“Ecological validity” of data
– Better than retrospective self-report


Deals with mobile activities (ubicomp)
Captures reactions in context
– Spatial
– Situational
– Temporal


Collecting data over longer time span
(beyond a single session or observation)
Example: When do you answer cell phone?
ESM constraints

It is interruptive
– Strategy for handling “non-response”

Survey must be extremely quick to fill
out
– Less than 1 minute
Personas
Archetypal users that represent
the needs of larger groups of
users, in terms of their goals
and personal characteristics
 Representing user research
 Guide vision and design
 Popularized by Alan Cooper
– The Inmates are Running the Asylum
– http://www.cooper.com/insights/journal_of_design/articles/
the_origin_of_personas_1.html
Creating personas




Name
Demographic info
Picture
Paragraph descriptions
–
–
–
–

User motivations
Goals
Expectations
Personality
Imaginary but precise, specific but
stereotyped
http://www.infotoday.com/Online/jul03/head.shtml
Course Scheduler
example persona
Course Scheduler
example persona
Thanks to Prof. Marti Hearst
Remember Jim?

What were his good attributes?
– Great looks
– Witty stories
– Good listening skills
Personas anecdotes

Sun Microsystems life-size
cutouts of real customers
– Sun’s customers otherwise
“remote”
– Get to know the customer


“Customer” cutouts became
jokes
One customer actually visited in
person!
The Transformation of
Kimberly Washington


A persona for the development team
Kimberly began her persona life…
– Late 30s, master’s degree in technical
discipline
– Plump, African American
– Engineers were not interested

Kimberly’s persona was transformed…
– Early 20s, Bachelor's degree in
humanities
– Slender, white, blonde

Designing for yourself  designing
for your fantasy
Thanks to Michael Muller, IBM Research
Design, Representing
Ideas



Scenarios
Storyboards
Role-playing
Scenarios

Providing context for use (narrative)
– Sometime referred to as “use cases”

Narrative description of:
– User(s)
– Resources (tools, information, people)
– Goal
– Circumstances
– Time interval
Gas-pumping scenario
– User(s)

Driver, passenger
– Resources (tools, information, people)

Car, pump, currency, gas station attendant
– Goal

Fill up car with appropriate gas
– Circumstances

Day / night, sunny / rainy, leisurely / hurried
– Time interval

As quickly as possible
Storyboarding

Series of frames depicting key steps in
reaching a goal
– Mechanically, can use pin board for easy
rearrangement / editing

Describe the interaction in context
– Show user in at least 1st frame (establishing
shot)
– User and the environment
– User and the system
That sounds like comics
OK/Cancel February 3, 2006, http://www.ok-cancel.com/comic/125.html
The value of comics

Juxtaposed pictorial images
in a deliberate sequence;
“sequential art”
– Abstraction allows personal
projection into the scene
– Our sense of closure fills in
the missing details
Magic of closure
Storyboard examples
Film editing interface
Posting storyboards on
flickr
Testing storyboards with
users


Using storyboards to get input from
users, other stakeholders
Check understanding of process that
users go through
– Observe user reaction
– Debrief users

Good reference point for design
process
Storyboarding hints


Keep it quick
Cleverly re-use cards and copying
– Draw large window
– Draw components on cards
– Rearrange cards, copy

Allows trying out ideas without writing
any code
Storyboarding exercise

Storyboard the process of adding a
cameraphone picture to facebook
photos
– Last time focused on drawing
– This time, focused on designing and
expressing ideas
– What are the steps? Features?
– 15 minutes
Reflecting on
storyboarding

Features?
– Email, text, designated email

Steps?
Role-playing


Enacting scenarios, storyboards
Recording on video
– Presentations
– Publicity

Video records (showing up on YouTube)
–
–
–
–
Microsoft Surfaces (2007)
http://www.youtube.com/watch?v=QigsOR9r36k
Apple Knowledge Navigator (1987)
http://youtube.com/watch?v=3WdS4TscWH8
Bodystorming


Transformation of abstract ideas and
concepts into physical experiences
Imagining the product already exists
– Act as if it exists
– In the context of how you would use it
– Involving entire body in enacting usage

Oulasvirta et al., “Understanding
contexts by being there: Case studies
in bodystorming”
– http://dx.doi.org/10.1007/s00779-003-0238-7
Assignment (Due Sept. 13)

Forming project teams (4 people)
– Submit list of names + email in group (1
per group)
OR
– Name, email, plus list of interests to help
form group


Especially important to participate in section
Visually annotated idea list
Next time

Readings
– Norman, DOET, Chapter 2
– First Principles of Interaction Design
(from AskTog)