Benutzeroberflächen, die deine Nutzenden gerne bedienen

Was UI-Design leistet

Ich bin Jan Raap, selbstständig seit 2007, mit Fokus auf digitale Oberflächen. UI-Design, kurz für User Interface Design, ist die Gestaltung der sichtbaren Oberfläche: alles, was deine Nutzenden sehen und womit sie interagieren. Wenn du eine App öffnest und sofort weißt, wo du klicken musst. Wenn ein Formular zeigt, welches Feld noch fehlt. Diese Details entscheiden, ob eine Oberfläche angenehm oder frustrierend ist.

Oft wird UI mit UX verwechselt: UX-Design plant die gesamte Nutzererfahrung, also den Grundriss. UI-Design gestaltet die konkrete Oberfläche, also die Einrichtung der Räume. Ich mache UI und übernehme bei kleineren Projekten beide Rollen.

KI als Werkzeug, nicht als Ersatz

KI-Tools liefern in Sekunden komplette Interface-Vorschläge. Das ist nützlich, hat aber eine Grenze: KI kennt deine Nutzerpsychologie, deine Ziele und deinen Marktkontext nicht. Das Ergebnis wirkt deshalb oft generisch und austauschbar.

Typische Lücken, die ich regelmäßig sehe: zu kleine Klickflächen, schwache Kontraste, eine Informationshierarchie, in der alles gleich wichtig wirkt, und eine Oberfläche, die für eine junge Zielgruppe gebaut ist, obwohl die eigentliche Kundschaft 60+ ist.

Ich nutze KI für schnelle Konzeptvarianten, für Stimmungsbilder und für Fleißarbeit. Die Entscheidungen treffe ich: warum eine Klickfläche groß genug für den Finger sein muss, warum Fehler rot und Erfolge grün signalisiert werden, warum deine Oberfläche anders aussehen darf als die der Konkurrenz. Wenn du bereits mit KI experimentiert hast und das Interface nicht rund läuft, prüfe ich es auf Schwachstellen, Barrierefreiheit und Zielerreichung und sage dir, was sich lohnt.

Warum UI-Design über Erfolg entscheidet

Eine unklare Navigation, schwer lesbare Schrift oder ein schlecht platzierter Button kosten dich Anfragen. Das wirkt auch nach innen: höhere Support-Last, weil Leute nicht finden, was sie suchen, und langsamere Weiterentwicklung, weil ohne klares System jedes neue Feature von vorn beginnt.

Barrierefreiheit gehört dazu. Seit 2025 verlangt das Barrierefreiheitsstärkungsgesetz von vielen Anbietern barrierefreie Anwendungen. Das ist sinnvoll, nicht nur Pflicht: gute Kontraste, klare Struktur und eine Bedienung per Tastatur helfen allen. Ich plane das von Anfang an mit, nach den WCAG 2.1 AA-RichtlinienDer internationale Standard für barrierefreie Websites, gestuft in die Konformitätsstufen A, AA und AAA..

Was ich konkret gestalte

Ich denke in Komponenten, nicht in Einzelseiten. Jeder Button, jedes Formularfeld, jede Card wird als wiederverwendbarer Baustein angelegt: konsistent, schnell erweiterbar und einfach zu pflegen. Bei größeren Projekten entsteht daraus eine vollständige Komponentenbibliothek.

Dazu gestalte ich jeden Zustand eines Elements: normal, hover (Maus drüber), aktiv, Fokus (Tastatur), deaktiviert, ladend und die Rückmeldung nach einer Aktion. Solche kleinen Rückmeldungen, Micro-Interactions, geben Nutzenden das Gefühl von Kontrolle.

Mobil zuerst ist Standard. Für jede Bildschirmgröße kläre ich, welche Information am wichtigsten ist und wie sich die Navigation ändert. Barrierefrei heißt konkret: Kontraste von mindestens 4,5:1 (AA-Standard), klare Fokus-Indikatoren, verständliche Fehlermeldungen und Klickflächen von mindestens 44 mal 44 Pixeln.

Aus der Praxis

Bei der comdirect habe ich an einem modularen UI-System für die Banking-Apps gearbeitet: jede Funktion als eigene Komponente, klare Hierarchien und Farben als Statussignal. Mehr dazu in der Referenz.

Für W1-Media entstand ein Theme-System: Die Grundkomponenten bleiben gleich, Farben und Details passen sich je Verlag an. Neun Verlage nutzen dasselbe System und sehen trotzdem eigenständig aus, neue Features entstehen nur einmal. Mehr dazu in der Referenz.

Warum mit mir

Ich gestalte und entwickle, also übersetze ich zwischen Design und Technik und plane nur, was sich auch umsetzen lässt. Bei jedem Schritt frage ich, was die Oberfläche erreichen soll: Schönes Design ist gut, Design, das dein Ziel trifft, ist besser.