UX ist, ob jemand findet, was er sucht. UI ist, wie das dabei aussieht. Beides hängt zusammen, aber wenn Sie nur eines richtig machen können, nehmen Sie UX.
Ein hässliches Formular, das funktioniert, bringt Anfragen. Ein schönes, das an Feld drei scheitert, bringt keine. Das klingt banal und wird trotzdem in fast jedem Projekt in der falschen Reihenfolge angegangen.
UI und UX — der Unterschied
UX (User Experience, Nutzererlebnis) ist der ganze Weg: Was will jemand erreichen, wie viele Schritte braucht er, wo hakt es, was passiert im Fehlerfall. UX ist eine Frage der Struktur und der Abläufe. Man kann sie auf Papier lösen.
UI (User Interface, Benutzeroberfläche) ist das Sichtbare: Farben, Schrift, Abstände, Zustände von Schaltflächen, Symbole. UI macht die Struktur erlebbar — und kann eine schlechte Struktur nicht retten.
Ein Bild dazu: UX ist der Grundriss eines Hauses, UI die Einrichtung. Wenn das Bad nur über die Küche erreichbar ist, hilft die schönste Armatur nicht.
Was gutes UX ausmacht
- Ein klares Ziel pro Seite. Wer alles anbietet, führt niemanden.
- Wenige Schritte. Jedes zusätzliche Feld, jeder zusätzliche Klick kostet einen Teil der Besucher. Das ist keine Vermutung, das misst man.
- Erwartungen bedienen. Das Logo führt zur Startseite, der Warenkorb ist oben rechts, der Preis steht beim Produkt. Originalität an dieser Stelle ist teuer.
- Zustände zeigen. Wo bin ich, was passiert gerade, hat es geklappt. Eine Schaltfläche, die nach dem Klick nichts tut, wird ein zweites Mal gedrückt.
- Fehler auffangen. Sagen, was falsch ist, direkt am Feld, in normaler Sprache. Nicht „Ungültige Eingabe“, sondern „Die Telefonnummer darf keine Buchstaben enthalten“.
- Ehrlich sein. Versteckte Kosten, erzwungene Kontoanlage, Abmeldelinks, die nicht funktionieren — das rächt sich zuverlässig.
Was gutes UI ausmacht
- Hierarchie. Auf jedem Bildschirm muss klar sein, was das Wichtigste ist. Wenn alles hervorgehoben ist, ist nichts hervorgehoben.
- Wenige Entscheidungen, konsequent durchgehalten. Zwei Schriften, eine Akzentfarbe, ein Abstandsraster. Der Rest ergibt sich.
- Abstand als Gestaltungsmittel. Der häufigste Unterschied zwischen einem professionellen und einem selbstgebauten Auftritt ist nicht die Farbe, sondern der Weißraum.
- Alle Zustände gestalten. Ruhezustand, Mauszeiger darüber, Tastaturfokus, gedrückt, deaktiviert, geladen, leer, Fehler. Die letzten drei werden fast immer vergessen — und sind die, die Nutzer verunsichern.
- Lesbarkeit vor Stil. Hellgrauer Text auf Weiß sieht in der Entwurfsdatei edel aus und ist am Handy bei Sonne unlesbar.
Wie ich das in Projekten angehe
- Aufgaben sammeln. Was wollen Besucher hier konkret tun? Meist sind es drei bis fünf Dinge. Alles andere ist Nebensache.
- Wege aufzeichnen. Für jede Aufgabe: Einstieg, Schritte, Ziel. Auf Papier oder im Wireframe, ohne Farben.
- Struktur prüfen, bevor gestaltet wird. Wenn ein Weg auf Papier zu lang ist, wird er es im fertigen Design auch sein.
- Gestalten. Erst jetzt Farbe, Schrift, Bild.
- An echten Menschen testen. Fünf Personen, die nicht am Projekt beteiligt sind, reichen für die groben Probleme.
Der Schritt, den man nicht überspringen kann, ist der dritte. Alles, was danach kommt, baut darauf auf. Beispiele aus fertigen Projekten stehen in meinen Referenzen.
Die Fehler, die am meisten kosten
- Der Entwurf entsteht mit Platzhaltertext. „Lorem ipsum“ ist immer gleich lang und immer freundlich. Echte Texte sind es nicht.
- Alles wird am großen Bildschirm entschieden. Zwei Drittel der Besucher sehen etwas anderes — mehr dazu in den zehn Punkten für responsive Webseiten.
- Der interne Sprachgebrauch landet in der Navigation. Kunden suchen nicht nach Ihrem Abteilungsnamen.
- Pop-up beim ersten Scrollen. Es funktioniert kurzfristig und beschädigt dauerhaft.
- Niemand testet den Fehlerfall. Formular abschicken ohne Eingabe, mit falscher E-Mail, mit zu großer Datei. Genau dort bricht es ab.
UX messen, ohne Budget
Sie brauchen keine Laborstudie. Drei Dinge, die jeder machen kann:
- Fünf Personen zusehen. Geben Sie eine Aufgabe („Finden Sie heraus, was eine Beratung kostet“) und sagen Sie danach nichts mehr. Die ersten drei Personen decken den Großteil der Probleme auf.
- Absprungrate nach Einstiegsseite. Wo Menschen ankommen und sofort wieder gehen, stimmt entweder die Erwartung nicht oder die Seite lädt zu langsam.
- Formularabbrüche. Wenn ein Formular hundertmal begonnen und zwanzigmal abgeschickt wird, liegt das Problem in den Feldern dazwischen.
Barrierefreiheit ist kein Sonderfall von UX
Tastaturbedienbarkeit, ausreichender Kontrast, klare Beschriftungen, abschaltbare Bewegung — das sind UX-Anforderungen, die zufällig auch im Gesetz stehen. Seit dem European Accessibility Act sind sie für viele Anbieter verpflichtend; Einzelheiten dazu in den Webdesign-Trends 2027.
Der praktische Nebeneffekt: Eine Seite, die mit der Tastatur bedienbar ist, hat in aller Regel auch eine saubere Struktur — und ist damit für Suchmaschinen besser lesbar.
Häufige Fragen
Brauche ich UX-Design für eine kleine Firmenwebsite?
Sie brauchen keinen eigenen UX-Prozess, aber die Fragen dahinter: Was sollen Besucher hier tun, und wie schnell kommen sie dorthin? Das lässt sich in einer Stunde klären und entscheidet mehr als die Farbwahl.
Welche Werkzeuge braucht man dafür?
Für die Struktur: Papier oder ein einfaches Wireframe-Werkzeug. Für die Gestaltung: was Sie ohnehin nutzen. Die Werkzeugfrage wird regelmäßig überschätzt — das Denken davor ist die Arbeit.
Woran merke ich, dass mein UX nicht stimmt?
An Fragen, die Ihnen Kunden stellen, obwohl die Antwort auf der Website steht. Jede solche Frage ist ein Hinweis auf eine Stelle, die niemand findet.
Wie stark wirkt sich UX auf Anfragen aus?
Bei Formularen und Kaufabläufen sehr stark — dort entscheidet jeder überflüssige Schritt. Auf reinen Informationsseiten weniger. Worauf es bei einer Seite mit einem einzigen Ziel ankommt, steht unter Landingpage mit WordPress.
Fazit
Gutes UI fällt auf. Gutes UX fällt nicht auf — man merkt es nur daran, dass nichts hakt. Deshalb wird es zuerst gestrichen und ist trotzdem der Teil, der über Anfragen entscheidet.
Die Reihenfolge ist immer dieselbe: erst klären, was passieren soll, dann den Weg dorthin, dann das Aussehen. So arbeite ich — hier erreichen Sie mich.
Gunther Schoepf