Motion → Creating motion

Motion brings dynamism to an interface, offers visual feedback and aids merchants understanding the outcomes of their actions.

Transitions

Transitions should be smooth and fluid, guiding merchants’ attention and maintaining context as they navigate the interface. They play a crucial role in ensuring continuity in the experience.

Do

Use transitions to guide merchants’ attention and provide continuity. Ensuring transitions preserve the state and context of the interface.

Don't

Use abrupt transitions that can disorient merchants.

Don't

Animate all elements on a page simultaneously. Overwhelming motion can disorient users and break continuity. Animating a single element is often enough to provide sufficient context and maintain a sense of continuity.

Animations

Animations should be simple and purposeful, used to enhance understanding or provide visual feedback.

Do

Use simple, meaningful, animations that are consistent with the overall style and tone of the interface.

Don't

Use complex or unnecessary animations that can confuse or distract merchants.

Timing

Timing is crucial in motion design. Motion is fast enough to not cause delay, but slow enough to be understood.

Do

Use appropriate timing for your animations and transitions. Matching the timing of the motion to merchant expectations.

Don't

Make motion too slow or too fast.

    On this page