Some thoughts on animation
I wrote this list of guidelines for myself to refer to when thinking about motion and interactivity in interface design. This is largely inspired by Google’s Material Design.
Why Animate?
Motion can provide crucial information to the user about the interface, and is therefore a powerful communication tool.
Digital interfaces that mimic real-world physics inherently make sense to users, which helps to create experiences that are comfortable and familiar.
The phrase “surprise and delight” is awful, but it points to something important: a premium product should feel intentional and well-polished at every level of interaction, and animation is a crucial opportunity to tell our users “we thought really long and hard about this. We give a shit.”
Primary Functions of Movement in a UI
Provide information about hierarchy and spatial relationships as user moves through experience
Provide feedback to users as they interact with interface to let them know that their gestures have been registered
Make users feel in control of their experience
Provide information about a UI’s capabilities, and hints about results of certain gestures
Direct attention toward something (like a cta) or away from something (distract from background processes like loading content
Simplify complex on-screen transitions
Create a fly-ass pleasurable experience
General Animation Guidelines
Animations should be fast. Don’t keep a user waiting.
Animations should logically respond to user input. If a user swipes something it should move in the direction and speed of the swipe
Motion should be based on real world physics.
Every interaction should provide some kind of feedback.
Animations should be consistent and follow the same set of rules
Animations should be simple. This is communication, not entertainment.
Designing an Interaction
A successful interaction is composed of the following elements:
UI Element
Graphic element describes clearly how user is meant to interact with it through use of shape, iconography, color, or text
Gesture
Swipe, tap, flick, speak, type, shake, tilt, etc. Clearly defined.
Feedback
UI lets the user know that their input is being received
Transformation
The result of the gesture on the ui. Transformations should be clear RESULTS of the gesture, both in terms of content and physical motion.
Gestures
Our interactions will be based on the following list of gestures. It is important that our definitions of gestures do not interfere or overlap with native browser interactions.
Motion Patterns: Floating Share Button
All buttons should transform on tap to indicate to the user that the interaction has been recognized. The transformation should be subtle - just enough to make the interface feel responsive and alive.
Motion Patterns: Image Loading
Images should load slowly and elegantly. Image loading should be treated as a design element, not a shortcoming of the underlying technology. An image should be loaded in stages: first opacity, then brightness, then finally saturation.
Motion Patterns: Image Transitions
When transitioning between slides, movement should be quick, smooth, and should correspond to the gesture that triggered the transition. Images do not need to slide all the way across the screen to communicate horizontal movement. Images should cross fade according to the image loading guidelines on the previous slide, but twice as quickly.
