Motion → Using motion

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

Feedback

Motion can be used to provide feedback, helping merchants understand the results of their actions. It offers visual cues that indicate the result of an interaction, reinforcing merchants' confidence in their actions.

Do

Use motion to indicate the result of an action. So merchants understand their action has been acknowledged and processed.

Don't

Use motion that doesn't correspond to the action taken. Inconsistent feedback will lead to misunderstandings.

Don't

Use overly elaborate or lengthy animations for simple feedback.

Motion can guide merchant attention during navigation, helping to maintain context and continuity. It creates a visual guide that helps merchants understand their path through the interface.

Do

Use motion to subtly guide attention during navigation. So merchants understand where to focus and what action to take next.

Don't

Use motion that distracts from the navigation process. Excessive or irrelevant motion can confuse merchants and detract from the main content or action.

Don't

Use motion that could potentially mislead merchant's navigation path. The direction and behavior of the motion should align with the navigation flow.

Loading

Motion can be used to indicate loading states, keeping merchants informed and engaged during wait times. It provides a visual indicator that the system is processing a request, helping to manage expectations and reduce perceived wait times.

Do

Use loading animations that give a sense of progress or activity. A clear visual cue that the system is processing helps to manage merchant expectations, and helps to reduce perceived wait times.

An icon representing an hourglass.
Don't

Use static loading indicators, as they make the system seem unresponsive or slow.

Don't

Use overly complex or distracting loading animations. The animation should be subtle and not detract from the rest of the interface.

    On this page