UX-Design gestaltet das gesamte Nutzungserlebnis einer Website, UI-Design die sichtbare Oberfläche, auf der dieses Erlebnis stattfindet. Der Unterschied zwischen UI und UX lässt sich mit einem Haus vergleichen: Die User Experience ist der Grundriss mit Wegen und Räumen, das User Interface sind Wände, Licht und Beschilderung. Gute Websites brauchen beides.
Was ist der Unterschied zwischen UI und UX?
Die Norm ISO 9241-210 beschreibt User Experience als Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen oder erwarteten Nutzung eines Produkts, Systems oder einer Dienstleistung entstehen. Die Nielsen Norman Group fasst es breiter: Es geht um alle Aspekte der Interaktion mit einem Unternehmen, seinen Diensten und Produkten. Bei einer Website umfasst UX also Fragen wie: Finde ich, was ich suche? Verstehe ich das Angebot? Komme ich mit wenigen Schritten zur Anfrage?
UI-Design liefert die sichtbare Antwort darauf. Dazu zählen Raster, Schriftgrößen, Farben, Buttons, Formularfelder, Icons und die Zustände dazwischen, etwa wenn ein Feld fehlerhaft ausgefüllt wurde. Eine schöne Oberfläche auf einer verwirrenden Struktur bleibt verwirrend. Eine gute Struktur in einer lieblosen Oberfläche wirkt dagegen wenig vertrauenswürdig.
Wie läuft ein Projekt mit UX und UI ab?
Ein typischer Ablauf beginnt mit dem Klären von Zielen und Zielgruppen und führt über Struktur und Skizzen zur Gestaltung. Dazwischen liegen Tests mit echten Nutzern, die Schwächen zeigen, bevor Geld in die Umsetzung fließt.
| Phase | Schwerpunkt | Typische Ergebnisse |
|---|---|---|
| Verstehen | UX | Ziele, Zielgruppen, wichtigste Aufgaben, Analyse vorhandener Daten |
| Strukturieren | UX | Seitenstruktur, Nutzerwege, Wireframes |
| Testen | UX | Prototyp, Beobachtung von Testpersonen, Liste der Schwächen |
| Gestalten | UI | Stilrichtung, Farben, Typografie, fertige Seitenentwürfe |
| Systematisieren | UI | Komponenten wie Buttons und Formulare, Zustände, Abstände |
| Umsetzen | UI und UX | Entwicklung, Prüfung gegen Entwurf, Verbesserung nach dem Start |
Bei kleinen Projekten laufen die Phasen schlanker. Eine Gestalterin oder ein Gestalter übernimmt beides, die Tests beschränken sich auf drei bis fünf Personen. Das reicht oft, um die größten Hürden zu finden.
Wie schreiben Sie ein Briefing für UX und UI?
Ein gutes Briefing beantwortet wenige Fragen klar. Erstens: Was soll die Website für Ihr Unternehmen leisten, zum Beispiel Anfragen, Buchungen oder Bestellungen? Zweitens: Wer besucht sie, und mit welcher Frage? Drittens: Welche Aufgaben müssen schnell gelingen? Viertens: Welche Daten gibt es bereits, etwa Kundenfragen, Auswertungen oder Beschwerden?
Ergänzen Sie Einschränkungen wie Budget, Zeitplan, vorhandenes CMS und Markenvorgaben sowie zwei bis drei Beispiele, die Ihnen gefallen oder nicht gefallen, jeweils mit einer Begründung. So erhält das Designteam keine Geschmacksvorgabe, sondern Kriterien.
Woran erkennen Sie gute UX und gutes UI?
Die Nielsen Norman Group veröffentlicht zehn Heuristiken für Usability, etwa Rückmeldung zum Systemzustand, Konsistenz und Fehlervermeidung. Sie eignen sich als Prüfliste für Ihre eigene Seite. Gute UI zeigt sich an Lesbarkeit, eindeutigen Schaltflächen und verständlichen Fehlermeldungen. Gute UX zeigt sich daran, dass Besucher ohne Anleitung ans Ziel kommen.
- Ziel und Zielgruppe der Website in zwei Sätzen beschrieben
- Wichtigste drei Aufgaben der Besucher benannt
- Seitenstruktur und Wireframes vor dem Farbentwurf abgestimmt
- Prototyp mit drei bis fünf Personen getestet
- Buttons, Formulare und Fehlermeldungen einheitlich gestaltet
- Erfolgskriterien vor dem Start festgelegt
Fazit: Erst Struktur, dann Oberfläche
UX und UI ergänzen sich: Die Struktur entscheidet, ob Besucher ankommen, die Oberfläche, ob sie sich dort wohlfühlen. Wie große Projekte das in einem wiederverwendbaren System festhalten, erklärt unser Beitrag Was ist ein Design-System?. Weitere Prinzipien finden Sie in Was macht preisgekröntes Webdesign aus?. Wenn Sie Ihre Website überarbeiten möchten, sehen Sie sich unser Grafik- und UI-Design an oder schildern Sie uns Ihr Vorhaben.
