CPSC 481 1 User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods.
out of 71
Post on 16-Jan-2016
The 3D Tractusdesign exampleSystem Centered DesignWhat can I easily build on this platform?What can I create from the available tools?What do I as a programmer find interesting? User Centered System DesignDesign is based upon a usersabilities and real needs contextworktasksneed for usable and useful productGolden rule of interface design: Know The UserUser Centered System Design... is based on understanding the domain of work or play in which people are engaged and in which they interact with computersFrom Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison WesleyDenning and Dargan, 1996Assumptions The result of a good design is a satisfied customer The process of design is a collaboration between designers and customers. The design evolves and adapts to their changing concernsThe customer and designer are in constant communication during the entire processCPSC 481Notes:Assignment 1 due: Friday October 14th 2005, 5PM.No class on Monday, Oct. 10th (Thanks Giving)Midterm: Monday, Nov. 7th, in class (SB142), 2:00-2:50pmToday: Continuing User Centered Design and Prototyping, Required readings:Prototyping. (Extract) from Nielsen, J. (1993) In Usability EngineeringLow vs. high fidelity prototyping debate. Rudd, J., Stern, K. and Isensee, S. (1996) Interactions.Prototyping for tiny fingers. Rettig, M. (1994) Communications of the ACM, 37(4), ACM PressCPSC 481Know your userKnow your user2. You are not your userParticipatory Design:Participatory DesignProblemDesigners intuitions can be wronginterviews etc not precisedesigner cannot know the user sufficiently well to answer all issues that come up during the designSolutiondesigners should have access to representative usersEND users, not their managers or union reps!Participatory DesignUsers are 1st class members in the design processactive collaborators vs passive participants Users are considered subject matter experts know all about the design work context Iterative processall design stages subject to revisionParticipatory DesignUp sideusers are excellent at reacting to suggested system designsdesigns must be concrete and visibleusers bring in important folk knowledge of work contextknowledge may be otherwise inaccessible to design teamMethods for involving the userAt the very least, talk to userssurprising how many designers dont! Contextual interviews + site visitsinterview users in their workplace, as they are doing their jobdiscover users culture, requirements, expectations,Methods for involving the userExplain designsdescribe what youre going to doget input at all design stages all designs subject to revision (dont fall in love with your design) Important to have visuals and/or demospeople react far differently with verbal explanationsthis is why prototypes are criticalDesign: getting ideas:To get good ideasGet lots of ideasSketching and PrototypingSketches / low / medium / high fidelity prototypes as investment in design increases, changes are becoming more painful to implement.as investment in design increases, so does the formality of the criteria whereby concepts are reviewed or accepted.SketchesSketching vs PrototypingSketchesInviteSuggestExploreQuestionProposeProvokePrototypeAttendDescribeRefineAnswerTestResolveFrom Design for the Wild, Bill Buxton (in press) with permissionSketching and PrototypingEarly designLate designSketches & Low Fidelity PrototypesPaper mock-up of the interface look, feel, functionalityquick and cheap to prepare and modify Purposebrainstorm competing representationsbring out user reactionsbring out user modifications / suggestionsSketchesdrawing of the outward appearance of the intended systemcrudity means people concentrate on high level conceptsbut hard to envision a dialogs progressionBack to Cheap ShopThe attributes of sketchesQuick to makeTimely provided when neededDisposable investment in the concept, not the executionPlentiful they make sense in a collection or series of ideasClear vocabulary rendering & style indicates its a sketch, not an implementation Constrained resolutiondoesnt restrain concept explorationConsistency with staterefinement of rendering matches the actual state of development of the concept Suggest & explore rather than confirmvalue lies in suggesting and provoking what could besketches are the medium to conversation and interactionStoryboardinga series of key frames as sketchesoriginally from film; used to get the idea of a scenesnapshots of the interface at particular points in the interactionusers can evaluate quickly the direction the interface is headingExcerpts from Disneys Robin Hood storyboardnote how each scene in this storyboard is annotatedCPSC 481Notes:Assignment 1 due: Friday October 14th 2005, 5PM.Assignment 2 will be out this Friday.Midterm: Monday, Nov. 7th, in class (SB142), 2:00-2:50pmPast lectures and required readings are all online.CPSC 599.17 infoLast lecture: participatory design, climbing the prototypes evolutionary ladder.Today: Finishing User Centered Design and Prototyping.Looking for something different to do?Icuiti V920 Autonomous Humanoid (Robosapien hack)FrameworkCPSC 503 winter project course, 4th year CPSC only.NSERC Summer research, Undergraduate Student Research Awards (USRA), ~6K$/four months, any year, any Department.Workstation at ilabInterested? Please drop me a line.Sketches and storyboardingScan the stroller ->Change the color ->Place the order ->Initial screenScan the shirt ->Touch previous item ->Delete that item->Alternate pathStoryboardingSpotlight: an interactive foam core and paper sketch/storyboard Credit: Dept Industrial Design, University of WashingtonTutorials and manualsWhat are they?written in advance of the system implementationserves as an interface specification for programmersTutorial for step by step description of an interactionan interface storyboard walk-through with directionsManual for reference of key conceptsin-depth technical description of the different parts of the systema list of featuresOften less visual Does this work?Users can read and provide feedback on:interface,functionality,match to task.Act as design toolsTutorialsStar Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/TutorialsStar Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/TutorialsStar Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/ManualsThe Sims is the property of Maxis: http://thesims.ea.com/ManualsThe Sims is the property of Maxis: http://thesims.ea.com/ManualsThe Sims is the property of Maxis: http://thesims.ea.com/Pictive plastic interface for collaborative technology initiatives through video explorationMuller, CHI 1991 Designing with office suppliesmultiple layers of sticky notes and plastic overlaysdifferent sized stickies represent icons, menus, windows etc.interaction demonstrated by manipulating notesnew interfaces built on the flysession videotaped for later analysisusually end up with mess of paper and plastic!PictiveCan pre-make paper interface componentsbuttonsmenualert boxcombo boxtabsentrieslist boxPictive, heres how it can look likeThe Developers Dilemma(Hix & Hartson)You cannot evaluate an interaction design until after it is built; but after building changes to the design are difficultThe two dimensions of prototypingNielsen Usability Engineering 1993Limiting prototype functionalityvertical prototypesincludes in-depth functionality for only a few selected featuresspecific design ideas can be tested in depth horizontal prototypesthe entire surface interface with no underlying functionalitya simulation; no real work can be performed scenarioscripts of particular fixed uses of the system; no deviation allowedNielsen, J. (1993) Usability Engineering, p93-101, Academic Press. Different FeaturesFunctionalityIntegrating prototypes and products1. throw-awayprototype only serves to reveal user reactioncreating prototype must be rapid, otherwise too expensive 2. incrementalproduct built as separate components (modules)each component prototyped & tested, then added to the final system 3. evolutionaryprototype altered to incorporate design changeseventually becomes the final productCPSC 481Notes:Assignment 1 due today @5pm!!Assignment 2 out, due on Monday October 31th 2005, @5PMMidterm: Monday, Nov. 7th, in class (SB142), 2:00-2:50pmToday: Finishing User Centered Design and Prototyping. Monday: starting Evaluating Interfaces with Users.Assignment 2Qualitative evaluationwith usersAssignment 2 OverviewThis assignment is a hands-on exercise on qualitative evaluation. Its purpose is to give you practical experience conducting a usability study. Methods used in this study include the conceptual model discovery, silent observation, think-aloud, constructive interaction, questionnaires and interviews. Because of the economy of these methods (they are easy to understand and quick to apply) you can easily use them to your future work.In terms of this assignment, your group is to take the perspective of consultants that are working for a company that has been commissioned to evaluate a system, in this case the Air Canada website. You can use your classmates or even your friends as test participants when applying the various methodologies although you should try to get as wide a variety of test participants as possible. DeliverablesYour group will deliver a substantial technical report written to the (imaginary) vice-president of the company (your TA) that commissioned the study. It must include your observations, the findings, the major problems detected, and some design recommendations. The appendix to your report will briefly contrast the methods used, recommending which ones should be adapted in future study. Included Handouts1.Assignment overview2.Assignment description and details 3.System and example tasks for the usability study (Air Canada web site)4.Grading Sheet 5.Tips on questionnaire design 6.Apples Discussion of guidelines for user observation. Back to user centered design:Designing with the userIntegrating prototypes and products1. throw-away2. incremental3. evolutionaryThrow-Away Approach To PrototypingThe prototype is only used to get feedbackThe prototype is built, tested and then discardedSystemIncremental Approach To PrototypingBuild the system as separate modules/componentsEach module is designed, prototyped and completed separately before being added to the final systemSystemSystemSystemEvolutionary Approach To PrototypingChange the entire prototype itself in order to incorporate changesEventually the reworked prototype becomes the final systemSystemMedium Fidelity PrototypesWith a computerMany different typesfrom simple computer drawn images to partially working systemsMay take longer to generate and change than low-fiBenefitsSeems more like the completed detailed system, provides a clearer idea of how it worksMay allow user testing (not true for all medium fidelity prototypes).PitfallsUsers reactions are usually in the smallBlinds people to major representational flaws because of a tendency to focus on more minor details Users more reluctant to challenge/change the design itselfDesigns are too pretty, developers egosManagement may think its real!Medium FidelityPainting/drawing packagesdraw each storyboard scene on computervery thin horizontal prototype (across features, no functionality)does not capture the interaction feelMedium FidelityScripted simulationscreate storyboard with media tools on a computerscene transition activated by simple user inputsa simple vertical prototypeCan use PowerPointuser given a very tight script/task to followappears to behave as a real systemscript deviations blow the simulationMedium Fidelity Interface buildersTools for letting a designer layout the common widgets Construct modeChange attributes of objects Test mode:Objects behave as they would under real situations Excellent for showing look and feelA broader horizontal prototypeBut constrained to widget library Vertical functionality added selectivelyThrough programmingpay no attention to the man behind the curtain!Wizard of OzA method of testing a system that does not existthe listening typewriter, IBM 1984Dear HenryWhat the user seesSpeech ComputerFrom Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.Wizard of OzA method of testing a system that does not existthe listening typewriter, IBM 1984What the user seesThe wizardSpeech ComputerDear HenryFrom Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.Wizard Of Oz: ExamplesIBM: a listening typewriter using continuous speech recognitionSecretary trained to:Understand key words as commandsTypes responses on screen as the system wouldManipulating graphic images through gesture and speech Intelligent Agents / Programming by demonstrationPerson trained to mimic learning agentUser provides examples of task they are trying to doComputer learns from themShows how people specify their tasks In both cases, system very hard to implement! But Wizard of Oz allows Interface evaluationWizard of OzHuman wizard simulates system responseinterprets user input according to an algorithmcontrols computer to simulate appropriate outputuses real or mock interfacewizard sometimes visible, sometimes hiddenpay no attention to the man behind the curtain! good for:adding simulated and complex vertical functionalitytesting futuristic ideas User Centered Design and PrototypingWhat you now knowUser centered + participatory designbased upon a users real needs, tasks, and work contextbring end-user in as a first class citizen into the design process Prototypingallows users to react to the design and suggest changes sketching / low-fidelity vs medium-fidelity Prototyping methods vertical, horizontal and scenario prototypingsketches, storyboarding, pictivethrow-away, incremental and evolutionary prototyping approachesscripted simulations, Wizard of OzHEREHERENeverwinter nights, RPGHEREHERHEREHERHEREHERHEREHERHEREHERE
View more >
User-Centered Interface Design. 2 What is user-centered design? First, let’s see some everyday examples of design that is NOT user-centered.
ˆ: ˇ˘ ˚ ˛ - User Centered Design Canvas ?· by The Rectangles USER CENTERED DESIGN CANVAS is divided…
User Centered Design and Prototyping Why user-centered design is important Prototyping and user centered design Prototyping methods Slide deck by Saul.
Saul Greenberg User Centered Design and Prototyping Why User Centered Design is important How Prototyping helps User Centered Design.
From User-Centered to Participatory Design ?· From User-Centered to Participatory Design Approaches…
For Best Results, Combine Document User-Centered wps. Best Results, Combine Document User-Centered Design Principles . Why Understanding and Utilizing both Document and User-Centered . Design Principles is ...