Dieser Artikel wurde am 6. November 2026 verfasst.
KI-Werkzeuge verändern sich rasant. Die Entscheidung, ob eine Interaktion Nutzer anhalten, ihnen ein seitliches Panel anbietet oder ein Element von unten einblendet, bleibt hingegen bestehen. Dialog (dialog), Seitenleiste (drawer), Bottom Sheet (bottom sheet), Dropdown-Menü (dropdown), Tabs (tabs), Akkordeon (accordion) – das sind gezielte Wege, um Eingaben einzufordern oder Inhalte zu strukturieren. Menüanordnungen in Software werden sich ändern; lesen Sie dies als Anleitung für bewusste Interaktionsentscheidungen und nicht als auswendig zu lernenden Katalog.
Ein regulärer Seitenabschnitt enthält Daten, die dauerhaft gültig sind: Adresse, Preise, Öffnungszeiten. Manche Informationen stören jedoch, wenn sie ständig im Blickfeld stehen – fehlen aber, wenn man sie erst auf einer neuen Unterseite suchen muss. Filteroptionen, kurze Bestätigungen oder ausführliche Details, die nur wenige Nutzer abrufen. Im Alltag werden all diese Elemente ungenau als „Popup“ bezeichnet. Diese schwammige Wortwahl ist der Hauptgrund, warum KI-Modelle bei der Gestaltung raten müssen. Teilen Sie die Entscheidung stattdessen anhand von drei Fragen auf: Muss der Nutzer zwingend anhalten? Darf die Hauptseite im Hintergrund sichtbar bleiben? Oder geht es nur um eine andere Ansicht desselben Datenbestands?
Anhalten, teilen oder wechseln
Ein Dialog (dialog) – oft auch als Modal (modal) bezeichnet – platziert sich zentral auf dem Bildschirm und dunkelt den Hintergrund ab. Nutzen Sie ihn ausschließlich dann, wenn Nutzer eine Eingabe oder Entscheidung treffen müssen, bevor irgendetwas anderes sicher fortgesetzt werden kann: das Endgültige Löschen eines Datensatzes, das Verbindliche Bestätigen einer Buchung oder das Korrigieren eines leeren Pflichtfeldes. Ein Dialog ist der falsche Ort für lange Texte, Hauptmenüs oder spontane Hinweise. Solange er geöffnet ist, muss der Tastaturfokus (focus) im Dialog gefangen bleiben. Die Escape-Taste (Escape) oder eine sichtbare Abbruch-Schaltfläche muss ihn schließen und den Fokus exakt an das auslösende Element zurückgeben. Fehlt diese Anweisung im Prompt, erzeugen KI-Modelle häufig Dialoge ohne barrierefreien Rückweg, was Nutzer ohne Maus blockiert. Das ist keine Nebensache, sondern eine grundlegende Voraussetzung.
Eine Seitenleiste (drawer) gleitet von der Startkante (start edge) herein und lässt die Hauptseite weiterhin im Blickfeld. Verwenden Sie sie für Aufgaben, die sich direkt auf die aktuelle Ansicht beziehen: Filter für eine Liste, Detailansichten zu einem Eintrag oder Einstellungen, die keine sofortige Krise bedeuten. Das Schließen sollte über die Escape-Taste (Escape) oder ein Tippen außerhalb der Leiste möglich sein. Auf Seiten mit Schreibrichtung von rechts nach links (wie etwa im Arabischen) liegt die Startkante rechts. Verwenden Sie im Prompt immer die Bezeichnung „start edge“ statt „immer von rechts“, damit sich die Seitenleiste nicht entgegen der natürlichen Leserichtung öffnet.
Ein Bottom Sheet (bottom sheet) steigt vom unteren Bildschirmrand des Smartphones auf. Es ist die für die Einhandbedienung auf Mobilgeräten optimierte Variante der Seitenleiste. Nutzen Sie es für wenige, schnelle Aktionen zu einem gerade angetippten Element: Anrufen, Speichern oder Teilen. Verwenden Sie es nicht für Formulare mit zwanzig Eingabefeldern. Das Panel sollte bei einer teilweisen Höhe anhalten und sich durch Herunterziehen oder per Escape-Taste (Escape) schließen lassen. Gibt es in Ihrer Sprache keinen etablierten Fachbegriff, erfinden Sie keinen künstlichen: Die Kombination aus einer kurzen Erläuterung („ein von unten aufsteigendes Panel“) und der englischen Bezeichnung bottom sheet beschreibt die Anforderung präzise.
Gleicher Ort, andere Ansicht
Ein Dropdown-Menü (dropdown) öffnet eine kurze Auswahlliste direkt neben dem Steuerelement und schließt sich sofort nach der Auswahl wieder. Typische Anwendungsfälle sind Sprachauswahl, Sortierreihenfolge oder Mengenangaben. Es ist weder eine zweite Hauptnavigation noch ein Platz für Fließtext. Umfasst die Liste mehr als etwa zehn Einträge, erfordert dies eine eigene Seite oder eine Seitenleiste (drawer) und kein schwebendes Menü, das über den Smartphone-Bildschirm hinausragt.
Tabs (tabs) – oder Registerkarten – halten mehrere gleichwertige Ansichten an einem festen Ort bereit. Nutzer wechseln seitlich zwischen den Ansichten hin und her. Die Inhalte sind hierarchisch ebenbürtig: „Diese Woche“ und „Nächste Woche“ oder „Beschreibung“ und „Zutaten“. Alle Tab-Beschriftungen müssen dauerhaft sichtbar bleiben. Sie in einem Dropdown-Menü zu verstecken, macht das Prinzip von Tabs zunichte.
Ein Akkordeon (accordion) stapelt Textbereiche untereinander, die sich nach unten aufklappen lassen – entweder einzeln oder mehrfach gleichzeitig, was im Prompt vorgegeben werden sollte. Nutzen Sie es für Inhalte, die die meisten Leser überspringen: Lieferbedingungen oder ausführliche FAQ-Bereiche. Verstecken Sie niemals die einzige Preisangabe in einem geschlossenen Akkordeon. Ein zugeklappter Zustand geht davon aus, dass die Information sekundär ist – Preise sind es für Kunden nie.
Tabs und Akkordeons werden häufig verwechselt, weil beide vorgeben, „Platz zu sparen“. Tabs ersetzen den sichtbaren Inhalt im selben Feld und behalten ihre Reiter im Blick. Ein Akkordeon schiebt die nachfolgende Seite nach unten und verbirgt die Antwort bis zum Klick. Wer einem KI-Modell lediglich „Platz sparen“ vorgibt, erhält zufällig eine der beiden Formen. Benennen Sie exakt das Element, das zum Suchverhalten der Nutzer passt.
Zwei falsche Oberflächen für dieselbe Anwendung
Die Verwaltungsoberfläche für eine Bildungseinrichtung benötigte zwei grundverschiedene Interaktionen. Die eine war risikobehaftet: Die Stornierung eines Teilnehmerplatzes. Die andere war alltäglich: Das Filtern der Kursliste nach Abendangeboten. In der ersten, vom KI-Modell generierten Version landeten beide Funktionen im selben generischen „Popup“, weil im ersten Briefing nur dieses Wort stand. Die Stornierung wurde dadurch versehentlich schnell angetippt, und der Abendfilter verdeckte die Liste, die die Lehrkraft gerade auswerten wollte. Ein einziges schwammiges Wort führte zu zwei mangelhaften Lösungen.
Die Korrektur bestand in der klaren Trennung der Fachbegriffe. Die Stornierung öffnet nun einen zentralen Dialog (dialog). Der Hintergrund wird abgedunkelt. Der Text benennt klar die Konsequenzen. Die Escape-Taste (Escape) sowie ein sichtbarer Abbrechen-Button schließen das Fenster, und der Tastaturfokus (focus) kehrt zur ursprünglichen Schaltfläche zurück. Der Abendfilter wiederum öffnet eine Seitenleiste (drawer) an der Startkante (start edge), die Kursliste bleibt daneben voll lesbar, und ein Tippen außerhalb schließt das Panel. Auf dem Smartphone schaltet derselbe Filter auf ein Bottom Sheet (bottom sheet) um, da sich die Hand ohnehin am unteren Bildschirmrand befindet. Die Lehrkraft muss keine unterschiedliche Logik lernen – sie erkennt sofort, welche Aktion ihren Arbeitsfluss anhält und welche ihn unterstützt.
Formulieren Sie diese Unterscheidung in Ihrer Sprache, damit die Logik für Ihr Team verständlich bleibt, und fügen Sie die englischen Begriffe im Prompt ein, damit die KI sie nicht erneut zu einem einzigen Popup zusammenwirft. Wenn Ihre Sprache kein Alltagsort für Seitenleiste hat, ist die Beschreibung „ein Panel am Rand, das die Hauptliste nicht verdeckt“ die exakte Definition. Verbringen Sie keine Zeit mit der Suche nach künstlichen Fachbegriffen – das funktionale Verhalten ist das Entscheidende.
Ein exemplarisches Briefing
On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.
Darunter beschreiben Sie in Ihrer Sprache die konkreten Filterfelder. Das KI-Modell kann eine Seitenleiste (drawer) korrekt aufbauen, ohne vorab zu wissen, ob Sie nach Stadtteilen oder Preisen filtern wollen. Welche Fachlogik benötigt wird, entscheiden Sie in Ihrer Sprache. Die technische Form ist universell; die Fachdaten bleiben lokal.
Streitigkeiten darüber, welches Element besonders „modern“ wirkt, führen selten weiter. Die entscheidende Frage lautet: Welches Element respektiert die Aufgabe des Nutzers? Nutzer anzuhalten, nur um eine Sortierung abzufragen, ist schlechte Ergonomie. Eine folgenschwere Löschung unauffällig in einem Dropdown zu verstecken, ist gefährlich. Wenn diese Regeln klar sind, ist dieser Schritt gemeistert. Der nächste Schritt ist kleiner, wird aber oft vergessen: Dem Nutzer ohne Neuladen der Seite klar zurückzumelden, ob seine Aktion erfolgreich war.