User Centered Design and PrototypingWhy user-centered design is importantPrototyping and user centered designPrototyping methods

Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.

Saul Greenberg

System Centered Design

Saul Greenberg

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?

Saul Greenberg

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

Saul Greenberg

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 concerns, and the process produces a specification as an important byproduct The customer and designer are in constant communication during the entire process

Saul Greenberg

Participatory DesignProblemintuitions 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!

Saul Greenberg

Participatory DesignUsers are 1st class members in the design processactive collaborators vs passive participants Users considered subject matter experts know all about the work context Iterative processall design stages subject to revision

Saul Greenberg

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 teamgreater buy-in for the system often results

Saul Greenberg

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,

Saul Greenberg

Methods for involving the userExplain designsdescribe what youre going to doget input at all design stages all designs subject to revision Important to have visuals and/or demospeople react far differently with verbal explanationsthis is why prototypes are critical

Saul Greenberg

Sketching and PrototypingSketches / low / medium / high fidelity prototypesas investment in design increases (red arrow), so does the formality of the criteria whereby concepts are reviewed or accepted From design to evaluationsimilarly, interface design (idea generation) progresses to usability testing (idea debugging and refinement)From Design for the Wild, Bill Buxton (in press) with permission

Saul Greenberg

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

Saul Greenberg

Sketching and PrototypingEarly designLate design

Saul Greenberg

Sketches & Low Fidelity PrototypesPaper mock-up of the interface look, feel, functionalityquick and cheap to prepare and modify

Purposebrainstorm competing representationselicit user reactionselicit user modifications / suggestions

Saul Greenberg

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

Saul Greenberg

Saul Greenberg

Saul Greenberg

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 inhibit 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 be i.e., they are the catalyst to conversation and interaction

From Design for the Wild, Bill Buxton (in press) with permission

Saul Greenberg

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, www.animaart.com/Cellar/disneyart/90robin%20storyboard.jpg.html

Saul Greenberg

From www.michaelborkowski.com/storyboards/images/big_bigguy1.gif note how each scene in this storyboard is annotated

Saul Greenberg

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

Saul Greenberg

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

Saul Greenberg

StoryboardingSpotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of WashingtonFrom Design for the Wild, Bill Buxton (in press) with permission

Saul Greenberg

Tutorials as Storyboardsa step by step storyboard walkthrough with detailed explanationswritten in advance of the system implementationalso serves as an interface specification for programmersApples Tutorial Guide to the Macintosh Finder

Saul Greenberg

Pictive plastic interface for collaborative technology initiatives through video explorationDesigning 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!

Saul Greenberg

PictiveCan pre-make paper interface componentsbuttonsmenualert boxcombo boxtabsentrieslist box

Saul Greenberg

Medium fidelity prototypesPrototyping with a computersimulate some but not all features of the interfaceengaging for end users purposeprovides sophisticated but limited scenario for the user to trycan test more subtle design issues dangersusers reactions often in the smallusers reluctant to challenge designerusers reluctant to touch the designmanagement may think its real!

Saul Greenberg

Limiting prototype functionalityvertical prototypesincludes in-depth functionality for only a few selected featurescommon 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.

Saul Greenberg

Integrating prototypes and productsthrow-awayprototype only serves to elicit user reactioncreating prototype must be rapid, otherwise too expensive incrementalproduct built as separate components (modules)each component prototyped & tested, then added to the final system evolutionaryprototype altered to incorporate design changeseventually becomes the final product

Saul Greenberg

Painting/drawing packagesdraw each storyboard scene on computervery thin horizontal prototypedoes not capture the interaction feel

Saul Greenberg

Scripted simulationscreate storyboard with media toolsscene transition activated by simple user inputsa simple vertical prototype user given a very tight script/task to followappears to behave as a real systemscript deviations blow the simulation

Saul Greenberg

Saul Greenberg

Saul Greenberg

Saul Greenberg

Saul Greenberg

Interface buildersDesign tools for laying out common widgets

excellent for showing look and feela broader horizontal prototypebut constrained to widget library vertical functionality added selectivelythrough programming

Saul Greenberg

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.

Saul Greenberg

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.

Saul Greenberg

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

Saul Greenberg

What 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, pictivescripted simulations, Wizard of Oz

Saul Greenberg

Articulate:who users aretheir key tasksUser and task descriptionsGoals:Methods:Products:Brainstorm designsTask centered system designParticipatory designUser-centered designEvaluate tasksPsychology of everyday thingsUser involvementRepresentation & metaphors

low fidelity prototyping methodsThrow-away paper prototypesParticipatory interaction

Task scenario walk- throughRefined designsGraphical screen designInterface guidelinesStyle guideshigh fidelity prototyping methodsTestable prototypesUsability testing

Heuristic evaluationCompleted designsAlpha/beta systems or complete specificationField testingInterface Design and Usability Engineering

Saul Greenberg

Storyboard of a computer telephone

Saul Greenberg

Help- Type name and place call

Saul Greenberg

Wizard of Oz ExamplesIBM: an imperfect listening typewriter using continuous speech recognitionsecretary trained to:understand key words as commandsto type 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, even harder to change!