Part 3. Slide Shows Animations

1
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

2
Method 1 Linear storyboard stack

• Stack storyboard scenes atop each other
• make sure they register
• Click on interface element
• enacts the transition

3
Storyboard of a computer telephone
4


Home screenAsk for help
5
Help screen
Return to home screen
6


Home screenType last name
7


Greenberg
Home screenName entered
8


Greenberg
Home screenType last name
9


Dialling
10


ConnectedHang up when done
11


Home screen
12
Lets do it again Simple animation

• Motion paths
• Custom animation / Add Effect / Motion Paths
  /Draw Custom Path / Curve

Button
13
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
14
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
15
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
16
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
Aint that sweet!
17
Interactive Transitions by Hyperlinks
1
Computer Telephone

2

Last Name

First Name

Phone
Help

You can enter either the

person's name or their

number. Then hit the

place button to call them
4
3
Greenberg
Create four independent slides For each button,
select it andhyperlink to the appropriate
slide.Add animation as needed
18
1

Computer Telephone



Last Name

First Name

Phone
Help Hyperlink to next slide Place call
Hyperlink to 3rd slide
19
2
Help

You can enter either the

person's name or their

number. Then hit the

place button to call them
Return Hyperlink to previous slide
20
3


Greenberg
Hyperlink Place call to next slide Note
Greenberg appears as a wipe add
21
4

Computer Telephone



Last Name Greenberg

First Name

Phone
Place Call
Help
Continue as needed Eg., cancel returns
22
Scan the stroller -gt
Initial screen
Place the order -gt
Change the color -gt
23
Scan the shirt -gt
Alternatepath
Delete that item-gt
Touch previous item -gt
24
CrossY Prototype for Tablets
Inspired by the CrossY system http//www.cs.umd.e
du/hcil/crossy/ by Apitz and Guimbretiere
25
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

26
Simple Interface PostIts Video
From Bill Buxton Sketching User Experiences,
Morgan Kaufman Web site
27
One vs. Two Finger Scaling
From Bill Buxton Sketching User Experiences,
Morgan Kaufman Web site
28
One vs. Two Finger Scaling
From Bill Buxton Sketching User Experiences,
Morgan Kaufman Web site
29
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
30
One vs. Two Finger Scaling - How
From Bill Buxton Sketching User Experiences, page
302