healthcare-medical

Healthcare & Medical Animation Principles

Apply Disney's 12 principles to create calming, trustworthy experiences that prioritize clarity and reduce anxiety.

The 12 Principles Applied

1. Squash & Stretch

• Minimal Use: Avoid playful squash on health data
• Breathing Exercises: Gentle expand/contract for guided breathing
• Heart Rate: Subtle pulse matching actual rhythm

2. Anticipation

• Appointment Booking: Brief preparation before confirmation
• Test Results: Thoughtful pause before revealing sensitive data
• Medication Reminders: Gentle fade-in, never jarring

3. Staging

• Critical Alerts: Center stage with clear hierarchy
• Vital Signs: Most important metrics prominently displayed
• Privacy First: Blur or hide sensitive info until focused

4. Straight Ahead & Pose to Pose

• Health Journeys: Step-by-step progress (pose to pose)
• Real-time Monitoring: Continuous data streams (straight ahead)
• Onboarding: Clear sequential steps

5. Follow Through & Overlapping Action

• Dashboard Load: Cards appear in logical health order
• Prescription Updates: Medicine icon settles before details
• Chart Animations: Data points connect sequentially

6. Slow In & Slow Out

• All Transitions: Gentle easing, never abrupt
• Modal Reveals: Soft fade-in for sensitive information
• Navigation: Smooth 400-500ms transitions

7. Arc

• Progress Indicators: Circular arcs for completion
• Body Diagrams: Smooth paths between body regions
• Timeline Navigation: Curved paths through health history

8. Secondary Action

• Confirmation Checkmarks: Gentle pulse after booking
• Loading States: Calming animations during data fetch
• Success States: Subtle color transitions

9. Timing

• Slower Overall: 400-600ms for calm, measured feel
• Critical Alerts: Faster 200ms to ensure attention
• Data Entry: Responsive 150ms feedback

10. Exaggeration

• Avoid in Most Cases: Medical context requires restraint
• Emergency Only: Reserved for urgent alerts
• Celebrations: Subtle for health milestones

11. Solid Drawing

• Anatomical Accuracy: Correct body representations
• Chart Clarity: Legible graphs at all sizes
• Accessibility: High contrast, readable animations

12. Appeal

• Calm Professionalism: Trust through restraint
• Warm Colors: Soft blues, greens for comfort
• Human Touch: Gentle transitions feel caring

Industry Timing Standards

Action	Duration	Easing
Page Transition	400-500ms	ease-in-out
Modal Open	350ms	ease-out
Alert Appearance	200ms	ease-out
Data Refresh	300ms	ease-in-out
Success Feedback	400ms	ease-out

Key Principle

Animations must never cause anxiety or confusion. Prioritize clarity, accessibility, and a calming presence. When in doubt, animate less.