Go Back

Motion in UI

Spatial relationships

Motion can be used to communicate spatial relationships of different views within the UI, which strengthens the users mental image of the application. This helps the user learn and remember where things are within the UI faster and easier.


Elements in the UI can transform into completely different elements. Motion helps bridge the gap between these two states, communicating that the two elements are indeed the same, which reduces the users mental load.


Motion can be used to communicate how the UI will respond to the users input, even before the interaction is completed. In the example animation, motion shows how the list will rearrange itself when the user drags an item to a new position. Motion is also used to indicate when the item can be dragged, by lifting it ‘above’ the rest of the UI.

Brand, identity

Motion can be used to support the visual identity of the UI. Even a small difference can make an impact: in the example, a slight overshooting motion in the lower UI is used to express a more playful identity, contrasting to the top UI with a no-nonsense direct animation.

Perceived performance

Motion can make the UI (and the whole product) seem faster. The example compares a simple spinner to a more detailed skeleton-loading setup; which seems faster? Most people would say the skeleton, although in this example the spinner takes significantly less time as a whole.

Directing attention

Motion can direct the users attention to the relevant location. Here the options below the selected image are highlighted with motion, and when the image is closed, motion returns the eye to the location in the list where the interaction began. Done well, this reduces the amount of time the user spends looking for things in the UI and makes it more pleasant and intuitive to use.