Startseite > Lexikon > Web, UX & Conversion > User Interface

User Interface

Buttons, Menüs, Formulare, Fehlermeldungen: Das User Interface ist alles, was du auf einer Website anklickst, antippst oder liest. Und oft der Grund, warum Besucher doch nicht kaufen.

Auch bekannt alsBenutzeroberflächeBenutzungsschnittstelleBenutzerschnittstelle

5 Min

Lesezeit

28.10.2026

Letzte Aktualisierung

Was ist ein User Interface?

Stell dir dein Auto vor. Lenkrad, Pedale, Tacho, Knöpfe — das ist die Stelle, an der du mit der Technik sprichst. Den Motor siehst du nicht. Genau das ist das User Interface bei Websites und Apps: die Schicht, über die Menschen ein System bedienen.

Zum UI gehört alles, was man sieht, anklickt und liest:

Buttons, Links und Menüs
Formulare und Eingabefelder
Icons, Farben und Schriften
Texte in der Oberfläche, etwa Button-Beschriftungen und Fehlermeldungen
Rückmeldungen wie „Danke, gesendet“ oder ein Ladekreis

In der Norm DIN EN ISO 9241-110 heißt das UI Benutzungsschnittstelle: sinngemäß alle Bestandteile eines interaktiven Systems, die Informationen und Bedienelemente bereitstellen, damit Nutzer eine Aufgabe erledigen. Auch Sprachassistenten und Gesten zählen dazu — nicht nur Bildschirme.

UI und UX: der Unterschied

UI und User Experience werden ständig in einen Topf geworfen. Die Nielsen Norman Group trennt sauber: UX umfasst alle Aspekte, wie ein Mensch mit einem Unternehmen, seinen Diensten und Produkten umgeht. Das UI ist nur ein Teil davon.

Wie sieht der Button aus?

Findet der Kunde, was er sucht?

Wie groß ist das Formular?

Kommt die Bestellung pünktlich an?

Welche Farbe hat der Fehlerhinweis?

Hilft der Support, wenn was schiefgeht?

NN/g nennt ein schönes Beispiel: Eine perfekte Suchoberfläche für Filme bringt nichts, wenn die Datenbank nur Filme großer Studios enthält. Das UI ist top, das Erlebnis trotzdem mies. Ein schönes UI rettet kein schlechtes Angebot.

Welche Regeln gelten für gute Oberflächen?

Geschmack ist verhandelbar, ein paar Mindestwerte nicht. Die wichtigsten kommen von Apple, Google und den Web-Richtlinien für Barrierefreiheit (WCAG):

Regel

Wert

Touch-Ziel Apple (Standard)

44 × 44 pt

Touch-Ziel Android

mind. 48 × 48 dp

Klickziel WCAG 2.2 (AA)

mind. 24 × 24 px

Textkontrast (AA)

mind. 4,5 : 1

Kontrast große Schrift

mind. 3 : 1

Punkt (pt), dp und CSS-Pixel sind geräteunabhängige Maße, keine echten Bildschirmpixel. Bei Apple sind 44 pt übrigens der Standard, das Minimum liegt bei 28 pt. Als große Schrift gilt bei WCAG etwa ab 18 Punkt normal oder 14 Punkt fett.

Beispiele aus der Praxis

Kleine UI-Details haben messbare Folgen. Zwei Beispiele, eins aus einem echten Projekt, eins aus Studiendaten:

Case A · Nachrichtenseite

Yahoo! JAPAN News stoppt springende Texte

+15,1 %

Seitenaufrufe je Sitzung

+13,3 %

Sitzungsdauer

Platz fürs Titelbild reserviert, Layout springt nicht mehr

Vorher-nachher-Vergleich, kein A/B-Test: Die Werte stiegen danach, nicht nachweislich nur deshalb.

Case B · Onlineshops

Der durchschnittliche Checkout ist zu lang

14,88

Formularfelder im Schnitt

7–8

Felder wären genug

Fast doppelt so viele Felder wie nötig

Baymard Institute, US-Shops. 17 % der Abbrecher nannten einen zu langen oder komplizierten Checkout.

Häufige Fehler

Fehler 1 · Winzige Klickflächen auf dem Handy

Am Desktop sieht der kleine „Weiter“-Link elegant aus. Am Handy trifft ihn niemand. Teste jede Seite mit dem Daumen, nicht mit der Maus.

Fehler 2 · Hellgrau auf Weiß

Zarte Grautöne wirken edel, scheitern aber oft am Kontrast von 4,5 : 1. Draußen in der Sonne liest das dann keiner mehr. Ein Kontrast-Checker zeigt dir in Sekunden, ob es reicht.

Fehler 3 · Jeder Button sieht anders aus

Mal blau, mal orange, mal „Absenden“, mal „Los geht's“. Gleiche Aktionen brauchen gleiche Gestaltung und gleiche Wörter. Konsistenz gehört zu den zehn Usability-Heuristiken der Nielsen Norman Group.

Fehler 4 · Schön mit gut verwechseln

Ein Redesign poliert die Optik, das eigentliche Problem bleibt. Beim Baymard Institute brachen 40 % der Käufer wegen unerwarteter Zusatzkosten ab — das löst kein neuer Button, sondern eine ehrliche Preisangabe.

So verbesserst du dein UI

Daumen-Test: Alle wichtigen Buttons am Handy mit einer Hand bedienen.
Kontrast prüfen: Texte und Buttons mit einem Kontrast-Checker testen.
Formulare kürzen: Jedes Feld streichen, das du nicht wirklich brauchst.
Einheitlich bleiben: Ein Button-Stil, eine Wortwahl für dieselbe Aktion.
Beobachten: Fünf echte Menschen eine Aufgabe erledigen lassen und zuschauen.

Häufige Fragen

Was ist der Unterschied zwischen UI und UX?

Das UI ist die Oberfläche: Buttons, Menüs, Formulare, Texte. UX ist das gesamte Erlebnis mit einem Produkt oder Unternehmen, vom ersten Besuch bis zum Support. Ein gutes UI ist Teil einer guten UX, garantiert sie aber nicht.

Wie groß müssen Buttons auf dem Handy sein?

Apple setzt 44 × 44 Punkt als Standard, Android empfiehlt mindestens 48 × 48 dp. Die WCAG 2.2 verlangen für Stufe AA mindestens 24 × 24 CSS-Pixel oder genug Abstand. Größer ist fast immer besser.

Welcher Farbkontrast ist nötig?

Für normalen Text mindestens 4,5 : 1, für große Schrift mindestens 3 : 1 — das ist die Stufe AA der WCAG. Apple und Android übernehmen dieselben Werte.

Welche Tools brauche ich für UI-Design?

Für Entwürfe und Prototypen sind Figma, Sketch oder Penpot verbreitet. Für den Kontrast reicht ein kostenloser Kontrast-Checker. Websites baust du dann zum Beispiel mit WordPress und Elementor.

Stimmt es, dass Nutzer in 50 Millisekunden über eine Website urteilen?

Teilweise. Eine Studie von 2006 zeigte, dass Menschen die optische Anmutung einer Seite nach 50 Millisekunden ähnlich bewerten wie nach einer halben Sekunde. Über Kauf oder Vertrauen sagt das noch nichts.

Quellen