Zum Inhalt springen

Benutzeroberfläche (UI)

oder auch UI, User Interface

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 24.09.2026

Eine Benutzeroberfläche ist die sichtbare und bedienbare Schicht eines Programms oder einer Website. Über sie gibt ein Mensch etwas ein, und über sie meldet das System zurück, was daraus geworden ist. Dazu gehören Buttons, Formularfelder, Menüs, Listen und Hinweistexte, dazu ihre Anordnung und ihr Verhalten in jedem Zustand. Im Alltag steht dafür fast nur die englische Abkürzung UI.

Benutzeroberfläche (UI)

Die sichtbare und bedienbare Schicht eines Programms oder einer Website, über die ein Mensch Eingaben macht und Rückmeldung erhält.
Beispiel: „Die Berechnung stimmt längst, an der Benutzeroberfläche fehlt noch die Anzeige des Ergebnisses.“

Auch: UI, User Interface. GUI bezeichnet die grafische Variante, im Unterschied zu einer Kommandozeile oder einer Sprachsteuerung.

Abgrenzung zur Benutzererfahrung: Die Oberfläche ist ein Teil davon. Eine gut gebaute Oberfläche rettet die Benutzererfahrung nicht, wenn Inhalt oder Ablauf dahinter nicht stimmen.

Woraus eine Benutzeroberfläche besteht

Den Anfang machen die Bedienelemente selbst: Schaltflächen, Eingabefelder, Auswahllisten, Schalter. Dazu kommen die Elemente, die Orientierung geben, also Navigation, Überschriften und Hinweise auf den aktuellen Ort. Der dritte Teil wird leicht vergessen und macht in der Umsetzung die meiste Arbeit: die Zustände. Ein Button sieht anders aus, während der Zeiger darüber steht, während er gedrückt wird, während im Hintergrund gespeichert wird und wenn er gerade nicht benutzbar ist.

Diese Zustände sind der Grund, warum ein Entwurf mit fünf Ansichten in der Entwicklung auf dreißig Varianten anwächst. Wir legen sie deshalb früh fest, am besten gemeinsam mit den Fällen, in denen etwas schiefgeht.

Wo die Oberfläche endet

Die Benutzeroberfläche ist der Ort, an dem Bedienung stattfindet, und damit ein Ausschnitt der Benutzererfahrung. Screen Design bezeichnet die gestalterische Arbeit an genau dieser Oberfläche: Der eine Begriff benennt das Ergebnis, der andere den Weg dorthin. Nach unten grenzt die Oberfläche an die Anwendung, die die eigentliche Arbeit erledigt und von der ein Besucher nichts sieht.

Was eine Oberfläche bedienbar macht

Bedienbar wird eine Oberfläche, wenn jedes Element aussieht wie das, was es tut, wenn es so heißt, wie der Besucher es benennen würde, und wenn auf jede Handlung eine Rückmeldung folgt. Dazu kommt die Größe: Auf dem Telefon muss ein Bedienelement mit dem Daumen zu treffen sein, und Apple nennt in den Human Interface Guidelines 44 Punkte als Mindestmaß.

Fehlt die Rückmeldung, tippt der Besucher ein zweites Mal. Doppelte Bestellungen in Shops gehen häufig darauf zurück und lassen sich mit einem Ladezustand am Button abstellen.

Siehe auch:

Benutzererfahrung (UX)

Das gesamte Erleben eines Menschen im Umgang mit einem Produkt oder Dienst, vom ersten Kontakt bis nach der Nutzung.

#Benutzererfahrung (UX)

Screen Design

Die Gestaltung einzelner Bildschirmansichten: Layout, Typografie, Farbe und Zustände der Bedienelemente.

#Benutzererfahrung (UX)

Zustände von Bedienelementen (Default, Hover, Active, Disabled)

Die verschiedenen Darstellungen, die ein Bedienelement je nach Situation annimmt, um seinen Status erkennbar zu machen.

#Webdesign-Grundlagen

UI-Kit

Sammlung fertiger Oberflächenbausteine für die Gestaltung, meist als Bibliothek im Design-Tool angelegt.

#Webdesign-Grundlagen