Download
design process representing n.
Skip this Video
Loading SlideShow in 5 Seconds..
Design Process--Representing PowerPoint Presentation
Download Presentation
Design Process--Representing

Design Process--Representing

312 Vues Download Presentation
Télécharger la présentation

Design Process--Representing

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. NEEDS DESIGN EVALUATE IMPLEMENT Design Process--Representing September 11, 2007 Turn in your Conceptual Map assignment

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

  3. facebook application review • Resources for finding interesting applications • http://www.insidefacebook.com/category/applications/ • http://www.techdigest.tv/2007/07/the_101_best_fa.html • 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 > 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 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?

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

  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) • 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

  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., “I’d be overwhelmed, but it’s 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/articles/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 • Sun’s 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, 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

  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.com/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. Storyboard examples

  36. Film editing interface

  37. Posting storyboards on flickr

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

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

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

  41. Reflecting on storyboarding • Features? • Email, text, designated email • Steps?

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

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

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