Low-fidelity Prototyping CS 160, Spring 2004 Professor John Canny Feb 11 1/14/2019

Outline Low-fidelity prototyping Wizard of OZ technique Administrivia Informal user interfaces Sketching user interfaces electronically 1/14/2019

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 1/14/2019

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 1/14/2019

Low-fidelity Sketches 1/14/2019

Low-fidelity Sketches 1/14/2019

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 1/14/2019

1/14/2019

Ink Chat Black: page content Red: page title Green: annotations Blue: links 1/14/2019

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 1/14/2019

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 1/14/2019

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. Sources: Office Depot, “The Art Store”,… 1/14/2019

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 1/14/2019

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” in the system 1/14/2019

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 1/14/2019

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 -> avoid strong reactions: laugh, gape, etc. 1/14/2019

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

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 1/14/2019

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 1/14/2019

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 1/14/2019

Wizard of Oz Tips Rehearse your actions Stay “in role” For a complicated UI, make a flowchart which is hidden from the user Make list of legal words for a speech interface Stay “in role” You are a computer, and have no common sense, or ability to understand spoken English. Facilitator can remind user of the rules if the user gets stuck 1/14/2019

Break Administrivia Contextual inquiry (or explanation) due today JFC Office hours moving to: Tu 2-3, W 3-4 Break 1/14/2019

Research on UI Design tools “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. 1/14/2019

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 1/14/2019

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

Add Behavior... This is NOT just a sketching program. We also want behavior! 1/14/2019

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!! 1/14/2019

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 1/14/2019

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 1/14/2019

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 1/14/2019

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 downplayed now 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. 1/14/2019

Designing Interfaces with SILK Behavior of widgets takes over some of the tedious aspects of Woz: Recognizing and reacting to commands Moving dialog boxes around Following a script/flowchart 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. 1/14/2019

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! 1/14/2019

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 1/14/2019

DENIM: Designing Web Sites by Sketching Early-phase information & navigation design Supports informal interaction sketching, pen-based interaction Available and used by CS160 project groups Sketch-based tool for information and navigation design for the early phase of web site design. REVIEW this slide. 1/14/2019

DENIM: Designing Web Sites by Sketching DENIM uses multiple scales, based on observation and interviews with designers. Sketch-based tool for information and navigation design for the early phase of web site design. REVIEW this slide. 1/14/2019

Summary Informal prototypes allow you to design (and test!) before writing code. Rapid evolution and elimination of many problems happens in this phase. Paper+ink is the traditional tool, some emerging research tools (SILK, DENIM) also support informal design. 1/14/2019