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 btsao@berkeley.edubtsao@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)