User centered design and prototyping 1Evan Golub / Ben Bederson / Saul GreenbergUser Centered Design and PrototypingWhy User Centered Design is importantHow Prototyping helps User Centered DesignEvan Golub / Ben Bederson / Saul GreenbergSystem Centered DesignUser centered design and prototyping 2Evan Golub / Ben Bederson / Saul GreenbergSystem Centered DesignWhat can be built easily on this platform?What can I create from the available tools?What do I as a programmer find interesting to work on?Evan Golub / Ben Bederson / Saul GreenbergUser Centered System DesignDesign is based upon a user’s• abilities and real needs• context•work•tasksGolden rule of interface design:“Know The User”User centered design and prototyping 3Evan Golub / Ben Bederson / Saul GreenbergUser Centered System Design... is based on understanding the domain of work or play in which peopleare engaged and in which they interact with computers, andprogramming computers to facilitate human action. ...From Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison WesleyDenning and Dargan, 1996Three assumptionsThe result of a good design is a satisfied customerThe process of design is a collaboration between designersand customers. The design evolves and adapts to theirchanging concerns, and the process produces a specificationas an important byproductThe customer and designer are in constant communicationduring the entire processEvan Golub / Ben Bederson / Saul GreenbergParticipatory DesignProblem• intuitions wrong• interviews etc. not precise• designer cannot know the user sufficiently well to answer all issues thatcome up during the designThe useris justlike meSolutiondesigners should have access to pool ofrepresentative users. That is, END users,not their managers or union reps!User centered design and prototyping 4Evan Golub / Ben Bederson / Saul GreenbergParticipatory DesignUsers become first class members in the design process- active collaborators vs passive participantsUsers considered subject matter experts- know all about the work contextIterative process• all design stages subject to revisionEvan Golub / Ben Bederson / Saul GreenbergParticipatory DesignParticipatory Design:Up side• users are excellent at reacting to suggested system designs- designs must be concrete and visible• users bring in important “folk” knowledge of work context- knowledge may be otherwise inaccessible to design team• greater buy-in for the system often resultsDown side• hard to get a good pool of end users- expensive, reluctance ...• users are not expert designers- don’t expect them to come up with design ideas from scratch• the user is not always right- don’t expect them to know what they wantUser centered design and prototyping 5Evan Golub / Ben Bederson / Saul GreenbergMethods for involving the userUser• Uses system after deployment.Tester• Tests system after development, before deploymentInformant• Helps during development – perhaps by critiquing designs, participating ininterviews, observations of current practices, etc.Design Partner (full PD)• Equal partner - Allison Druin, UMD (CHI 2000)Evan Golub / Ben Bederson / Saul GreenbergMethods for involving the userAt the very least, talk to users• surprising how many designers don’t!Interviews• used to discover user’s culture, requirements, expectations, etc.• contextual inquiry:- interview users in their workplace, as they are doing their jobExplain designs• describe what you’re going to do• get input at all design stages- all designs subject to revision• important to have visuals and/or demos- people react far differently with verbal explanationsUser centered design and prototyping 6Evan Golub / Ben Bederson / Saul GreenbergPrototypingEarly designLate designBrainstorm different representationsChoose a representationRough out interface styleTask centered walkthrough and redesignFine tune interface, screen designHeuristic evaluation and redesignUsability testing and redesignLimited field testingAlpha/Beta testsLow fidelity paper prototypes Medium fidelity prototypesHigh fidelity prototypes / restricted systemsWorking systemsEvan Golub / Ben Bederson / Saul GreenbergLow fidelity prototypesPaper-based prototypes• a paper mock-up of the interface look, feel, functionality• “quick and cheap” to prepare and modifyPurpose• brainstorm competing representations• elicit user reactions• elicit user modifications / suggestionsUser centered design and prototyping 7Evan Golub / Ben Bederson / Saul GreenbergLow fidelity prototypesSketches• drawing of the outward appearance of the intended system• crudity means people concentrate on high level concepts• but hard to envision a dialog’s progression&RPSXWHU 7HOHSKRQH /DVW 1DPH )LUVW 1DPH 3KRQH3ODFH &DOO +HOSNot good!Should behand-drawnon paperEvan Golub / Ben Bederson / Saul GreenbergLow fidelity prototypesIterate• “To get a good idea, get lots of ideas”The speed of lo-fi prototypes makes it fundamentally easier to go throughseveral iterations – each with feedback from users.User centered design and prototyping 8Evan Golub / Ben Bederson / Saul GreenbergLow fidelity prototypesStoryboarding• a series of key frames- originally from film; used to get the idea of a scene- snapshots of the interface at particular points in the interaction• users can evaluate quickly the direction the interface is headingEvan Golub / Ben Bederson / Saul GreenbergStoryboard of a computer based telephone&RPSXWHU 7HOHSKRQH /DVW 1DPH )LUVW 1DPH 3KRQH3ODFH &DOO +HOS+HOS!&RPSXWHU 7HOHSKRQH /DVW 1DPH *UHHQEHUJ )LUVW 1DPH 3KRQH3ODFH &DOO +HOS'LDOOLQJ&DQFHO&DOO FRQQHFWHG&RPSXWHU 7HOHSKRQH /DVW 1DPH *UHHQEHUJ )LUVW 1DPH 3KRQH3ODFH &DOO +HOS&RQQHFWHG+DQJ XS&DOO FRPSOHWHG5HWXUQ+HOS 6FUHHQ <RX FDQ HQWHU HLWKHU WKH SHUVRQV QDPH RU WKHLU QXPEHU 7KHQ KLW WKH SODFH EXWWRQ WR FDOO WKHP&DOO E\ QDPH!&RPSXWHU 7HOHSKRQH /DVW 1DPH *UHHQEHUJ )LUVW 1DPH 3KRQH3ODFH &DOO +HOS(VWDEOLVKLQJ FRQQHFWLRQ!User centered design and prototyping 9Evan Golub / Ben Bederson / Saul GreenbergLow fidelity prototypesPICTIVE• “Plastic Interface for Collaborative Technology Initiatives through VideoExploration” - Muller, CHI 91• Design is multiple layers of sticky notes and plastic overlays- different sized stickies represent icons, menus, windows etc.• Interaction