Animations for everyone

These are the slides for a talk I gave with my friend Amos at the Pragma Conference 2023 in Bologna, Italy.

We want to demonstrate how to perform animations in SwiftUI and simultaneously describe the importance of making them accessible to everyone.

We talk about Motion Sickness and other issues and how we can use tooling like ReduceMotion, VoiceOver, and others to ensure our apps are delightful for everyone.

Transcript

1. Amos Gyam fi & Stefan Blos Animations for everyone
2. Stefan Blos Amos Gyamfi DX Engineer at Stream Worked in mobile, web, cloud @stefanjblos iOS Developer Advocate at Stream Switched into DevRel from design @amos_gyam f
3. Why are we here? We like nice animations We want to give you best practices We’ll talk about Accessibility We’ll show you (a lot of) examples
4. Story time
5. From this… …to this
6. Why animations?
7. Delight Playfulness
8. State change
9. Draw attention
10. Guidance
11. Animation types in SwiftUI?
12. User-initiated
13. Programmatical
14. Implicit Explicit
15. Symbols PhaseAnimator Keyframes Springs
16. Symbol effects Animate between symbol (states) Content switching Great for tab bars / toolbars
17. PhaseAnimator Split animation in phases Animate multiple properties All properties have same timings
18. PhaseAnimator
20. Keyframes Di ff erent properties separately Full control of timings / durations Most freedom, most complex
21. Keyframes
23. Springs Object attached to a spring Engaging, fun Used across the system
24. Springs
25. Timing curves
26. Standard easings Custom timing curves Springs
27. Available on YouTube
30. Which animations / motion can be distractive?
31. Frequent particle animations
32. Parallax UIMotionE ff ect Background & Foreground e ff ects
33. Spinning Rotating Vortex
34. Depth changes
35. Multi-sliding Opposite direction to scroll
36. Intense Animations Glitching and fl icking
37. Blinking animation
38. What can we do better?
39. Apple Developer Videos Human Interface Guidelines (HIG) Web Content Accessibility Guidelines (WCAG) Apple Design Awards
40. 3 easy-to-follow guides
41. Pause, Play, Hide 1
42. Autoplaying GIFs Video previews Animated illustration
43. Don’t flash more than 3 times in 1 s 2
45. Distracting Can cause seizures Replace fl ashing
46. Provide a way to disable animations 3
47. User-initiated Replace bouncy animation
48. We know what, but not how
49. Reduce motion
50. Apple Support (modi fi ed) If you don’t want visual motion on your iPhone screen, you can stop or reduce the movement of some screen elements, such as parallax effects, screen transitions, animations, full-screen effects, and more.
51. Settings > Accessibility > Motion
52. Auto-Play Message E ff ects Auto-Play Video Previews Auto-Play Animated Images Dim Flashing Lights Limit Frame Rate Reduce Motion
53. Doesn’t remove all animations Provides a reduced behaviour Possible to set on per-app basis E.g. image-switching technique
55. Prefer Cross-Fade Transitions Replace slide-in / slide-out transitions Use cross-fade For free with NavigationLink
57. Checking Reduce Motion
59. Adopting Reduce Motion Remove animation
60. Adopting Reduce Motion Reduce animation duration
62. Adopting Reduce Motion Replace animation
64. One more thing…
65. ReduceMotion doesn’t stop all movements Custom In-App settings Speci fi c to your app Reduce all sudden movements
67. VoiceOver
68. Apple Documentation VoiceOver is a gesture-based screen reader that enables people to experience the interface on their devices without having to see the screen.
69. Settings > Accessibility > VoiceOver
70. VoiceOver mentions all layers Hide decorative animations Add labels to meaningful animations
71. Adopting VoiceOver Hide decorative animation
73. Adopting VoiceOver Add VoiceOver label and hint
75. Haptic Feedback
76. Mimick physical touch and drag Haptic engine - vibrations Emulate sound when phone is silent
78. Best practices
79. Follow basic accessibility guidelines Screen fl ashing can cause seizures Alternate e ff ects for ReduceMotion Excessive motion can cause discomfort Examples: Parallax, sliding animations
80. There are 3 easy wins: 1 Pause, Play, Hide 2 Don’t flash more than 3 times in 1 s 3 Provide a way to disable animations
81. Practical tips Be mindful of motion usage Use NavigationLink (when possible) Respect ReduceMotion Think in VoiceOver
82. Ask yourself these questions Can this animation cause discomfort? Can people with motion sensitivities enjoy my app? What if the user’s reduced motion setting is on?
83. Think before you animate of accessibility
84. Resources Apple Design Awards: Inclusivity Winners Apple Human Interface: Accessibility Apple Developer Videos Responsive Design For Motion Playing Haptics
85. References Human Interface Guidelines Principles of motion Writing Great Accessibility Labels Supporting VoiceOver in your app Motion sickness: Nausea Creating usability with motion Understanding the intuition of easing Reduce screen motion on Apple devices Responsive design for motion Animations are nice, right?
86. Thank you @amos_gyam f @stefanjblos