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
| 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.