motion

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Motion paths follow grid lines, never diagonal

Elements in Carbon animate along the 2x 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 paths with rounded corners, rather than straight diagonal paths which break the grid and appear harsh.

Sorting and shuffling use rounded corner paths

When sorting or shuffling items on the grid, always use rounded corner paths to visually organize the movements. Criss-cross diagonal sorting appears disorganized and should be avoided.

Grid removal transitions use smooth edge movements

When removing an item from the grid, thumbnails on the edge existing and re-entering the container create a smooth transition. Thumbnails moving on diagonal paths feel sporadic and harsh and should be avoided.

Semantic consistency in motion for same-meaning elements

When elements convey the same meaning or perform the same function, use the same motion for them. This reinforces the meaning behind a movement and improves user proficiency. For example, expanding a data table row and opening a dropdown both reveal hidden content with a chevron, so they should use the same motion style (productive) and easing (entrance, standard), though durations may differ based on size.

Spatial consistency distinguishes element layers

Pay attention to spatial relationships between elements and screens. When new content appears on a higher layer, use sliding motion and dim the content below. When new content appears on the same layer, use pushing motion that reveals content with a mask. This clarifies spatial locations despite visually similar elements.

Intentional inconsistency reinforces action meaning

Use inconsistency in motion intentionally to highlight differences in meaning or intent. Forward motion in the direction of entrance signals affirmation, while reversing entrance motion signals cancellation. For example, affirmative and negative actions should trigger different exit motions for a modal.

Shared elements create continuity across screens

Motion establishes continuity between screens and experiences. Pay attention to shared elements across screens, such as title panels or buttons, to create graceful transitions and guide users through multi-layered information architecture.

Continuous elements should not distract from important content

Continuous animated elements serve for guidance and wayfinding. Always finish a sequence with the important content on page to prevent animation from distracting the user.

Stagger multiple element animations over time

When multiple elements need to animate, distribute their entrances over time instead of introducing everything at once. This helps users understand content and orientation, reducing cognitive load. For example, staggering table row entrances by 20 ms significantly reduces cognitive load, keeping the total animation time within 500 ms.

Content entrance sequence order

Sequence the loading of page content in this recommended order: (1) Static content (UI shell, top and side navigation), (2) Static content body (headers, written content, images), (3) Dynamic content (data table content, query results), (4) Primary action (primary action button), (5) Animated content (data visualizations). Start with stable content and end with most important information to focus user attention.

IBM Motion Generator tool

Use the IBM Motion Generator at https://ibm.github.io/motion/ to design accurate and effective motion using sophisticated curves and durations.

Motion design strategy steps

Follow six steps to assess your interface for purposeful motion: 1) Define the goals and values of the product. 2) Establish information hierarchy within the view. 3) Identify the journey you will guide users through. 4) Identify key moments and opportunities for UI motion in the journey, including giving feedback (hover states, active state component behaviors like opening dropdowns), solutions to UX needs (reducing cognitive load with progressive disclosure), and providing guidance (revealing call to action). 5) Assign or determine either productive or expressive motion. 6) Prototype and test.

Motion must be purposeful

Motion should solve a specific problem and enhance the user's understanding of an action. Ask: What problem is motion solving? Does it enhance the user's understanding of an action?

Motion must be responsive

User actions must receive immediate feedback that is seen and felt. Micro-interactions should use ease-out on user input and fall within a static duration ranging from 90–120 ms. For large or full screen transitions, use continuous elements in the transition to guide the user.

Motion must be meticulous

Use appropriate easing curves and consider each motion individually. Related movements should have a unified relationship with each other. Motion must be effective across all screen sizes; on mobile screens, subtle motions may be easily missed.

Motion should be unobtrusive

The best interface motion may go unnoticed because it keeps users engaged with their tasks. If your motion is frequently noticed by average users, consider removing or minimizing it.

Adaptive interface motion for accessibility

A large population of users have impaired vision or impaired ability to perceive and handle motion in UI. Always provide alternatives for interface state transitions. Consider simplified or reduced motion designs for mobile and tablet. Make sure there is always a way to communicate similar messages statically.

Give your agent this brain