Bildschirmelemente benennen für KI-Modelle

Dieser Artikel wurde am 6. November 2026 verfasst.

KI-Werkzeuge verändern sich rasant. Die Bezeichnungen von Bildschirmoberflächen hingegen bleiben stabil. Eine Kopfzeile (header), ein Formular (form) oder ein Dialog (dialog) beschreiben seit Jahrzehnten dieselben grundlegenden Strukturen. Beschriftungen von Schaltflächen und die Anordnung von Menüs mögen sich wandeln; die Grundbausteine bleiben. Betrachten Sie diesen Leitfaden als eine Methode, um gezielt nach einer bestimmten Bildschirmstruktur zu fragen – nicht als Rundgang durch die Menüs einzelner Programme.

Serien-Cover: Grundbegriffe für Vibe Coding, 1 von 5, Den Bildschirm benennen.

Die meisten Menschen haben ein klares Bild vor Augen, wenn sie an den gewünschten Bildschirm denken. Das Problem liegt meist daran, dass ihnen der präzise Begriff fehlt. Statt das Element zu benennen, beschreiben sie eine Bewegung oder Wirkung: „Da soll von der Seite etwas reingleiten“, „Die Kästen sollen unterschiedlich groß sein“ oder „Es ploppt auf und ich muss reagieren“. Ein KI-Modell kann zwar auf Basis solcher Beschreibungen Code erzeugen, muss aber vieles erraten. Wer nach „etwas von der Seite“ fragt, erhält je nach Auslegung ein Menü, ein seitliches Panel oder eine neue Seite. Ein einziger Satz führt so zu drei völlig unterschiedlichen Oberflächen.

Diese Diskrepanz hat nichts mit persönlichem Geschmack zu tun und liegt auch nicht daran, dass manche Sprachen hinterherhinken. KI-Modelle haben die Bezeichnungen von Bildschirmelementen überwiegend auf Englisch gelernt – geprägt durch Design-Systeme (design systems), die diese Begriffe seit Jahren einheitlich nutzen. Wenn in Ihrer Sprache ein etablierter Begriff existiert, nutzen Sie ihn und setzen Sie bei der ersten Erwähnung die englische Bezeichnung in Klammern dahinter. So teilen Mensch und Modell dasselbe Verständnis. Gibt es kein festes Wort, erfinden Sie kein künstliches Ersatzwort. Beschreiben Sie die Funktion in einem kurzen Satz und behalten Sie den englischen Begriff bei. Dieser englische Begriff ist die Bezeichnung, die Sie in das Prompt einfügen.

Es handelt sich um eine praxistaugliche Form der Übersetzung. Einer Empfangskraft in Jakarta, einem Lehrer in Ulaanbaatar oder einer Ladenbesitzerin in Tunis fehlt es nicht an Verständnis für die Aufgabe. Es fehlt ihnen lediglich das kurze englische Substantiv, das dem Modell bereits als fester Baustein bekannt ist. Sobald dieses Substantiv im Promptsatz steht, hört das KI-Modell auf, eigene Komponenten zu erfinden, und setzt stattdessen das passende Element ein. Die eigene Sprache übernimmt dabei die wesentliche menschliche Aufgabe: Sie legt fest, wozu das Element dient.

Ein Satz, den das Modell nicht eigenmächtig ergänzen muss

Eine präzise Anweisung besteht aus vier Teilen: dem Zweck in Ihrer Sprache, dem englischen Fachbegriff, der auszulösenden Aktion und der Bedingung, die das Element wieder schließt.

Vier Blöcke in einer Reihe: Bedeutung, englischer Name, Aktion und Abbruchbedingung.

Ungenau:

When I press settings, something like a menu should come in from the side.

Präzise:

When I press Settings, open a drawer from the start edge. Close it with Escape, or with a tap outside the panel.
Eine Seitenleiste (drawer) ist ein Panel, das vom Bildschirmrand hineingleitet und die darunterliegende Seite an Ort und Stelle belässt.

Der erklärende Teil kann in Ihrer Sprache stehen. Die Zeile, die Sie in das KI-Tool einfügen, bleibt auf Englisch, da Modelle diese Bezeichnung direkt mit der passenden Komponente verknüpfen. Die Angabe der Startkante (start edge) ist dabei deutlich präziser als der Hinweis auf „rechts“. Auf arabischen oder anderen Seiten mit Schreibrichtung von rechts nach links liegt die Startkante rechts. Eine Seitenleiste (drawer), die sich dort immer von rechts öffnet, würde sich falsch anfühlen. Wer „start edge“ vorgibt, überlässt die Ausrichtung der jeweiligen Schreibrichtung des Systems.

Die Schließbedingung wird besonders häufig vergessen, obwohl sie spätere Fehler vermeidet. Die Anweisung „Open a drawer“ lässt völlig offen, wie das Element wieder verschwindet. Das Modell wählt dann nach dem Zufallsprinzip ein Schließen-Symbol, eine Wischgeste oder gar keine Option – womit die Anwendung auf dem Smartphone unbedienbar werden kann. Definieren Sie den Ausstieg im selben Satz wie den Einstieg: über die Escape-Taste (Escape), ein Tippen außerhalb des Panels oder eine klare Schaltfläche zum Schließen. Eine dieser Optionen reicht aus; alle drei anzubieten ist noch benutzerfreundlicher.

Diese vier Bausteine funktionieren für nahezu jede Struktur, die in dieser Serie behandelt wird. Ein Dialog (dialog) benötigt einen triftigen Grund, um die Interaktion auf der Seite zu unterbrechen, sowie einen klaren Rückweg. Ein Toast (toast) – jene kurze Notiz, die selbsttätig eingeblendet wird und wieder verschwindet – benötigt eine Zeitangabe und darf keinesfalls der einzige Ort sein, an dem Fehler gemeldet werden. Eine Karte (card) muss beschreiben, was in ihr enthalten ist, statt nur ein allgemeines „Karten-Design“ zu fordern. Der Begriff ohne Abbruchbedingung bleibt eine leere Hülle; die Bedingung ohne den passenden Begriff führt zurück zur ungenauen Formulierung des Anfangs.

Zwei Smartphone-Bildschirme: Links unvollständige Formen und ein Fragezeichen, rechts ein sauber an der Kante anliegendes Panel.

Was Sie zu Beginn getrost ignorieren können

Design-Trends bieten eine Fülle von Gestaltungseffekten: Glasoptiken, die den Hintergrund verschwimmen lassen, verschachtelte Raster mit unterschiedlichen Kachelgrößen, seitlich gleidende Bildstreifen oder Hintergründe, die sich beim Scrollen unterschiedlich schnell bewegen. Den passenden englischen Bezeichnungen begegnen Sie später in einer kurzen Übersicht, um sie wiederzuerkennen, falls ein KI-Modell sie anbietet. Für die erste funktionierende Version sind sie jedoch keineswegs erforderlich. Wer vierzig dekorative Effekte studiert, bevor er eine einfache Kopfzeile (header) benennen kann, investiert viel Zeit, ohne danach einen weiteren Bildschirm präzise anleiten zu können.

Beginnen Sie mit der strukturellen Entscheidung, nicht mit der Dekoration. Soll dieser Moment die Nutzer anhalten, die Seite mit ihnen teilen oder sie lediglich informieren? Das sind drei grundlegend verschiedene Muster. Im Alltag verstreicht der Unterschied oft unter dem Sammelbegriff „Popup“. Die englische Fachsprache unterscheidet hier sehr genau – deshalb lohnt es sich, die englischen Substantive zu kennen, selbst wenn Sie in Ihrer eigenen Sprache denken, planen und arbeiten. Sie stellen nicht Ihr Denken auf Englisch um, sondern leihen sich ein präzises Fachwort aus, so wie man in der Küche feststehende Begriffe für bestimmte Werkzeuge verwendet.

Drei Smartphone-Bildschirme für Anhalten, Teilen und Informieren.

Führen Sie eine einfache Liste der Begriffe, die Sie in einer Woche tatsächlich benötigt haben. Fünf Ausdrücke reichen völlig aus. Wenn Sie eine Kopfzeile (header), eine Karte (card) und ein Formular (form) angefordert haben, bilden diese drei Elemente Ihr Arbeitsfundament. Das Nachschlagen von Begriffen, die Sie gar nicht verwenden, macht aus Nachschlagewerken unnötigen Ballast. Der Zweck einer genauen Bezeichnung liegt darin, genau das Wort bereitzustellen, das in Ihrem Satz noch gefehlt hat.

Was sich in der Praxis ändert

Das präzise Benennen von Bildschirmelementen verkürzt die Abstimmung mit dem KI-Modell erheblich. Es vereinfacht auch die Zusammenarbeit im Team mit Personen anderer Sprachherkunft. Wenn zwei Beteiligte auf den Begriff „drawer“ verweisen, meinen beide dieselbe gezielte Unterbrechung: Die eigentliche Arbeit bleibt im Hintergrund sichtbar, das zusätzliche Panel ist temporär, und die Escape-Taste (Escape) blendet es wieder aus. Ohne festen Begriff wird über Geschmacksfragen gestritten; mit dem passenden Begriff geht es um die eigentliche Frage: Ist eine Unterbrechung an dieser Stelle überhaupt gerechtfertigt?

Genau diese Diskussion bringt das Projekt voran. Eine Bezeichnung ist keine reine Verschönerung, sondern eine Entscheidung über die Aufmerksamkeit der Nutzenden. Ein zentraler Dialog (dialog) stoppt das Geschehen auf der Seite. Eine Seitenleiste (drawer) teilt sich den Platz mit der Seite. Eine kurze Notiz am unteren Bildschirmrand unterbricht gar nichts. Wer neu darin ist, Software mithilfe von KI zu erstellen, verbringt die ersten Wochen oft damit, schöne Oberflächen anzufordern. Wertvoll werden die Arbeitswochen dann, wenn man lernt zu steuern, welche Struktur die Nutzung unterbricht und welche nicht.

Bleibt dieses Fachvokabular einer einzelnen Sprache vorbehalten, entstehen Barrieren. Anleitungen erscheinen zuerst dort, wo die Modelle entwickelt werden. Allen anderen wird empfohlen, „einfach zu beschreiben, was man möchte“ – was demokratisch klingt, in der Praxis aber zu Raten auf Seiten der KI führt. Die eigene Vorstellung zu beschreiben bleibt richtig. Wer sie jedoch mit dem etablierten Fachbegriff des Bausteins verbindet, stellt sicher, dass die Anweisung das KI-Modell ohne Missverständnisse erreicht. Eine Schule, eine Praxis oder ein lokales Geschäft kann die Anforderungen in der eigenen Sprache formulieren und anschließend den englischen Kernsatz einfügen, den das Modell verlässlich umsetzt. Das fachliche Denken bleibt lokal; die Bezeichnung des Bausteins nutzt einen gemeinsamen Standard.

Sie benötigen kein umfassendes Lexikon, um Ihre erste Seite zu bauen. Sie brauchen lediglich die gewünschte Form für den nächsten Schritt, ihren englischen Fachbegriff und die Bedingung zum Schließen. Genau diesem Pfad folgt die gesamte Serie: das Grundgerüst einer Seite, die Wege zur Erfassung von Eingaben, die Rückmeldung über erfolgte Aktionen und das richtige Maß an Bewegung. Wer Bildschirmelemente gezielt benennen kann, leitet KI-Modelle in jeder Sprache souverän an – ganz ohne auf lokale Fachwörterbücher warten zu müssen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen