Bewegung ist der einzige Teil eines Interfaces, der die Nutzerin Zeit kostet, ob sie ihn wollte oder nicht. Deshalb behandeln wir sie als Argument, das pro Animation gewonnen werden muss, und nicht als Finish, das am Schluss draufkommt.
Drei Fragen, die eine Animation wert sind#
- Woher kam das?
Ein Panel, das aus dem Button wächst, der es geöffnet hat, braucht keine Erklärung. Dasselbe Panel, das mitten auf dem Bildschirm erscheint, braucht einen Satz.
- Wie lange dauert das?
Fortschritt ist die beste Verwendung von Bewegung. Ein Balken mit bekanntem Ende schlägt jeden Spinner, denn ein Spinner sagt nur «ich lebe» und nie «gleich geschafft».
- Hat es mich gehört?
Rückmeldung auf den Druck unter 100 ms. Keine Dekoration, sondern der Unterschied zwischen einer App, die sich auf langsamer Verbindung kaputt anfühlt, und einer, die sich bloss langsam anfühlt.
Was keine dieser drei Fragen beantwortet, ist Dekoration, und Dekoration in einem Interface sind Kosten, die Sie jeder einzelnen Person bei jedem einzelnen Mal verrechnen, für etwas, das sie genau einmal bemerkt.
Dauern, die wir tatsächlich verwenden#
| Was | Dauer | Kurve |
|---|---|---|
| Rückmeldung auf Druck, Hover | 80–150 ms | ease-out |
| Etwas kommt herein | 200–320 ms | cubic-bezier(.2,.6,.2,1) |
| Etwas geht hinaus | 120–200 ms | ease-in |
| Layout setzt sich | 300–400 ms | federnd, ein Überschwinger |
Reduzierte Bewegung ist keine Sparversion#
prefers-reduced-motion ist eine echte Einstellung von echten Menschen, und manchen von ihnen wird von Parallax körperlich schlecht. Die richtige Antwort darauf ist keine langsamere Fassung derselben Animation. Es ist dieselbe Information, ohne Bewegung geliefert.
@media (prefers-reduced-motion:reduce){
/* die Karte hebt nicht mehr ab; der Rahmen sagt trotzdem, dass sie aktiv ist */
.bl-card:hover .bh-field{transform:none}
.bl-tetro{animation:none}
}Das ist zugleich ein guter Test, ob die Animation überhaupt Bedeutung getragen hat: Geht beim Abschalten Information verloren, hätte diese Information nie allein in der Animation stecken dürfen.