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