Davies Meyer / Creative Engineering
UX/UI Trends 2027: Interaktion wird zur Erfahrung.
Welche Interaktionen helfen euren Nutzern wirklich? Erlebt acht Ansätze für eure Website, prüft ihren Nutzen und plant mit unserem Guide den ersten sinnvollen Test.
Scrollen. Bewegen. Ausprobieren.
Ein Ausblick von Davies Meyer für Marketing-, Digital- und Website-Teams. Alle acht Demos sind frei zugänglich. Die Beispiele illustrieren Interaktionsprinzipien und sind keine Kundenreferenzen.
01 / Ausprobieren
Findet eine Interaktion für eure Nutzeraufgabe.
02 / Einordnen
Nutzt den Guide mit Entscheidungsmatrix und Testplan.
03 / Anwenden
Besprecht einen begrenzten Prototyp für eure Website.
Übersicht
Acht Trends. Acht Live-Demos.
Unsere Auswahl für die Website-Planung 2027: acht Ansätze, jeweils mit Demo, Einsatzgrenzen und einer konkreten Prüffrage. Die Einordnung ist unsere redaktionelle Einschätzung, keine Marktstudie.
- 01Immersive NavigationVier Ziele auf mehreren Tiefenebenen – mit Standardansicht als Alternative.DM-Einordnung:Hoch im Markenkontext
- 02Kinetic TypographyEin Wort, das auf Nähe und Scroll reagiert – live umschaltbar.DM-Einordnung:Gezielt für den Markenauftritt
- 03Brand GamificationSnack Hunt: fünf Flavour Bites sammeln und eine Sorte freischalten.DM-Einordnung:Hoch bei echtem Produktbezug
- 04Cursor + Scroll InteractionsSpotlight, Magnet und Reveal – mit regelbarer Interaktionsstärke.DM-Einordnung:Detail-Layer, nicht Kernidee
- 05Depth-Driven ScrollytellingEine Sticky-Story in vier Zuständen – mit drei Tiefenebenen.DM-Einordnung:Für erklärungsbedürftige Angebote
- 06Intent-Adaptive UXNatural-Language-Briefing: Absicht in eigenen Worten – der Plan entsteht live, du bestätigst.DM-Einordnung:Für komplexe Einstiegsaufgaben
- 07Cursor-Scrubbed MotionEin Charakter folgt deinem Cursor – 96 Frames, live gescrubbt.DM-Einordnung:Hoch als einzelner Hero-Moment
- 08Oversized Scroll TypeDrei Akte: Zeilen-Reveal, Scroll-Fill und ein Zoom durch den Buchstaben.DM-Einordnung:Für eine zentrale Markenbotschaft
01Immersive Navigation
Nicht durch Seiten klicken. Durch Inhalte bewegen.
Navigation wird räumlicher: Inhalte erscheinen als Ebenen, Orte und Zustände. Entscheidend ist nicht der 3D-Effekt selbst, sondern eine klare Orientierung innerhalb einer immersiven Experience.
- Spatial UX
- Guided Discovery
- Depth
- DM-Einordnung
- Hoch im Markenkontext
- Stark für
- Brand Storytelling, Automotive, Travel, Premium-Produkte, Kampagnen
- Vorsicht bei
- Utility-Portale, Formulare, Dashboards und transaktionale Flows
- Motion-Funktion
- Räumliche Beziehung · Orientierung
Für eure Website: Produkte leichter entdecken
Ein Angebot mit mehreren Themen räumlich erkundbar machen. Eine klassische Übersicht bleibt erreichbar.
Die entscheidende Prüffrage
Finden neue Nutzer ein vorgegebenes Produkt ebenso sicher wie in einer einfachen Liste?
Position 01 / 04Discover
Übersicht · Tiefe = Reihenfolge der Journey
02Kinetic Typography
Typografie, die reagiert.
Schrift wird zum Interface: Variable Fonts reagieren auf Scroll, Nähe und Geschwindigkeit und übernehmen Aufgaben, die früher ausschließlich Layout und Bildsprache erledigt haben.
- Variable Fonts
- Responsive Type
- Motion
- DM-Einordnung
- Gezielt für den Markenauftritt
- Stark für
- Editorial, Portfolios, Markenauftritte und Launch-Seiten
- Vorsicht bei
- Fließtext, lange Lesestrecken und Dauer-Marquees
- Motion-Funktion
- Zustand · Hierarchie
Für eure Website: Eine Markenbotschaft hervorheben
Eine kurze Headline reagiert auf Bewegung. Der eigentliche Lesetext bleibt ruhig.
Die entscheidende Prüffrage
Wird die Botschaft nach kurzer Betrachtung verstanden und erinnert?
Bewegung
01
Variable Type
Die Gewichtsachse (wght 200–900) reagiert stufenlos auf Nähe oder Scroll-Fortschritt – eine Schrift, unendlich viele Zustände.
02
Type as Layout
Schrift wird Fläche, Maske und Bildträger. Das Bild erscheint nur dort, wo die Interaktion stattfindet.
03
Scroll Stories
Im Scroll-Modus wandert eine Welle durch das Wort, die Scroll-Geschwindigkeit neigt die Buchstaben leicht.
03Brand Gamification
Spielmechaniken, die Entdeckung belohnen.
Gamification funktioniert dann, wenn sie Produktentdeckung, Lernen oder Personalisierung unterstützt – nicht wenn Punkte und Badges nur Dekoration sind.
- Micro-Play
- Reward
- Product Discovery
- DM-Einordnung
- Hoch bei echtem Produktbezug
- Stark für
- FMCG, Entertainment, Produkt-Launches, Loyalty, Quiz & Empfehlungen
- Vorsicht bei
- Finanz- und Medical-Flows, kritische Services, Situationen unter Zeitdruck
- Motion-Funktion
- Belohnung · Fortschritt
Für eure Website: Produktwissen durch eigenes Handeln vermitteln
Ein Quiz oder Spiel verbindet die Handlung mit einem echten Produktmerkmal. Überspringen bleibt möglich.
Die entscheidende Prüffrage
Verstehen Nutzer danach mehr vom Produkt oder haben sie nur länger gespielt?
- Score
- 0
- Fortschritt
- 0 / 5gesammelt
- Flavour Level
- –
- Reward
- Gesperrt0:30
Snack Hunt
Sammle 5 Flavour Bites in 30 Sekunden und schalte eine neue Sorte frei. Die Belohnung führt direkt zum Produkt.
- ← → oder A / D
- Maus bewegen oder auf Touch ziehen
04Cursor + Scroll Interactions
Der Cursor wird zum Interface.
Pointer und Scroll liefern unmittelbares Feedback. Richtig eingesetzt zeigen sie, was interaktiv ist, lenken Aufmerksamkeit und machen digitale Oberflächen taktiler.
- Cursor Tracking
- Magnetic UI
- Reactive Motion
- DM-Einordnung
- Detail-Layer, nicht Kernidee
- Stark für
- Galerien, Case-Übersichten, Produkt-Showcases und CTAs
- Vorsicht bei
- Formulare, Textfelder, Touch-Geräte und globale Cursor-Ersetzung
- Motion-Funktion
- Interaktivität · Aufmerksamkeit
Für eure Website: Interaktive Elemente erkennbar machen
Ein dezentes Feedback hilft beim Erkunden von Produkten oder Cases. Wichtige Information ist ohne Hover verfügbar.
Die entscheidende Prüffrage
Ist die gewünschte Handlung auch auf Touch und mit Tastatur sofort auffindbar?
Der Spotlight folgt dem Cursor nur in dieser Medienfläche und zeigt, was unter der Oberfläche liegt – vom Wireframe zur fertigen Experience.
05Depth-Driven Scrollytelling
Scrollen wird zur Erzählung.
Parallax entwickelt sich weiter: Hintergrund, Inhalt und Interface reagieren mit unterschiedlicher Geschwindigkeit auf den Scroll-Fortschritt und bilden gemeinsam eine geführte Geschichte.
- Scroll Timeline
- Layered Storytelling
- Parallax
- DM-Einordnung
- Für erklärungsbedürftige Angebote
- Stark für
- Produktgeschichten, Reports, Travel, Innovation und Launches
- Vorsicht bei
- Scroll-Jacking, lange Pflichtsequenzen und schnelle Aufgaben
- Motion-Funktion
- Fortschritt · Räumliche Beziehung
Für eure Website: Komplexe Zusammenhänge erklären
Ein Produkt, eine Wirkungskette oder ein Prozess wird in überschaubaren Schritten erklärt.
Die entscheidende Prüffrage
Können Nutzer den Zusammenhang nach der Story in eigenen Worten wiedergeben?
01 / Kontext
Ein Horizont. Noch keine Richtung.
Jede Geschichte beginnt mit Orientierung. Der Hintergrund bewegt sich am langsamsten und gibt dem Auge Halt.
02 / Entdeckung
Etwas tritt in den Fokus.
Das Mittelfeld reagiert schneller: Ein Objekt erscheint hinter dem Horizont und zieht die Aufmerksamkeit auf sich.
03 / Perspektive
Nähe erzeugt Bedeutung.
Der Vordergrund bewegt sich am schnellsten. Unterschiedliche Geschwindigkeiten erklären, was nah und was fern ist.
04 / Ergebnis
Aus Scrollen wird Verstehen.
Der Fortschritt ist jederzeit sichtbar, der Scroll bleibt nativ – keine Übernahme, kein Zwang, jederzeit überspringbar.
06Intent-Adaptive UX
Vom Anliegen zum nächsten Schritt.
Eine Eingabe in eigenen Worten kann den Einstieg in komplexe Aufgaben erleichtern. Entscheidend ist, wie gut das Interface Anliegen erkennt, Unsicherheit zeigt und Korrekturen ermöglicht. Ob der Weg dadurch einfacher wird, muss ein Nutzertest zeigen.
- Natural Language UI
- Generative UI
- AI mit Kontrolle
- DM-Einordnung
- Für komplexe Einstiegsaufgaben
- Stark für
- Onboarding, Konfiguratoren, Lead-Journeys, SaaS und Service-Portale
- Vorsicht bei
- Blackbox-Automation und Chat als einzige Navigation
- Motion-Funktion
- Zustand · Nächster Schritt
Für eure Website: Den Einstieg in eine komplexe Aufgabe vereinfachen
Eine freie Eingabe schlägt passende nächste Schritte vor. Nutzer prüfen und korrigieren die Interpretation.
Die entscheidende Prüffrage
Was passiert bei unklaren, widersprüchlichen oder nicht unterstützten Eingaben?
Demo mit lokaler Erkennungslogik. Zeitplan und Team sind illustrative Beispiele, keine Aufwandsschätzung oder Terminzusage.
Das Interface erkennt Vorhaben, Zielgruppe, Zeitrahmen und Fokus. Änderungen werden erst nach Bestätigung übernommen.
Oder direkt im Satz wählen
Generative UI
Dein Plan, live zusammengesetzt
Jede Änderung im Satz baut Zeitplan, Bausteine und Team neu.
- 8
- Wochen
- 5
- Phasen
- 4
- Rollen
- 3
- Bausteine
Zeitplan · live generiert
Empfohlene Bausteine · an- und abwählbar
Motion-Prototype
Warum? Scroll- und Motion-Anteile früh im Code testen, nicht nur im Mockup.
Siehe Trend 05 →Conversion-Journey
Warum? Klare Pfade zu Kontakt und Formular, sinnvolle Voreinstellungen gezielt prüfen.
Siehe Trend 06 →Nutzer-Interviews
Warum? Interviews machen Bedürfnisse und Hürden sichtbar; Umfang und Zielgruppe passend zur Fragestellung wählen.
Generiertes Briefing
Wir entwickeln eine Website für Endkund:innen in 8 Wochen. Fokus: mehr qualifizierte Anfragen. Plan: 5 Phasen (Discovery → Konzept & IA → Design & Motion → Build → Launch), Team aus 4 Rollen, Bausteine: Motion-Prototype, Conversion-Journey, Nutzer-Interviews.
07Cursor-Scrubbed Motion
Der Cursor wird zur Zeitachse.
Statt ein Video abzuspielen, übersetzt das Interface die Cursorposition direkt in Frames. Figuren, Produkte und Szenen reagieren auf den Zeiger oder einen Regler. So lässt sich ein Detail gezielt erkunden. Das ist keine Blickerkennung.
- Video Scrubbing
- Pointer-Driven Motion
- Character UI
- DM-Einordnung
- Hoch als einzelner Hero-Moment
- Stark für
- Hero-Bereiche, Charaktere & Maskottchen, Produkt-360°, Launch-Kampagnen
- Vorsicht bei
- Lange oder schwere Videos, Touch ohne Alternative, Inhalte, die nur im Video stehen
- Motion-Funktion
- Ursache & Wirkung · Aufmerksamkeit
Für eure Website: Ein Produktdetail gezielt untersuchen
Ein Regler oder Zeiger steuert einen kurzen Clip. Das entscheidende Merkmal wird zusätzlich beschrieben.
Die entscheidende Prüffrage
Zeigt die Interaktion etwas Entscheidungsrelevantes, das ein Standbild nicht vermittelt?
Character UI
Bewege den Cursor nach links oder rechts – der Roboter schaut zu ihm.
Frame 01 / 96 · 0,00 s
01
Blickkontakt
Solange die Figur sichtbar ist, folgt ihr Blick dem Cursor nach links und rechts – auch außerhalb der schwarzen Bühne.
02
Direkte Reaktion
Die aktuelle Cursorposition bestimmt die Blickrichtung. Schnelle Bewegungen werden gebündelt, statt als Warteschlange nachzulaufen.
03
Encoding
Alpha-Kanal (VP9 / HEVC) und ein Keyframe alle 4 Frames – so bleibt jeder Sprung sofort sichtbar.
08Oversized Scroll Type
Headlines, die den Raum übernehmen.
Übergroße Typografie kann eine zentrale Aussage zur Bühne machen. Zeilen erscheinen beim Scrollen oder geben Bildwelten frei. Lesbarkeit und eine vollständig nutzbare statische Ansicht gehören von Anfang an dazu.
- Oversized Type
- Scroll Reveal
- Scroll Timelines
- DM-Einordnung
- Für eine zentrale Markenbotschaft
- Stark für
- Markenauftritte, Launches, Kampagnen, Editorial und Portfolios
- Vorsicht bei
- Fließtext, mehrere Effekte pro Seite, lange Pflicht-Scrollstrecken
- Motion-Funktion
- Hierarchie · Fortschritt
Für eure Website: Eine zentrale Aussage inszenieren
Wenige große Worte tragen eine Marken- oder Launchbotschaft. Der Inhalt bleibt in sinnvoller Lesereihenfolge.
Die entscheidende Prüffrage
Bleibt die Aussage auch auf kleinen Displays und bei Textzoom vollständig lesbar?
Große Typo ist kein Dekor. Sie ist die Bühne.
Weiter zur SyntheseFortschritt 0 %Die Füllung folgt deinem Scroll – nicht der Zeit.
Große Typo ist die Bühne.
01 / Zeilen-Reveal
So läuft es nativ
01
Zeilen-Reveal
animation-timeline: view(); animation-range: entry 10% cover 40%;02
Scroll-Fill
clip-path: inset(0 calc(100% - var(--p)) 0 0); /* --p folgt scroll() */03
Zoom-Through
transform-origin: <Mitte der O-Punze>; scale: 1 → 44;
Native CSS-Scroll-Timelines sind nicht überall gleich unterstützt. Diese Demo steuert die Animation über Motion und bietet bei reduzierter Bewegung eine statische Variante. Die Zielbrowser müssen vor einem Einsatz geprüft werden.
Was bleibt?
Gute Interaktion hilft weiter. Schritt für Schritt.
Für eure Planung zählt die konkrete Aufgabe: Was sollen Nutzer besser finden, verstehen oder erledigen können? Ein begrenzter Prototyp macht diese Frage prüfbar, bevor ein großer Umbau beginnt.
- 01
Orientierung vor Effekt
Nutzer wissen jederzeit, wo sie sind. Immersion ergänzt Navigation – sie ersetzt sie nicht.
- 02
Motion mit Funktion
Jede Bewegung erklärt Hierarchie, Zustand oder Fortschritt. Alles andere ist Dekoration.
- 03
Interaktion als Feedback
Das Interface bestätigt Eingaben zügig und zeigt bei längeren Vorgängen einen verständlichen Status.
- 04
AI mit Kontrolle
Vorschläge sind begründet, bearbeitbar und werden erst nach Bestätigung übernommen.
- 05
Accessibility by Default
Reduced Motion, Tastatur, Fokus und Touch-Äquivalente sind Teil des Konzepts, kein Nachtrag.
- 06
Performance als Designkriterium
Effekte laden nur, wenn sie gebraucht werden. Tempo ist Teil der Experience.
Der Motion-Test
Welche Frage beantwortet deine Animation?
Keine Frage beantwortet? Dann ist es wahrscheinlich Dekoration.
Der Guide für eure Website-Planung
Aus Trends werden
gute Entscheidungen.
Nehmt aus den Demos einen konkreten nächsten Schritt mit. Der Guide hilft euch, Chancen und Grenzen zu diskutieren und einen ersten Test vorzubereiten.
- Acht Ansätze mit Einsatzmöglichkeiten und Prüffragen
- Entscheidungsmatrix für euer Marketing-, UX- und Development-Team
- Arbeitsblatt für einen begrenzten Prototyp
- Checkliste für Bedienung, Inhalt und Ladeverhalten
Kostenlos · 10 Seiten · PDF
Euren Guide mitnehmen
Eine Idee für eure Website?
Bringt eure Website und eine konkrete Nutzeraufgabe mit. Gemeinsam finden wir heraus, welcher Ansatz einen Test wert ist.
Website-Vorhaben besprechenWebinar · In Planung
Welche UX-Trends passen wirklich zu eurer Website?
Demos gemeinsam ausprobieren, Entscheidungen begründen und den Transfer auf eine reale Nutzeraufgabe diskutieren. Geplant sind rund 45 Minuten inklusive Fragen. Termin und Vortragende stehen noch nicht fest.
Bis dahin: Demos erkunden und den Guide nutzen.
Zum GuideFragen zur Umsetzung
Wie bekomme ich den PDF-Guide?
Gib deine E-Mail-Adresse im Formular an. Du erhältst eine Bestätigungs-E-Mail. Nach der Bestätigung auf der verlinkten Seite kannst du den Guide herunterladen. Der Bestätigungslink gilt 24 Stunden. Damit abonnierst du keinen Newsletter.
Sind das garantierte Trends für 2027?
Nein. Es ist unsere redaktionelle Auswahl von Ansätzen für eure Planung. Manche sind bereits bekannt, andere entwickeln sich weiter. Ob sie sinnvoll sind, entscheidet die konkrete Nutzeraufgabe.
Müssen wir dafür die ganze Website neu bauen?
Das hängt von eurer Plattform ab. Häufig lässt sich zuerst ein einzelner Abschnitt oder Ablauf als Prototyp prüfen. Anschließend beurteilen wir gemeinsam die Integration in euer bestehendes CMS.
Ist die Intent-Demo bereits eine echte KI-Anwendung?
Die Demo arbeitet lokal mit vorgegebener Erkennungslogik und Beispielplänen. Sie zeigt das Bedienprinzip. Eine produktive KI-Anwendung benötigt zusätzlich geeignete Daten, Zugriffsregeln, Tests und fachliche Verantwortung.
Ist ein Webinar schon buchbar?
Noch nicht. Geplant ist eine gemeinsame Einordnung mit Live-Demos, einer Beispielaufgabe und Fragen aus der Praxis. Termin, Vortragende und Anmeldung folgen nach der Planung.
Was ist der nächste Schritt für ein konkretes Projekt?
Schickt uns über die Kontaktseite eure Website und die wichtigste Aufgabe, die leichter werden soll. Daraus lässt sich ein sinnvoller Prüf- oder Prototypumfang ableiten.
Fachliche Bezugspunkte: MDN zu Scroll-Timelines und W3C zur abschaltbaren Bewegung. Eigene Einordnung und Demonstrationen: Davies Meyer, September 2026. Illustrative Bildwelten, teilweise KI-generiert.
Creative Engineering
Welchen Schritt soll eure Website leichter machen?
Bringt eure Website und eine konkrete Herausforderung mit. Gemeinsam ordnen wir Nutzeraufgabe, Markenidee und technische Voraussetzungen ein – als Grundlage für einen gezielten Prototyp. Die Verantwortung für Konzept und Qualität liegt bei uns.