What’s the user value of adding motion into your solution?
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
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.