Part 3. Slide Shows / Animations

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

Help Screen Computer Telephone Computer Telephone You can enter either the Call by person's name or their Establishing Last Name: Last Name: Greenberg Help-> name-> number. Then hit the connection-> First Name: First Name: place button to call them Phone: Phone: Place Call Help Place Call Help Return Computer Telephone Computer Telephone Call Call Dialling.... Connected Last Name: Greenberg Last Name: Greenberg connected... completed... First Name: First Name: Cancel Hang up Phone: Phone: Place Call Help Place Call Help Storyboard of a computer telephone

Computer Telephone Last Name: First Name: Phone: Place Call Help Home screenAsk for help

Computer Telephone Last Name: First Name: Phone: Place Call Help Help You can enter either the person's name or their number. Then hit the place button to call them Return Help screen Return to home screen

Computer Telephone Last Name: First Name: Phone: Place Call Help Home screenType last name

Computer Telephone Last Name: First Name: Phone: Place Call Help Greenberg Home screenName entered

Computer Telephone Last Name: First Name: Phone: Place Call Help Greenberg Home screenType last name

Computer Telephone Dialling.... Last Name: Greenberg First Name: Cancel Phone: Place Call Help Dialling…

Computer Telephone Connected Last Name: Greenberg First Name: Hang up Phone: Place Call Help ConnectedHang up when done

Computer Telephone Last Name: First Name: Phone: Place Call Help Home screen

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 Button Button Button

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 Help Computer Telephone Computer Telephone You can enter either the person's name or their Last Name: Last Name: number. Then hit the First Name: First Name: place button to call them Phone: Phone: Place Call Place Call Help Help Return 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 Help Computer Telephone Computer Telephone You can enter either the person's name or their Last Name: Last Name: number. Then hit the First Name: First Name: place button to call them Phone: Phone: Place Call Place Call Help Help Return Help Help Aint that sweet!

Computer Telephone Computer Telephone Last Name: Last Name: First Name: First Name: Phone: Phone: Place Call Place Call Help Help Computer Telephone Dialling.... Last Name: Greenberg First Name: Cancel Phone: Place Call Help Interactive Transitions by Hyperlinks 1 Computer Telephone 2 Last Name: First Name: Phone: Help You can enter either the Place Call Help person's name or their number. Then hit the place button to call them Return 4 3 Greenberg Create four independent slides For each button, select it andhyperlink to the appropriate slide.Add animation as needed

1 Computer Telephone Place Call Help Last Name: First Name: Phone: Help: Hyperlink to next slide Place call: Hyperlink to 3rd slide

2 Computer Telephone Last Name: First Name: Phone: Place Call Help Help You can enter either the person's name or their number. Then hit the place button to call them Return Return: Hyperlink to previous slide

3 Computer Telephone Last Name: First Name: Phone: Place Call Help Greenberg Hyperlink Place call to next slide Note: Greenberg appears as a wipe add…

4 Dialling.... Computer Telephone Last Name: Greenberg First Name: Cancel Phone: Place Call Help Continue as needed Eg., cancel returns

Scan the stroller -> Initial screen Place the order -> Change the color ->

Scan the shirt -> Alternatepath… Delete that item-> Touch previous item ->

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 • lines: underneath yellow rectangles • 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 - 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

One vs. Two Finger Scaling - How From Bill Buxton Sketching User Experiences, page 302

Part 3. Slide Shows / Animations