1 / 51

Design Process--Representing

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 btsao@berkeley.edu [cs160] in Subject line Presented in discussion section tomorrow

newbill
Download Presentation

Design Process--Representing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related