1. Aid understanding
Signpost how to use the product.
Motion is a primary tool that should be used to ease users into the product. If a picture is worth a thousand words, motion is – sometimes literally – a thousand pictures.
Animate icons.
Use animation to indicate to a user what is happening when they interact with an icon.
Reveal possible interactions.
Use animation to signpost available interactions.
On navigating to a reminder app the user is shown what other options are available in the form of a reveal animation
Show consequence.
When a button triggers a change elsewhere, use animation to draw attention to that change.
When pressing a love button, a micro-animation elsewhere on the screen shows that this change has been added to a users profile.
2. Show place in space
Animate transitions to aid spatial understanding.
Motion should be used to explain to the user how to navigate the product by providing spatial cues on how to invoke or dismiss a specific state.
Show possible gestures with motion.
Motion can provide helpful hints to the user around how they can interact with a product.
An element grows to fill the screen, in an upward motion. The upward motion shows that the element can be hidden by swiping down.
Symmetric transitions.
Symmetry should be observed between active and inactive states of the same element. i.e. If a menu is introduced from the left side of a screen. it should return back to its origin via the left side of the screen when dismissed.
Menu appears from left to right and is dismissed from right to left
3. Focus attention
Show and hide interface elements as they are needed.
Make interactions feel simpler by hiding interface elements that are not relevant for the specific task. Motion should be used strategically to reduce the need for popups, modals and prompts.
Hide interface elements that are not relevant.
Focus attention on what's important to the user, when it's important. i.e. When a user is scrubbing through a video their primary task is not to adjust volume settings or activate subtitles. Therefore it makes sense to hide these elements until they become the focus.
Make menus intuitive.
Interpret when a user might want to see a navigation menu and hide the menu when not in use.
Lazy Load
Apply lazy loading techniques, such as blurring images until they have loaded. This helps users become acquainted with the content quicker.
Pro tip: This can be implemented fast by using progressive jpeg.
4. Suggest carefully
Tell the user what can be done now.
Suggest user actions based on informed understanding of the task and the audience need.
Onward journeys.
Motion can help prime users for an onward journey. With features such as autoplay, make it obvious to a user what is happening and always provide an option to cancel.
Suggest shortcut.
Use motion to offer convenient alternatives to users such as skipping a programme's intro.
Checklist
Questions to assess whether we are succeeding
Is it always clear what I can do?
Does the product feel like it helps me achieve what I want to do?
Does it feel like a conversation?
Does the product explain to me what is going on?