Skip to main contentIBM Design Language

Motion UI

Motion is a powerful tool in designing and building communication and user experience. It can bring your work to life, guide users through complex experiences, and help move forward—from here to there, now to next, start to finish—and make progress.

Motion design strategy

Follow these steps to assess your interface for purposeful motion.

  1. Define the goals and values of 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. Examples:
  • Give feedback, such as hover states, active states component behaviors, such as opening a drop-down menu.
  • Solutions to a UX need, such as reducing cognitive load with progressive disclosure.
  • Provide guidance, such as revealing a call-to-action Primary action button to draw users’ attention.
  1. Assign or determine either efficient or enthusiastic motion.
  2. Prototype and test.

Motion generator

IBM Motion implements sophisticated curves and duration. Use the IBM Motion Generator to design accurate and successful motion.

Motion evaluation checklist

Adaptive interface motion design

Not all devices are powerful enough to smoothly perform all the motion you have designed into the interface, no matter how essential the motion design is.

Provide alternative signifiers for devices with less computing power and users with disabilities.

Consider motion-simplified designs for mobile and tablet.

Make sure there is always a way to communicate the meaning behind a motion statically.