Week 12 Animating the User Experience

679 views
613 views

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
679
On SlideShare
0
From Embeds
0
Number of Embeds
312
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week 12 Animating the User Experience

  1. 1. ! ! ! UX Prototyping/IID 2014 Spring Class hours : Fri. 3 pm-7 pm 23rd May Week 12 Animating the User Experience
  2. 2. Section 5 >Homework• Complete the Studio Workshop • Gathering Images (on each Pinboard) • People • Place • Technology • Writing a paper outline • Interaction Design Goals • Users • Technology (using your own UI Prototypes) • Use Context (using the journey map) • Observation Methods • Expected Results 2 https://www.bartlett.ucl.ac.uk/architecture/documents/joe-paxton-riba-award
  3. 3. Section 5 >To Do • Research Idea Presentation • Paper Outlines • Research Progress • Cultural Probes/Context Mapping • Other Survey Methods • Team Presentation • Checking Pinterest Image Collections • Narrative Storyboards • Open House Show Plans, and Drafts • Studio 12 : Animating the User Experience 3
  4. 4. Section 5 >Animating the User Experience 1. The Animated Sequence explains how to animate a single interaction sequence as a slide show through image registration 2. Motion Paths shows you how you can animate graphical movement, such as the cursor, across frames. This emphasizes the illusion of smooth interaction 3. Branching Animations use hyperlinks to simulate interactions at certain branch points, where each can trigger diff erent paths in your animation 4. Keyframes and Tweening are two very powerful ways you can create animations that illustrate highly interactive interfaces 5. Linear Video demonstrates how video and video editing tools can help you rapidly create an animation from paper-based sketches 4
  5. 5. Section 5 >5.1.The Animated Sequence • Create a Master Frame Template 5
  6. 6. Section 5 >5.1.The Animated Sequence • Create Specialized Frame Templates 6
  7. 7. Section 5 >5.1.The Animated Sequence • Create Final Frames 7
  8. 8. Section 5 >5.1.The Animated Sequence • Place Each Frame in the Desired Sequence in Your Presentation Software 8
  9. 9. Section 5 >5.1.The Animated Sequence • Playing the Sequence 9
  10. 10. Section 5 >5.2.Motion Paths • Getting Ready 10
  11. 11. Section 5 >5.2.Motion Paths • Selecting a Motion Path 11
  12. 12. Section 5 >5.2.Motion Paths • Creating the Motion Path 12
  13. 13. Section 5 >5.2.Motion Paths • Adding Effects 13
  14. 14. Section 5 >5.3.Branching Animations • Create each screen for hyper links 14
  15. 15. Section 5 >5.3.Branching Animations • Add a hyperlink to the ‘Say Hello’ rectangle, which links to slide 2. 15
  16. 16. Section 5 >5.3.Branching Animations • Select the ‘Place in this Document’ button, and then select slide 2 containing the text ‘Hello’. 16
  17. 17. Section 5 >5.3.Branching Animations 17
  18. 18. Section 5 >5.3.Branching Animations 18
  19. 19. Section 5 >5.3.Branching Animations 19
  20. 20. Section 5 >Tips• The basic strategy is to animate just enough of your sketch paths to illustrate the breadth of different features in your system, while going into just enough depth to illustrate the functionality of those features. • Jacob Nielsen calls this Horizontal(breadth) vs. Vertical (depth) prototyping. (He also describes a Scenario, which is a single scripted path through your sketch – this is equivalent to a sequential animation.) • Your selection of animation paths don’t even have to do both – your sketch animation may only explore the functionality of a single feature in depth, but not other features. Or you may want to give an overall ‘look and feel’ of your system by showing the different features, without going into depth about the actual functionality of any one of them. 20
  21. 21. Section 5 >5.4.Keyframes and Tweening • You will be able to create complex animations of highly interactive scenarios reasonably quickly. • You will be able to articulate fi ne details of how the interaction unfolds over time. • Most systems let you quickly render animations as stand-alone videos. • The result can be far more professional looking and detailed, to the point that your system may appear ‘real’. 21
  22. 22. Section 5 >5.4.Keyframes and Tweening • Keyframe 1 • Initial state 22
  23. 23. Section 5 >5.4.Keyframes and Tweening • Keyframe 2 • Person touches opposite corners of image, 23
  24. 24. Section 5 >5.4.Keyframes and Tweening • Keyframe 3 • … drags, resizes, and positions it in the center 24
  25. 25. Section 5 >5.4.Keyframes and Tweening • Keyframe 4 • Final state 25
  26. 26. Section 5 >5.4.Keyframes and Tweening • Tweening • In-betweening (or tweening): the process of generating the set of frames between two keyframes. The properties of each object are animated so it smoothly transforms itself from its state in the first keyframe to its state in the next keyframe. 26
  27. 27. Section 5 >5.4.Keyframes and Tweening 27
  28. 28. Section 5 >5.4.Keyframes and Tweening 1. Create a stage (the backdrop for your animation) and populate it with your visual elements. 2. Create tweened frames filling up 1 second of the animation. 28
  29. 29. Section 5 >5.4.Keyframes and Tweening 29
  30. 30. Section 5 >5.4.Keyframes and Tweening ! 3. Move the frame indicator to the 12th frame, i.e., 1 second into the animation. 30
  31. 31. Section 5 >5.4.Keyframes and Tweening ! 4. Drag the symbols to their new position. 31
  32. 32. Section 5 >5.4.Keyframes and Tweening 5. Move the frame indicator to see the tweened frames, or play the animation. 32 Drag the symbols to their new position.
  33. 33. Section 5 >5.4.Keyframes and Tweening 6. Add more frames to the timeline. 33
  34. 34. Section 5 >5.4.Keyframes and Tweening 7. Create the third keyframe. 8. Create the final keyframe. 34
  35. 35. Section 5 >5.5.Linear Video 35
  36. 36. Section 5 >5.5.Linear Video 36
  37. 37. Section 5 > 37
  38. 38. Section 5 >5.5.Linear Video 1. Draw on one single piece of paper showing the basic interface. 38
  39. 39. Section 5 >5.5.Linear Video 2. Place a transparency atop. 39
  40. 40. Section 5 >5.5.Linear Video 3. On the transparency, draw the changes that would occur after an interaction. In this example, draw in the X in the Blue checkbox, color in the chair, and add “Chair” under Item, “Blue” under Style, and “98.00” under Cost. 40
  41. 41. Section 5 > 41 Final Screen Interaction 1 – The actor presses the Blue checkbox Screen 1 – The basic interface
  42. 42. Section 5 >5.5.Linear Video • Our second way places multiple blank transparencies atop the first screen, after which you start recording. This approach allows you to draw while recording. Once you are done with one drawing, the transparency can be lifted off , leaving another blank transparency underneath. 42

×