Design Process--Design Process--RepresentingRepresentingSeptember 11, 2007September 11, 2007
Turn in your Conceptual Map Turn in your Conceptual Map assignmentassignment
NEEDS
DESIGN
IMPLEMENTEVALUATE
Idea CommercialsIdea Commercials Materials for projection Materials for projection by by
midnight tonight!midnight tonight!– Email to Email to [email protected]@berkeley.edu – [cs160] in Subject line[cs160] in Subject line
Presented in discussion section Presented in discussion section tomorrowtomorrow– I’m planning to attendI’m planning to attend
facebook application facebook application reviewreview Resources for finding interesting Resources for finding interesting
applicationsapplications– http://www.insidefacebook.com/categhttp://www.insidefacebook.com/categ
ory/applications/ory/applications/– http://www.techdigest.tv/2007/07/thehttp://www.techdigest.tv/2007/07/the
_101_best_fa.html_101_best_fa.html– http://www.bestfacebookapplications.http://www.bestfacebookapplications.
com/com/
TodayToday Social software / facebook followupSocial software / facebook followup Understanding users, a few more Understanding users, a few more
techniquestechniques– Diary studyDiary study– Experience Sampling MethodExperience Sampling Method– PersonasPersonas
Design, representing ideasDesign, representing ideas– ScenariosScenarios– StoryboardStoryboard– Role-playingRole-playing
Social software Social software followupfollowup WikipediaWikipedia
– How many people use Wikipedia?How many people use Wikipedia?– How many people have contributed How many people have contributed
to Wikipedia?to Wikipedia? Demonstration of “social Demonstration of “social
leveraging”leveraging” Why does Wikipedia work?Why does Wikipedia work?
Virtual economyVirtual economy Point system, currencyPoint system, currency
– Rewards for valued activitiesRewards for valued activities– Amount of “interaction time”Amount of “interaction time”
Transform points Transform points social status social status– Visible markersVisible markers– Acknowledge leadersAcknowledge leaders– Exploit scarcityExploit scarcity
Finding right balance of money Finding right balance of money supplysupply
Social networkingSocial networking MySpaceMySpace
– 200M users200M users– Focuses on music interestsFocuses on music interests
facebookfacebook– 39M users39M users– Photo sharingPhoto sharing
LinkedInLinkedIn– 14M users14M users– Oriented toward professional networking, Oriented toward professional networking,
hiringhiring Viral invitations, interoperabilityViral invitations, interoperability
About the facebook About the facebook platformplatform After 3 monthsAfter 3 months
– 3,261 applications vetted by facebook3,261 applications vetted by facebook– 46 applications attracted > 1M installs46 applications attracted > 1M installs
Platform is still evolvingPlatform is still evolving– We may experience change along the We may experience change along the
wayway Server support Server support
facebook project ideasfacebook project ideas PhotosPhotos GamesGames Shared InterestsShared Interests ProductivityProductivity Location sharingLocation sharing Finding employment / grad schoolFinding employment / grad school MashupsMashups
Meta-commentMeta-comment Mostly describing a variety of toolsMostly describing a variety of tools
– Exercised a few in assignmentsExercised a few in assignments– Will need to pick appropriate ones to Will need to pick appropriate ones to
apply in group projectapply in group project Grasp of tools tested in midtermGrasp of tools tested in midterm Group project pulls threads of Group project pulls threads of
class togetherclass together
Additional observation Additional observation toolstools Diary studyDiary study Experience Sampling MethodExperience Sampling Method PersonasPersonas
Diary studyDiary study Asking people to keep a diary of Asking people to keep a diary of
their interactions with a computer their interactions with a computer system, any significant events or system, any significant events or problems during their use of a problems during their use of a system, or other aspects of their system, or other aspects of their working lifeworking life– Record the date and time of an eventRecord the date and time of an event– Where they areWhere they are– Information about the event of Information about the event of
significancesignificance– Ratings about how they feel, etc. Ratings about how they feel, etc.
Diary study variationsDiary study variations Vocally recording diary entries Vocally recording diary entries
– Give them recording device (iPod + Give them recording device (iPod + mic)mic)
– Attach list of questions to deviceAttach list of questions to device Use cell phone to call recording Use cell phone to call recording
service to capture entriesservice to capture entries
Why use a diary study?Why use a diary study? For situations that don’t afford direct For situations that don’t afford direct
observationobservation– Occur infrequentlyOccur infrequently– In dispersed settingsIn dispersed settings– Additional observers awkwardAdditional observers awkward
Collects data from actual experienceCollects data from actual experience Collecting data over longer time Collecting data over longer time
spanspan Example: When do you think of Example: When do you think of
communicating with your family?communicating with your family?
Diary study Diary study constraintsconstraints Requires high incentives for participantsRequires high incentives for participants
– Reminder promptsReminder prompts– Reward per entryReward per entry
Self-reporting mechanismSelf-reporting mechanism Access to recording instrumentAccess to recording instrument
Palen & Salzman, “Voice-mail diary Palen & Salzman, “Voice-mail diary studies for naturalistic data capture studies for naturalistic data capture under mobile conditions” under mobile conditions” http://doi.acm.org/10.1145/587078.587092http://doi.acm.org/10.1145/587078.587092
Experience Sampling Experience Sampling Method (ESM)Method (ESM) Getting user reactions Getting user reactions in the in the
momentmoment Also known as Ecological Also known as Ecological
Momentary Assessment (EMA)Momentary Assessment (EMA) From psychologyFrom psychology
ESMESM Participant asked to carry “beeper”Participant asked to carry “beeper” When beeper activatesWhen beeper activates
– Fill out short survey (using device)Fill out short survey (using device) User’s contextUser’s context Reaction to stimulusReaction to stimulus
Programmed alerts at “random” timesProgrammed alerts at “random” times– Several times / day over a weekSeveral times / day over a week– Scope time intervals appropriately (i.e., Scope time intervals appropriately (i.e.,
awake hours)awake hours) Large enough users, samples Large enough users, samples
modelmodel
ESM resourcesESM resources Open source tool for ESMOpen source tool for ESM
– http://web.media.mit.edu/~intille/caes/http://web.media.mit.edu/~intille/caes/– http://seattleweb.intel-research.net/prhttp://seattleweb.intel-research.net/pr
ojects/esm/ojects/esm/ Kellogg et al., “I’d be overwhelmed, Kellogg et al., “I’d be overwhelmed,
but it’s just one more thing to do”but it’s just one more thing to do”– http://doi.acm.org/http://doi.acm.org/
10.1145/503376.50339410.1145/503376.503394
Why use ESM?Why use ESM? ““Ecological validity” of dataEcological validity” of data
– Better than retrospective self-reportBetter than retrospective self-report Deals with mobile activities (ubicomp)Deals with mobile activities (ubicomp) Captures reactions in contextCaptures reactions in context
– SpatialSpatial– SituationalSituational– TemporalTemporal
Collecting data over longer time span Collecting data over longer time span (beyond a single session or observation)(beyond a single session or observation)
Example: When do you answer cell Example: When do you answer cell phone?phone?
ESM constraintsESM constraints It is interruptiveIt is interruptive
– Strategy for handling “non-Strategy for handling “non-response”response”
Survey must be extremely quick Survey must be extremely quick to fill out to fill out – Less than 1 minuteLess than 1 minute
PersonasPersonas
Archetypal users that represent Archetypal users that represent the needs of larger groups of the needs of larger groups of users, in terms of their goals users, in terms of their goals and personal characteristics and personal characteristics
Representing user researchRepresenting user research Guide vision and designGuide vision and design Popularized by Alan CooperPopularized by Alan Cooper
– The Inmates are Running the AsylumThe Inmates are Running the Asylum– http://www.cooper.com/insights/journal_of_design/http://www.cooper.com/insights/journal_of_design/
articles/the_origin_of_personas_1.htmlarticles/the_origin_of_personas_1.html
Creating personasCreating personas NameName Demographic infoDemographic info PicturePicture Paragraph descriptions Paragraph descriptions
– User motivationsUser motivations– GoalsGoals– ExpectationsExpectations– PersonalityPersonality
Imaginary but precise, specific but Imaginary but precise, specific but stereotypedstereotyped
http://www.infotoday.com/Online/jul03/head.shtmlhttp://www.infotoday.com/Online/jul03/head.shtml
Course Scheduler Course Scheduler example personaexample persona
Course Scheduler Course Scheduler example personaexample persona
Thanks to Prof. Marti Hearst
Remember Jim?Remember Jim? What were his good attributes?What were his good attributes?
– Great looksGreat looks– Witty storiesWitty stories– Good listening skillsGood listening skills
Personas anecdotesPersonas anecdotes Sun Microsystems life-size Sun Microsystems life-size
cutouts of real customerscutouts of real customers– Sun’s customers otherwise Sun’s customers otherwise
“remote”“remote”– Get to know the customerGet to know the customer
““Customer” cutouts became Customer” cutouts became jokesjokes
One customer actually One customer actually visited in person!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 yourself designing designing for your fantasyfor your fantasy
Thanks to Michael Muller, IBM Research
Design, Representing Design, Representing IdeasIdeas ScenariosScenarios StoryboardsStoryboards Role-playingRole-playing
ScenariosScenarios Providing context for use (narrative)Providing context for use (narrative)
– Sometime referred to as “use cases”Sometime referred to as “use cases” Narrative description of:Narrative description of:
– User(s)User(s)– Resources (tools, information, people)Resources (tools, information, people)– GoalGoal– CircumstancesCircumstances– Time intervalTime interval
Gas-pumping scenarioGas-pumping scenario– User(s)User(s)
Driver, passengerDriver, passenger– Resources (tools, information, people)Resources (tools, information, people)
Car, pump, currency, gas station attendantCar, pump, currency, gas station attendant– GoalGoal
Fill up car with appropriate gasFill up car with appropriate gas– CircumstancesCircumstances
Day / night, sunny / rainy, leisurely / Day / night, sunny / rainy, leisurely / hurriedhurried
– Time intervalTime interval As quickly as possibleAs quickly as possible
StoryboardingStoryboarding Series of frames depicting key steps in Series of frames depicting key steps in
reaching a goalreaching a goal– Mechanically, can use pin board for easy Mechanically, can use pin board for easy
rearrangement / editingrearrangement / editing Describe the interaction in contextDescribe the interaction in context
– Show user in at least 1Show user in at least 1stst frame frame (establishing shot)(establishing shot)
– User and the environmentUser and the environment– User and the systemUser and the system
That sounds like comicsThat sounds like comics
OK/Cancel February 3, 2006, http://www.ok-cancel.com/comic/125.html
The value of comicsThe value of comics Juxtaposed pictorial Juxtaposed pictorial
images in a deliberate images in a deliberate sequence; “sequential sequence; “sequential art”art”– Abstraction allows personal Abstraction allows personal
projection into the sceneprojection into the scene– Our sense of Our sense of closureclosure fills in fills in
the missing detailsthe missing details
Magic of closureMagic of closure
Storyboard examplesStoryboard examples
Film editing interface
Posting storyboards on Posting storyboards on flickrflickr
Testing storyboards Testing storyboards with userswith users Using storyboards to get input Using storyboards to get input
from users, other stakeholdersfrom users, other stakeholders Check understanding of process Check understanding of process
that users go throughthat users go through– Observe user reactionObserve user reaction– Debrief usersDebrief users
Good reference point for design Good reference point for design processprocess
Storyboarding hintsStoryboarding hints Keep it quickKeep it quick Cleverly re-use cards and copyingCleverly re-use cards and copying
– Draw large windowDraw large window– Draw components on cardsDraw components on cards– Rearrange cards, copyRearrange cards, copy
Allows trying out ideas without Allows trying out ideas without writing any codewriting any code
Storyboarding exerciseStoryboarding exercise Storyboard the process of adding Storyboard the process of adding
a cameraphone picture to a cameraphone picture to facebook photosfacebook photos– Last time focused on drawingLast time focused on drawing– This time, focused on designing and This time, focused on designing and
expressing ideasexpressing ideas– What are the steps? Features?What are the steps? Features?– 15 minutes15 minutes
Reflecting on Reflecting on storyboardingstoryboarding Features?Features?
– Email, text, designated emailEmail, text, designated email Steps?Steps?
Role-playingRole-playing Enacting scenarios, storyboardsEnacting scenarios, storyboards Recording on videoRecording on video
– PresentationsPresentations– PublicityPublicity
Video records (showing up on YouTube)Video records (showing up on YouTube)– Microsoft Surfaces (2007)Microsoft Surfaces (2007)– http://www.youtube.com/watch?v=QigsOR9r36khttp://www.youtube.com/watch?v=QigsOR9r36k– Apple Knowledge Navigator (1987)Apple Knowledge Navigator (1987)– http://http://youtube.com/watch?vyoutube.com/watch?v=3WdS4TscWH8=3WdS4TscWH8
BodystormingBodystorming Transformation of abstract ideas and Transformation of abstract ideas and
concepts into physical experiences concepts into physical experiences Imagining the product already existsImagining the product already exists
– Act as if it existsAct as if it exists– In the context of how you would use itIn the context of how you would use it– Involving entire body in enacting usageInvolving entire body in enacting usage
Oulasvirta et al., “Understanding Oulasvirta et al., “Understanding contexts by being there: Case studies contexts by being there: Case studies in bodystorming” in bodystorming” – http://dx.doi.org/10.1007/s00779-003-0238-7http://dx.doi.org/10.1007/s00779-003-0238-7
Assignment (Due Sept. Assignment (Due Sept. 13)13) Forming project teams (4 people)Forming project teams (4 people)
– Submit list of names + email in group (1 Submit list of names + email in group (1 per group)per group)
OROR– Name, email, plus list of interests to help Name, email, plus list of interests to help
form groupform group Especially important to participate in sectionEspecially important to participate in section
Visually annotated idea listVisually annotated idea list
Next timeNext time ReadingsReadings
– Norman, DOET, Chapter 2Norman, DOET, Chapter 2– First Principles of Interaction Design First Principles of Interaction Design
(from AskTog) (from AskTog)