Animations For Everyone

Building accessible and inclusive iOS animations

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. How can we build for everyone? How to build animations? What animation APIs are there? What are accessibility guidelines? Which general lessons can we learn?
5. Story time
6. From this… …to this
7. Why animations?
8. Delight Playfulness
9. State change
10. Draw attention
11. Guidance
12. Animation types in SwiftUI?
13. User-initiated
14. Programmatical
15. Implicit Explicit
16. Symbols PhaseAnimator Keyframes Springs
17. Symbol effects Animate between symbol (states) Content switching Great for tab bars / toolbars
18. PhaseAnimator Split animation in phases Animate multiple properties All properties have same timings
19. PhaseAnimator
21. Keyframes Di ff erent properties separately Full control of timings / durations Most freedom, most complex
22. Keyframes
24. Springs Object attached to a spring Engaging, fun Used across the system
25. Springs
26. Timing curves
27. Linear Constant speed No acceleration No deceleration Mechanical rather than natural
28. EaseOut Velocity decreases over time Move objects onto the screen Human-initiated interactions
29. EaseInOut Slow, accelerate, slow On-screen movement Ping-pong / To-and-fro motion
30. Standard easings Custom timing curves Springs
31. Available on YouTube
34. Which animations / motion can be distractive?
35. Frequent particle animations
36. Parallax UIMotionE ff ect Background & Foreground e ff ects
37. Zooming & Scaling
38. Spinning Rotating Vortex
39. Bouncy e ff ects
40. Depth changes
41. Multi-sliding Opposite direction to scroll
42. Intense Animations Glitching and fl icking
43. Blinking animation
44. What can we do better?
45. Apple Developer Videos Human Interface Guidelines (HIG) Web Content Accessibility Guidelines (WCAG) Apple Design Awards
46. 3 easy-to-follow guides
47. Pause, Play, Hide 1
48. Autoplaying GIFs Video previews Animated illustration
49. Don’t flash more than 3 times in 1 s 2
50. Distracting Can cause seizures Replace fl ashing
51. Provide a way to disable animations 3
52. User-initiated Replace bouncy animation
53. We know what, but not how
54. Reduce motion
55. 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.
56. Settings > Accessibility > Motion
57. Auto-Play Message E ff ects Auto-Play Video Previews Auto-Play Animated Images Dim Flashing Lights Limit Frame Rate Reduce Motion
58. Doesn’t remove all animations Provides a reduced behaviour Possible to set on per-app basis E.g. image-switching technique
60. Prefers Cross-Fade Transitions Replace slide-in / slide-out transitions Use cross-fade For free with NavigationLink
62. Checking Reduce Motion
64. Adopting Reduce Motion Remove animation
65. Adopting Reduce Motion Reduce animation duration
67. Adopting Reduce Motion Replace animation
69. One more thing…
70. ReduceMotion doesn’t stop all movements Custom In-App settings Speci fi c to your app Reduce all sudden movements
72. VoiceOver
73. 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.
74. Settings > Accessibility > VoiceOver
75. VoiceOver mentions all layers Hide decorative animations Add labels to meaningful animations
76. Adopting VoiceOver Hide decorative animation
78. Adopting VoiceOver Add VoiceOver label and hint
80. Haptic Feedback
81. Mimick physical touch and drag Haptic engine - vibrations Emulate sound when phone is silent
83. Best practices
84. 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
85. 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
86. Practical tips Be mindful of motion usage Use NavigationLink (when possible) Respect ReduceMotion Think in VoiceOver
87. 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? Will bounciness feel out of place?
88. Think before you animate of accessibility
89. Resources Apple Design Awards: Inclusivity Winners Apple Human Interface: Accessibility Apple Developer Videos Responsive Design For Motion Playing Haptics
90. 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
91. Thank you @amos_gyam f @stefanjblos