Motion principles

It can be difficult to deliver consistent experiences that feel on-brand, are accessible, and serve a purpose without following some guiding principles.

Principles for designing with motion

It must serve a purpose

What’s the user value of adding motion into your solution?

It must assist but never be relied upon—the rest of the design must work without it

Don’t make your message or experience dependent on motion as it can be reduced at the OS and browser level.

It must not slow down user progress or task completion

Users shouldn’t have to wait for your animation to play out, the majority of the time they will be task driven.

It must feel on-brand

Are you using the right colours and fonts? Does it align with the overarching brand experience?

It must feel cohesive with other micro-interactions

Making something that feels at odds with existing interactions will be disruptive and impact trust in the brand and application.

It must consistently perform the same task and be designed for reuse

If there’s a defined micro-interaction for something, use the same mechanisms and reuse as much as possible.

Design an accessible fallback for “reduce motion” capability

Reduce motion functions in operating systems and browsers help those with vestibular disorders in particular. A fallback needs to be designed from the beginning.

It must encourage positive behaviour and provide delight

Use opportunities to provide delightful moments, and promote positive feedback and behaviour.