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

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

5. 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

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

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

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

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

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

11. Computer Telephone Last Name: First Name: Phone: Place Call Help 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 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

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

17. 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

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

19. 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

20. 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…

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

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

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

24. CrossY Prototype for Tablets Inspired by the CrossY system: http://www.cs.umd.edu/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