CPSC 481 1 User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods

Download CPSC 481 1 User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods

Post on 16-Jan-2016




0 download

Embed Size (px)


  • The 3D Tractusdesign example

  • System 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 User

  • User Centered System Design... is based on understanding the domain of work or play in which people are engaged and in which they interact with computers

    From 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 process

    CPSC 481

    Notes: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 Press

    CPSC 481

    Know 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 revision

  • Participatory 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 team

  • Methods 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 critical

  • Design: getting ideas:To get good ideasGet lots of ideas

  • Sketching 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.

  • Sketches

  • Sketching vs PrototypingSketchesInviteSuggestExploreQuestionProposeProvokePrototypeAttendDescribeRefineAnswerTestResolveFrom Design for the Wild, Bill Buxton (in press) with permission

  • Sketching and PrototypingEarly designLate design

  • Sketches & 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 / suggestions

  • Sketchesdrawing of the outward appearance of the intended systemcrudity means people concentrate on high level conceptsbut hard to envision a dialogs progression

  • Back to Cheap Shop

  • The 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 interaction

  • Storyboardinga 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 heading

    Excerpts from Disneys Robin Hood storyboard

  • note how each scene in this storyboard is annotated

    CPSC 481

    Notes: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 ilab

    Interested? Please drop me a line.

  • Sketches and storyboarding

  • Scan the stroller ->Change the color ->Place the order ->Initial screen

  • Scan the shirt ->Touch previous item ->Delete that item->Alternate path

  • StoryboardingSpotlight: an interactive foam core and paper sketch/storyboard Credit: Dept Industrial Design, University of Washington

  • Tutorials and manuals

    What are they?written in advance of the system implementationserves as an interface specification for programmers

    Tutorial 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 tools

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

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

    session videotaped for later analysisusually end up with mess of paper and plastic!

  • PictiveCan pre-make paper interface componentsbuttonsmenualert boxcombo boxtabsentrieslist box

  • Pictive, heres how it can look like

  • The Developers Dilemma(Hix & Hartson)You cannot evaluate an interaction design until after it is built; but after building changes to the design are difficult

  • The two dimensions of prototypingNielsen Usability Engineering 1993

  • Limiting 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 FeaturesFunctionality

  • Integrating 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 product

    CPSC 481

    Notes: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 users

  • Assignment 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.

  • Deliverables

    Your 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-away

    2. incremental

    3. evolutionary

  • Throw-Away Approach To PrototypingThe prototype is only used to get feedbackThe prototype is built, tested and then discardedSystem

  • Incremental Approach To PrototypingBuild the system as separate modules/componentsEach module is designed, prototyped and completed separately before being added to the final system


  • Evolutionary Approach To PrototypingChange the entire prototype itself in order to incorporate changesEventually the reworked prototype becomes the final systemSystem

  • Medium 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 feel

  • Medium 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 simulation

  • Medium 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 programming

  • pay no attention to the man behind the curtain!

  • Wizard of OzA method of testing a system that does not existthe listening typewriter, IBM 1984

    Dear 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 evaluation

  • Wizard 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 Oz