WIXLIB

CS3724 Human-computer InteractionRapid Prototyping inUser InteractionDevelopment &EvaluationCopyright 2005 H. Rex Hartson and Deborah Hix.

Topicszzzzzz2RPRelation to usability engineering life cycle anditerative refinementAdvantages and dangers of prototypingLow-fidelity paper prototypesPrototyping evolutionWhat to put in a prototypeTeam exercise on rapid prototyping

Introduction to Rapid Prototypingz3RPRevisiting theusabilityengineeringlife cycle

Rapid PrototypingzzzUsability engineering life cycle is evaluationcenteredDilemma: Can’t evaluate an interface until it isbuilt, but after building, changes are difficultSolution: Rapid prototyping-producinginteractive versions of an evolving interactiondesign–4RPDon’t wait until first release or field test

Rapid Prototyping–z5RPMain technique supporting iterative refinementPrototype is conversational “prop” to supportcommunication of concepts not easilyconveyed verbally (R. Bellamy, Apple Corp.)

Advantages of Rapid Prototypingzzzz6RPConcrete baseline for communication betweenusers and developersAllows users to “take it for a spin”Encourages early user participation andinvolvementAllows early observation of user performance

Advantages of Rapid PrototypingzExample of rapid prototyping advantages (fromreal world)––––7RPDatabase program had novice & advanced usersNovice interface: spent huge effort and largepercentage of system code to build in lots of handholding for making queriesWhen released, found that most users movedrapidly from novice to expert, typing in own SQLIf could have seen this in advance, could havesaved resources and lightened up the application

Advantages of Rapid Prototypingzzz8RPLow-fidelity prototyping is obviously notfinished, so users have impression it is easy tochangeAllows immediate observation ofconsequences of design decisionsCan help with user “buy in”

Advantages of Rapid Prototypingzz9RPCan help sell management an idea for a newproductCan help effect a paradigm shift from existingsystem to new system

Dangers of Rapid Prototyping10zNeeds cooperation of management,developers, and userszManagement may view as wastefulzProgrammers may lose disciplinezManagers and/or customers and/or marketingmay view prototype as final productRP

Dangers of Rapid Prototypingzzz11RPPrototype can be overworked (reason forprototype is forgotten)Prototyping tool may influence designPossibility of over-promising with prototype

Low-Fidelity PrototypingzLow-fidelity paper prototypes are bona fidetechniques on their own–––12RPNot just a low-tech substitute for computer-basedprototypeNot just something you do if you don’t have goodsoftware toolsMajor corporations with extensive resources usepaper prototype routinely for early interactiondevelopment

Low-Fidelity Prototypingzzzzz13RPPaper prototype is essential to support participatorydesignPaper prototypes can evolve very quicklyComputer-based prototype can distract from usabilityfocus early onPeople do take paper prototypes seriously; they do findmany usability problemsLow-fidelity prototypes find many usability problems,and these are generally the more severe problems

High- & Low-Fidelity PrototypingzInteraction design has two partsTypeofPrototype–Look and feel: objects–Sequencing: behavior, including changes to object behavior"Strength"When in life cycle Cost to fix lookto applyand"strength"feelCost to fixsequencingPaper(lo-fi)Flexibility; easy tochange sequencing,overall behaviorEarlyAlmostnoneLowComputer(hi-fi)Fidelity of look andfeelLaterLowHigh14RP

Prototype Evolution Within AProjectzzz15RPLow-fidelity hand-made paper prototype –evaluate conceptual model, early screendesign ideasMid-fidelity prototype – computer printed paperprototype or on-line (VB-like) mockupHigh-fidelity prototype – computer-based withsome working functionality (e.g., real databasefunctions)

What To Put In A PrototypezWhat to put in early prototypes--to evaluateusability of overall interaction designmetaphor/paradigm (conceptual design)–Low Fidelityzzz–16RPStart with representative sample screen or twoMock-up a representative taskFollow a representative task threadLearn a great deal from incomplete design, andfrom a single brand new user

Why Not Go Ahead and Program aLow-Fidelity Prototype?zzz17RPYou might not have someone on the team whoknows VB (or whatever) well enough and whois free to do itPaper has much broader visual bandwidth andyou often need multiple screens visible at onceMajor reorganization of sequencing faster andeasier by shuffling paper on table

Why Not Go Ahead and Program aLow-Fidelity Prototype?zzzWe often like to write on the pages, screensThis is a more natural way to edit, modifydetails during discussion (& always faster)Marking paper is far less intrusive to reviewprocess–18RPTaking 30-60 seconds to make VB change and putback up can break conversation flow, distract focus,and fragment process

Fleshing Out A PrototypezWhat to put in later prototypes—to evaluate usability of details(detailed designs)–19RPHigh FidelityzMore detailed, refined screenszMore complete tasks

What To Put In A PrototypezInvest just enough effort in a rapid prototype––zSame process to prototype Web applicationsas for GUIs–20RPTo achieve formative evaluation goal, but no moreTypical transition to real productWeb can make prototype more accessible fordifferent users, conditions

What To Keep From Prototype forReal System–Keep details (code) of user interaction designobjects, look and feel–Discard any functional or other code holdingprototype togetherz21RPE.g., sequencing code; was never meant to be productcode

Team Exercise – Rapid PrototypingAlmost all you ever wanted to know about RP you learned inKindergarten!zGoal:–zActivities:–22RPTo obtain experience with rapid construction of alow fidelity prototype for earlystages of user interaction designDraw Web pages to match yourscenarios

Team Exercise – Rapid PrototypingzzMake prototypes manually “executable”General – What we are going to do:––23RPDraw interaction objects on paper, cut them out,and tape in aligned positions, relative to otherobjects, on separate blank plastic transparenciesUse “easel to register each sheet of plastics withothers sheets

Team Exercise – Rapid Prototyping–24RPDuring “execution” most dynamics will be created byadding and removing various registered plasticsheets to/from the easelYou will need to prototype at least the benchmarktask from your usability specifications, sincethe prototype will be used in the formativeevaluation exercise. Prototype will be “executed”on the easel, usually taped to tabletop for stability.

Team Exercise – Rapid Prototyping–IMPORTANT: Get everyone on your team involvedin drawing, cutting, taping, etc. – not just one or twopeople.You’ll be done much faster ifeveryone pitches in. However,this is not art class, so do notworry too much about straightlines, exact details, etc.25RP

Team Exercise – Rapid Prototyping–Start with simplest possible background for eachWeb page in pencil or pen on full size paper, asbase for all moving parts.z–26RPInclude only parts that never change (e.g., for calendar:monthly “grid”, no month nameEverything else is drawn in pencil or pen onpaper, cut out, and taped (in proper location) onseparate plastic sheet.

Team Exercise – Rapid Prototyping–Don’t draw anything twice; make it modular to reusez27RPThe less you put on each layer, the more modular–Whatever changes when user gives input should goon separate paper-on-plastic sheet–If user will type in values (e.g., item number) useclear sheet on top and marking pen

Team Exercise – Rapid Prototyping–Make a highlight for major selectable objectsz–Fasten some objects (e.g., pull-down lists) to top or side ofeasel with tape “hinges”, so they “flap down” to overlay thescreen–Use any creative techniques to demonstrate motion, dynamics,feedbackz28RPUse square or rectangle with “handle”; color with marking penE.g., scrolling can be done with paper through slits cut in largerpaper (all taped to plastic sheet)

Team Exercise – Rapid Prototyping–zDeliverables:––z29RPPilot testing: be sure that your prototype will support yourbenchmark tasks by having one member of your team “run” theprototype while another member plays “user” and tries out thebenchmark tasksAn “executable”version of your prototype, constructed of papertaped in registration to plastic sheetsPilot test completeComplete by: (end of class, if possible; else bring tonext class)

4 RP Rapid Prototyping zUsability engineering life cycle is evaluation- centered zDilemma: Can't evaluate an interface until it is built, but after building, changes are difficult zSolution: Rapid prototyping-producing interactive versions of an evolving interaction design - Don't wait until first release or field test