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.
Functional:
- 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.
Material:
- 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.
Delightful:
- 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.
