Using Animation to Enhance UX

Using Animation to Enhance UX

What can animation do for user experience

As defined in Kit Oliynyk’s excellent article, there are three types of web animation: Functional, Material, and Delightful. All three play their own part in UX.


  • Explain what is happening. Interfaces without animation are like a flipbook with only the first and last page. Animation fills in the gaps between an action and its consequence. This makes UI’s more trustworthy, which boosts user confidence.
  • Increase perceived speed. Introducing motion can distract users from waiting time – making them think they’re not waiting for something (even when they are).
  • Provide visual feedback. Animation can acknowledge that an action has happened… is happening… or will happen. These responsive interfaces are reassuring.
  • Guide users. Animation can walk users through a sequence of steps. This allows users to anticipate things that will happen in the future.


  • Add spatial awareness. Movement provides a way to introduce users to their surroundings, and more importantly how to navigate around them.
  • Provide more context. The mechanics of an animation should reflect the use case. Movement can manage a user’s expectation – slide up to open, slide down to close.
  • Make interfaces feel real. Consistency isn’t just restricted to colour schemes – when objects move and behave on screen like they do in real life they are more relatable. A more believable UI provides a more genuine experience.


  • Entertain users. Animation can transform boring interactions into something much more enjoyable.
  • Add polish and sophistication. Animation shouts quality, and being easy on the eye goes a long way when a system is used day in day out. This in turn can boost sales and reduce churn – I’ve seen this happen.
  • Establish brand identity. Animation can add personality to an interface, it is this personality that helps drive brand awareness.
Cardboard Box Branding Packaging PSD Mockups
  • Free!  Get this mockup and 200+ more free right now
  • Learn more...