Understanding motion

Motion helps make a UI expressive and easy to use.


Principles

Informative

Motion design informs users by highlighting relationships between elements, action availability, and action outcomes.

Focused

Motion focuses attention on what's important, without creating unnecessary distraction.

Expressive

Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style.


Hierarchy

Motion helps orient users by showing how elements in a transition are related.

Motion reflects the hierarchy between a parent element (the inbox) and a child element (the inbox message).
Motion unites the menu icon with the resulting action of an open menu.
Motion indicates the hierarchical relationship between “Dogs” and “Cats,” peer items in the navigation.

Brand expression

Motion is used to express a brand’s personality and style.

Transitions

Transitions can be customized to match the style of a brand...

Transitions can be customized to match the style of a brand.

Basil’s brand of stylized recipe content is communicated with customized transitions that include parallax and emphasized easing. Transition adjustments are discussed further in the customization section of the motion system.

Icons and illustrations

Subtle animation in icons, illustrations, and product logos can add polish and playfulness to the user experience. Motion can be used to emphasize key points...

Subtle animation in icons, illustrations, and product logos can add polish and playfulness to the user experience.

Animating icons can playfully reinforce or add to the icon’s meaning.
The icon animations in Owl, an educational app, are designed to reflect its colorful brand.
Crane’s animated logo adds polish and an extra moment of delight.
Character animation can make system errors more palatable.

Motion can be used to emphasize key points in a user journey.

An animation to reward the user for a task can make key moments in the user journey more memorable.

Feedback and status

Motion provides timely feedback and indicates the status of user or system actions.

Animated elements responding to keypad input provide feedback to show if the action was successful.
Animated list items are placeholders that convey content is loading.
Motion of a card makes selection, positioning, and release visible.

User education

Motion helps users understand how to perform actions.

The swipe-to-open action is animated to invite and encourage the necessary gesture.
The motion path of an item into a shopping cart teaches users the location of the selected item.

Up next