Lowfidelity Storyboards 2132002 1 Lowfi Storyboards 4 Where

Low-fidelity Storyboards 2/13/2002 1

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 2/13/2002 2

Ink Chat 2/13/2002 3

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/13/2002 4

Hi-fi Prototypes Warp 4 Perceptions of the customer/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/13/2002 5

The Basic Materials for Low-fi Prototyping of Visual UIs 4 Large, heavy, white paper (11 x 17) 45 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. 2/13/2002 6

2/13/2002 7

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/13/2002 8

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 2/13/2002 9

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 2/13/2002 10

2/13/2002 11

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 2/13/2002 12