UX Antwerp Meetup March 2018: "Motion in Web Design" by Matteo Setti, Emakina
1 like•349 views
The document discusses the importance and benefits of animation in web design, emphasizing its role in guiding user experience, reducing cognitive load, and enhancing understanding of spatial relationships. It outlines the 12 principles of animation, including timing, anticipation, and follow-through, as essential methods for creating impactful animations that convey messages effectively. Additionally, it provides guidelines for effective interface animations, focusing on flexibility, responsiveness, and avoiding user frustration.
UX Antwerp Meetup March 2018: "Motion in Web Design" by Matteo Setti, Emakina
- 2. Why?
- 3. 3 Why we should bother ? Draw attention Hierarchical and spatial relationships between elements Character, polish, and delight Deliver modern state of the art digital experience Why
- 4. 4 Easier to understand Keeps track of elements It’s good for the brain Why
- 5. 5 Cognitive load refers to the total amount of mental effort being used in working memory Reduce cognitive load Why
- 6. 6 Keep track of the red dot
- 8. 8 Animation can help people learn and remember spatial relationships Improves decision making Why
- 9. The 12 principles of animation
- 10. “Walt Disney 10 Animation can explain whatever the mind of man can conceive
- 11. 11 General notions Timing & spacing Follow-through and overlapping action Anticipation Secondary action Arcs The 12 principles of animation Slow In and Slow Out Exaggeration Straight Ahead and Pose to Pose Solid Drawing Appeal StagingSquash and Stretch
- 12. 12 The ones that matter Timing & spacing Follow-through and overlapping action Anticipation Secondary action Arcs The 12 principles of animation
- 13. 13 Each bounce of the ball is an action, and the diamonds here represent the timing of each action. Timing… The 12 principles of animation
- 14. 14 The spacing of the individual frames of the ball bounce changes the speed of the ball at the various stages of its bounce Spacing The 12 principles of animation
- 15. 1519 October 2017 Refers to the way parts of the body continues to move after the body has stopped Follow through The 12 principles of animation Describes the offset between the body and it’s other parts Overlapping
- 16. 1619 October 2017 The 12 principles of animation Any additional motion that complements, or supports, the primary motion. Secondary action is like the supporting actor of animation. Follow through
- 17. 1719 October 2017 The 12 principles of animation Prepares for an animation by giving a clue to the audience to what is about to happen next. Animations looks more realistic and energetic Anticipation
- 18. 1819 October 2017 The inverse of follow-through, and the two are often used together to create an increased sense of energy. Anticipation The 12 principles of animation
- 19. 1919 October 2017 The 12 principles of animation Any additional motion that complements, or supports, the primary motion. Secondary action is like the supporting actor of animation. Secondary action
- 20. 2019 October 2017 Any additional motion that complements, or supports, the primary motion. Secondary action is like the supporting actor of animation. Secondary action The 12 principles of animation
- 21. 2119 October 2017 The 12 principles of animation Nearly everything in real life, on the other hand, doesn’t move in precise straight lines at all. Most movements in real life follow a slightly curved path as opposed to a straight line, Arcs
- 22. 2219 October 2017 Nearly everything in real life, on the other hand, doesn’t move in precise straight lines at all. Most movements in real life follow a slightly curved path as opposed to a straight line, Arcs The 12 principles of animation
- 24. 24 The best animations … • Have a known purpose for every animation in your interface. • Don’t create obstacles with animation. • Keep animations flexible and nonblocking. • Focus on readability above duration. • Animate the most performant CSS properties to set yourself up for good performance from the start. Interactive animations principles
- 26. Ask yourself What is the goal of the animation ? What is the animation trying to achieve ? What message doest it convey ? 26 Do I have the user attention, do I want it? What is the user doing when the animation is going to happen? How frequent is the animation? How often the user is likely to encounter the animation in a single visit ?
- 27. 27 Animation shouldn’t get in the way of your user accomplishing the task at hand. Don’t be an annoyance The 12 principles of animation How are you doin’?
- 28. 28 If at anytime the user finds herself waiting unnecessarily for an animation to finish before she can make her next move, there is a problem Stay out of the way Interactive animations principles
- 29. 29 An animation that ignores input while it is active is a blocking animation Be flexible Interactive animations principles
- 30. 30 Good interface animations need to be flexible and always feel responsive to a user’s input even if the animation is currently animating. Be flexible Interactive animations principles
- 31. 31 Aim to keep them within the range of 200ms–500ms Timing Interactive animations principles 100ms 200 to 500ms 50-100ms User interaction Animation starts Animation ends Perceived animation end Perceived as instantaneous
- 32. 32 Interactive animations principles Over 300ms Between 100 & 200 ms
- 33. 33 More Complex Easing Needs More Time to Be Readable Velocity Interactive animations principles
- 34. 34 To get the best performance out of CSS animations, stick to these properties Performance Matter Interactive animations principles • Opacity • Scale • Rotation • Position
- 36. 36 Use animation to • Orient, guide and give context • Grab focus and attention • Show cause and effect • Give feedback • Express the brand image Animations to “solve” design issues
- 37. “Ghandi - Just kidding I don’t know who said that 37 Delight should always be a consequence not the goal of an animation
- 39. 3919 October 2017 Animating the movement between layers serves to make the layer change more apparent and establish the separate layers as their own space Orient to off-screen objects Animations to “solve” design issues
- 40. 4019 October 2017 Animating the movement between layers serves to make the layer change more apparent and establish the separate layers as their own space Move between layers Animations to “solve” design issues
- 41. 4119 October 2017 Use animations to keep user on task and to provide a hint to what comes next Guide to accomplish a task Animations to “solve” design issues
- 42. 4219 October 2017 Animations to “solve” design issues The shape morph between the thumb-ip button and the send button helps indicate the change between message sending modes Inform of context change
- 44. 4419 October 2017 Peripheral vision is good at detecting motion. This dates back to our primate ancestor and their need to quickly perceive potential threat in open environments Peripheral vision Animations to “solve” design issues
- 45. 4519 October 2017 Anything appearing with motion outside of the F- shaped pattern, the “eye flow”, will grab the user’s attention Direct focus and attention Animations to “solve” design issues
- 46. 4619 October 2017 Pinterest’s images move directionally in and out of the modal window based on their position in the grid. Eye Flow Animations to “solve” design issues
- 47. 4719 October 2017 Letting an element continue to be itself throughout a transition. Visual continuity Animations to “solve” design issues
- 48. 4819 October 2017 On Android the interface follows Google material guidelines with shared elements Visual continuity Animations to “solve” design issues
- 50. 5019 October 2017 Affordance is the concept of using an object’s characteristics to suggest its functionality and use Hinting at affordances Animations to “solve” design issues
- 51. 5119 October 2017 Animation are very effective at guiding users trough longer task flow by revealing progressively relevant options Cueing Animations to “solve” design issues
- 52. 5219 October 2017 Reordering content and more complex interactions are good example of the benefits to preview the action before it happens Preview the effects of an action Animations to “solve” design issues
- 53. 5319 October 2017 If you drop the drive in the “wrong” place the animation moves it back to it’s original place Handle errors Animations to “solve” design issues
- 54. 5419 October 2017 Contrast in motion is achieved by varying directions Contrasting Animations to “solve” design issues
- 55. 55 Feedback
- 56. 5619 October 2017 The shaking animation is paired with a red outline around the problematic fields to indicate where the error is. Animation is used as the primary indicator of an error, and the outline is the secondary indicator Error messages Animations to “solve” design issues
- 57. 5719 October 2017 The loader animation consists of a few lines of text fading in and out as your new account is created in the background. Each line suggests a step that is taking place behind the scenes Loaders Animations to “solve” design issues
- 58. 5819 October 2017 The Nounproject download buttons double as processing indicators or confirmation messages Confirmations Animations to “solve” design issues
- 60. 6019 October 2017 Use follow trough and anticipation to communicate a sense of energy Energetic Animations to “solve” design issues
- 61. 6119 October 2017 Squash and stretch tends to create a sense of playfulness Playful & friendly Animations to “solve” design issues
- 62. 6219 October 2017 Motion with ease-in and out tends to read as calm and decisive action because the element move the fastest in the middle of the animation Decisive and Sure Animations to “solve” design issues
- 63. 6319 October 2017 The amount of movement says something about the brand. Using smaller movements contributes to the stable calm sensation. Calm Animations to “solve” design issues Small movement Larger movement
- 64. 6419 October 2017 Animating properties like opacity and blur instead of using motion conveys calm and stability Stable Animations to “solve” design issues
- 65. 6519 October 2017 A-dam Underwear uses animation to showcase their unique pattern on their products Using real word references Animations to “solve” design issues
- 66. 66 Choose the light side of the force
- 67. 6719 October 2017 Apple discovered this the hard way when the animated transitions in iOS 7 started making some people sick Animation and Vestibular Disorders Animations to “solve” design issues
- 68. 68 Mismatched Movement Exaggerated parallax and scroll-jacking animations are highly likely to be triggering factors Size of Movement Animations that take up a large amount of space Distance Covered Animations covering a large perceived distance can trigger a reaction Be mindful with
- 69. 6919 October 2017 Apple discovered this the hard way when the animated transitions in iOS 7 started making some people sick Provide an option to reduce motion Animations to “solve” design issues
- 70. Workflow
- 72. Start early Identify where animation could be helpful in the flow 72 Workflow
- 74. Sketch and storyboards Storyboards are the most useful for sketching and discussing where are the most valuable interaction with potential for animation 74 Workflow
- 77. Create prototypes From Keynote to HTML prototype there is a variety of tools to test animations at various stage of a project 77 Workflow
- 81. 81
- 83. Create a style guide Document your animations and design decisions in a single document 83 Workflow
- 84. Document Types of animation The main purpose of the animation : entrance, exits, causality, emphasis, feedback, … 84 Building block Describe the core building blocks of the animation and their properties : opacity, scale, color, position, rotation, … Layers and space If the interface has multiple kinds of content (above and below)
- 86. Always communicate The biggest factor in designing interface animations is the communication between those responsible for designing the animations and those building them 86 Workflow
- 87. “- Michael Jordan 87 Talent wins games, but teamwork and intelligence wins championships.
- 89. greensock.com
- 90. www.pixijs.com
- 92. Thank you
- 93. References • Illusion of Life - Ollie Johnston and Frank Thomas • 12 Principles of Animation - AlanBeckerTutorials • Design Interface Animations - Val Head • It’s Alive! Animate Motion Captures Visual Attention • Animation for Attention and Comprehension - Nielsen Norman 93 Workflow