design process--representing
DESCRIPTION
NEEDS. DESIGN. EVALUATE. IMPLEMENT. Design Process--Representing. September 11, 2007 Turn in your Conceptual Map assignment. Idea Commercials. Materials for projection by midnight tonight! Email to [email protected] [cs160] in Subject line Presented in discussion section tomorrow - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/1.jpg)
Design Process--Design Process--RepresentingRepresentingSeptember 11, 2007September 11, 2007
Turn in your Conceptual Map Turn in your Conceptual Map assignmentassignment
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 2: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/2.jpg)
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
![Page 3: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/3.jpg)
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/
![Page 4: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/4.jpg)
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
![Page 5: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/5.jpg)
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?
![Page 6: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/6.jpg)
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
![Page 7: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/7.jpg)
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
![Page 8: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/8.jpg)
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
![Page 9: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/9.jpg)
facebook project ideasfacebook project ideas PhotosPhotos GamesGames Shared InterestsShared Interests ProductivityProductivity Location sharingLocation sharing Finding employment / grad schoolFinding employment / grad school MashupsMashups
![Page 10: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/10.jpg)
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
![Page 11: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/11.jpg)
Additional observation Additional observation toolstools Diary studyDiary study Experience Sampling MethodExperience Sampling Method PersonasPersonas
![Page 12: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/12.jpg)
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.
![Page 13: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/13.jpg)
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
![Page 14: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/14.jpg)
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?
![Page 15: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/15.jpg)
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
![Page 16: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/16.jpg)
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
![Page 17: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/17.jpg)
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
![Page 18: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/18.jpg)
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
![Page 19: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/19.jpg)
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?
![Page 20: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/20.jpg)
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
![Page 21: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/21.jpg)
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
![Page 22: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/22.jpg)
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
![Page 23: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/23.jpg)
Course Scheduler Course Scheduler example personaexample persona
![Page 24: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/24.jpg)
Course Scheduler Course Scheduler example personaexample persona
Thanks to Prof. Marti Hearst
![Page 25: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/25.jpg)
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
![Page 26: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/26.jpg)
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!
![Page 27: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/27.jpg)
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
![Page 28: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/28.jpg)
Design, Representing Design, Representing IdeasIdeas ScenariosScenarios StoryboardsStoryboards Role-playingRole-playing
![Page 29: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/29.jpg)
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
![Page 30: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/30.jpg)
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
![Page 31: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/31.jpg)
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
![Page 32: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/32.jpg)
That sounds like comicsThat sounds like comics
OK/Cancel February 3, 2006, http://www.ok-cancel.com/comic/125.html
![Page 33: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/33.jpg)
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
![Page 34: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/34.jpg)
Magic of closureMagic of closure
![Page 35: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/35.jpg)
![Page 36: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/36.jpg)
Storyboard examplesStoryboard examples
![Page 37: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/37.jpg)
Film editing interface
![Page 38: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/38.jpg)
![Page 39: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/39.jpg)
![Page 40: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/40.jpg)
![Page 41: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/41.jpg)
![Page 42: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/42.jpg)
![Page 43: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/43.jpg)
Posting storyboards on Posting storyboards on flickrflickr
![Page 44: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/44.jpg)
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
![Page 45: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/45.jpg)
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
![Page 46: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/46.jpg)
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
![Page 47: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/47.jpg)
Reflecting on Reflecting on storyboardingstoryboarding Features?Features?
– Email, text, designated emailEmail, text, designated email Steps?Steps?
![Page 48: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/48.jpg)
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
![Page 49: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/49.jpg)
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
![Page 50: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/50.jpg)
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
![Page 51: Design Process--Representing](https://reader033.vdocument.in/reader033/viewer/2022051420/56815fb1550346895dceac3e/html5/thumbnails/51.jpg)
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)