Part 3. Slide Shows / Animations

Storyboards show scenes and transitions

The viewer has to assimilate these into a fluid interface.

Instead, interactive slide shows and simple animations can make storyboards come alive

Method 1: Linear storyboard stack

Stack storyboard scenes atop each other• make sure they register

Click on interface element • enacts the transition

Storyboard of a computer telephone

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Help->

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Dialling....

Cancel

Call connected...

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Connected

Hang up

Call completed...

Return

Help Screen You can enter either the person's name or their number. Then hit the place button to call them

Call by name->

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Establishing connection->

Home screenAsk for help

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Help screenReturn to home screen

Return

Help You can enter either the person's name or their number. Then hit the place button to call them

Home screenType last name

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Home screenName entered

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Greenberg

Home screenType last name

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Greenberg

Dialling…

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Dialling....

Cancel

ConnectedHang up when done

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Connected

Hang up

Home screen

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Button

Lets do it again: Simple animation

Motion paths• Custom animation / Add Effect / Motion Paths /

Draw Custom Path / Curve

Button

Lets do it again: Simple animation

Simulate Button Press• Create a 2nd button that is shaded• Place atop first button• Add Effect – Appear• Option menu: Start after previous• Effect Options: Sound / Click• Note stacking order, front to back

Button

Button

And again: Simple animation

Simulate Click and unpress• Create a 3rd button that is a copy of the first• Place atop 2ndbutton• Add Effect – Appear• Option menu: Start after previous• Effect Options: Sound / Click• Effect Optons: Timing 1 secs

ButtonButton

Constucting a simple animations-these are the elements-add motion path-make shaded button appear with click sound-make clear button appear after 1 sec-make help appear after .5 sec as a dissolve-add motion path to Return-make help exit with dissolve

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Computer Telephone

Last Name: First Name: Phone:

Place Call HelpReturn

Help You can enter either the person's name or their number. Then hit the place button to call them

Help

Help

Constucting a simple animations-add motion path-make shaded button appear with click sound-make clear button appear after 1 sec-make help appear after .5 sec as a dissolve-add motion path to Return-make help exit with dissolve

Computer Telephone

Last Name: First Name: Phone:

Place Call HelpHelpHelp

Computer Telephone

Last Name: First Name: Phone:

Place Call HelpReturn

Help You can enter either the person's name or their number. Then hit the place button to call them

Aint that sweet!

Interactive Transitions by Hyperlinks

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Computer Telephone

Last Name: First Name: Phone:

Place Call HelpReturn

Help You can enter either the person's name or their number. Then hit the place button to call them

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Greenberg

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Dialling....

Cancel

12

34

Create four independent slidesFor each button, select it andhyperlink to the appropriate slide.Add animation as needed

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Help: Hyperlink to next slidePlace call: Hyperlink to 3rd slide

1

Return: Hyperlink to previous slide

Computer Telephone

Last Name: First Name: Phone:

Place Call HelpReturn

Help You can enter either the person's name or their number. Then hit the place button to call them

2

Hyperlink Place call to next slideNote: Greenberg appears as a wipe add…

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Greenberg

3

Continue as neededEg., cancel returns

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Dialling....

Cancel

4

Scan the stroller ->

Change the color ->

Place the order ->

Initial screen

Scan the shirt ->

Touch previous item ->

Delete that item->

Alternatepath…

CrossY Prototype for Tablets

Inspired by the CrossY system: http://www.cs.umd.edu/hcil/crossy/ by Apitz and Guimbretiere

CrossY Prototype for Tablets – How?

Draw static elements• color palette, line triangle • drawn lines, rectangles colored to background yellow

Find hand drawing image• clip art• made white background transparent

Animate using motion paths• Uncovering = drawing

o lines: underneath yellow rectangleso motion paths of hand and rectangle are the same

Simple Interface: PostIts & Video

From Bill Buxton Sketching User Experiences, Morgan Kaufman Web site

One vs. Two Finger Scaling

From Bill Buxton Sketching User Experiences, Morgan Kaufman Web site

One vs. Two Finger Scaling

From Bill Buxton Sketching User Experiences, Morgan Kaufman Web site

One vs. Two Finger Scaling - How?

Draw • individual rectangles as multiple sketch

Photograph and cut out • left / right index fingers: extended & bent• position over the rectangles as needed

Assemble • as single frames in Windows Movie Maker

Render• as movie

From Bill Buxton Sketching User Experiences, page 305

From Bill Buxton Sketching User Experiences, page 302

One vs. Two Finger Scaling - How