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
Dialling....
Last
Name: Greenberg
First Name:
Cancel
Phone:
Place Call
Help
Help Screen
You can enter either the
Call by
person's name or their
name->
number. Then hit the
place button to call them
Computer Telephone
Return
Place Call
Last Name: Greenberg
First Name:
Phone:
Computer Telephone
Call
Connected
Name: Greenberg
connected... Last
First Name:
Hang up
Phone:
Place Call
Help
Call
completed...
Help
Establishing
connection->
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Home screen
Ask for help
Help
Help
Computer Telephone
You can enter either the
person's
name or their
Last Name:
number.
Then
First Name: hit the
place
button to call them
Phone:
Place Call
Return
Help screen
Return to home screen
Help
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Home screen
Type last name
Help
Computer Telephone
Last Name: Greenberg
First Name:
Phone:
Place Call
Home screen
Name entered
Help
Computer Telephone
Last Name: Greenberg
First Name:
Phone:
Place Call
Home screen
Type last name
Help
Computer Telephone
Dialling....
Last
Name: Greenberg
First Name:
Cancel
Phone:
Place Call
Dialling…
Help
Computer Telephone
Connected
Last
Name: Greenberg
First Name:
Hang up
Phone:
Place Call
Connected
Hang up when done
Help
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Home screen
Help
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
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
Button
Effect Options: Sound / Click
Effect Optons: Timing 1 secs
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
You can enter either the
person's
name or their
Last Name:
number.
Then
First Name: hit the
place
button to call them
Phone:
Place Call
Return
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Help
Help
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
Computer Telephone
Telephone
You can enter either the
person's
name or their
Last
Last Name:
Name:
number.
Then hit the
First
First Name:
Name:
place
button
to call them
Phone:
Phone:
Place
Place Call
Call
Return
Aint that sweet!
Help
Help
Help
Interactive Transitions by Hyperlinks
1
Computer Telephone
2
Last Name:
First Name:
Phone:
Place Call
Help
Computer Telephone
You can enter either the
person's
name or their
Last Name:
number.
Then
First Name: hit the
place
button to call them
Phone:
Help
Place Call
Return
3
Create four independent slides
For each button, select it and
hyperlink to the appropriate slide.
Add animation as needed
Help
4
Computer Telephone
Computer Telephone
Last Name: Greenberg
First Name:
Phone:
Dialling....
Last
Name: Greenberg
First Name:
Cancel
Phone:
Place Call
Place Call
Help
Help
1
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Help: Hyperlink to next slide
Place call: Hyperlink to 3rd slide
Help
2
Help
Computer Telephone
You can enter either the
person's
name or their
Last Name:
number.
Then hit the
First Name:
place
button
to call them
Phone:
Place Call
Return
Return: Hyperlink to previous slide
Help
3
Computer Telephone
Last Name: Greenberg
First Name:
Phone:
Place Call
Hyperlink Place call to next slide
Note: Greenberg appears as a wipe add…
Help
4
Computer Telephone
Dialling....
Last
Name: Greenberg
First Name:
Cancel
Phone:
Place Call
Continue as needed
Eg., cancel returns
Help
Initial
screen
Change the
color ->
Scan the
stroller ->
Place the
order ->
Alternate
path…
Touch
previous
item ->
Scan the
shirt ->
Delete
that 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
o lines: underneath yellow rectangles
o 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
One vs. Two Finger Scaling - How
From Bill Buxton Sketching User Experiences, page 302