DISTRIBUTION OF TIZEN-BASED WATCH APPS HAS BEEN DISCONTINUED

Animation

Effective animation helps users understand changes in on-screen elements. Animation 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 animation 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 animation to indicate if 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 animation helps 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.

  Animation 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 showing the same element from one screen to the next, animation can give your app a natural flow.

Clear feedback

Animated feedback helps users distinguish output from input. 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 animation 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

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