1 L Nov-29-05 SMD157, High-Fidelity Prototyping Overview - PDF document

INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET High-Fidelity Prototyping and Flash SMD157 Human-Computer Interaction Fall 2005 1 L Nov-29-05 SMD157, High-Fidelity Prototyping Overview • Prototyping revisited • High-fidelity prototyping • Flash • Building the example 2 L Nov-29-05 SMD157, High-Fidelity Prototyping INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Prototyping Revisited 3 L Nov-29-05 SMD157, High-Fidelity Prototyping 1

Fidelity and Implementation Effort Method Fidelity Effort Oral description Low Low Paper & pen MetaCard Flash/Director Interface builder Full application High High 4 L Nov-29-05 SMD157, High-Fidelity Prototyping Types of Prototypes • Broad/Shallow - All the functions are there, but nothing is behind them • Deep/Narrow - Most things are missing, but what’s there is detailed - Good to test uncertainties in depth. • Scenario-based - Good coverage, but limited application data 5 L Nov-29-05 SMD157, High-Fidelity Prototyping Example Scenario Prototype 6 L Nov-29-05 SMD157, High-Fidelity Prototyping 2

Comments • Scenario-based prototypes are best for most of your projects • BUT , a breadth prototype may be easiest for some. • Depth prototypes are probably the most difficult. • The best prototypes will be given the higher grades. Best means: - Most complete/realistic. - Good interaction design 7 L Nov-29-05 SMD157, High-Fidelity Prototyping Requirements on the Prototype • It must run in A2508. - Test it there! • OR, you must provide the environment. • You will need to: - Do a cooperative evaluation during week 50 - Demo the prototype during week 50 • This means: - You do not have to use Flash - You do not have to use a Windows system - But , you must provide 2 copies of your environment for Seminar 4. 8 L Nov-29-05 SMD157, High-Fidelity Prototyping INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET High-Fidelity Prototyping 9 L Nov-29-05 SMD157, High-Fidelity Prototyping 3

Types of Tools • Screen changers - MetaCard, HyperCard - PowerPoint - HTML & images • Multimedia Presenters - Macromedia Director and Flash - VRML • Interface Builders - Visual Basic, etc. • Note , the tool limits what you can do. Choose it wisely ! 10 L Nov-29-05 SMD157, High-Fidelity Prototyping Screen Changer Properties • Usually quicker to program • Management of large dialogs is difficult - Limited conditional branching - One screen per possible state • Slower transitions (repaint of screens) • Prototype has a “mode-to-mode” feel • Limited dynamics such as: - Drag and drop - Animated sequences - Zoom and pan 11 L Nov-29-05 SMD157, High-Fidelity Prototyping Multimedia Presenters • Take more time to program • Allow greater dynamics • Limit dialog branches • Are best for scenario-based prototyping • Prototype - Usually feels “constrained” or limited - Usually is very easy to demonstrate 12 L Nov-29-05 SMD157, High-Fidelity Prototyping 4

Interface Builders • Prototype can be developed into the product - This tends to limit exploration - But, is attractive as nothing is “thrown away” + This is dangerous. + Prototypes are: • Not constructed for modification and maintenance • Of limited functionality • Usually much more work • Best adapted to breadth and depth prototypes 13 L Nov-29-05 SMD157, High-Fidelity Prototyping INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Flash A Multimedia Presentation Creator 14 L Nov-29-05 SMD157, High-Fidelity Prototyping The Flash Model • Symbols - Abstract objects in the “interface” + buttons, graphics, media clips,... - Held in a library • Instances - Symbols on the stage • Stage - The display 15 L Nov-29-05 SMD157, High-Fidelity Prototyping 5

The Flash Model • Timeline - Defines behavior instances - Divided into layers - Allows definition of time-based special behavior • Film clips - A symbol - Contains other symbols and a timeline - Can be used to group and organize behaviors. • Scenes - Movie fragment - For organizing interaction into dialog components 16 L Nov-29-05 SMD157, High-Fidelity Prototyping The Flash Model • Layers - Subdivision of the stage - Holds objects - NB! One object per layer! • The Library - Collection of object definitions - Folders available to organize objects 17 L Nov-29-05 SMD157, High-Fidelity Prototyping Complicated Behavior and Branching • Instance appearance and disappearance is governed by placing them on the Timeline. • Animation is supported by defining “key frames” - Size, position, color, transparency - Flash “tweens” between key frames automatically - N.B.! Each instance should be in its own layer. Otherwise, defining a tween gives unwanted results. • Flash provides a “scripting” language called ActionScript - Full programming language - Specially adapted keywords for animation 18 L Nov-29-05 SMD157, High-Fidelity Prototyping 6

Rules for Using Flash • One object instance ≡ one layer! - Flash can’t animate two objects in the same layer - Even if you will never animate an object - you will • If you want to fix the size of the display, - Use a rectangle in its own layer in each film clip - Otherwise, Flash will use its own “intelligence” in resizing the film clip • Test frequently, after small changes • Beware of version conflicts - The labs should have Flash MX - The 30 day download is version 8 19 L Nov-29-05 SMD157, High-Fidelity Prototyping Notes and Hints • A instance is not a symbol • Use a layer for scripts, it will make them easier to find • Start small and elaborate • Complex, program like behaviors are difficult - Common, computer widgets require programming - Lots of branching and looping requires programming - Lots of programming is a pain • Define each dialog exchange in a separate scene • Use scripts to jump from scene to scene • Don’t try to be fancy at first, get a basic behavior working first. 20 L Nov-29-05 SMD157, High-Fidelity Prototyping INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Building the Example 21 L Nov-29-05 SMD157, High-Fidelity Prototyping 7

Demo Program Timeline Layers Stage 22 L Nov-29-05 SMD157, High-Fidelity Prototyping Preliminaries • Images for applications except the clock - Taken with a digital camera - Tripod and no flash would improve quality • Grid - Own layer - Just the graphics are there • Images layer - Movie clip, “DeadIcons” of type “OtherPrograms” - Has 400 x 400 rectangle - Includes the text “NaC PDA” and the images except the clock 23 L Nov-29-05 SMD157, High-Fidelity Prototyping The Clock 24 L Nov-29-05 SMD157, High-Fidelity Prototyping 8

Clock Construction • Five Layers - Actions w/script + stop(); - Numerals, graphic - Seconds, movie clip, w/script + onClipEvent (enterFrame) { theDate = new Date(); + _rotation = theDate.getSeconds()*6; } - Minutes , movie clip, w/script + onClipEvent (enterFrame) { theDate = new Date(); + _rotation = theDate.getMinutes()*6 + theDate.getSeconds()/10; } - Hours , movie clip, w/script + onClipEvent (enterFrame) { theDate = new Date(); + _rotation = theDate.getHours()*30 + theDate.getMinutes()/2; } 25 L Nov-29-05 SMD157, High-Fidelity Prototyping Organizing the Demo, 3 Scenes • MainMenuScene - Clock runs in the upper-left corner - Transparent button there (_alpha = 0) + Press goes to GrowClockScene • GrowClockScene - Clock expands to fill screen - Icons fade-out - Transparent button for whole screen + Press goes to ShrinkScene • ShrinkScene - Clock shrinks to upper-left corner - Icons fade-in - Jumps to MainMenuScene at end 26 L Nov-29-05 SMD157, High-Fidelity Prototyping Resources • The demo will be on the web • Book: - Kay, The Web Wizard’s Guide to FLASH , Addison-Wesley, ISBN 0-201-76434. - FLASH MX - I used this, but others may be better 27 L Nov-29-05 SMD157, High-Fidelity Prototyping 9

Questions? 28 L Nov-29-05 SMD157, High-Fidelity Prototyping 10