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




9 download


  • PrototypingCreation of concrete but partial implementations of a system design to explore usability issues

  • Problem scenariossummativeevaluationInformation scenariosclaims about current practiceanalysis ofstakeholders,field studiesUsability specificationsActivityscenariosInteraction scenariositerativeanalysis ofusability claims andre-designmetaphors,informationtechnology,HCI theory,guidelinesformativeevaluationDESIGNANALYZEPROTOTYPE & EVALUATE

  • Goals 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 SpiralModel

  • Some 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 base

  • Prototyping in UE




    Sketches or screenshots illustrating key points in a usage narrative

    Paper, cardboard mock-up

    Fabricated devices with simulated controls or display elements

    Wizard of Oz

    Workstation connected to invisible human assistant who simulates input, output, or processing functionality not yet available

    Video prototype

    Video recording of persons enacting one or more envisioned tasks

    Computer animation

    Screen transitions that illustrate a series of input and output events

    Scenario machine

    Interactive system implementing a specific scenarios event stream

    Rapid prototype

    Interactive system created with special-purpose prototyping tools

    Working partial system

    Executable version of a system with a subset of intended functionality

  • Off-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 studies

  • Prototyping ToolsPresentation toolsPaper sketches/printoutsPowerpointScripting languagesTcl/TkVisual languagesVisual BasicSILK/Denimframe $dbutton $d.b text OKbutton $d.c text Cancelpack $d.b $d.c side left

  • Prototyping 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 testing

  • Fidelity in PrototypingFidelity refers to the level of detailHigh fidelityprototypes look like the final productLow fidelityartists renditions with many details missing

  • Why 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 participate

  • Hi-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 picture

  • What is SILK?SketchingInterfacesLikeKrazy

  • Designing 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 UI

  • Specifying 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 clicks

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

  • Tuesday 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, feedback

    Interaction 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 widgets

    The 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. ARROWS

    can draw arrow from any object or background to any screen


View more >