Design Process--Representing

1
Design Process--Representing

• September 11, 2007
• Turn in your Conceptual Map assignment

2
Idea Commercials

• Materials for projection by midnight tonight!
• Email to btsao_at_berkeley.edu
• cs160 in Subject line
• Presented in discussion section tomorrow
• Im planning to attend

3
facebook application review

• Resources for finding interesting applications
• http//www.insidefacebook.com/category/application
  s/
• http//www.techdigest.tv/2007/07/the_101_best_fa.h
  tml
• http//www.bestfacebookapplications.com/

4
Today

• Social software / facebook followup
• Understanding users, a few more techniques
• Diary study
• Experience Sampling Method
• Personas
• Design, representing ideas
• Scenarios
• Storyboard
• Role-playing

5
Social software followup

• Wikipedia
• How many people use Wikipedia?
• How many people have contributed to Wikipedia?
• Demonstration of social leveraging
• Why does Wikipedia work?

6
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

7
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

8
About the facebook platform

• After 3 months
• 3,261 applications vetted by facebook
• 46 applications attracted gt 1M installs
• Platform is still evolving
• We may experience change along the way
• Server support

9
facebook project ideas

• Photos
• Games
• Shared Interests
• Productivity
• Location sharing
• Finding employment / grad school
• Mashups

10
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

11
Additional observation tools

• Diary study
• Experience Sampling Method
• Personas

12
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.

13
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

14
Why use a diary study?

• For situations that dont 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?

15
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.5870
  92

16
Experience Sampling Method (ESM)

• Getting user reactions in the moment
• Also known as Ecological Momentary Assessment
  (EMA)
• From psychology

17
ESM

• Participant asked to carry beeper
• When beeper activates
• Fill out short survey (using device)
• Users 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

18
ESM resources

• Open source tool for ESM
• http//web.media.mit.edu/intille/caes/
• http//seattleweb.intel-research.net/projects/esm/
  
• Kellogg et al., Id be overwhelmed, but its
  just one more thing to do
• http//doi.acm.org/10.1145/503376.503394

19
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?

20
ESM constraints

• It is interruptive
• Strategy for handling non-response
• Survey must be extremely quick to fill out
• Less than 1 minute

21
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/a
  rticles/the_origin_of_personas_1.html

22
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

23
Course Scheduler example persona
24
Course Scheduler example persona
Thanks to Prof. Marti Hearst
25
Remember Jim?

• What were his good attributes?
• Great looks
• Witty stories
• Good listening skills

26
Personas anecdotes

• Sun Microsystems life-size cutouts of real
  customers
• Suns customers otherwise remote
• Get to know the customer
• Customer cutouts became jokes
• One customer actually visited in person!

27
The Transformation of Kimberly Washington

• A persona for the development team
• Kimberly began her persona life
• Late 30s, masters degree in technical discipline
• Plump, African American
• Engineers were not interested
• Kimberlys 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
28
Design, Representing Ideas

• Scenarios
• Storyboards
• Role-playing

29
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

30
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

31
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

32
That sounds like comics
OK/Cancel February 3, 2006, http//www.ok-cancel.c
om/comic/125.html
33
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

34
Magic of closure
35
(No Transcript)
36
Storyboard examples
37
Film editing interface
38
(No Transcript)
39
(No Transcript)
40
(No Transcript)
41
(No Transcript)
42
(No Transcript)
43
Posting storyboards on flickr
44
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

45
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

46
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

47
Reflecting on storyboarding

• Features?
• Email, text, designated email
• Steps?

48
Role-playing

• Enacting scenarios, storyboards
• Recording on video
• Presentations
• Publicity
• Video records (showing up on YouTube)
• Microsoft Surfaces (2007)
• http//www.youtube.com/watch?vQigsOR9r36k
• Apple Knowledge Navigator (1987)
• http//youtube.com/watch?v3WdS4TscWH8

49
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

50
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

51
Next time

• Readings
• Norman, DOET, Chapter 2
• First Principles of Interaction Design (from
  AskTog)