Animation

Effective animations help users understand changes in on-screen elements. Animations can express subtle meanings and moods in a way that static designs can't. Animation effects should have a clear purpose to avoid confusing users.

Look and feel

The watch can show animations where objects glide across the screen effortlessly. Provide animations with this look and feel by precisely adjusting the timing and ease of the gliding effect.

Animations should glide across the screen effortlessly.

Consistent flow

When transitioning between screens, use consistent animations to indicate whether the transition is at a higher, lower, or equivalent navigational level. Likewise, when animating components in the screen, use the same animation to express the same meaning.

  • Clearly express visual hierarchy

    Animated transitions between screens should show the hierarchy of each screen. Users should be able to determine the hierarchy of transitioning screens solely from the animation. For example, it can confuse users if a screen to the left of the current screen comes in from the right-hand side.

    Animations should show the visual hierarchy between the transitioning screens.

  • Use a uniform style

    Animations that appear simultaneously on the same screen should be consistent. Uniform animations help users understand what is happening on the screen. Apply a different animation style only when there’s a clear reason to do so.

    A uniform animation style should be applied when multiple objects need to appear on the screen at once.

  • Maintain a smooth flow.

    Animations should create a continuous flow. For example, users understand that they’re exploring the same menu if an animation smoothly brings the same element from one screen to the next.

    By consistently providing the same element from one screen to the next, animations can give your app a natural flow.

Clear feedback

Animated feedback helps users distinguish outputs from inputs. Feedback should be provided immediately after user input. A time gap between an input and animation makes it difficult to tell which action the feedback relates to.

  • Touch feedback

    Use animations to indicate changes on the screen after a touch interaction.

    Dispersion effect

    Color transitions and ripple effects should occur in a consistent direction to maximize the impact of the animation. For example, colors should either brighten or darken (not both) and ripple effects should either spread out or in.

    Duration

    An animation’s motion should be 300 to 400ms.

    Fade out

    You can use a fade animation when users release a touch so users know which object they last interacted with.

The fade animation is provided when users release a touch, showing which object they last interacted with. We recommend against changing the object size.

  • Bezel feedback

    Use animation to indicate elements that respond to a bezel interaction. Since users don’t obscure the display with their hand when using the bezel, animations can show the impact of any rotary action.

    When providing feedback on a rotary action, the animation should reflect the direction of the bezel’s rotation.

Intuitive interaction

Animations hint at how to interact with your app, allowing users to determine which elements they can select and which pages they can transition to. Users should be able to predict the result of interactions through your animations.

An animation can suggest a rotary action to answer/reject a call.