Skip to content
APDD
My library
ESEN
See my library

Specialty

UI motion design

Designs an interface's animations and transitions so that it is clear what is changing, where each element comes from and where it goes.

In Spanish
Motion design en interfaces
Origin
Chang and Ungar (1993)

What problem it addresses

If the screen changes abruptly, you have to work out what happened. Motion can explain it without words.

Principles

  • Continuity

    Objects move; they don't disappear and reappear.

  • Anticipation

    A small preceding gesture signals what is about to happen.

  • Smoothness

    Start and stop gradually, like real objects.

Applications in design

  • Use it like this

    Use motion to show where an element comes from and where it goes.

  • Avoid

    Long animations that make people wait.

  • Don’t fall for it

    Respect the system setting to reduce motion: it makes some people dizzy.

Connections

Builds on

Related to

Authors and works

  1. 1993

    Bay-Wei Chang and David Ungar

    Brought principles of cartoon animation to interfaces so that changes are understood.

Sources

Original sources

  • Chang, B.-W., & Ungar, D. (1993). Animation: From cartoons to the user interface. In Proceedings of the 6th Annual ACM Symposium on User Interface Software and Technology (UIST ’93) (pp. 45–55). ACM. View source: Chang, B.-W., & Ungar, D. (1993)

Last reviewed: