Prinzipien des Motion Designs: Wie sich Interfaces 2026 wirklich bewegen sollten

Motion ist das am meisten missbrauchte Werkzeug im modernen Interface-Design. Jedes Team liefert eine Animations-Reel, fast keines liefert ein Motion-System. Das Ergebnis sind Produkte, die hüpfen, wackeln und sich per Parallax den Nutzern in den Weg stellen. Bewegung, die man hätte streichen sollen.

Dieses Paper ist die Version für arbeitende Designer. Sieben Prinzipien, die entscheiden, ob eine Bewegung ihren Platz verdient, eine Referenz für Dauer und Easing, die die Diskussion beendet, und eine kurze Liste von Mustern, die echten Nutzertests standhalten. Keine Dribbble-Loops, keine Markenfilme, nur Produkt-Motion, die die Zeit der Nutzer respektiert.

Was Motion Design eigentlich ist

Motion Design ist die Verhaltensebene eines Produkts. Es beschreibt, wie Elemente erscheinen, verschwinden, reagieren und sich über die Zeit zueinander verhalten. Gut gemacht sagt Motion den Nutzern, wo sie sind, woher sie kommen und wohin sie gehen können, ohne ein einziges zusätzliches Wort Text.

Schlecht gemacht sagt Motion den Nutzern, dass der Designer Zugang zu Framer hatte. Dekorative Animation, endlose Springs und Hero-Videos, die mit Ton automatisch starten, sind derselbe Fehler in unterschiedlichen Kostümen. Motion kostet Aufmerksamkeit, Bandbreite und Barrierefreiheit. Sie muss die Rechnung verdienen.

Der Beitrag zum Visual-Hierarchy-Design zeigt, wie das Auge eine statische Seite liest. Motion ist die nächste Ebene. Sie sagt dem Auge nicht nur, wohin es schauen soll, sondern auch wann.

Motion hat zwei Aufgaben und nur zwei

Jede Animation in einem ausgelieferten Produkt erfüllt eine von zwei Aufgaben. Tut sie keine von beiden, ist sie Dekoration, und Dekoration ist das Erste, was im Performance-Review fliegt.

Aufgabe eins: Zustandswechsel kommunizieren. Ein Button, der ruhte, ist jetzt gedrückt. Ein Modal, das nicht existierte, ist jetzt offen. Eine leere Zeile enthält jetzt Daten. Motion macht den Wechsel lesbar, indem sie den Übergang zeigt, statt in den neuen Zustand zu springen.

Aufgabe zwei: das Auge führen. Ein neues Element gleitet von rechts herein, weil der Nutzer auf einen Vorwärts-Button getippt hat. Eine Karte schrumpft zur unteren Navigation, weil sie gespeichert wurde. Motion bringt den Nutzern das räumliche Modell des Produkts bei, ohne dass sie Dokumentation lesen müssen.

Motion, die weder einen Zustand kommuniziert noch das Auge führt, kostet den Nutzer Aufmerksamkeit für nichts. Streich sie.

---

Die sieben Prinzipien der Produkt-Motion

Das sind die Stellschrauben. Kombiniert eingesetzt wirkt die Bewegung gewollt. Ohne sie fühlt sich das Produkt steif an. Mit zu vielen fühlt es sich wie Spielzeug an.

Prinzip 1: Zweck vor Politur

Jede Animation beantwortet eine Frage: Was würde ein Nutzer verlieren, wenn es diese Bewegung nicht gäbe? Lautet die Antwort „nichts“, ist die Bewegung Dekoration. Lautet sie „er würde nicht verstehen, was passiert ist“, ist die Bewegung strukturell und bleibt.

Designer, die mit „lass uns hier mal ein bisschen animieren“ anfangen, liefern Produkte, die laut wirken. Designer, die mit „was fehlt dem Nutzer, wenn das sofort umspringt“ anfangen, liefern Produkte, die lebendig wirken.

Prinzip 2: Die Dauer entspricht der Wirkung

Kurze Animationen für kleine Ereignisse. Längere für größere.

Ein Button-Druck ist in unter 100 Millisekunden erledigt. Ein Seitenübergang darf bis zu 400 dauern. Ein Modal, das den gesamten Viewport übernimmt, kann sich 500 leisten. Alles darüber fühlt sich bei der zehnten Interaktion langsam an, auch wenn es beim ersten Mal cineastisch wirkt.

Die Dauer-Tabelle:

Alles über 500 ms in einem Produkt (im Gegensatz zu einer Marketingseite) ist eine Steuer für jeden wiederkehrenden Nutzer. Die erste Ansicht ist cineastisch. Die hundertste ist Folter.

Prinzip 3: Easing trägt die Emotion

Lineare Bewegung ist roboterhaft. Die physische Welt bewegt sich nicht linear, und Interfaces, die es tun, wirken mechanisch. Easing-Kurven machen Bewegung menschlich.

Drei Easings decken 90 % der Produktarbeit ab.

• Ease-out für Elemente, die auf den Screen kommen. Schnell am Anfang, langsam am Ende. So erwartet der Nutzer, dass sich ein Objekt an seinen Platz setzt.
• Ease-in für Elemente, die den Screen verlassen. Langsam am Anfang, schnell am Ende. Der Nutzer sieht, wie das Element den Abgang quittiert, bevor es verschwindet.
• Ease-in-out für Elemente, die von einem Ort zum anderen wandern. Weich an beiden Enden. Das entspricht physikalischer Trägheit.

Spring-Kurven sind die vierte Option und sollten sparsam eingesetzt werden. Springs wirken verspielt und passen zu Consumer-Apps mit freundlicher Stimme. Für Finanzsoftware, Gesundheitswesen oder jedes Produkt, bei dem Überschwingen als Instabilität gelesen wird, fühlen sie sich falsch an.

Prinzip 4: Motion respektiert Bewegungseinstellungen

Jedes Produkt liefert einen prefers-reduced-motion-Pfad mit. Nutzer mit vestibulären Störungen, Migräne oder Aufmerksamkeitsempfindlichkeit werden durch Bewegung geschädigt, die anderen gefällt. Die Einstellung zu ignorieren ist keine Stilentscheidung, sondern ein Barrierefreiheitsfehler.

Die Regel lautet nicht, Motion bei aktivierter Einstellung komplett zu entfernen. Sie lautet, distanzbasierte Bewegung durch opazitätsbasierte zu ersetzen.

Eine Karte, die 40 Pixel hereingleitet, wird zu einer Karte, die einblendet. Der Zustandswechsel wird weiterhin kommuniziert, der vestibuläre Auslöser ist weg. Die Web-Accessibility-Checkliste zeigt, wo das im vollständigen Accessibility-Audit steht.

Prinzip 5: Konsistenz im ganzen Produkt

Motion muss sich anfühlen, als hätte ein Produkt einen Satz an Entscheidungen getroffen. Zwei Screens mit zwei verschiedenen Easings und Dauern wirken wie zwei zusammengenähte Produkte. Nutzer merken das, auch wenn sie nicht benennen können, was sich falsch anfühlt.

Die Lösung ist ein Motion-System. Drei bis fünf Dauern. Drei bis fünf Easings.

Benannte Tokens wie motion.short, motion.medium, motion.long, ease.enter, ease.exit, ease.standard. Der Design-Systems-Guide zeigt, wo diese neben Farb- und Typo-Tokens leben.

Motion-Tokens sind 2026 nicht optional. Sie sind der einzige Weg, Motion beim Wachsen des Teams vor dem Auseinanderdriften zu bewahren. Ein Dreierteam, das Animationen freihändig ausliefert, erzeugt ein System aus drei Meinungen. Die nächste Einstellung bringt eine vierte. Beim zwanzigsten Screen hat das Produkt keine kohärente Verhaltensebene mehr.

Prinzip 6: Motion folgt dem räumlichen Modell

Jedes Produkt hat eine implizite Karte. Neue Screens liegen rechts. Detailansichten zoomen aus einer Karte heraus. Overlays senken sich von oben. Navigationsschubladen kommen von dem Bildschirmrand, an dem sie wohnen.

Motion verstärkt die Karte. Ein Detail-Screen, der aus der angetippten Karte heranzoomt, vermittelt räumliche Kontinuität. Derselbe Detail-Screen, der von oben hereinfällt, verwirrt den Nutzer, weil er die implizite Karte bricht.

Wenn Designer das falsch machen, liegt es fast immer daran, dass sie die Animation isoliert gewählt haben statt im Kontext des Flows. Der Test: Kannst du jeden Übergang auf eine konsistente räumliche Metapher zurückführen? Wenn nicht, dekoriert die Motion, statt zu lehren.

Prinzip 7: Motion hat ein Budget

Jede Animation kostet CPU, Akku und Aufmerksamkeit. Budgetiere alle drei.

Das CPU- und Akku-Budget bedeutet, nur transform und opacity zu animieren und Layout auslösende Eigenschaften wie width, height, top, left zu vermeiden. Moderne Browser verarbeiten transform und opacity auf der GPU, das ist billig. Das Animieren von Layout-Eigenschaften erzwingt Neuberechnungen, die auf Android-Phones der Mittelklasse die Performance versenken.

Das Aufmerksamkeitsbudget bedeutet, gleichzeitige Animationen zu begrenzen. Meist bewegt sich nur eine Sache auf einmal. Zwei Bewegungen sind schon viel, drei sind eine Ablenkung.

Eine Seite, auf der jedes Element beim Scrollen animiert, ist keine gestaltete Seite, sondern eine Falltür für die Konzentration. Das Core-Web-Vitals-Glossar nennt die Performance-Werte, die scroll-getriggerte Animation meist ruiniert.

---

Muster, die ihren Platz verdienen

Von den Dutzenden Motion-Mustern, die auf Dribbble kursieren, verbessert eine kurze Liste tatsächlich Produktarbeit. Der Rest ist Kostüm.

Micro-Interactions bei Eingaben

Der Button, der sich beim Drücken um 2 Pixel staucht, der Toggle, der zwischen den Zuständen federt, das Eingabefeld, das bei fehlgeschlagener Validierung sanft wackelt. Das sind die billigsten und wirkungsvollsten Bewegungen in jedem Produkt. Sie beantworten die Frage des Nutzers (hat das System mich gehört) in unter 150 Millisekunden ohne jeden Text.

Jedes primäre Steuerelement sollte eine Micro-Interaction haben. Buttons, Toggles, Inputs, Checkboxen, Radios, Slider. Reagiert ein Steuerelement nicht sichtbar auf die Berührung, fühlt sich das Produkt langsam an, selbst wenn das Backend schnell ist. Das Focus-State-Glossar behandelt die Accessibility-Regeln, die diese Interaktionen bestimmen.

Gestaffelte Reveals für Listen

Eine Liste von Karten, die mit 50 ms Versatz zwischen den Einträgen einblendet, wirkt gewollt. Dieselbe Liste, die auf einmal erscheint, wirkt abrupt. Das Staffeln ist fast immer die paar Hundert Millisekunden beim ersten Rendern wert.

Die Obergrenze liegt bei vier Einträgen. Danach läuft die Staffelung unterhalb des sichtbaren Bereichs weiter und der Scroll des Nutzers löst den Rest aus. Zwanzig Einträge nacheinander zu staffeln fühlt sich langsam an, und die meisten sieht der Nutzer ohnehin nicht.

Shared-Element-Transitions

Eine Karte, die der Nutzer antippt, wird zum Header der Detailansicht. Ein Thumbnail, das zum Vollbild wächst. Diese Übergänge vermitteln das räumliche Modell laut und günstig, und sie sind das beeindruckendste Motion-Muster in moderner Produktarbeit. Sie kosten aber Engineering-Aufwand, weshalb die meisten Teams sie streichen. Wenn der Moment zählt (Onboarding, zentraler Conversion-Flow, Signature-Feature), zahle den Preis.

Fortschrittsanzeigen, die Zeit respektieren

Fortschrittsbalken, die sich bei langen Vorgängen in Echtzeit bewegen. Skeleton Screens bei Daten, die länger als 300 ms zum Laden brauchen. Spinner nur für Vorgänge unter 1 Sekunde, bei denen ein Skeleton nur aufblitzen würde. Fortschritts-Motion ist Vertrauens-Motion. Sie sagt dem Nutzer, dass das System arbeitet, und nur das interessiert ihn beim Warten.

Sinnvolle Ladezustände

Ein Ladezustand ist nicht die Abwesenheit von Design, sondern ein eigenes Design. Das Progressive-Disclosure-Glossar zeigt, wie Ladezustände Inhalte in Stufen enthüllen können, statt auf das langsamste Teil zu warten.

---

Motion-Fehler, auf die du achten solltest

Jedes Motion-Review findet dieselben Fehler. Wenn das Produkt mit einem davon ausgeliefert wird, untergräbt das Motion-System den Rest des Designs.

Autoplay-Video im Hero. Kapert Aufmerksamkeit, ruiniert die Performance und verletzt Reduced-Motion-Einstellungen. Ersetze es durch ein Standbild oder ein vom Nutzer ausgelöstes Abspielen.

Parallax, nach der niemand gefragt hat. Parallax ist das Motion-Äquivalent einer Markenfarbe auf Fließtext. Im Screenshot wirkt es hochwertig, auf einem echten Gerät liest es sich wie Reiseübelkeit.

Bounces bei jedem Zustandswechsel. Spring-Motion ist ein Gewürz, keine Zutat. Ein Produkt, in dem jeder Button hüpft, jede Karte federt und jedes Modal überschwingt, kann nicht priorisieren. Spare Springs für Momente auf, die der Nutzer spüren soll.

Übergänge, die den Server schlagen. Ein Screen-Übergang von 500 ms, obwohl die Daten nach 200 ms da sind, lässt das Produkt langsamer wirken, als es ist. Motion sollte den tatsächlichen Vorgang einholen oder ihm folgen, nie ihn strecken.

Endlos laufende Hintergrundanimation. Ein Hintergrund, der sich ewig bewegt, lenkt ewig ab. Jedes Mal, wenn der Nutzer zurückblickt, verliert er den Fokus. Loope nur, wenn die Bewegung der Punkt ist (ein Status, eine Visualisierung, eine Herzschlaganzeige).

---

Motion im System

Motion gehört neben Farbe und Typografie ins Design-System. Sie als späte Politur-Schicht zu behandeln ist der Grund, warum die meisten Produkte inkonsistente Motion ausliefern. Das Team, dem das System gehört, besitzt auch die Motion-Tokens.

Das minimale Motion-Token-Set:

Benenne sie, dokumentiere sie, liefere sie als Variablen in der Design-Token-Ebene aus. Jede neue Animation im Produkt nutzt einen dieser Tokens, oder es gibt einen schriftlichen Grund, warum nicht. Diese Disziplin hält Motion in einem Team aus fünf Designern und zwanzig Engineers kohärent.

So reviewst du ein Motion Design

Jage jede Animation vor dem Ausliefern durch vier Fragen.

Kommuniziert sie einen Zustandswechsel oder führt sie das Auge? Wenn keins von beidem, streich sie.

Passt sie in die Dauer-Tabelle? Wenn sie zu lang läuft, kürze sie, bis sie sich aggressiv anfühlt, und geh dann einen Schritt zurück.

Nutzt sie einen Token? Wenn sie handgestrickt ist, driftet sie vom System weg. Refaktoriere sie in einen Token oder lehne sie ab.

Besteht sie prefers-reduced-motion? Schalte die Einstellung um. Löst die Bewegung noch immer eine vestibuläre Reaktion aus, baue sie nur mit Opazität neu.

Vier Fragen. Fünf Minuten pro Animation. Die meisten Produkte werden ausgeliefert, ohne eine davon zu stellen, weshalb die meisten Produkte wirken, als wären sie dekoriert statt gestaltet worden.

Wenn du ein Team willst, das dieses Review zur Auslieferung durchführt, statt sich im Audit nach dem Launch für Motion-Drift zu entschuldigen, hire Brainy. Wir bauen Brand, Web und Produkt-UI mit Motion im System, vom ersten Screen an.

Motion unter den Bedingungen von 2026

Drei Verschiebungen zählen. Motion muss sie alle überstehen.

KI-getriebene Interfaces bewegen sich mehr als klassische UIs. Streaming-Antworten, Live-Reasoning-Traces und dynamische Tool-Aufrufe erzeugen ständige, subtile Bewegung. Die Regel: Mach die KI-Motion vorhersehbar und die Produkt-Motion ruhig. Wenn alles gleichzeitig animiert, wirkt nichts wichtig.

Scroll-getriebene Animationen sind jetzt ein Browser-Feature. Mit CSS scroll-timeline können Designer abhängig von der Scroll-Position animieren, ohne JavaScript. Das ist ein neuer Hebel, und die meisten Teams missbrauchen ihn, indem sie zu viele Elemente beim Scrollen animieren. Die Regel: eine scroll-getriebene Animation pro Seite, meist der Hero, manchmal der CTA.

Accessibility-Vorschriften werden strenger. Der European Accessibility Act und ähnliche Gesetze machen Reduced Motion zur durchsetzbaren Pflicht statt zum Nice-to-have. Ein Produkt ohne Reduced-Motion-Pfad auszuliefern ist ein Compliance-Risiko, keine Design-Meinung. Das WCAG-Glossar behandelt die geltenden Grundlagen.

---

FAQ

Was sind die wichtigsten Prinzipien des Motion Designs?

Zweck vor Politur, Dauer passend zur Wirkung, Easing, das Emotion trägt, Respekt für Bewegungseinstellungen, Konsistenz im ganzen Produkt, Bewusstsein für das räumliche Modell und ein striktes Performance- und Aufmerksamkeitsbudget. Sieben Prinzipien in Kombination, nicht eines allein, erzeugen Motion, die ihren Platz verdient.

Wie lang sollte eine UI-Animation sein?

Zwischen 100 und 500 Millisekunden für fast jede Produktinteraktion. Feedback-Animationen (Hover, Druck) laufen 100 bis 150 ms. Kleine Zustandswechsel laufen 150 bis 300 ms. Seiten- und Modal-Übergänge laufen 300 bis 500 ms. Alles Längere wird zur Steuer für wiederkehrende Nutzer, auch wenn es bei der ersten Ansicht cineastisch wirkt.

Was ist der Unterschied zwischen Motion Design und Animation?

Motion Design ist die Verhaltensebene eines Produkts, Animation ist die visuelle Technik, mit der sie erzeugt wird. Motion Design fragt, welchen Zustandswechsel die Animation kommuniziert und warum sie nötig ist. Animation fragt, wie die Bewegung aussieht. Motion Design ist Strategie, Animation ist Handwerk. Gute Produktarbeit braucht beides.

Sollte jede Interaktion eine Animation haben?

Nein. Jedes primäre Steuerelement (Button, Toggle, Input) profitiert von einer Micro-Interaction, weil der Nutzer bei Berührung Feedback erwartet. Sekundäre Elemente nicht. Der Test: Streich die Animation und prüfe, ob der Nutzer Information verliert. Wenn nicht, lass sie gestrichen.

Was ist prefers-reduced-motion und wie gehst du damit um?

Es ist eine Betriebssystemeinstellung, die signalisiert, dass ein Nutzer weniger Bewegung möchte, meist aus vestibulären oder Aufmerksamkeitsgründen. Der richtige Umgang besteht nicht darin, Motion komplett zu entfernen, sondern distanzbasierte Animation gegen opazitätsbasierte zu tauschen. Der Zustandswechsel wird weiterhin kommuniziert, der vestibuläre Auslöser entfällt.

Wie baust du ein Motion-System auf?

Beginne mit drei Dauern und drei Easings als benannte Tokens. Dokumentiere, wo welcher verwendet wird. Erzwinge die Tokens im Code-Review. Füge weitere Tokens nur hinzu, wenn das bestehende Set eine wirklich falsche Bewegung erzeugt, nie um die Einzelvorliebe eines Designers zu bedienen. Drei bis fünf Tokens pro Achse sind meist alles, was ein Produkt braucht.

Motion ist ein Handwerk, kein Feature

Produkte mit großartiger Motion fühlen sich lebendig an. Produkte ohne sie fühlen sich steif an. Produkte mit zu viel Motion fühlen sich wie eine Demo-Reel an. Der Abstand zwischen diesen dreien ist klein, und der einzige Weg zur ersten Variante ist ein System mit harten Regeln und ehrlichen Reviews.

Setze die sieben Prinzipien in Kombination ein. Bleib innerhalb der Dauer-Tabelle. Wähle die Easings mit Absicht. Liefere eine Motion-Token-Ebene neben den Farb- und Typo-Tokens aus.

Prüfe jede Animation vor dem Ausliefern anhand von vier Fragen. Das Produkt, das dabei entsteht, wirkt nicht, als hätte es sich bemüht. Es wirkt, als hätte es nachgedacht.

Wenn du ein Team willst, das diese Disziplin über Brand, Web und Produkt-UI hinweg als ein Projekt durchzieht, hire Brainy. Motion als erstklassige Systementscheidung, jedes Mal.

Weiterführende Lektüre

• Visual Hierarchy Design
• Design Systems Guide
• Web Accessibility Checklist
• Design Handoff Figma to Dev