Design für Latenz: Wenn KI-Geschwindigkeit zum UX-Faktor wird

Die Latenz von KI-Produkten ist das wichtigste UX-Problem, und fast niemand betrachtet sie als Designaufgabe. Die Teams, die die besten KI-Erlebnisse bieten, haben aufgehört, auf schnellere Modelle zu warten, und begonnen, die Wartezeit in ihr Design einzubeziehen.

Hier ist die Anleitung: Die Mathematik der wahrgenommenen Geschwindigkeit, die fünf bewährten Muster, die vier, die scheitern, fünf Analysen und eine Checkliste vor der Veröffentlichung.

KI-Latenz ist ein Designproblem, kein Entwicklungsproblem

Die meisten KI-Produkte wirken langsam, weil sie die Latenz als Entwicklungsproblem betrachten. Die Entwicklung liefert ein schnelleres Modell, und das Produkt fühlt sich trotzdem langsam an, weil der Flaschenhals nie die Millisekunden waren. Es war die Designentscheidung, die den Nutzer auf einen Ladekreis starren ließ, ohne dass er etwas lesen konnte.

Der Nutzer misst keine Millisekunden. Der Nutzer misst, ob etwas passiert. Vier Sekunden flüssiger Fließtext wirken schnell. 1,5 Sekunden Verzögerung bei einem Modal wirken fehlerhaft.

Die Mathematik der wahrgenommenen Geschwindigkeit

Eine Antwortzeit von vier Sekunden, die flüssig dargestellt wird, wirkt schnell. Eine 1,5-sekündige Antwortzeit, die zu einer Blockierung führt, wird als langsam empfunden. Die wahrgenommene Geschwindigkeit hängt von der Feedbackdichte ab, nicht von der verstrichenen Zeit. Diese Tatsache verändert jede Entscheidung bezüglich der Latenz in einem KI-Produkt.

Die entscheidenden Zahlen sind die Zeit bis zum ersten Token und die Anzahl der Token pro Sekunde, nicht die gesamte Antwortzeit. Unter 500 Millisekunden bis zum ersten Token fühlt sich sofort an. 30 bis 80 Token pro Sekunde werden in menschlicher Geschwindigkeit gelesen. Ein Gesamtbudget von fünf Sekunden ist akzeptabel, solange die Verarbeitung ab dem ersten Token erfolgt, und nicht mehr zeitgemäß, wenn es zu einer Blockierung kommt. Entwickelt man das Design anhand dieser Werte, kann sich ein langsameres Modell schneller anfühlen als die Konkurrenz.

Die fünf Muster, die funktionieren

Streaming-Text. Optimistische Benutzeroberfläche. Progressive Offenlegung. Logikoberflächen. Hintergrundprozesse. Jedes KI-Produkt, das in puncto wahrgenommener Geschwindigkeit überzeugt, nutzt mindestens drei dieser Muster, die besten sogar alle fünf.

Die fünf Muster ergänzen sich. Streaming bietet dem Nutzer etwas zum Lesen. Eine optimistische Benutzeroberfläche bietet ihm etwas zum Sehen. Progressive Offenlegung bietet dem Nutzer etwas zum Scannen. Logikoberflächen schaffen Vertrauen. Hintergrundprozesse bieten ihm zusätzliche Beschäftigung. In Kombination benötigt das Modell zehn Sekunden, und das Produkt wirkt dennoch lebendig.

Streaming-Text macht die Wartezeit zur Antwort

Das erste Muster ist die Token-für-Token-Darstellung. Der Nutzer liest, während das Modell schreibt, und die Wartezeit verschwindet in der Ausgabe. Die Zeit bis zum ersten Token ist die einzige relevante Kennzahl. Sobald das erste Token eintrifft, liest der Nutzer, anstatt zu warten.

Das Streaming von Claude.ai ist das beste Beispiel. Das erste Token trifft in weniger als einer Sekunde ein, und die restlichen folgen in Lesegeschwindigkeit. Der Nutzer ist mitten im ersten Satz des ersten Absatzes, bevor das Modell den zweiten Absatz abgeschlossen hat. Dasselbe Modell, das nach vier Sekunden als fertiger Block ausgeliefert wird, würde sich wie ein anderes Produkt anfühlen.

Optimistische Benutzeroberfläche führt die Aktion aus, bevor das Modell zurückkehrt

Das zweite Muster zeigt das Ergebnis an, bevor das Modell fertig ist, und gleicht es ab, sobald die Antwort eintrifft. Der Nutzer benötigt die korrekte Antwort noch nicht. Er benötigt sie lediglich als Bestätigung.

Linear Die KI verfährt so, wenn sie einen Vorschlag annimmt. Das Ergebnis wird sofort mit einem dezenten Status „Ausstehend“ im Ticket angezeigt, und der Abgleich erfolgt im Hintergrund. Ergibt das Modell ein anderes Ergebnis, aktualisiert sich die Benutzeroberfläche ohne sichtbare Verzögerung. Schlägt dies fehl, wird die Benutzeroberfläche zurückgesetzt und der Fehler angezeigt. Der Nutzer kann in jedem Fall fortfahren.

Progressive Offenlegung: Grundgerüst, Entwurf und finale Version

Das dritte Muster sieht folgendermaßen aus: Zuerst das Grundgerüst, dann ein Teilentwurf und zuletzt die finale Version. Die Struktur wird vor dem Inhalt angezeigt, wodurch die gefühlte Wartezeit verkürzt wird, da das Auge etwas zum Verfolgen hat.

v0 verwendet dieses Muster direkt beim Aufruf der App. Ein Layout-Grundgerüst erscheint fast sofort, die Komponenten werden vom Modell generiert und die finale, gestaltete Vorschau erscheint zuletzt. Lovable verwendet dasselbe Verfahren. Jede Phase ist ein Zwischenschritt, den der Nutzer lesen kann, während die nächste Phase geladen wird.

Logik-Oberflächen schaffen Vertrauen

Das vierte Muster zeigt den Plan oder Denkprozess des Modells während der Ausführung. Einem Agenten beim Denken zuzusehen ist besser, als einem Ladekreis zuzusehen. Es schafft Vertrauen, da der Benutzer sieht, was das Modell vorhat, bevor es es ausführt.

Der Agentenmodus von Cursor bietet dies mit einer Plan-Oberfläche. Der Benutzer sieht die geplanten Schritte, bevor der erste Befehl ausgeführt wird. ChatGPT zeigt Logik-Spuren für Denkmodelle mit ausklappbaren Zusammenfassungen, die sich wie strukturierter Text lesen. Fünfzehn Sekunden sichtbare Logik sind besser als drei Sekunden Blackbox.

Hintergrund-Agenten ermöglichen es Benutzern, weiterzuarbeiten, während das Modell läuft

Das fünfte Muster ist, den Agenten aus dem Vordergrund in ein Seitenfenster zu verschieben. Der Benutzer wird nie durch eine KI-Anfrage blockiert. Der Agent läuft im Hintergrund, während der Benutzer im Hauptfenster weiter schreibt, programmiert oder designt.

Die Hintergrund-Agenten von Cursor sind die übersichtlichste Version. Der Benutzer startet eine umfangreiche Aufgabe und bearbeitet sie im Vordergrund, während der Agent in einem Seitenfenster arbeitet. GitHub Der Coding-Agent von Copilot verfährt genauso mit Aufgaben im Pull-Request-Format. Dieses Muster funktioniert nur, wenn der Benutzer nebenbei etwas anderes zu tun hat, was in jedem realen Workflow der Fall ist.

Die vier problematischen Muster

Die meisten KI-Produkte, die sich langsam anfühlen, verwenden eine Kombination aus vier problematischen Mustern: Ladekreise, endlose Textschleifen, blockierende Dialoge und das Fehlen jeglicher Fortschrittsanzeige. Jedes dieser Muster reduziert die wahrgenommene Geschwindigkeit erheblich, selbst wenn die Antwort schnell ist.

Ladekreise verdecken alles, was der Benutzer benötigt

Ein Ladekreis ohne Fortschrittsanzeige ist eine Blackbox. Der Benutzer hat keinen Fokus, und die Wartezeit erscheint ihm länger als die gleiche Wartezeit mit einem Token-Stream. Ein Ladekreis lenkt den Benutzer ab, was genau dem widerspricht, was eine KI-Oberfläche bewirken sollte.

Entfernen Sie den Ladekreis. Verwenden Sie stattdessen einen Token-Stream, ein Grundgerüst oder eine Logikverfolgung. Ist die Antwort zu kurz für die Wiedergabe, senden Sie einen optimistischen Status. Führt das Modell unsichtbare Berechnungen durch, senden Sie eine Statuszeile, die dies benennt.

Schleifen mit „Denktext“ sind irrelevant

Eine rotierende Schleife mit „Denktext“ ist ineffizienter als ein Ladekreis. Sie suggeriert Fortschritt, der nicht vorhanden ist. Benutzer lernen innerhalb von zwei Sitzungen, sie zu ignorieren, wodurch der Kanal für jegliche weitere Statusmeldungen blockiert wird.

Ersetzen Sie die Schleife durch einen aussagekräftigen Status. Suche in drei Quellen. Datei wird gelesen. Antwort wird erstellt. Die Statuszeile liefert Informationen. Die Schleife ist irrelevant und gibt Informationen vor.

Blockierende Dialoge machen Wartezeiten zu einer Belastung

Ein modales Dialogfeld, das die restliche Benutzeroberfläche blockiert, während das Modell ausgeführt wird, ist der teuerste Fehler in Bezug auf Latenz. Es verwandelt eine Wartezeit in eine Geiselnahme. Der Benutzer kann weder scrollen noch eine vorherige Antwort kopieren oder irgendetwas anderes tun.

Entfernen Sie das modale Dialogfeld. Senden Sie die Antwort direkt im Browser, in einem Seitenbereich oder in einer nicht blockierenden Benachrichtigung. Der Nutzer sollte niemals den Zugriff auf den Rest des Produkts verlieren, nur weil eine KI-Anfrage noch läuft.

Fehlendes Fortschrittssignal führt zum Abbruch

Eine KI-Oberfläche ohne Fortschrittssignal vermittelt dem Nutzer die Annahme, die Anfrage sei fehlerhaft. Er drückt den Zurück-Button, bevor die Antwort eintrifft. Im schlimmsten Fall aktualisiert er die Seite und verliert die Anfrage.

Jede KI-Oberfläche, die länger als 500 Millisekunden benötigt, braucht ein Fortschrittssignal. Streaming-Text ist optimal. Ein Gerüst ist die nächstbeste Option. Eine Ablaufverfolgung eignet sich für längere Wartezeiten. Eine Statuszeile ist für alle anderen Fälle ausreichend. Das Signal muss vorhanden sein.

Fünf reale Produktanalysen

Fünf KI-Oberflächen, die Latenz in UX-Effekte verwandeln.

Claude.ai: Streaming als zentrales Interaktionselement

Claude.ai: Streaming ist das beste Beispiel dafür, wie Latenz als Feature genutzt werden kann. Die Zeit bis zum ersten Token liegt in einer warmen Sitzung deutlich unter einer Sekunde, der Text wird in Lesegeschwindigkeit angezeigt, und die Wartezeit verschwindet im Ergebnis.

Der Design-Clou ist die vollständige Fokussierung auf den Datenstrom. Kein Ladekreis, kein Textbaustein, kein Gerüst – die Antwort wird Token für Token ausgegeben. Das Produkt fühlt sich in den zwanzig Sekunden der Generierung schnell an, da der Benutzer neunzehn Sekunden lang gelesen hat.

Cursor, die Planungs- und Ausführungsschleife

Cursor wandelt Latenz in Vertrauen um, indem zuerst der Plan des Agenten angezeigt, jeder Schritt mit sichtbarem Fortschritt ausgeführt und Änderungen sofort nach deren Eingabe gespeichert werden. Eine mehrminütige Aufgabe wirkt sinnvoll, da der Benutzer den Plan lesen, jeden Schritt verfolgen und jede Änderung nach der Speicherung überprüfen kann.

Der Design-Clou ist die Priorisierung der Wartezeit. Zuerst wird geplant. Jeder Schritt dient als Kontrollpunkt. Änderungen werden als Endergebnis angezeigt. Jede Ebene enthält Informationen, sodass der Benutzer nie auf eine Blackbox starrt, selbst wenn der Job minutenlang läuft.

Linear KI, progressive Inline-Offenlegung

Linear KI integriert progressive Offenlegung in bestehende Oberflächen. Die KI dominiert nie den Vordergrund. Ein Entwurfsvorschlag erscheint direkt im Vorgang. Eine Zusammenfassung erscheint direkt im Projekt. Die Wartezeit unterbricht die eigentliche Arbeit des Nutzers nicht, da dieser bereits die von der KI unterstützte Aufgabe erledigt.

In ein Produkt eingebettete KI sollte, wie der Nutzer weiß, niemals ein Modalfenster sein oder die Benutzeroberfläche dominieren. Inline-Offenlegung ist das richtige Muster, und die Latenzkosten sind in den Aktionen verborgen, die der Nutzer bereits ausführt.

Sie wünschen sich ein KI-Produkt, das sich schnell anfühlt, selbst wenn das Modell langsam ist? Miete Brainy. UXBrainy bietet Latenz-Audits und Streaming-UI-Redesigns, AppBrainy die vollständige KI-Produktbereitstellung und ClaudeBrainy die Prompt- und Skill-Ebene, die Streaming kostengünstig macht. Kombinieren Sie es mit KI-Agenten-UI-Designmuster, damit die Agentenebene auf demselben hohen Niveau bereitgestellt wird.

Granola, die Aufzeichnung-zu-Zusammenfassung-Kaskade

Granola verbirgt minutenlange Modellarbeit hinter einer vierstufigen Kaskade. Zuerst wird die Aufzeichnung als Rohdaten-Wellenform angezeigt. Dann folgt das Transkript als scrollbarer Text. Entwurfsnotizen erscheinen als Stichpunktstruktur. Die finale Zusammenfassung folgt zuletzt als überarbeiteter Text. Jede Stufe ist nützlich, bevor die nächste fertig ist.

Drei Minuten Modellarbeit fühlen sich wie dreißig Sekunden an, da das erste nützliche Ergebnis innerhalb von zehn Minuten verfügbar ist. Das Transkript ist für sich genommen wertvoll. Die Notizen sind für sich genommen wertvoll. Die Zusammenfassung rundet das Erlebnis ab, ohne den Nutzen einzuschränken.

Perplexity, Live-Quellen-Streaming

Perplexity streamt seine Quellen vor dem Ergebnis. Die Zitatliste erscheint zuerst und wird aktualisiert, während das Modell die Quellen abruft und bewertet. Das Ergebnis wird darunter gestreamt, während der Benutzer bereits die Quellen liest. Die Wartezeit wirkt wie Recherche, nicht wie Laden.

Der Designansatz besteht darin, die Arbeit vor dem Ergebnis zu zeigen. Ein Benutzer, der eine Quellenliste liest, muss nicht warten. Bei gleicher Gesamtreaktionszeit und ausgeblendeten Quellen bis zum Vorliegen der Antwort würde sich die gefühlte Geschwindigkeit zwei- bis dreimal langsamer anfühlen. Die Informationsdichte während der Wartezeit bestimmt die gesamte wahrgenommene Geschwindigkeit.

Checkliste für Latenz vor der Auslieferung

Führen Sie diese Checkliste auf jeder KI-Oberfläche vor der Auslieferung durch. Zwölf messbare Prüfungen.

1. Zeit bis zum ersten Token unter 500 Millisekunden in einer warmen Sitzung.

2. Streaming mit 30 bis 80 Token pro Sekunde auf dem Zielmodell.

3. Jede Wartezeit über 500 Millisekunden wird mit einem Fortschrittssignal versehen.

4. Kein reiner Ladekreis auf der KI-Oberfläche.

5. Keine rotierende Textschleife auf der KI-Oberfläche.

6. Kein blockierender Dialog während der Modellausführung.

7. Optimistische Benutzeroberfläche führt die sichtbare Aktion innerhalb von 100 Millisekunden nach der Absicht aus.

8. Skelette werden vor dem Inhalt gerendert, wenn die Antwort länger als zwei Sekunden dauert.

9. Ablaufverfolgungen werden für alle Aufgaben angezeigt, die länger als zehn Sekunden dauern.

10. Langlaufende Prozesse werden in einem Seitenbereich und nicht im Vordergrund ausgeführt.

11. Der Benutzer kann scrollen, kopieren und vorherige Ausgaben lesen, während eine Anfrage bearbeitet wird.

12. Jede mehrstufige Antwort zeigt Zwischenschritte an, die der Benutzer einsehen kann.

Die Liste ist in der Designprüfungsvorlage enthalten und wird bei jeder Ausführung schneller.

FAQ

Welche Latenzkennzahl ist bei einem KI-Produkt am wichtigsten?

Die Zeit bis zum ersten Token (Time-to-First-Token). Die gesamte Antwortzeit ist weniger wichtig als die Wartezeit des Benutzers, bis er etwas lesen kann. Unter 500 Millisekunden wird dies als nahezu sofort empfunden.

Ist Streaming immer besser als Blocking?

Bei Text: Ja. Unter 500 Millisekunden ist Blocking akzeptabel, da die Wartezeit nicht sichtbar ist. Bei längeren Wartezeiten ist Streaming in jeder Hinsicht hinsichtlich der wahrgenommenen Geschwindigkeit überlegen.

Wann sollte ich eine optimistische Benutzeroberfläche anstelle von Streaming verwenden?

Streaming, wenn die Ausgabe die Antwort ist, wie z. B. Fließtext, Code oder strukturierte Generierung. Optimistische Benutzeroberfläche, wenn das Modell eine vom Benutzer erwartete Entscheidung trifft, wie z. B. einen überarbeiteten Entwurf oder einen akzeptierten Vorschlag. Die beiden ergänzen sich.

Wie zeige ich den Fortschritt eines Agenten an, der Minuten benötigt?

Logische Oberflächen und Fortschrittsanzeigen im Seitenbereich. Zeigen Sie zuerst den Plan, dann den aktiven Schritt und schließlich die aktuelle Ausgabe an. Der Benutzer liest den Plan, verfolgt die einzelnen Schritte und fühlt sich nie ausgeschlossen.

Was ist der größte Fehler in Bezug auf Latenz bei KI-Produkten heutzutage?

Das blockierende Modal mit einem Ladekreis. Es vereint alle vier Fehlermuster auf einem Bildschirm und vermittelt dem Benutzer, dass KI etwas ist, auf das man warten muss, nicht etwas, das man aktiv nutzen kann.

Die Vorteile der Berücksichtigung von KI-Latenz

Die Berücksichtigung von KI-Latenz ist keine Notlösung für langsame Modelle. Es ist der Designansatz, der es einem langsameren, aber besseren Modell ermöglicht, ein schnelleres, aber schlechteres in allen für den Benutzer relevanten Metriken zu übertreffen.

Die aktuell führenden Teams optimieren nicht mehr nur die reine Geschwindigkeit, sondern konzentrieren sich auf die gefühlte Geschwindigkeit. Sie setzen auf Streaming, bieten eine optimistische Benutzeroberfläche, entwickeln 200-ms-Skelette und verschieben Agenten in Seitenleisten. Jede Wartezeit birgt Informationen.

Wenn Ihre KI-Oberfläche immer noch einen Ladekreis, eine Denkschleife oder ein blockierendes Modal anzeigt, ist nicht das Modell der Flaschenhals, sondern das Design. Kombinieren Sie Ihre Arbeit mit KI-Agenten-UI-Designmuster, dem Onboarding von KI-Produkten-Playbook, KI-natives Produktdesign und visuelle Hierarchie, um jede Phase übersichtlich zu gestalten.

Wenn Sie ein KI-Produkt wünschen, das sich auch bei einem langsamen Modell schnell anfühlt, dann Brainy einstellen. UXBrainy bietet Latenz-Audits und Streaming-UI-Redesigns, AppBrainy liefert komplette KI-Produkte und ClaudeBrainy liefert die Prompt- und Skill-Ebene, die Streaming kostengünstig macht.