Lowfidelity Prototyping CS 160 Spring 2003 Professor John

Low-fidelity Prototyping CS 160, Spring 2003 Professor John Canny Jan 5 1/10/2022 1

Outline 4 Low-fidelity prototyping 4 Wizard of OZ technique 4 Administrivia 4 Informal user interfaces 4 Sketching user interfaces electronically 1/10/2022 2

Why Do We Prototype? 4 Get feedback on our design faster * saves money 4 Experiment with alternative designs 4 Fix problems before code is written 4 Keep the design centered on the user 1/10/2022 3

Fidelity in Prototyping 4 Fidelity refers to the level of detail 4 High fidelity * prototypes look like the final product 4 Low fidelity * artists renditions with many details missing 1/10/2022 4

Low-fidelity Sketches 1/10/2022 5

Low-fi Storyboards 4 Where do storyboards come from? * Film & animation 4 Give you a “script” of important events * leave out the details * concentrate on the important interactions 1/10/2022 6

1/10/2022 7

Ink Chat 4 Black: page content 4 Red: page title 4 Green: annotations 4 Blue: links 1/10/2022 8

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

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

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

1/10/2022 12

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

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

Conducting a Test 4 Four testers (minimum) * 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 4 Typical session is 1 hour * preparation, the test, debriefing 1/10/2022 15

Conducting a Test (cont. ) 4 Greet * get forms filled, assure confidentiality, etc. 4 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. 1/10/2022 16

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

Evaluating Results 4 Sort & prioritize observations * what was important? * lots of problems in the same area? 4 Create a written report on findings * gives agenda for meeting on design changes 4 Make changes & iterate 1/10/2022 18

Advantages of Low-fi Prototyping 4 Takes only a few hours * no expensive equipment needed 4 Can test multiple alternatives * fast iterations + number of iterations is tied to final quality 4 Almost all interaction can be faked 1/10/2022 19

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

Administriva 4 Contextual inquiry due next Weds 4 Any questions about project, class, etc? 4 Break for 5 minutes 1/10/2022 21

Informal UIs for Early Stage UI Design – “Design Exploration Phase” 4 Brainstorming * put designs in a tangible form * consider different ideas rapidly 4 Incomplete designs * do not need to cover all cases * illustrate important examples 4 Present several designs to client 1/10/2022 22

Goal of Research in Informal UI Design Tools 4 Allow designers to * quickly sketch interface ideas * test these ideas with users * transform to a more finished design without reprogramming 1/10/2022 23

Quickly Sketch this. . . 1/10/2022 24

Add Behavior. . . 1/10/2022 25

Transform it to this. . . 1/10/2022 26

Drawbacks of Current Tools 4 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 4 Take too much time to use * poor support for iterative design + sketched interface took 5 times longer with traditional tool (no icons) 1/10/2022 27

Paper Sketches 4 Advantages * support brainstorming * do not require specification of details * designers feel comfortable sketching 4 Drawbacks * * do not evolve easily lack support for “design memory” force manual translation to electronic format do not allow end-user interaction 1/10/2022 28

What is SILK? ? Sketching Interfaces Like Krazy 1/10/2022 29

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 1/10/2022 30

Specifying Behaviors Sequencing behavior between widgets? before after 4 Storyboards * series of rough sketches depicting changes in response to end-user interaction 4 Expresses many common behaviors 1/10/2022 31

SILK Storyboards 4 Copy sketches to storyboard window 4 Draw arrows from objects to screens Switch to run mode to test SILK changes screens on mouse clicks 1/10/2022 32

1/10/2022 33

DENIM: Designing Web Sites by Sketching 4 Early-phase information & navigation design 4 Integrates multiple views * site map – storyboard – page sketch 4 Supports informal interaction * sketching, pen-based interaction 1/10/2022 34