Motion
Motion in Occam purposefully enhances clarity, elegance, and adaptability by guiding attention, reinforcing relationships, and creating smooth, intuitive interactions. Natural, responsive, and purposeful motion allows users to navigate complexity effortlessly. Thoughtfully applied, motion brings interfaces to life and strengthens usability, ensuring interactions are clear and seamless without unnecessary distractions.
Clarity → Motion as a Guide
Motion should communicate, not distract. It provides subtle visual cues that help users understand hierarchy, relationships, and transitions. Motion keeps interactions clear and intuitive, whether highlighting an active state, revealing content, or confirming an action.
Elegance → Motion as Refinement
Great motion feels natural, not excessive. Transitions should be smooth, microinteractions should be lightweight and polished, and animations should blend seamlessly with the experience. Motion in Occam enhances usability by making interactions feel effortless and refined.
Adaptability → Motion as a System
Motion should scale with complexity and adapt across different experiences—more pronounced when guiding focus restrained when reinforcing stability. By keeping animations consistent and predictable, Occam ensures motion enhances usability without unnecessary distraction.
Standard Motion Patterns
Micro-interactions
Provide instant, lightweight feedback. Buttons, inputs, and interactive components should respond immediately to user actions. Hover, press, and focus states should be quick and unobtrusive, reinforcing affordance without excess.
Interact with the example
Transitions
Ensure smooth movement between states. Page transitions and modals should feel seamless and effortless, avoiding jarring shifts. Motion should be fast and functional, helping users stay oriented through the experience.
Interact with the example
Expansion & Collapsing
Communicate state changes. Accordions, dropdowns, and expandable sections should use subtle easing to indicate opening and closing. Motion should reinforce cause and effect, making changes feel natural.
Interact with the example
Feedback & Confirmation
Validate user actions with clarity. Success, error, and loading states should use concise animations that signal status. Feedback should feel instant—motion should never delay user progress.
Interact with the example
Best Practices
- Purposeful Motion: Ensure every animation serves a functional purpose, such as providing feedback or guiding attention, rather than being purely decorative.
- Consistency: Apply uniform motion patterns across the interface to create a cohesive and predictable user experience.
- Subtlety: Use gentle and understated animations to avoid overwhelming users, keeping focus on content and primary tasks.
- Performance Optimization: Design smooth and performant animations that do not hinder the application's responsiveness.
Accessibility Considerations
- Respect Reduced Motion Preferences: Support OS-level settings for reduced motion by minimizing or disabling non-essential animations.
- Avoid Flashing or Flickering: To prevent seizures, animations should not flash more than three times per second (per WCAG 2.3.1 : Three Flashes or Below Threshold).
- Limit Extreme Motion Effects: Avoid rapid or disorienting movements (e.g., excessive zooming or parallax scrolling).
- Motion Should Reinforce, Not Replace: Use motion to enhance understanding, not as the primary means of conveying information.
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Motion
Motion in Occam purposefully enhances clarity, elegance, and adaptability by guiding attention, reinforcing relationships, and creating smooth, intuitive interactions. Natural, responsive, and purposeful motion allows users to navigate complexity effortlessly. Thoughtfully applied, motion brings interfaces to life and strengthens usability, ensuring interactions are clear and seamless without unnecessary distractions.
Clarity → Motion as a Guide
Motion should communicate, not distract. It provides subtle visual cues that help users understand hierarchy, relationships, and transitions. Motion keeps interactions clear and intuitive, whether highlighting an active state, revealing content, or confirming an action.
Elegance → Motion as Refinement
Great motion feels natural, not excessive. Transitions should be smooth, microinteractions should be lightweight and polished, and animations should blend seamlessly with the experience. Motion in Occam enhances usability by making interactions feel effortless and refined.
Adaptability → Motion as a System
Motion should scale with complexity and adapt across different experiences—more pronounced when guiding focus restrained when reinforcing stability. By keeping animations consistent and predictable, Occam ensures motion enhances usability without unnecessary distraction.
Standard Motion Patterns
Micro-interactions
Provide instant, lightweight feedback. Buttons, inputs, and interactive components should respond immediately to user actions. Hover, press, and focus states should be quick and unobtrusive, reinforcing affordance without excess.
Interact with the example
Transitions
Ensure smooth movement between states. Page transitions and modals should feel seamless and effortless, avoiding jarring shifts. Motion should be fast and functional, helping users stay oriented through the experience.
Interact with the example
Expansion & Collapsing
Communicate state changes. Accordions, dropdowns, and expandable sections should use subtle easing to indicate opening and closing. Motion should reinforce cause and effect, making changes feel natural.
Interact with the example
Feedback & Confirmation
Validate user actions with clarity. Success, error, and loading states should use concise animations that signal status. Feedback should feel instant—motion should never delay user progress.
Interact with the example
Best Practices
- Purposeful Motion: Ensure every animation serves a functional purpose, such as providing feedback or guiding attention, rather than being purely decorative.
- Consistency: Apply uniform motion patterns across the interface to create a cohesive and predictable user experience.
- Subtlety: Use gentle and understated animations to avoid overwhelming users, keeping focus on content and primary tasks.
- Performance Optimization: Design smooth and performant animations that do not hinder the application's responsiveness.
Accessibility Considerations
- Respect Reduced Motion Preferences: Support OS-level settings for reduced motion by minimizing or disabling non-essential animations.
- Avoid Flashing or Flickering: To prevent seizures, animations should not flash more than three times per second (per WCAG 2.3.1 : Three Flashes or Below Threshold).
- Limit Extreme Motion Effects: Avoid rapid or disorienting movements (e.g., excessive zooming or parallax scrolling).
- Motion Should Reinforce, Not Replace: Use motion to enhance understanding, not as the primary means of conveying information.
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Foundations
Motion
Motion in Occam purposefully enhances clarity, elegance, and adaptability by guiding attention, reinforcing relationships, and creating smooth, intuitive interactions. Natural, responsive, and purposeful motion allows users to navigate complexity effortlessly. Thoughtfully applied, motion brings interfaces to life and strengthens usability, ensuring interactions are clear and seamless without unnecessary distractions.
Clarity → Motion as a Guide
Motion should communicate, not distract. It provides subtle visual cues that help users understand hierarchy, relationships, and transitions. Motion keeps interactions clear and intuitive, whether highlighting an active state, revealing content, or confirming an action.
Elegance → Motion as Refinement
Great motion feels natural, not excessive. Transitions should be smooth, microinteractions should be lightweight and polished, and animations should blend seamlessly with the experience. Motion in Occam enhances usability by making interactions feel effortless and refined.
Adaptability → Motion as a System
Motion should scale with complexity and adapt across different experiences—more pronounced when guiding focus restrained when reinforcing stability. By keeping animations consistent and predictable, Occam ensures motion enhances usability without unnecessary distraction.
Standard Motion Patterns
Micro-interactions
Provide instant, lightweight feedback. Buttons, inputs, and interactive components should respond immediately to user actions. Hover, press, and focus states should be quick and unobtrusive, reinforcing affordance without excess.
Interact with the example
Transitions
Ensure smooth movement between states. Page transitions and modals should feel seamless and effortless, avoiding jarring shifts. Motion should be fast and functional, helping users stay oriented through the experience.
Interact with the example
Expansion & Collapsing
Communicate state changes. Accordions, dropdowns, and expandable sections should use subtle easing to indicate opening and closing. Motion should reinforce cause and effect, making changes feel natural.
Interact with the example
Feedback & Confirmation
Validate user actions with clarity. Success, error, and loading states should use concise animations that signal status. Feedback should feel instant—motion should never delay user progress.
Interact with the example
Best Practices
- Purposeful Motion: Ensure every animation serves a functional purpose, such as providing feedback or guiding attention, rather than being purely decorative.
- Consistency: Apply uniform motion patterns across the interface to create a cohesive and predictable user experience.
- Subtlety: Use gentle and understated animations to avoid overwhelming users, keeping focus on content and primary tasks.
- Performance Optimization: Design smooth and performant animations that do not hinder the application's responsiveness.
Accessibility Considerations
- Respect Reduced Motion Preferences: Support OS-level settings for reduced motion by minimizing or disabling non-essential animations.
- Avoid Flashing or Flickering: To prevent seizures, animations should not flash more than three times per second (per WCAG 2.3.1 : Three Flashes or Below Threshold).
- Limit Extreme Motion Effects: Avoid rapid or disorienting movements (e.g., excessive zooming or parallax scrolling).
- Motion Should Reinforce, Not Replace: Use motion to enhance understanding, not as the primary means of conveying information.
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Foundations
On This Page
Motion
Motion in Occam purposefully enhances clarity, elegance, and adaptability by guiding attention, reinforcing relationships, and creating smooth, intuitive interactions. Natural, responsive, and purposeful motion allows users to navigate complexity effortlessly. Thoughtfully applied, motion brings interfaces to life and strengthens usability, ensuring interactions are clear and seamless without unnecessary distractions.
Clarity → Motion as a Guide
Motion should communicate, not distract. It provides subtle visual cues that help users understand hierarchy, relationships, and transitions. Motion keeps interactions clear and intuitive, whether highlighting an active state, revealing content, or confirming an action.
Elegance → Motion as Refinement
Great motion feels natural, not excessive. Transitions should be smooth, microinteractions should be lightweight and polished, and animations should blend seamlessly with the experience. Motion in Occam enhances usability by making interactions feel effortless and refined.
Adaptability → Motion as a System
Motion should scale with complexity and adapt across different experiences—more pronounced when guiding focus restrained when reinforcing stability. By keeping animations consistent and predictable, Occam ensures motion enhances usability without unnecessary distraction.
Standard Motion Patterns
Micro-interactions
Provide instant, lightweight feedback. Buttons, inputs, and interactive components should respond immediately to user actions. Hover, press, and focus states should be quick and unobtrusive, reinforcing affordance without excess.
Interact with the example
Transitions
Ensure smooth movement between states. Page transitions and modals should feel seamless and effortless, avoiding jarring shifts. Motion should be fast and functional, helping users stay oriented through the experience.
Interact with the example
Expansion & Collapsing
Communicate state changes. Accordions, dropdowns, and expandable sections should use subtle easing to indicate opening and closing. Motion should reinforce cause and effect, making changes feel natural.
Interact with the example
Feedback & Confirmation
Validate user actions with clarity. Success, error, and loading states should use concise animations that signal status. Feedback should feel instant—motion should never delay user progress.
Interact with the example
Best Practices
- Purposeful Motion: Ensure every animation serves a functional purpose, such as providing feedback or guiding attention, rather than being purely decorative.
- Consistency: Apply uniform motion patterns across the interface to create a cohesive and predictable user experience.
- Subtlety: Use gentle and understated animations to avoid overwhelming users, keeping focus on content and primary tasks.
- Performance Optimization: Design smooth and performant animations that do not hinder the application's responsiveness.
Accessibility Considerations
- Respect Reduced Motion Preferences: Support OS-level settings for reduced motion by minimizing or disabling non-essential animations.
- Avoid Flashing or Flickering: To prevent seizures, animations should not flash more than three times per second (per WCAG 2.3.1 : Three Flashes or Below Threshold).
- Limit Extreme Motion Effects: Avoid rapid or disorienting movements (e.g., excessive zooming or parallax scrolling).
- Motion Should Reinforce, Not Replace: Use motion to enhance understanding, not as the primary means of conveying information.
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Foundations
On This Page
Motion
Motion in Occam purposefully enhances clarity, elegance, and adaptability by guiding attention, reinforcing relationships, and creating smooth, intuitive interactions. Natural, responsive, and purposeful motion allows users to navigate complexity effortlessly. Thoughtfully applied, motion brings interfaces to life and strengthens usability, ensuring interactions are clear and seamless without unnecessary distractions.
Clarity → Motion as a Guide
Motion should communicate, not distract. It provides subtle visual cues that help users understand hierarchy, relationships, and transitions. Motion keeps interactions clear and intuitive, whether highlighting an active state, revealing content, or confirming an action.
Elegance → Motion as Refinement
Great motion feels natural, not excessive. Transitions should be smooth, microinteractions should be lightweight and polished, and animations should blend seamlessly with the experience. Motion in Occam enhances usability by making interactions feel effortless and refined.
Adaptability → Motion as a System
Motion should scale with complexity and adapt across different experiences—more pronounced when guiding focus restrained when reinforcing stability. By keeping animations consistent and predictable, Occam ensures motion enhances usability without unnecessary distraction.
Standard Motion Patterns
Micro-interactions
Provide instant, lightweight feedback. Buttons, inputs, and interactive components should respond immediately to user actions. Hover, press, and focus states should be quick and unobtrusive, reinforcing affordance without excess.
Interact with the example
Transitions
Ensure smooth movement between states. Page transitions and modals should feel seamless and effortless, avoiding jarring shifts. Motion should be fast and functional, helping users stay oriented through the experience.
Interact with the example
Expansion & Collapsing
Communicate state changes. Accordions, dropdowns, and expandable sections should use subtle easing to indicate opening and closing. Motion should reinforce cause and effect, making changes feel natural.
Interact with the example
Feedback & Confirmation
Validate user actions with clarity. Success, error, and loading states should use concise animations that signal status. Feedback should feel instant—motion should never delay user progress.
Interact with the example
Best Practices
- Purposeful Motion: Ensure every animation serves a functional purpose, such as providing feedback or guiding attention, rather than being purely decorative.
- Consistency: Apply uniform motion patterns across the interface to create a cohesive and predictable user experience.
- Subtlety: Use gentle and understated animations to avoid overwhelming users, keeping focus on content and primary tasks.
- Performance Optimization: Design smooth and performant animations that do not hinder the application's responsiveness.
Accessibility Considerations
- Respect Reduced Motion Preferences: Support OS-level settings for reduced motion by minimizing or disabling non-essential animations.
- Avoid Flashing or Flickering: To prevent seizures, animations should not flash more than three times per second (per WCAG 2.3.1 : Three Flashes or Below Threshold).
- Limit Extreme Motion Effects: Avoid rapid or disorienting movements (e.g., excessive zooming or parallax scrolling).
- Motion Should Reinforce, Not Replace: Use motion to enhance understanding, not as the primary means of conveying information.
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.