User Interface (UI)

Ein User Interface (UI) ist die Schnittstelle, über die Menschen ein System bedienen und Rückmeldungen erhalten. Bei Websites und Apps gehören dazu beispielsweise Navigation, Buttons, Formulare und Statusanzeigen. UI-Design gestaltet diese Elemente und ihr Verhalten so, dass die angebotenen Aufgaben verständlich ausführbar sind.

User Interface (UI) im Detail

Ein Button besteht aus mehr als Farbe und Form. Seine Beschriftung kündigt eine Handlung an; sein Zustand zeigt, ob sie gerade möglich ist. Nach der Eingabe braucht es eine erkennbare Rückmeldung. Gestalte deshalb Normalzustand, Fokus, Laden, Erfolg und Fehler zusammen.

Visuelle Hierarchie hilft, Inhalte und Handlungen einzuordnen. Wiederkehrende Elemente sollten eine nachvollziehbare Bedeutung behalten. Markencharakter kann sich in Typografie, Farbe, Bildsprache und Bewegung ausdrücken, ohne Bedienhinweise zu verdrängen. Animationen brauchen eine konkrete Aufgabe und Rücksicht auf unterschiedliche Nutzungsvoraussetzungen.

Ein Design-System kann gemeinsame Komponenten und Regeln bereitstellen. Es ersetzt nicht die Prüfung ihrer Kombination im jeweiligen Ablauf. Eine einzelne zugängliche Komponente garantiert noch kein zugängliches Formular; Beschriftung, Reihenfolge, Fehlermeldungen und Fokusführung wirken zusammen.

Creative Engineering führt Gestaltung und technische Ausführung bis zum tatsächlichen Ergebnis zusammen. Ein freigegebener Entwurf muss sich auch mit echten Inhalten, langen Übersetzungen, kleinen Bildschirmen und Fehlerfällen bewähren. Prüfe die Bedienung am fertigen Produkt und dokumentiere offene Grenzen.

Beispiele

Hypothetisches Anwendungsbeispiel

Ein Anfrageformular zeigt nach dem Absenden sofort einen grünen Haken, obwohl die Speicherung noch läuft. Das Team trennt den Ladezustand von der bestätigten Annahme und ergänzt eine verständliche Fehlermeldung. Danach wird der gesamte Ablauf per Tastatur und auf einem schmalen Bildschirm geprüft.

Wichtige Punkte

Elemente und Zustandsänderungen gemeinsam gestalten.
Beschriftung und tatsächliche Handlung aufeinander abstimmen.
Wiederverwendbare Komponenten im jeweiligen Ablauf testen.
Markenausdruck, Verständlichkeit und Zugänglichkeit zusammenführen.

Anwendung im Marketing-Alltag

Prüfe wichtige Handlungen mit normalen, langen und fehlenden Inhalten. Teste alle relevanten Zustände und Bedienweisen bis zur richtigen Rückmeldung.

Sinnvolle Messgrößen

Verständliche Bedienung

Beobachten, ob Beschriftungen, Zustände und Rückmeldungen richtig verstanden werden.

Korrekte Abläufe

Eingaben und sichtbare Bestätigungen mit der tatsächlichen Verarbeitung abgleichen.

Konsistenz und Zugänglichkeit

Komponenten in relevanten Kombinationen, Größen und Bedienweisen prüfen.

Häufige Fehler

Nur statische Ansichten freigeben und Zustände auslassen.
Eine Bestätigung zeigen, bevor der entsprechende Vorgang bestätigt ist.
Einzelne Scores oder Komponenten als vollständigen Qualitätsnachweis behandeln.

Quellen und Einordnung

Nielsen Norman Group: The Definition of User Experience
Grundlegende Einordnung von UX und Abgrenzung zu Benutzeroberfläche und Gebrauchstauglichkeit.
W3C: How to Meet WCAG
Technische Prüfkriterien für zugängliche Webinhalte; keine rechtliche Freigabe einer bestimmten Website.

Häufige Fragen zu User Interface (UI)

Nein. Zur Schnittstelle gehören auch Eingaben, Zustände und Rückmeldungen. Neben grafischen Oberflächen existieren beispielsweise Sprachschnittstellen.

Begriffsempfehlungen werden geladen…

Alle Begriffe

User Interface (UI)

User Interface (UI) im Detail