Digital components that move and react as they are manipulated give users a sense of control over their experience, and the feeling that the page is "alive" and interactive. Appropriate feedback is a cornerstone of good usability. In order for feedback to be successful, animation has to be used deliberately and behave predictably. We must also take care to make these cues accessible and considerate of all users, including those with visual impairments and other disabilities.

Movement within Cigna digital experiences should have consistent character to reinforce our brand. Animated components should behave in ways users expect and feel familiar based on their experiences with other sites and apps.

Always have a purpose for movement and transitions. Avoid using it purely for decoration.

When animation is used thoughtfully and deliberately, it can:

  • Guide users to complete a task or take a desired action.
  • Convey spatial relationships to help users navigate.
  • Help explain complex concepts through storytelling.

Drawing attention and focus

Animation can help answer the question, "Where am I?" and "What should I do next?" Feedback such as hover and focus states help users keep track of their place on screen. Motion should support the information hierarchy, conveying what content is most important by creating a path for the eye to follow.

Subtle but Noticeable Animation

Use movement that catches users' eyes. A noticeable transition can help users understand that they're moving from one state to another. When transitioning elements are coordinated, they aid users' understanding of the system. Keep it simple; users will be distracted by complex animation with multiple steps.

Smooth and natural movement

When acceleration or deceleration isn't smooth , movement appears mechanical. Abrupt changes in speed or direction are jarring and draw attention. Motion should be authentic in relation to the object's size and shape and based on physical properties in the real world. This helps users follow the movement and anticipate what will happen next. Use fades and transitions that ease in and out, without keeping users waiting too long. In order to feel instantaneous and seamless, feedback needs to happen quickly. In eyetracking research , users look at things for little more than 0.1 seconds.

When to use it

Some components use movement as they change to hover, focus, and active states. Links, buttons, form elements, and navigation elements are examples of components with states that should be clearly differentiated for users.

Additional animation is used across many of our components:

  • Loading Indicators
  • Accordions and Expandables
  • Modals
  • Tooltips and Popovers
  • Typeahead
  • Filters and Facets
  • Sorting

Animated Images

An animated image – the animated GIF being the most popular format – is more than a static image, but not quite a video. It’s used to capture and communicate an idea in a way a static image or a full-blown video is not quite appropriate.

Animated images are useful when the motion content to be conveyed:

  • Is very short
  • Doesn’t include sound
  • Doesn’t require sophisticated (or any) playback controls

Accessibility

  • Like any image, animated images must use equivalent text to convey information to non-sighted and visually impaired users. This is especially important if the image is editorially significant.
  • To limit the chance of triggering seizures, animated images should flash no more than three times per second; if the flashing area is small or of low contrast, these limits could be more flexible.