Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
Post on 29-Dec-2015
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?
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 recording of persons enacting one or more envisioned tasks
Screen transitions that illustrate a series of input and output events
Interactive system implementing a specific scenarios event stream
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