Dieser Artikel wurde am 6. November 2026 verfasst.
KI-Werkzeuge verändern sich rasant. Das Maß an Bewegung, das eine digitale Oberfläche verträgt, bleibt hingegen gleich. Ein Hover (hover), ein kurzer Übergang (transition) und eine dezente Rückmeldung auf ein Tippen reichen völlig aus, um eine praxistaugliche Oberfläche zu schaffen. Glasoptiken, Parallax-Effekte, gestaffelte Einblendungen, Karussell-Elemente und Scroll-Snapping lassen sich erkennen und gezielt ablehnen. Betrachten Sie dies als Richtlinie für sinnvolle Begrenzung, nicht als Anleitung für Animationseffekte.
KI-Modelle fügen häufig Bewegungseffekte ein, weil Bewegung nach Arbeitsaufwand aussieht. Eine ruhende Seite wirkt in einer Präsentation am Monitor manchmal unfertig – im Alltag einer Praxis oder eines Geschäfts dagegen genau richtig. Die Zielgruppe dieser Serie befindet sich in realen Nutzungssituationen: ein Smartphone in der Hand, helles Sonnenlicht auf der Straße, eine Sprache, die möglicherweise nicht die Erstsprache des KI-Modells ist, und keine Zeit für eine Oberfläche, die sich bewegt, während man versucht, einen Preis abzulesen. Bewegung ist dann gerechtfertigt, wenn sie eine Zustandsänderung erklärt; sie ist unbegründet, wenn sie lediglich zeigt, dass jemand den Namen eines Effekts kannte.
Drei Effekte, die ihren Platz verdienen
Ein Hover (hover) bezeichnet die optische Änderung, wenn ein Mauszeiger über einem Steuerelement verweilt: eine leichte Farbnuance oder das Unterstreichen eines Links. Er signalisiert Personen mit einer Maus, dass das Element bedienbar ist. Bei der Fingereingabe auf dem Touchscreen existiert dieser Zustand nicht. Alles, was ausschließlich beim Hover sichtbar wird, bleibt auf dem Smartphone verborgen. Vorhabe lautet: Derselbe optische Hinweis muss beim Tastaturfokus (focus) erscheinen oder entfallen.
Ein Übergang (transition) beschreibt die kurze Zeitspanne, die eine Änderung benötigt – meist etwa eine Fünftelsekunde. Eine Seitenleiste (drawer), die ohne Übergang hart im Bild steht, wirkt fehlerhaft; eine Seitenleiste, die eine volle Sekunde zum Gleiten braucht, wirkt träge. Verlangen Sie im Prompt einen kurzen Übergang beim Öffnen und Schließen. Verlangen Sie keinesfalls Animationen für jeden einzelnen Buchstaben eines Satzes – Lesen ist kein Schauspiel.
Eine Mikrointeraktion (microinteraction) ist die kleine, unmittelbare Antwort auf eine konkrete Handlung. Die Speichern-Schaltfläche bestätigt kurz den Vollzug; eine gewählte Option passt ihr Erscheinungsbild an. Das folgt demselben Prinzip digitaler Ehrlichkeit wie ein Toast (toast), nur in kleinerem Rahmen. Es ist weder ein Maskottchen noch ein Konfettiregen oder ein Soundeffekt. Lässt sich die Rückmeldung nicht in einem kurzen Halbsatz beschreiben, ist sie bereits zu aufwendig gestaltet.
Bezeichnungen, die man nur ablehnen können muss
Diese Fachbegriffe beschreiben reale Gestaltungstrends. Sie sind jedoch keineswegs erforderlich, damit eine erste funktionierende Seite entsteht. Bietet ein KI-Modell diese von sich aus an, können Sie sie gezielt namentlich ablehnen:
- Glassmorphismus (glassmorphism) — ein frostig-transparenter Panel-Hintergrund. Er verschlechtert den Kontrast des darauf liegenden Textes. Sind Worte schwer lesbar, entfernen Sie den Glaseffekt.
- Parallax (parallax) — Hintergründe, die sich mit anderer Geschwindigkeit als der Text bewegen. Dieser Effekt kann bei manchen Personen Schwindel auslösen. Zudem widerspricht er der Systemeinstellung für reduzierte Bewegung (reduced motion).
- Bento — ein Raster aus unterschiedlich großen Kacheln, angelehnt an japanische Lunchboxen. Später für ein Dashboard nützlich; auf einer ersten Seite erschwert es die Zuordnung von Wichtigkeiten, weil die Kachelgröße die Argumentation erzwingt.
- Stagger — Elemente, die nacheinander zeitverzögert eingeblendet werden. Nutzer müssen auf das Erscheinen einer Liste warten, die sie sofort hätten lesen können.
- Karussell (carousel) — ein seitlich gleitender Bild- oder Kartendurchlauf. Die meisten Nutzer wischen nie über das erste Bild hinaus. Platzieren Sie wichtige Fakten stattdessen direkt im Fließtext der Seite.
- Scroll Snap — das erzwungene Einrasten der Seite auf Vollbildabschnitte. Auf dem Smartphone blockiert es Nutzer zwischen Abschnitten, die sie eigentlich nur rasch überfliegen wollten.
Sie müssen für diese Effekte keine langen Lernzeiten aufwenden. Es reicht, sie bei ungefragtem Erscheinen abzulehnen: “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” Dieser eine englische Satz ist ein vollständiges Anforderungsprofil.
Ein Preis im Freien
Ein Nutzer steht im Sonnenlicht vor einem Geschäft, hält das Smartphone in der Hand und versucht, vor dem Betreten den Preis für ein Angebot abzulesen. Die gestaltete Seite blendet den Preis erst nach einer Verzögerung ein, legt ihn über ein Foto der Straße und bewegt den Hintergrund langsamer als den Text. In der Präsentation auf dem Monitor sah das aufwendig aus. Im Sonnenlicht wirkt es wie eine Seite, die nicht stillhält, um verlässlich gelesen zu werden. Der Nutzer geht hinein und fragt persönlich. Die Seite hat ihre einzige Aufgabe verfehlt.
Das zeigt sich besonders deutlich in Umfeldern, in denen das Smartphone der einzige Computer ist und die Straße das Büro bildet. Ein Bewegungseffekt, der einen abgedunkelten Raum und einen großen Monitor erfordert, ist keine neutrale Standardeinstellung; es ist eine aus Studios kopierte Voreinstellung. Den Effekt beim Namen zu nennen ist der Weg, diese Kopie abzulehnen. Sie müssen den Stil nicht kritisieren. Sie müssen im Prompt lediglich das englische Substantiv nennen, das Sie nicht wünschen, damit es nicht unter der Vorgabe „mach es schön“ wieder auftaucht.
Das Briefing, das dies verhindert, ist kurz und nutzt die Bezeichnungen gezielt, damit das KI-Modell den Wunsch nach „Ruhiger Gestaltung“ nicht in eine andere Dekoration umdeutet: Kein Karussell für den Preis. Kein Glassmorphismus hinter den Zahlen. Kein Parallax. Kein Stagger bei der Angebotsliste. Ein kurzer Übergang beim Öffnen einer Seitenleiste (drawer), und gar kein Übergang, wenn am Smartphone reduzierte Bewegung (reduced motion) eingestellt ist. Dunkler Text auf einer hellen, flachen Fläche. Der Preis ist die erste Information im Abschnitt, nicht die zweite Folie eines Karussells. Diesen Absatz können Sie einmal formulieren und bei jedem Projekt im Jahr wiederverwenden: Er bleibt länger gültig als der Trend, der das KI-Modell verführt hat.
Die Systemeinstellung, die den Effekt übertrifft
Betriebssysteme bieten die Option, reduzierte Bewegung (reduced motion) anzufordern. Eine Seite, die diese Vorgabe ignoriert, wirkt nicht dynamisch, sondern missachtet ein klares Nutzerbedürfnis. Formulieren Sie dies im Prompt: Bevorzugt der Nutzer reduzierte Bewegung (reduced motion), zeigen Sie den Endzustand sofort an – ohne Gleiten und ohne gestaffelte Einblendung. Die Information bleibt erhalten; der Bewegungseffekt entfällt.
Guter Kontrast übersteht jeden Gestaltungstrend. Text auf Fotos, Text auf Glas oder Text in hellem Grau, der im Gestaltungsentwurf elegant aussah, versagt im Sonnenlicht, auf günstigen Displays und bei ermüdeten Augen. Verlangen Sie dunklen Text auf einer hellen, flachen Fläche, sofern kein zwingender Ausnahmegrund vorliegt. Die genaue Bezeichnung der Oberfläche ist nebensächlich; gut lesbare Worte sind es nicht.
Der Weg durch diese Serie bestand nie im Auswendiglernen von vierzig Fachbegriffen. Es ging um vier wesentliche Entscheidungen: Benennen Sie das Bausteinelement auf Englisch, damit das KI-Modell nicht rät. Nutzen Sie die Sprache der Zielgruppe für Beschriftungen und Inhalte. Entscheiden Sie bewusst, ob eine Interaktion anhalten, teilen oder nur informieren soll. Und halten Sie die Oberfläche ruhig genug zum problemlosen Lesen. Wer diese vier Punkte beherrscht, steuert die Erstellung digitaler Oberflächen souverän. Der Rest ist ein Nachschlagewerk, das man später unter dem englischen Fachbegriff öffnen kann, wenn ein Projekt es tatsächlich erfordert.