Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.

Download Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.

Post on 29-Dec-2015




16 download


PrototypingCreation of concrete but partial implementations of a system design to explore usability issuesProblem scenariossummativeevaluationInformation scenariosclaims about current practiceanalysis ofstakeholders,field studiesUsability specificationsActivityscenariosInteraction scenariositerativeanalysis ofusability claims andre-designmetaphors,informationtechnology,HCI theory,guidelinesformativeevaluationDESIGNANALYZEPROTOTYPE & EVALUATEGoals of PrototypingPrototyping enables evaluation, happens throughoutExploring requirementsMarket analysis, participatory design, envisionment Choosing among alternativesRisky or critical features, go/no-go decisionsEmpirical usability testingAs early as possible, try out ideas with target usersEvolutionary developmentMay deliberately choose a malleable software platform, building software in incremental, iterative fashionDo scenarios as used in SBD serve as prototypes?Boehms SpiralModelSome Key TradeoffsQuality vs premature commitmentSpecial-purpose systems vs scheduling and resource managementRealism (e.g. timing, content) vs early availability or throw-away effortsConstant iteration vs radical change and/or re-factoring of a designDynamic (highly malleable) platforms vs organized, well-structured code basePrototyping in UEApproachDescriptionStoryboardSketches or screenshots illustrating key points in a usage narrativePaper, cardboard mock-upFabricated devices with simulated controls or display elementsWizard of OzWorkstation connected to invisible human assistant who simulates input, output, or processing functionality not yet availableVideo prototypeVideo recording of persons enacting one or more envisioned tasks Computer animationScreen transitions that illustrate a series of input and output eventsScenario machineInteractive system implementing a specific scenarios event streamRapid prototypeInteractive system created with special-purpose prototyping toolsWorking partial systemExecutable version of a system with a subset of intended functionalityOff-the-Shelf PrototypingJump-start the design and iteration processRecruit existing tools and devicesIntegrate into approximation of a systemExample as used in virtual school projectTelephone for audio conferencingNetmeeting for video conferencing, chatWeb pages for project questions and answersEmail for interaction with mentorsCan be very useful in requirements exploration and in activity-oriented feasibility studiesPrototyping ToolsPresentation toolsPaper sketches/printoutsPowerpointScripting languagesTcl/TkVisual languagesVisual BasicSILK/Denimframe $dbutton $d.b text OKbutton $d.c text Cancelpack $d.b $d.c side leftPrototyping with PowerpointCreate general look-and-feel of interface with essential functionalityGenerate interface widgets using Visual Basic macrosAvailable through toolbar that can be turned onMust set security level to LowActual control functions can only be tested in sideshow modeSupports creation of an output file for testingFidelity in PrototypingFidelity refers to the level of detailHigh fidelityprototypes look like the final productLow fidelityartists renditions with many details missingWhy Use Low-fi Prototypes?Traditional methods take too longSketches -> prototype -> evaluate -> iterateCan simulate the prototypeSketches -> evaluate -> iterateSketches act as prototypesDesigner plays computerOther design team members observe & recordKindergarten implementation skillsAllows non-programmers to participateHi-fi Prototypes WarpPerceptions of the tester/reviewer?Formal representation indicates finished natureComments on color, fonts, and alignmentTime?Encourage precisionSpecifying details takes more timeCreativity?Lose track of the big pictureWhat is SILK?SketchingInterfacesLikeKrazyDesigning Interfaces with SILK1)Designer sketches ideas rapidly with electronic pad and penSILK recognizes widgets easy editing with gestures2)Designer or end-user tests interfacewidgets behave specify additional behavior visually 3)Automatically transforms to a finished UISpecifying BehaviorsStoryboardsseries of rough sketches depicting changes in response to end-user interactionExpresses many common behaviorsSequencing behavior between widgets?SILK StoryboardsCopy sketches to storyboard windowDraw arrows from objects to screensSwitch to run mode to testSILK changes screens on mouse clicksIntegrating HCI with Software ConstructionClassic problem in designing from specificationsThe specification-design gap: a written spec is never enough, always ambiguous, always interpretedWho does the interpretation, using what knowledge?There are many ways to create tighter linkageOO analysis and design enable simultaneous attention to user task and software design issuesEarly and continued prototyping is essentialBut, do we want to do this? Only for projects that allow (welcome) requirement shift, that view design as an inquiry processTuesday MidtermRosson & Carroll Ch 1, 2, 9Scenario-based usability engineeringAnalyzing requirementsTopics include scenarios, essential parts of a scenario, claims, requirements, defs of activity, info, interaction designNorman Ch 1, 7Topics include affordances, conceptual models (design model & user model), mapping, feedbackInteraction is what computers can give us. So I have built a tool named SILK.The idea of SILK is to support the conceptual phases of design without the limitations we have seen for paper and existing electronic toolsSILK will blend the advantages of both paper-based sketching and traditional user interface builders, yet will avoid many of the limitations of these approaches.Widgets behave: e.g., the elevator of the sketched scrollbar can be dragged up & down.The designer may need to specify additional behavior to illustrate the sequencing between widgets.Transformation requires some guidance to finalize details of the UI (e.g., textual labels, colors)At this point, programmers can add callbacks and constraints that include the application-specific code to complete the application.TRANSITIONUnfortunately with hand-drawn storyboards, has been shown to be a powerful tool for designers making concept sketches for early visualization. Designers do this on paper now!Storyboards used to specify the dynamic behavior between widgetsThe success of HyperCard has demonstrated that a significant amount of behavior can be constructed from sequencing screen upon button presses alone!Marks for sequencing may be similar to those that many people use when designing on a whiteboard or on paper. ARROWScan draw arrow from any object or background to any screen


View more >