UI / UX

Wir beginnen mit dem, was schon vorliegt. Analytics zeigt, wo Nutzer abspringen, die interne Suche verrät, wonach sie vergeblich suchen, und der Support kennt die Fragen, die eine gute Oberfläche gar nicht erst entstehen ließe. Ergänzend sprechen wir mit Menschen, die das System tatsächlich benutzen.

Daraus entstehen Nutzeraufgaben und User Flows: Welche Wege muss die Anwendung sicher tragen, vom Einstieg bis zum Abschluss. Die Informationsarchitektur folgt diesen Aufgaben, nicht dem Organigramm. Es folgen Wireframes, ein klickbarer Prototyp und Tests mit einer kleinen Gruppe, weil sich Denkfehler dort leichter korrigieren lassen als im fertigen Code.

Erst danach kommt die Oberfläche: Typo-Skala, Abstandsraster, Farbrollen und eine Komponentenbibliothek in Figma, in der jede Komponente ihre Zustände mitbringt, also Standard, Hover, Fokus, aktiv, deaktiviert, Fehler, Laden und leer. Die Übergabe an die Entwicklung erfolgt mit diesen Werten als Design Tokens, damit Abstände und Farben nicht im Code neu erfunden werden.

Der klarste Anlass sind messbare Abbrüche: Warenkörbe, die im Checkout liegen bleiben, Formulare, die nur zur Hälfte ausgefüllt werden, Konfiguratoren, an denen Anfragen versanden. Ebenso deutlich ist ein Support, der immer wieder dieselbe Frage beantwortet, weil die Oberfläche sie offen lässt.

Häufig geht es um B2B-Anwendungen: Kundenportale, Ersatzteilsuchen, Shops mit Staffelungen, Varianten und kundenspezifischen Sortimenten. Solche Systeme wachsen über Jahre, jede neue Anforderung bekommt einen weiteren Reiter, und irgendwann kennt nur noch das eigene Team den Weg.

Nicht lösen lässt sich damit ein Problem im Angebot. Wenn Sortiment, Lieferzeiten oder Konditionen nicht überzeugen, ändert eine neue Navigation daran nichts. Auch fehlende Inhalte sind kein Gestaltungsproblem: Eine Produktseite ohne belastbare Daten bleibt schwach, egal wie sie aussieht. In diesen Fällen sagen wir das vorher, statt eine Oberfläche über die eigentliche Ursache zu legen.

Barrierefreiheit ist der Teil, der am häufigsten zu spät kommt. Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz, das viele Onlineshops und digitale Dienstleistungen im Endkundengeschäft erfasst. Maßstab dahinter sind die WCAG-Kriterien. In der Praxis heißt das: vollständige Bedienbarkeit per Tastatur, ein sichtbarer Fokus, echte Labels statt Platzhaltertext, Fehlermeldungen direkt am betroffenen Feld, ausreichend große Zielflächen und Kontraste, die auch mit Ihrer Hausfarbe funktionieren.

Der zweite Bereich ist das Verhalten über Bildschirmgrößen hinweg. Wir setzen Umbrüche dort, wo der Inhalt es verlangt, und nicht an gerätespezifischen Breiten. Tabellen mit vielen Spalten, lange deutsche Komposita und die Bedienung per Daumen statt per Maus sind die typischen Bruchstellen.

Dazu kommen Kleinigkeiten mit großer Wirkung: reservierte Flächen für Bilder, damit beim Laden nichts nachspringt, korrekte Eingabetypen und Autofill-Attribute für Formulare auf dem Telefon sowie Leer- und Fehlerzustände, die erklären, was zu tun ist.