2/23/991 Low-fidelity Prototyping & Storyboarding SIMS 213, Spring ‘99 Professor James Landay, EECS Dept. February 23, 1999

2/23/992 Outline 4 Why prototype? 4 Fidelity 4 Creating a low-fi prototype 4 Wizard of OZ technique 4 Electronic tools for low-fi prototyping

2/23/993 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

2/23/994 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

2/23/995 Low-fidelity Sketches

2/23/996 Low-fi Storyboards 4 What are storyboards? *high-level representation of important user actions & consequences 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

2/23/999 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

2/23/9910 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

2/23/9911 Creating a Low-fi Prototype & Testing it

2/23/9912 The Basic Materials 4 Large, heavy, white paper (11 x 17) 4 5x8 in. index cards 4 Tape, stick glue, correction tape 4 Pens & markers (many colors & sizes) 4 Overhead transparencies 4 Scissors, X-acto knives, etc. 4 Any others?

2/23/9914 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

2/23/9915 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 +I think “customers” are OK (Rettig disagrees) 4 Prepare scenarios that are *typical of the product during actual use *make prototype support these (small, yet broad) 4 Practice to avoid “bugs”

2/23/9916 Conducting a Test 4 Three 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

2/23/9917 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.

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

2/23/9919 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

2/23/9920 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

2/23/9921 Wizard of Oz Technique 4 Faking the interaction *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

2/23/9922 The Magic Note Transcriber

2/23/9923 Electronic Tools for Low-fi Prototyping

2/23/9924 Informal UIs for Early Stage UI Design 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

2/23/9925 Goal of Research 4 Allow designers to *quickly sketch interface ideas *test these ideas with users *transform to a more finished design without reprogramming

2/23/9926 Quickly Sketch this...

2/23/9927 Add Behavior...

2/23/9928 Transform it to this...

2/23/9929 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)

2/23/9930 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

2/23/9931 What is SILK???? Sketching Interfaces Like Krazy

2/23/9932 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

2/23/9933 Video

2/23/9934 Specifying Behaviors 4 Storyboards *series of rough sketches depicting changes in response to end-user interaction 4 Expresses many common behaviors beforeafter 4 Sequencing behavior between widgets?

2/23/9935 SILK Storyboards 4 Copy sketches to storyboard window 4 Draw arrows from objects to screens 4 Switch to run mode to test *SILK changes screens on mouse clicks

2/23/9936 Video

2/23/9938 Summary 4 Hi-fi prototypes warp perceptions 4 Low-fi prototypes are *easy to create *easy to change *appropriate in the early stages of UI design 4 Electronic tools in the research community are bridging the gap between low & hi-fi 4 Further reading: *“Prototyping for Tiny Fingers”, Marc Rettig, CACM, Vol. 37, No. 4, pp , April 1994.Prototyping for Tiny Fingers