Motion and time

Member lesson

Restraint in interface motion

Lesson 5 of 10 in Motion and time.

Lesson

Interface motion has exactly two jobs: telling a user where something came from or went, and telling them the system heard them. A panel sliding out of the button that opened it does the first. A button depressing under a finger does the second. Almost everything else is decoration, and decoration in an interface is paid for on every single use.

continuous · the eye keeps hold of itcut · the eyestarts againcarry the thing across, or cut cleanly. anything inbetween feels wrong
An element that moves between two screens against one that is replaced.
A smiling designer beside a few sand timers watches a sparkling button, next to a tired office worker pressing the same button beside a towering stack of sand timers.
A designer enjoys an animation a few times, while a user sits through it thousands of times. A short flourish adds up to real waiting across a working day.
Member

The rest of this is for members.

You have read the opening of this lesson. The rest of it comes with a membership.

One membership covers all four courses and Brands.

  • All lessons in the four Learn courses
  • All brand breakdowns in the Brands section
  • All quizzes, flashcards and crosswords
  • An AI teacher on every lesson, for up to 60 questions a day
  • All course material published during the membership

Price

Membership is from $12 a month on the Yearly plan, which is charged at $144 once a year. Lifetime access is $59, paid once.Membership is from ₹200 a month on the Yearly plan, which is charged at ₹2,400 + GST once a year. Lifetime access is ₹3,999 + GST, paid once.

Check what stuck

Members only

You can't take this check yet.

Members answer these 3 questions and keep the ticket for this lesson. Every lesson has one.

  1. Question 1, locked

    What should an interface do when a reader has asked for reduced motion?

    • Honour it, and make sure nothing becomes unusable without the animation
    • Ignore it if the animation is subtle
    • Reduce the duration by half
  2. Question 2, locked

    An interface transition lasting well over half a second tends to feel how?

    • Slow, and eventually irritating
    • Reassuring
    • More expensive
  3. Question 3, locked

    Which of these words means this? “A deliberate cap on how many things are allowed to move. Without one, every feature adds animation and none is removed.”

    • Cut
    • Motion budget
    • Spatial model
    • Shared element transition

Elsewhere in the library

Hear about new courses.

Leave an email and we will tell you when something new lands. We do not write often.