Low-fidelity Prototyping CS 160, Spring 2003 Professor John Canny Jan 5 9/20/2018

Outline Low-fidelity prototyping Wizard of OZ technique Administrivia Informal user interfaces Sketching user interfaces electronically 9/20/2018

Why Do We Prototype? Get feedback on our design faster saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the user 9/20/2018

Fidelity in Prototyping Fidelity refers to the level of detail High fidelity prototypes look like the final product Low fidelity artists renditions with many details missing 9/20/2018

Low-fidelity Sketches 9/20/2018

Low-fi Storyboards Where do storyboards come from? Film & animation Give you a “script” of important events leave out the details concentrate on the important interactions 9/20/2018

Ink Chat Black: page content Red: page title Green: annotations Blue: links 9/20/2018

Why Use Low-fi Prototypes? Traditional methods take too long sketches -> prototype -> evaluate -> iterate Can simulate the prototype sketches -> evaluate -> iterate sketches act as prototypes designer “plays computer” other design team members observe & record Kindergarten implementation skills allows non-programmers to participate 9/20/2018

Hi-fi Prototypes Warp Perceptions of the tester/reviewer? Time? formal representation indicates “finished” nature comments on color, fonts, and alignment Time? encourage precision specifying details takes more time Creativity? lose track of the big picture 9/20/2018

The Basic Materials Large, heavy, white paper (11 x 17) 5x8 in. index cards Tape, stick glue, correction tape Pens & markers (many colors & sizes) Overhead transparencies Scissors, X-acto knives, etc. 9/20/2018

Constructing the Model Set a deadline don’t think too long - build it! Draw a window frame on large paper Put different screen regions on cards anything that moves, changes, appears/disappears Ready response for any user action e.g., have those pull-down menus already made Use photocopier to make many versions 9/20/2018

Preparing for a Test Select your users Prepare scenarios that are understand background of intended users use a questionnaire to get the people you need don’t use friends or family Prepare scenarios that are typical of the product during actual use make prototype support these (small, yet broad) Practice to avoid “bugs” 9/20/2018

Conducting a Test Four testers (minimum) Typical session is 1 hour greeter - puts users at ease & gets data facilitator - only team member who speaks gives instructions & encourages thoughts, opinions computer - knows application logic & controls it always simulates the response, w/o explanation observers - take notes & recommendations Typical session is 1 hour preparation, the test, debriefing 9/20/2018

Conducting a Test (cont.) Greet get forms filled, assure confidentiality, etc. Test facilitator hands written tasks to the user must be clear & detailed facilitator keeps getting “output” from participant “What are you thinking right now?”, “Think aloud” observe -> no “a-ha”, laugh, gape, etc. 9/20/2018

Conducting a Test (cont.) Debrief fill out post-evaluation questionnaire ask questions about parts you saw problems on gather impressions give thanks 9/20/2018

Evaluating Results Sort & prioritize observations what was important? lots of problems in the same area? Create a written report on findings gives agenda for meeting on design changes Make changes & iterate 9/20/2018

Advantages of Low-fi Prototyping Takes only a few hours no expensive equipment needed Can test multiple alternatives fast iterations number of iterations is tied to final quality Almost all interaction can be faked 9/20/2018

Wizard of Oz Technique Faking the interaction. Comes from? from the film “The Wizard of OZ” “the man behind the curtain” Long tradition in computer industry prototype of a PC w/ a VAX behind the curtain Much more important for hard to implement features Speech & handwriting recognition 9/20/2018

Administriva Contextual inquiry due next Weds Any questions about project, class, etc? Break for 5 minutes 9/20/2018

Informal UIs for Early Stage UI Design – “Design Exploration Phase” Brainstorming put designs in a tangible form consider different ideas rapidly Incomplete designs do not need to cover all cases illustrate important examples Present several designs to client Unlike designing a computer program, you do not need to consider all cases this early. present several designs to give the client an idea of what I as the designer am thinking about. 9/20/2018

Goal of Research in Informal UI Design Tools Allow designers to quickly sketch interface ideas test these ideas with users transform to a more finished design without reprogramming 9/20/2018

Quickly Sketch this... Quickly sketch a design idea Work on overall layout and structure (NOT look) Iterate on the design rapidly with design team 9/20/2018

Add Behavior... This is NOT just a sketching program. We also want behavior! 9/20/2018

Transform it to this... and after several iterations.... There aren’t many successful examples of supporting these early stages of UI design. Need to keep the fluidity of paper and still unleash the power of the computer. It is a hard problem and something like this has never been done before!! 9/20/2018

Drawbacks of Current Tools Require specification of lots of detail must give specific instance of a general idea e.g., exact widgets, fonts, alignments, colors designers led to focus on unimportant details evaluators focus on wrong issues Take too much time to use poor support for iterative design sketched interface took 5 times longer with traditional tool (no icons) designers must bridge gap between how they think and specialization for the tool, for example, a designer may decide they need some informative text. Using the tool they need to specify a string, the font, the style, the size, etc. force designers to concentrate on the wrong elements (e.g., color, alignment, fonts), -> Black found they will push one design too far -- tunnel vision evaluators to focus on unimportant low-level details, Anecdotal evidence has shown that evaluators give more “useful” comments on electronic sketches than on more finished-looking interfaces (mention Yin-Yin and Architects) 70 seconds for ONE screen in a design of many screens 9/20/2018

Paper Sketches Advantages Drawbacks support brainstorming do not require specification of details designers feel comfortable sketching Drawbacks do not evolve easily lack support for “design memory” force manual translation to electronic format do not allow end-user interaction 1) Sketch rough pictures of screen layouts. Initial goal is to work on the overall layout and structure 3) Many UI designers have a graphic design or art background (over half) Disadvantages: 1) need to often throw away sketches and start over. 2) hard to visualize the different decision points of the design process. Design history and annotations are often more valuable to the client than the design itself. 3) manual translations may need to occur several times as we iterate 4) must have a human “play computer” to test the design. this is often unrealistic 9/20/2018

Sketching Interfaces Like Krazy What is SILK???? 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 tools 9/20/2018

Designing Interfaces with SILK 1)Designer sketches ideas rapidly with electronic pad and pen SILK recognizes widgets easy editing with gestures 2)Designer or end-user tests interface widgets behave specify additional behavior visually 3)Automatically transforms to a “finished” UI SILK 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. 9/20/2018

Specifying Behaviors Storyboards Expresses many common behaviors Sequencing behavior between widgets? before after Storyboards series of rough sketches depicting changes in response to end-user interaction Expresses many common behaviors TRANSITION Unfortunately 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! 9/20/2018

SILK Storyboards Copy sketches to storyboard window Draw arrows from objects to screens 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 Switch to run mode to test SILK changes screens on mouse clicks 9/20/2018

DENIM: Designing Web Sites by Sketching Early-phase information & navigation design Integrates multiple views site map – storyboard – page sketch Supports informal interaction sketching, pen-based interaction Sketch-based tool for information and navigation design for the early phase of web site design. REVIEW this slide. 9/20/2018