Motion

Motion is all about reenforcing understanding and behaviour on user triggered actions. We use it to describe functionality, relationships and intention.

We are all for animations and encourage the SEB developer community to experiment with animations. We have tried to put down a few notes here as input. Do contact us if you would like our opinion on an animation that you have created: designlibrary@seb.se

Short description

Motion enhances usability in four ways:

  1. Expectation. How a user perceives resulting action and behaviour of an object.
  2. Continuity. The cause and effect of a certain action within a user flow that enhances the total user experience in a consistent way.
  3. Narrative. The linear progression of events and moments that results into an expected goal.
  4. Relationship. Relationship refers to the spatial, temporal, and hierarchal representations between interface objects that guide user understanding and decision making.

When and how to use it

Use motion to help the user focus on the upcoming step, bring a task to their attention or indicate that an action is not available.

Make motion meaningful.

Behaviour

Motion should be quick, simple and intentional.

Do's and don'ts

  • Do use motion to help a user complete a task.
  • Do not animate everything, try instead to be subtle with microinteractions.

 

Interesting links

Time

  • Stick to more than 200 ms - so that the user can see that something happens
  • Some things get better with a delay
  • "Ease-in" and "ease-out" makes start and stop smoother