Motion
Paths
Elements in Carbon dance on the grid. Motion paths trace lines along the grid which never run diagonally.
When expanding or moving elements across the screen, stagger the timing of horizontal and vertical animations to create a path with a rounded corner.
Not staggering horizontal and vertical animations create a straight diagonal path. It breaks the grid and is harsh to the eye.
When removing an item from the grid, thumbnails on the edge existing and re-entering container create a smooth transition.
Thumbnails moving on diagonal paths feels sporadic and harsh.
When sorting or shuffling items on the grid, always using rounded corner paths to visually organize the movements.
Criss cross sorting appears disorganized. Avoid this motion path.
Composition
When multiple animated elements coexist or interact with each other within the same view, it is vital to make the many moving elements work together and form a coherent experience, to better provide way-finding and focus.
Consistency
Semantic consistency
When elements convey the same meaning or perform the same function, use the same motion for them, and vice-versa. This helps to reinforce the meaning behind a movement and improves the user’s proficiency using the interface.
In the example below, both expanding a row of a data table and opening a dropdown use a chevron and share a similar intent—to reveal content hidden in a seam. Therefore, they should use the same motion style (productive) and easing (entrance, standard). However, they should use slightly different durations due to their difference in size.
Comparing data table expansion and dropdown
Spatial consistency
Pay attention to the spatial relationships between elements and screens, and information hierarchy. Visually similar elements may need the different motions to clarify their respective spatial locations.
When the new content panel is on a higher layer, motion is “sliding”, moving content within with the panel. Also always dim the content below when new layer is introduced above.
When the new content panel is on the same layer, motion is “pushing”, revealing content within with a mask.
Intentional inconsistency
Conscientious use of inconsistency in motion highlights a difference in meaning or intent behind actions with similar visual appearance. Usually, forward motion in the direction of entrance signals affirmation, while reversing entrance motion signals cancellation.
Use motion to reinforce meaning. Affirmative action here triggers a different exit motion for the modal than negation.
Continuity
Motion can help establish a sense of continuity between screens and experiences. Pay attention to shared elements across screens, such as title panels or buttons, to create a graceful transition.
Shared elements can effectively guide users through a multi-layered information architecture.
Continuous elements are for guidance and should not distract. Always finish a sequence with the important content on page.
Sequence and stagger
When multiple elements need to animate, distribute their entrances over time instead of introducing everything at once. This will help the user understand the content and orientation.
For example, staggering the entrance of table content by 20 ms significantly reduces the cognitive load. Depending on the number of staggered elements, the delay should be adjusted to ensure that total time is still within 500 ms.
Table with rows loading in at staggered timing.
Sequence the loading of page content when possible. Start with the most stable content, such as static content and header, and end with the most important information, such as the primary button or a calculation result, to focus the user’s attention on them.
Sequencing of this interface prioritizes the primary button, and reserves data visualization for later when users begin to scroll, indicating intention to dive deeper.
Follow this recommended sequence of different types of content when choreographing content entrance. Not all categories will be present in every experience.
| Seq | Category | Examples |
|---|---|---|
| 1 | Static content | UI shell, top and side navigation |
| 2 | Static content (body) | Headers, written content, images |
| 3 | Dynamic content | Content of a data table, query results from database |
| 4 | Primary action | Primary action button |
| 5 | Animated content | Data visualizations |