Was ist UI (User Interface)?

Was UI bedeutet

UI ist die Abkürzung für User Interface, auf Deutsch Benutzeroberfläche oder kurz Oberfläche. Wikipedia definiert sie als den Raum, in dem die Interaktion zwischen Mensch und Maschine stattfindet.

Dieser Raum ist nicht immer ein Screen. Die Interaction Design Foundation zählt drei Arten: grafische Oberflächen, sprachgesteuerte Oberflächen und gestenbasierte Oberflächen. Mit Siri oder Alexa zu sprechen, heißt auch, eine Oberfläche zu nutzen.

Oberflächen auf Screens haben eine lange Geschichte. Laut der Zeitleiste in der Wikipedia entwickelten Forschende bei Xerox PARC 1970 das WIMP-Paradigma. Der Name steht für Window, Icon, Menu und Pointer.

Ich arbeite mit grafischen Oberflächen: Websites, mobile Apps, Verwaltungsoberflächen. Deshalb ist auch das Beispiel auf dieser Seite ein Screen.

Die Teile eines Screens

1. Navigation

Zeigt, wo Sie sind und wohin Sie gehen können. Der gewählte Reiter ist fett, damit der Nutzer nicht die Orientierung verliert.

2. Formularfeld

Nimmt Informationen vom Nutzer auf. Die Beschriftung steht über dem Feld und verschwindet beim Tippen nicht. Der kurze Hinweis darunter sagt, wo die Nummer auf der Rechnung steht.

3. Button

Startet eine Aktion. Die Beschriftung sagt, was beim Drücken passiert. Betrag und Aktion statt „Weiter“ erleichtern dem Nutzer die letzte Kontrolle.

4. Statusmeldung

Sagt dem Nutzer, was das System getan hat. Er muss nicht raten, ob die Zahlung durch ist oder wohin der Beleg ging.

Warum das wichtig ist

Nutzer lernen ein Produkt über seine Oberfläche kennen. Wie gut das System dahinter auch arbeitet: Findet man den Button nicht oder versteht man die Meldung nicht, bleibt die Aufgabe des Nutzers unerledigt.

Die erste von Jakob Nielsens 10 Usability-Heuristiken sagt genau das: Das Design soll Nutzer mit passendem Feedback in angemessener Zeit darüber informieren, was passiert. Der vierte Teil oben ist diese Heuristik auf dem Screen. Alle Heuristiken mit Beispielen finden Sie auf der Seite zu Nielsens 10 Heuristiken.

Auch Fehlermeldungen gehören zur Oberfläche. Nach Nielsens neunter Heuristik ist eine Fehlermeldung in einfacher Sprache geschrieben, enthält keinen Fehlercode und schlägt eine Lösung vor. Der Unterschied zwischen „Fehler 500“ und „Ihre Kundennummer hat 8 Ziffern“ entscheidet, ob der Nutzer beim zweiten Versuch Erfolg hat.

Statusmeldungen sind auch für die Barrierefreiheit wichtig. Das Erfolgskriterium 4.1.3 der WCAG 2.2 (Stufe AA) verlangt, dass solche Meldungen assistive Technologien wie Screenreader erreichen, ohne den Fokus zu verschieben.

Die Prüfung ist einfach: Liest ein Screenreader den Text „Zahlung eingegangen“ auf dem Screen auch vor? Ein UX Audit enthält solche Kernprüfungen der WCAG 2.2.

Der Unterschied zu UX

UI ist die Fläche, die der Nutzer berührt. UX (User Experience) umfasst alles, was der Nutzer mit dem Unternehmen, seinen Diensten und Produkten erlebt. Don Norman und Jakob Nielsen erklären es an einer Filmseite: Auch wenn der Suchscreen hervorragend ist, ist das Erlebnis schlecht, wenn der gesuchte Film nicht in der Datenbank ist. Den Unterschied erkläre ich ausführlich im Ratgeber UI und UX.

Verwandte Begriffe

Eine Oberfläche beginnt meist als grobe Skizze, dem Wireframe. Wird die Skizze klickbar, ist sie ein Prototyp.

Usability misst, wie leicht die Oberfläche zu bedienen ist. Welches Verhalten ein Nutzer von einem Screen erwartet, erklärt sein mentales Modell.