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

1

Nov-29-05 SMD157, High-Fidelity Prototyping 1 L

INSTITUTIONEN FÖR SYSTEMTEKNIK

High-Fidelity Prototyping and Flash

SMD157 Human-Computer Interaction Fall 2005

Nov-29-05 SMD157, High-Fidelity Prototyping 2 L

Overview

• Prototyping revisited
• High-fidelity prototyping
• Flash
• Building the example

Nov-29-05 SMD157, High-Fidelity Prototyping 3 L

INSTITUTIONEN FÖR SYSTEMTEKNIK

Prototyping Revisited

2

Nov-29-05 SMD157, High-Fidelity Prototyping 4 L

Fidelity and Implementation Effort

Method Fidelity Effort Oral description Low Low Paper & pen MetaCard Flash/Director Interface builder Full application High High

Nov-29-05 SMD157, High-Fidelity Prototyping 5 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 6 L

Example Scenario Prototype

3

Nov-29-05 SMD157, High-Fidelity Prototyping 7 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 8 L

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.

Nov-29-05 SMD157, High-Fidelity Prototyping 9 L

INSTITUTIONEN FÖR SYSTEMTEKNIK

High-Fidelity Prototyping

4

Nov-29-05 SMD157, High-Fidelity Prototyping 10 L

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!

Nov-29-05 SMD157, High-Fidelity Prototyping 11 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 12 L

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

5

Nov-29-05 SMD157, High-Fidelity Prototyping 13 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 14 L

INSTITUTIONEN FÖR SYSTEMTEKNIK

Flash

A Multimedia Presentation Creator

Nov-29-05 SMD157, High-Fidelity Prototyping 15 L

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

6

Nov-29-05 SMD157, High-Fidelity Prototyping 16 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 17 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 18 L

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

7

Nov-29-05 SMD157, High-Fidelity Prototyping 19 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 20 L

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.

Nov-29-05 SMD157, High-Fidelity Prototyping 21 L

INSTITUTIONEN FÖR SYSTEMTEKNIK

Building the Example

8

Nov-29-05 SMD157, High-Fidelity Prototyping 22 L

Demo Program

Timeline Layers Stage

Nov-29-05 SMD157, High-Fidelity Prototyping 23 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 24 L

The Clock

9

Nov-29-05 SMD157, High-Fidelity Prototyping 25 L

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; }

Nov-29-05 SMD157, High-Fidelity Prototyping 26 L

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

Nov-29-05 SMD157, High-Fidelity Prototyping 27 L

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

10

Nov-29-05 SMD157, High-Fidelity Prototyping 28 L

Questions?