Animations

Microinteractions are the controls that set a website in motion. They also improve usability and make simple tasks – like turning the sound on or off, liking a status update, or sharing a post – not only easy, but also engaging. They blend into a user’s experience naturally.

“Microinteractions happen through the functional, interactive details of a product, and details… aren’t just the details; they are the design.” - Dan Saffer

Purpose

Animations should be fast and nimble, never keeping the user waiting longer than is necessary. The aim is to prioritize user-perceived performance over technical benchmarks. Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.

When to use

• Guide the user focus between views or to highlight something
• Hints at what will happen if a user completes a gesture
• As a distraction from what’s happening behind the scenes (like fetching content or loading the next view)