Was ist ein User Interface (UI)?

MDN beschreibt das User Interface als alles, was die Interaktion zwischen Mensch und Maschine ermöglicht. In der Informatik kann das eine Tastatur, ein Bildschirm oder ein Programm sein, bei Software eine Kommandozeile, eine Webseite oder ein Formular. Im Deutschen sind UI, User Interface und Benutzeroberfläche gebräuchlich.

Die Nielsen Norman Group erklärt den Unterschied zur UX mit einem Beispiel. Eine Website mit Filmkritiken kann eine perfekte Oberfläche für die Filmsuche haben und trotzdem eine schlechte Erfahrung bieten, wenn jemand einen Independent-Film sucht und die Datenbank nur Filme der großen Studios enthält. Die Oberfläche ist ein wichtiger Teil der Erfahrung, die Erfahrung umfasst aber den gesamten Kontakt mit dem Unternehmen, seinen Leistungen und Produkten. Usability ist laut NN/g eine Eigenschaft des Interfaces: ob es leicht zu lernen, effizient und angenehm zu bedienen ist.

Ein Web-Interface besteht aus Elementen, die der Browser aus dem HTML und CSS der Seite zeichnet: Texte, Bilder, Links, Buttons, Menüs und Formularfelder. Jedes Element hat ein Aussehen und reagiert, wenn jemand darauf klickt, es antippt oder etwas eingibt.

Damit Menschen diese Elemente nutzen können, gibt es messbare Anforderungen. Die WCAG 2.2 des W3C verlangen auf Stufe AA einen Kontrast von mindestens 4,5:1 zwischen normalem Text und Hintergrund, bei großem Text 3:1. Ziele, die man anklickt oder antippt, sollen mindestens 24 mal 24 CSS-Pixel groß sein. Ausnahmen gelten etwa für einen Link im Fließtext oder für ein kleines Ziel mit genug Abstand ringsum.

Zwei der Core Web Vitals messen, wie sich das Interface verhält. INP misst, wie lange die Seite braucht, um auf Interaktionen wie einen Klick oder ein Antippen zu reagieren. Laut web.dev sind 200 Millisekunden oder weniger ein guter Wert. CLS misst, wie stark sich Elemente beim Laden verschieben, gut sind 0,1 oder weniger.

Das Interface entscheidet, ob man tun kann, wofür man gekommen ist: lesen, einen Link finden, ein Formular ausfüllen oder kaufen. Ein Button mit zu wenig Kontrast oder zu klein für den Finger wird zum Hindernis, auch wenn Inhalt und Angebot gut sind.

Für SEO zählt es indirekt. Google nennt die Nutzbarkeit von Inhalten unter den Faktoren, die es berücksichtigt: Wenn die übrigen Signale etwa gleich sind, kann besser zugänglicher Inhalt besser abschneiden. Als Beispiel nennt Google mobilfreundliche Seiten, die schnell laden.

Auf zds.es haben wir das am 16. Oktober 2026 auf drei Glossarseiten gemessen, mit einer Browserbreite von 390 Pixeln. Der Haupttext, weiß auf Dunkelblau, hat einen Kontrast von 17,5:1, der Button „Prüfung anfragen“ 4,91:1. Zwei Elemente lagen unter 4,5:1: die grauen Nebentexte wie Brotkrumen-Navigation und Prüfdatum mit 3,68:1 und der Button „Alle akzeptieren“ im Cookie-Hinweis mit 3,75:1. Nachdem ihre Farben am selben Tag geändert wurden, liegen sie bei 6,82:1 und 4,91:1, und alle gemessenen sichtbaren Texte erreichen den Mindestwert.

• Den Kontrast von Texten und Buttons mit einem Werkzeug messen und mit den 4,5:1 der WCAG vergleichen.
• Buttons und Icons mindestens 24 mal 24 CSS-Pixel groß machen oder genug Abstand lassen.
• Für dieselbe Funktion auf der ganzen Website dasselbe Aussehen verwenden.
• Platz für Bilder und Anzeigen reservieren, damit die Seite beim Laden nicht springt.
• Das Interface auf dem Smartphone testen, wo es mit dem Finger bedient wird.

• UI und UX als Synonyme verwenden.
• Grauen Text auf dunklem oder hellem Hintergrund setzen, ohne den Kontrast zu messen.
• Buttons und Icons auf dem Smartphone zu klein oder zu dicht nebeneinander anlegen.
• Elemente beim Laden der Seite verrutschen lassen.
• Das Interface nur nach dem Aussehen beurteilen, ohne zu prüfen, ob es sich bedienen lässt.