2.17 Ensure animation is proportionate and easy to control

User Experience Design

Ensure any animation deemed necessary is not overdone and that the user can control its ability to run.

Criteria

• Need for animation: Human-testable
  Use animation only when it adds value and not for decorative elements.Related Resources
  • Climate Change Implications of Gaming Products and Services (PDF)
  • GR491 – 9-5079 – Animation Necessity
  • GreenIT – 4030 – Limiting the use of carousels
  • GreenIT – 4035 – Prefer pagination over infinite scrolling
  • How can we design sustainably?
  • The Carbon Impact of Web Standards (PDF)
  • Web Animation: Delightful or Distracting?
  • Why, when and how to use video and animation on your website
• Avoiding overburdening: Machine-testable
  Progressively display an appropriate number of animations to avoid overburdening the user or negatively impacting device performance. This includes setting a maximum number of replays or iterations.Related Resources
  • Equations relating total annual energy consumption and chips energy efficiency
  • GreenIT – 039 – Avoid JavaScript / CSS animations
  • GreenIT – 4002 – Limit the use of animated GIFs
  • Humane By Design
  • The ultimate guide to proper use of animation in UX
  • UI Animation: Please Use Responsibly
  • Web Almanac: Sustainability
• Control animation: Machine-testable
  Allow users to start, stop, pause, or otherwise control animated content.Related Resources
  • Accessible Web Animation
  • Animation and motion
  • GPF – General Policy Framework (PDF) – 4.1 – UX and UI (Autoplay)
  • GPF – General Policy Framework (PDF) – 4.6 – UX and UI (Informational Media)
  • GR491 – 7-5051 – Animation Frequency
  • Let users pause/stop/hide animation
  • prefers-reduced-motion: Sometimes less movement is more
  • Respecting Users’ Motion Preferences

Benefits

• Environment
  Disabling and reducing animation to the essential, with appropriate optimization and user control, reduces rendering impact and associated emissions.
• Performance
  Compressing, removing, or otherwise reducing animation files reduces complexity, improving performance.
• Social Equity
  Catering to different perspectives on and preferences in relation to animation can improve acceptance and access for individuals using different devices and from different backgrounds.

GRI

• Materials: High
• Energy: High
• Water: High
• Emissions: High

View the Guideline

Tags

AccessibilityPerformanceUIUsabilityCSSJavaScript