cpsc 481 1 user centered design and prototyping why user-centered design is important prototyping...

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, i