Dieses Studio mag Bewegung. Auf unserer eigenen Startseite läuft eine Canvas-Animation. Nehmen Sie das also als Geständnis, nicht als Belehrung: Der Großteil der Animation, die wir in unseren ersten Jahren ausgeliefert haben, hat unsere Kunden Geld gekostet.
Nicht die dekorative Art. Die Art, die auf dem Weg liegt — eine Einblendung, bevor das Formular erscheint, ein 400-ms-Modal, ein scroll-getriggertes Fade zwischen dem Leser und dem Button, für den er gekommen ist.
Was wir heute messen
Vor und nach jeder Arbeit an Bewegung protokollieren wir die Zeit bis zur ersten Interaktion mit dem primären CTA — nicht die Ladezeit, sondern wie lange es vom Eintreffen dauert, bis Besucher tatsächlich handeln können. Daraus sind zwei Regeln entstanden, die wir seither nicht gebrochen haben.
- Zwischen Nutzer und Hauptaktion wird nichts animiert. Formulare, Buttons und Preise sind da. Sie treffen nicht ein.
- Feedback-Animation bleibt unter 200 ms, Übergänge unter 300 ms. Alles Langsamere bekommt eine schriftliche Begründung daneben.
Animation ist gratis, solange sie neben dem Nutzer läuft — und teuer in dem Moment, in dem sie vor ihm läuft.
Scroll-Einblendungen verdienen einen eigenen Absatz
Fade-in beim Scrollen ist der meistkopierte Effekt im Web und der am leichtesten falsch gemachte. Zwei Fehlermuster sehen wir ständig: Inhalte, die nie erscheinen, weil der Observer bei schnellem Scrollen nicht auslöst — und Einblendungen auf Text, den ein Besucher gerade aktiv zu lesen versucht.
Unsere Regel: Eine Einblendung darf einmal laufen, muss unter 800 ms abgeschlossen sein und darf niemals etwas verzögern, wofür der Besucher genau dorthin gescrollt ist.
Der Teil zur Barrierefreiheit ist nicht optional
Bewegung ist nicht für alle bloß eine ästhetische Vorliebe. Parallaxe und großflächige Bewegung können bei Menschen mit vestibulären Störungen Übelkeit und Schwindel auslösen. Jedes Betriebssystem bietet heute eine Einstellung „Bewegung reduzieren", und sie zu respektieren kostet eine Media Query.
Ignoriert Ihre Seite `prefers-reduced-motion`, schließt ein Teil der Besucher den Tab aus Gründen, die Ihre Analytics nie erklären werden.