Was ist UX? Was ist UI?
Die Grundlagen: UX und UI definieren, den Unterschied verstehen und begreifen, warum beides entscheidend ist für Software, die Menschen wirklich gerne benutzen.
- UX (User Experience) und UI (User Interface) klar definieren können
- Den Unterschied zwischen UX und UI mit konkreten Beispielen erklären
- Verstehen, warum beide Disziplinen für Entwickler relevant sind
- Reibungspunkte in einem UI-Flow identifizieren
- Ein Login-Formular mit besserer UI-Qualität ausliefern
Die zentrale Frage
Hast du jemals eine App benutzt und dich dabei frustriert gefühlt, ohne genau zu wissen warum? Vielleicht hat ein Formular deine Eingabe verloren, nachdem du auf „Zurück" gedrückt hast. Vielleicht sah ein Button klickbar aus, war es aber nicht. Vielleicht konntest du eine Funktion einfach nicht finden, obwohl du sicher warst, dass sie irgendwo existiert.
Dieses Gefühl – diese Reibung – ist genau das, was UX- und UI-Design verhindern sollen. Als Entwickler kontrollierst du bereits die wichtigste Schicht eines Produkts: die Logik, die Daten, das System. Aber was Nutzer anfassen, sehen und spüren, ist das Interface – und diese Schicht hat ihre eigenen Regeln, ihr eigenes Handwerk und ihre eigene Disziplin.
Theorie
UX – User Experience Design
UX steht für User Experience (Nutzererfahrung). Es ist die Praxis, die Gesamterfahrung zu gestalten, die eine Person beim Umgang mit einem Produkt hat. UX geht nicht darum, wie etwas aussieht – sondern darum, wie etwas funktioniert, aus der Perspektive des Nutzers.
Was versucht der Nutzer zu erreichen?
UX beginnt mit dem Ziel des Nutzers, nicht mit der Funktion des Systems. Ein Nutzer will keine „Passwortzurücksetzung" – er will wieder Zugang zu seinem Konto.
Welche Schritte muss er dafür unternehmen?
Jeder unnötige Schritt ist Reibung. Gute UX reduziert den Weg zwischen Nutzerwunsch und Ergebnis auf das absolut Notwendige.
Wo verliert er den Überblick oder bricht ab?
UX-Arbeit macht Abbruchpunkte sichtbar, bevor sie entstehen – durch Research, Prototypen und Tests.
Reagiert das System logisch?
Das System muss auf Nutzeraktionen so antworten, wie der Nutzer es erwartet – nicht so, wie der Entwickler die Logik gebaut hat.
UX-Arbeit ist im fertigen Produkt weitgehend unsichtbar. Eine gut gestaltete Erfahrung fühlt sich selbstverständlich und natürlich an – weil jemand sehr viel Zeit damit verbracht hat, sie genau so zu gestalten.
User Journey: Passwort zurücksetzen
Loginseite aufrufen
„Passwort vergessen" klicken
E-Mail-Adresse eingeben
Reibungspunkt: Welche E-Mail?
E-Mail erhalten & Link klicken
Reibungspunkt: Link läuft ab
Neues Passwort setzen
Reibungspunkt: Unklare Anforderungen
Erfolg
UI – User Interface Design
UI steht für User Interface (Benutzeroberfläche). Es ist die Praxis, die visuelle und interaktive Schicht zu gestalten, die Nutzer direkt berühren und sehen: Buttons, Formulare, Typografie, Farben, Abstände, Icons, Layouts.
Wirkt der Button klickbar?
Buttons müssen nach Buttons aussehen – durch Farbe, Tiefe, Cursor-Verhalten und klare Beschriftung.
Ist der Text lesbar?
Schriftgröße, Kontrast und Zeilenhöhe bestimmen, ob Nutzer Text mühelos lesen können oder sich anstrengen müssen.
Lenkt das Layout den Blick?
Visuelles Gewicht, Abstände und Positionierung steuern, was der Nutzer zuerst wahrnimmt – und was als Nächstes.
Ist der Stil konsistent?
Inkonsistente Farben, Abstände oder Typografie erzeugen Unsicherheit. Konsistenz schafft Vertrauen.
Wenn UX der Grundriss eines Gebäudes ist, ist UI die Inneneinrichtung – die Materialien, das Licht, die Beschilderung.
Vergleichsbeispiel
Gleiches Formular – völlig unterschiedliche UI-Qualität
Beide Versionen unten haben denselben UX-Flow: E-Mail eingeben, Passwort eingeben, Anmelden. Aber die UI-Qualität unterscheidet sich drastisch.
Kein visuelles Gewicht · keine Hierarchie · kein Feedback · schwer zu bedienen
E-Mail-Adresse
Passwort
Vergessen?Klare Hierarchie · sichtbarer Fokus · primärer CTA · erkennbarer Link
Zusammenfassung
UX vs. UI – der Unterschied auf einen Blick
| UX-Design | UI-Design | |
|---|---|---|
| Fokus | Ablauf, Logik, Nutzerziele | Visuelles, Layout, Interaktion |
| Ergebnis | User Flows, Wireframes, Prototypen | Mockups, Komponenten, Styleguides |
| Frage | „Funktioniert das für den Nutzer?" | „Fühlt sich das richtig an?" |
| Werkzeuge | Research, User Testing, IA | Typografie, Farbe, Spacing-Systeme |
UX ohne UI ist wie ein brillanter Grundriss für ein dunkles, unbeschildertes Gebäude. UI ohne UX ist wie ein wunderschöner Raum, in dem niemand die Ausgänge findet. Beides braucht das andere – und als Entwickler triffst du täglich Entscheidungen in beiden Bereichen.