Fünf Muster für Interfaces mit KI, die es schon gibt

Klassische Komponenten wie Button, Karte oder Auswahlmenü gehen davon aus, dass eine Antwort vollständig auf einmal eintrifft und bei gleicher Eingabe gleich ausfällt. Generative KI erfüllt keine dieser beiden Annahmen. Interfaces dafür müssen dennoch nicht von Grund auf neu entwickelt werden, denn fünf Muster sind in veröffentlichten Design Systemen und bekannten Produkten bereits beschrieben.

1. Kennzeichnen, was von der KI stammt

IBM hat mit Carbon for AI eine eigene Erweiterung des Systems eingeführt. Sie umfasst ein Etikett und eine einheitliche Gestaltung für alle KI-generierten Inhalte, verbunden mit einer Erklärung, wie das Ergebnis zustande kam. Cloudscape, das Design System von AWS, führt dafür ein eigenes Etikett für generierte Ausgaben.

2. Zeigen, dass gearbeitet wird

Antworten kommen verzögert und Stück für Stück. Cloudscape beschreibt dafür Ladezustände und ein Muster, das den Zwischenstand der Verarbeitung zeigt. Nutzer sollen erkennen können, ob das System noch arbeitet oder fertig ist.

3. Vorschläge, die man annehmen oder übergehen kann

Blasser Vorschlagstext im Eingabefeld, mit der Tabulatortaste übernommen, ist aus Code-Editoren mit KI-Vervollständigung bekannt. Wichtig ist, dass der Vorschlag die Eingabe nicht behindert. Wer etwas anderes tippt oder Esc drückt, verwirft ihn.

4. Einsicht in das, was sich das System merkt

ChatGPT zeigt in den Einstellungen eine Liste der gespeicherten Erinnerungen, die sich einzeln löschen und je nach Version auch bearbeiten lassen, dazu Schalter, um die Funktion abzuschalten. Ein brauchbarer Mindeststandard besteht darin, dass Nutzer die Funktion abschalten, die Einträge einsehen und einzeln löschen können.

5. Barrierefreie gestreamte Antworten

Während eine Antwort einläuft, soll ein Screenreader nicht jedes Bruchstück vorlesen. Die ARIA-Spezifikation sieht dafür aria-busy vor. Das Attribut zeigt an, dass ein Bereich gerade verändert wird und Hilfstechnik mit der Ausgabe warten kann. Der Antwortbereich ist eine Live-Region mit aria-live="polite". Solange die Antwort einläuft, steht dort aria-busy="true"; ist sie fertig, wird es auf false gesetzt und die Antwort als Ganzes angesagt. Das Verhalten mit gängigen Screenreadern muss getestet werden, da die Unterstützung uneinheitlich ist.

Was diese Muster nicht abdecken

Auch Atlassian hat Leitlinien für das Zusammenspiel mit KI veröffentlicht. Diese fünf Muster decken den Normalfall ab. Der Umgang mit falschen Antworten erfordert eine eigene Betrachtung und ist Thema des nächsten Teils.

Aus der Reihe „Design Systems und KI“. Zurück: Prototypen aus dem eigenen System: was Atlassian berichtet. Weiter: Wenn das Modell sich irrt: Fehler als Zustand gestalten.