UI und UX: Der Unterschied einfach erklärt
UI und UX fallen in fast jedem Website-Angebot, werden aber oft verwechselt. Wir erklären, was die beiden Begriffe bedeuten, wie sie sich unterscheiden, wie Usability und Customer Experience dazu passen – und warum Sie als Auftraggeber beides im Blick behalten sollten.
Inhaltsverzeichnis
- Die Kurzfassung: Oberfläche und Erlebnis
- Was ist UI (User Interface)?
- Was ist UX (User Experience)?
- UI und UX im direkten Vergleich
- Ein Beispiel aus dem Handwerk
- Und was ist Usability? Verwandte Begriffe eingeordnet
- Typische Missverständnisse
- Wer macht was im Website-Projekt?
- Warum der Unterschied für Ihr Unternehmen wichtig ist
- Checkliste: UI- oder UX-Problem?
- Häufige Fragen
- UI (User Interface) ist die Oberfläche, die Besucher sehen und bedienen: Buttons, Menüs, Schriften, Farben, Formulare.
- UX (User Experience) ist das gesamte Erlebnis rund um die Nutzung – vom ersten Eindruck über die Bedienung bis zur Antwort auf die Anfrage.
- Die ISO-Norm 9241-210 beschreibt UX als Wahrnehmungen und Reaktionen, die aus der tatsächlichen oder erwarteten Nutzung entstehen.
- Usability (Gebrauchstauglichkeit) ist ein Teil der UX: Sie beschreibt, wie leicht sich eine Oberfläche bedienen lässt.
- Eine schöne Oberfläche rettet keine schlechte UX – und eine durchdachte UX wirkt ohne saubere Oberfläche unprofessionell. Beides gehört zusammen.
In Angeboten für eine neue Website tauchen die Kürzel ständig auf: „UI/UX-Design inklusive“, „UX-Konzept“, „UI-Kit“. Viele Inhaber nicken mit, ohne genau zu wissen, was dahintersteckt – und ob sie es überhaupt brauchen. Dabei ist der Unterschied schnell erklärt und hilft Ihnen, Angebote zu vergleichen und die richtigen Fragen zu stellen.
In diesem Beitrag geht es um die Begriffe selbst: was UI und UX meinen, wo die Grenze verläuft und wie verwandte Begriffe wie Usability einzuordnen sind. Wie Sie gutes UX-Design konkret auf Ihrer Website umsetzen, zeigen wir im Beitrag UX-Design-Grundlagen für Unternehmenswebsites.
Die Kurzfassung: Oberfläche und Erlebnis
Ein Bild hilft: Stellen Sie sich eine Küche vor. Die UI sind die Fronten, Griffe, Schalter und Farben – alles, was Sie sehen und anfassen. Die UX ist, wie es sich anfühlt, in dieser Küche zu kochen: Liegen die Töpfe dort, wo man sie braucht? Muss man zwischen Herd und Spüle ständig hin und her laufen? Ärgert man sich jeden Tag über die Schublade, die klemmt?
Eine Küche kann wunderschön aussehen und trotzdem unpraktisch sein. Umgekehrt kann eine durchdachte Küche mit lieblosen Fronten billig wirken. Genau so verhält es sich bei Websites.
UI ist das, was Besucher bedienen. UX ist, wie sie die gesamte Begegnung mit Ihrem Unternehmen erleben – auf der Website und darüber hinaus.
Was ist UI (User Interface)?
UI steht für User Interface, auf Deutsch Benutzeroberfläche. Gemeint ist alles, womit ein Mensch interagiert, um ein System zu nutzen. Auf einer Website sind das zum Beispiel:
- Bedienelemente: Buttons, Links, Menüs, Schieberegler, Auswahlfelder
- Formulare: Eingabefelder, Beschriftungen, Fehlermeldungen, Absende-Button
- Gestaltung: Farben, Schriften, Abstände, Icons, Bilder
- Zustände: wie ein Button beim Überfahren, Antippen oder Laden aussieht
- Layout: die Anordnung der Elemente auf Smartphone, Tablet und Desktop
Was UI-Design leistet
UI-Design sorgt dafür, dass die Oberfläche einheitlich, gut lesbar und eindeutig bedienbar ist. Ein Button muss als Button erkennbar sein, Überschriften müssen sich vom Fließtext abheben, und gleiche Dinge sollten überall gleich aussehen. Ergebnis eines UI-Designs sind meist gestaltete Entwürfe (Mockups) und ein Regelwerk mit Farben, Schriften und Komponenten, oft als Styleguide oder UI-Kit bezeichnet.
UI ist dabei nicht nur „Optik“. Auch Kontraste, ausreichend große Klickflächen und verständliche Beschriftungen gehören dazu – also Punkte, die über Barrierefreiheit und Bedienbarkeit entscheiden.
Was ist UX (User Experience)?
UX steht für User Experience, das Nutzungserlebnis. Der Begriff wurde in den 1990er-Jahren vor allem durch den Kognitionswissenschaftler Don Norman bekannt. Gemeinsam mit Jakob Nielsen definierte er ihn für die Nielsen Norman Group sehr weit: User Experience umfasst alle Aspekte der Interaktion eines Endnutzers mit einem Unternehmen, seinen Dienstleistungen und Produkten.
Die internationale Norm ISO 9241-210 formuliert es etwas technischer: UX sind die Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder erwarteten Nutzung eines Systems, Produkts oder einer Dienstleistung entstehen. Wichtig ist das Wort „erwartet“: Das Erlebnis beginnt schon, bevor jemand den ersten Button drückt.
UX beginnt vor dem Besuch und endet nach dem Klick
Für eine Firmenwebsite heißt das: Zur UX gehört nicht nur, ob das Menü verständlich ist. Dazu gehören auch die Fragen,
- ob das Suchergebnis bei Google hält, was es verspricht,
- ob die Seite auf dem Smartphone schnell lädt,
- ob Besucher die Information finden, wegen der sie gekommen sind,
- ob das Kontaktformular verständlich ist und eine Bestätigung zeigt,
- und ob nach der Anfrage tatsächlich jemand zurückruft.
Der letzte Punkt zeigt, warum UX größer ist als Webdesign: Die beste Website hilft wenig, wenn Anfragen tagelang unbeantwortet bleiben. Für den Besucher ist das alles ein Erlebnis.
UI und UX im direkten Vergleich
Die folgende Übersicht stellt die beiden Disziplinen gegenüber. In der Praxis überschneiden sie sich, die Schwerpunkte sind aber klar verschieden.
| Merkmal | UI (User Interface) | UX (User Experience) |
|---|---|---|
| Leitfrage | Wie sieht es aus und wie wird es bedient? | Erreichen Besucher ihr Ziel, und wie fühlt sich das an? |
| Gegenstand | Bildschirmoberfläche, Bedienelemente, Gestaltung | Gesamte Nutzung inklusive Erwartungen, Inhalte, Abläufe |
| Typische Arbeit | Farben, Schriften, Buttons, Layouts, Zustände | Zielgruppen verstehen, Seitenstruktur, Klickwege, Tests |
| Typische Ergebnisse | Mockups, Styleguide, UI-Kit | Personas, Sitemap, Wireframes, Testergebnisse |
| Woran man Probleme erkennt | Unleserlicher Text, unklare Buttons, uneinheitliche Gestaltung | Besucher finden nichts, brechen ab, rufen verwirrt an |
| Zeitpunkt im Projekt | Eher nach dem Konzept | Von Anfang an, auch nach dem Livegang |
Ein Beispiel aus dem Handwerk
Ein Sanitärbetrieb lässt eine neue Website mit Online-Terminanfrage für Wartungen erstellen. Zwei Varianten zeigen den Unterschied:
Variante A: gute UI, schwache UX
Die Seite sieht modern aus, die Farben passen zum Firmenlogo, das Formular ist elegant gestaltet. Aber: Der Wartungstermin ist nur über den Menüpunkt „Service“ zu finden, das Formular fragt eine lange Liste an Angaben ab, darunter die Seriennummer der Heizung, und nach dem Absenden erscheint lediglich eine leere Seite. Ob die Anfrage angekommen ist, weiß niemand. Viele greifen dann doch zum Telefon – oder fragen beim nächsten Betrieb an.
Variante B: gute UX, schwache UI
Der Button „Wartung anfragen“ steht gut sichtbar oben, das Formular fragt nur Name, Telefon, Adresse und Wunschzeitraum ab, und nach dem Absenden kommt eine klare Bestätigung mit dem Hinweis, wann sich der Betrieb meldet. Allerdings: Grauer Text auf hellgrauem Grund ist schwer lesbar, die Buttons sehen auf jeder Seite anders aus, und auf dem Smartphone ragt das Formular über den Rand. Der Ablauf stimmt, aber die Seite wirkt unfertig und kostet Vertrauen.
Die Nielsen Norman Group nutzt ein ähnliches Beispiel: Eine perfekt bedienbare Suchoberfläche für Filme liefert trotzdem eine schlechte User Experience, wenn der gesuchte Film gar nicht in der Datenbank ist. Die Oberfläche ist dann nicht das Problem – das Angebot dahinter schon.
Wir schauen uns Oberfläche und Klickwege gemeinsam an und benennen die wichtigsten Baustellen.
Und was ist Usability? Verwandte Begriffe eingeordnet
Neben UI und UX begegnen Ihnen weitere Begriffe. Die wichtigsten im Überblick:
Usability (Gebrauchstauglichkeit)
Usability beschreibt, wie leicht sich eine Oberfläche bedienen lässt. Jakob Nielsen nennt dafür fünf Qualitätsmerkmale: Erlernbarkeit (komme ich beim ersten Besuch zurecht?), Effizienz (wie schnell erledige ich eine Aufgabe?), Einprägsamkeit (finde ich mich nach einer Pause wieder zurecht?), Fehler (wie viele mache ich, und wie leicht korrigiere ich sie?) und Zufriedenheit (ist die Bedienung angenehm?). Usability ist damit ein Teil der UX – ein wichtiger, aber nicht der einzige.
Customer Experience (CX)
CX meint das Erlebnis über alle Kontaktpunkte hinweg: Website, Telefon, Angebot, Monteur vor Ort, Rechnung, Nachbetreuung. In kleinen Betrieben verschwimmen UX und CX oft, weil dieselben Menschen alles erledigen. Als Faustregel: UX bezieht sich meist auf digitale Produkte, CX auf die gesamte Kundenbeziehung.
Interaction Design und Informationsarchitektur
Interaction Design befasst sich damit, wie eine Oberfläche auf Eingaben reagiert – etwa was beim Klick auf einen Button passiert oder wie ein Menü aufklappt. Informationsarchitektur ordnet Inhalte: Welche Seiten gibt es, wie heißen sie, wie hängen sie zusammen? Beides wird meist zur UX gezählt, liegt aber nah an der UI.
Typische Missverständnisse
- „UX ist das Gleiche wie Design.“ Nein. Zu UX gehören auch Inhalte, Ladezeiten, Abläufe und das, was nach dem Klick passiert. Vieles davon hat mit Gestaltung wenig zu tun.
- „UI ist nur Dekoration.“ Auch falsch. Kontrast, Lesbarkeit und eindeutige Bedienelemente sind Teil der UI und entscheiden mit darüber, ob jemand eine Seite überhaupt nutzen kann.
- „UI/UX ist ein Beruf.“ Der Schrägstrich hat sich in Stellenanzeigen und Angeboten eingebürgert. In größeren Teams sind es aber oft getrennte Rollen; in kleinen Projekten übernimmt eine Person beides.
- „UX ist mit dem Livegang erledigt.“ Gerade nach dem Start zeigt sich, wo Besucher hängen bleiben. UX ist ein laufender Prozess aus Beobachten und Verbessern.
- „Gute UX merkt man.“ Meist ist es umgekehrt: Gute UX fällt nicht auf, weil alles so funktioniert, wie man es erwartet. Schlechte UX bemerkt jeder sofort.
Wenn ein Angebot „UX-Design“ enthält, fragen Sie nach, was konkret geliefert wird: Gibt es ein Gespräch über Zielgruppen, eine geplante Seitenstruktur, Entwürfe ohne Farbe (Wireframes) oder einen Test mit echten Nutzern? Wenn nur ein fertiges Layout entsteht, ist das UI-Design – das ist legitim, sollte aber auch so heißen.
Wer macht was im Website-Projekt?
In einem typischen Projekt folgt die Arbeit grob dieser Reihenfolge. Die Grenzen zwischen UX und UI sind fließend, und oft arbeiten beide Seiten parallel:
- Verstehen (UX)Wer sind die Besucher, was wollen sie, welche Fragen stellen sie am Telefon? Hier fließen Gespräche, Daten aus der Search Console und Erfahrungen aus dem Vertrieb ein.
- Strukturieren (UX)Welche Seiten braucht es, wie heißen die Menüpunkte, welcher Weg führt zur Anfrage? Ergebnis ist eine Seitenstruktur.
- Skizzieren (UX)Einfache Entwürfe ohne Farben und Bilder zeigen, was wo steht. Mehr dazu im Beitrag Wireframe, Mockup, Prototyp.
- Gestalten (UI)Farben, Schriften, Buttons und Bilder werden festgelegt und auf alle Seitentypen übertragen.
- Umsetzen (UI und Technik)Das Design wird programmiert oder im Baukasten bzw. CMS gebaut – inklusive aller Zustände und Bildschirmgrößen.
- Prüfen und verbessern (UX)Testpersonen bedienen die Seite, Auswertungen zeigen Abbrüche. Wie das mit kleinem Budget geht, steht im Beitrag zum Usability-Test.
Bei kleineren Firmenwebsites ist es normal, dass ein Team oder sogar eine Person alle Schritte übernimmt. Entscheidend ist nicht die Rollenbezeichnung, sondern dass die UX-Schritte nicht übersprungen werden.
Warum der Unterschied für Ihr Unternehmen wichtig ist
Für Inhaber ist der Unterschied vor allem bei zwei Gelegenheiten hilfreich: beim Vergleich von Angeboten und bei der Fehlersuche.
Beim Angebotsvergleich sehen Sie schneller, ob ein Anbieter nur gestaltet oder auch konzipiert. Ein günstiges Angebot ohne Konzeptphase ist nicht automatisch schlecht – etwa wenn Ihre Struktur schon steht. Wenn aber niemand nach Ihren Kunden fragt, fehlt meist die UX-Arbeit.
Bei der Fehlersuche hilft die Unterscheidung, die richtige Ursache zu finden. Wenn Besucher sagen „Die Seite sieht altbacken aus“, liegt das Problem eher in der UI. Wenn sie sagen „Ich habe Ihre Telefonnummer nicht gefunden“ oder „Ich wusste nicht, ob Sie auch in meinem Ort arbeiten“, liegt es in der UX. Eine neue Optik löst das zweite Problem nicht.
Notieren Sie zwei Wochen lang, welche Fragen Kunden am Telefon stellen, die eigentlich auf der Website beantwortet sein sollten. Diese Liste ist eine der günstigsten UX-Analysen überhaupt – und eine gute Grundlage für jedes Website-Gespräch.
Checkliste: UI- oder UX-Problem?
Mit diesen Fragen ordnen Sie Schwächen Ihrer Website schnell ein:
- Sind Texte gut lesbar und Buttons eindeutig als Buttons erkennbar? (UI)
- Sehen gleiche Elemente auf allen Seiten gleich aus? (UI)
- Funktioniert die Darstellung auf Smartphone und Desktop gleich gut? (UI)
- Verstehen Besucher in wenigen Sekunden, was Sie anbieten und für wen? (UX)
- Finden sie die Information, wegen der sie gekommen sind, ohne lange zu suchen? (UX)
- Ist der Weg zur Anfrage kurz und das Formular auf das Nötigste beschränkt? (UX)
- Bekommen Besucher nach dem Absenden eine klare Bestätigung? (UX und UI)
- Wird jede Anfrage zeitnah beantwortet? (UX über die Website hinaus)
Häufige Fragen
Brauche ich für eine kleine Firmenwebsite überhaupt UX-Design?
Ja, allerdings nicht im Umfang eines Software-Projekts. Für eine Website mit fünf bis fünfzehn Seiten reichen oft ein ausführliches Gespräch über Zielgruppen und häufige Kundenfragen, eine durchdachte Seitenstruktur und ein kurzer Test mit zwei, drei Personen aus Ihrem Umfeld. Wichtig ist, dass diese Schritte vor der Gestaltung passieren und nicht erst, wenn das Design fertig ist.
Kann ich UI und UX getrennt beauftragen?
Grundsätzlich ja. Manche Unternehmen lassen sich erst ein Konzept mit Seitenstruktur und Wireframes erstellen und geben die Gestaltung später an jemand anderen. Das kann sinnvoll sein, wenn Sie Angebote vergleichen wollen. Achten Sie dann darauf, dass das Konzept so dokumentiert ist, dass ein anderer Dienstleister damit weiterarbeiten kann, und dass beide Seiten miteinander sprechen dürfen.
Woran erkenne ich, ob meine aktuelle Website eine gute UX hat?
Ein erster Hinweis sind wiederkehrende Fragen am Telefon, die eigentlich auf der Website beantwortet sein sollten. Weitere Anzeichen liefern Webanalyse-Daten, etwa Seiten mit vielen Ausstiegen oder abgebrochene Formulare. Am aussagekräftigsten ist es, Menschen aus Ihrer Zielgruppe bei konkreten Aufgaben zuzuschauen, zum Beispiel „Finden Sie heraus, ob die Firma in Ihrem Ort arbeitet“.
Gehört Barrierefreiheit zu UI oder zu UX?
Zu beidem. Ausreichende Kontraste, gut lesbare Schriften und große Klickflächen sind Aufgaben der UI. Ob sich eine Seite mit der Tastatur bedienen lässt, ob Formulare verständlich sind und ob Inhalte klar gegliedert sind, betrifft die UX und die technische Umsetzung. Barrierefreiheit verbessert in der Regel die Nutzung für alle Besucher, nicht nur für Menschen mit Einschränkungen.
Quellen
- Nielsen Norman Group: The Definition of User Experience (UX) – Don Norman und Jakob Nielsen
- Nielsen Norman Group: Usability 101 – Introduction to Usability – fünf Qualitätsmerkmale von Usability
- Wikipedia: User experience (mit Zitat der Definition aus ISO 9241-210) – Überblick und Begriffsgeschichte
- Nielsen Norman Group: UX vs. UI (Video, 2021)
H. Kiassif leitet das Marketing bei NEUZEITWERBER und betreut Websites, Kampagnen und Anfragestrecken für Betriebe aus Handwerk und Mittelstand.
