UX-Design und Schnittstellengestaltung

Die Schnittstelle beginnt nicht mit Tasten und nicht mit Bildschirmen – sie beginnt mit dem Verständnis des Nutzerverhaltens. Wir tauchen immer in die realen Prozesse ein, um zu verstehen, welche Aktionen eine Person im System ausführt, mit welchen Rollen sie arbeitet und wie sich diese Aktionen zu einem sinnvollen Weg zusammensetzen. Das ist das Fundament, ohne das man eine effektive Schnittstelle nicht erstellen kann.

Wir formulieren das Nutzungsszenario und nicht nur die Seitenstruktur. Zuerst werden die logischen Schritte entworfen – was die Person tut, warum sie es tut und welche Daten sie benötigt. Erst danach werden die Schnittstellenelemente ausgewählt, die diesen Weg umsetzen.

• Nutzer-Szenarien, die das Verhalten beschreiben;
• Navigationsflüsse (UX flow);
• Nutzer-Geschichten und Aufgaben auf Bildschirm-Ebene.

Der Nutzer nimmt das System nicht als eine Ansammlung von Funktionen wahr – er sieht den Weg, den er zu seinem Ziel geht. Unsere Aufgabe ist es, diesen Weg einfach, vorhersehbar und schnell zu gestalten. Vom Eintritt bis zur Handlung: Kauf, Filterung, Abschluss eines Deals, Erstellung eines Berichts – jede Entscheidung wird unter Berücksichtigung des Szenarios und nicht des Layouts entworfen.

Die Gestaltung des Interfaces ist ein Schritt, der mit der Architektur des Projekts und deren technischen Lösungen verbunden ist. Wir verknüpfen von Anfang an die Logik der Benutzerinteraktion mit der Struktur des Systems auf der Backend-Ebene, in der Datenbank und bei der API. Dieser Ansatz ist besonders wichtig für komplexe Interfaces, in denen die Interaktion mit dem Server, Asynchronität, Datenfilterung und -validierung einen verpflichtenden Teil der Systemarbeit darstellen. UX muss noch vor Beginn der Programmierung berücksichtigt werden, insbesondere wenn das Projekt als SPA (Single Page Application) umgesetzt wird oder auf einer mikroservicebasierten Architektur beruht. In solchen Systemen hängt das Interface eng von der verteilten Logik auf der Serverseite ab: Daten werden in Teilen empfangen, die Interaktion ist oft asynchron und der Zustand muss zwischen den Modulen synchronisiert werden. Wenn die UX-Logik nicht im Voraus berücksichtigt wird, wird die Architektur verworren, die API überladen und der Benutzerweg fragmentiert. Diese Besonderheiten legen wir in das Interface in der Planungsphase, damit die Architektur flexibel bleibt und die Umsetzung technologisch gerechtfertigt ist.

Wenn UX unabhängig von der Architektur arbeitet, entstehen eine Menge Probleme: nicht vorhergesehene Szenarien, Überlastung der API, fehlende benötigte Daten. Daher verbinden wir diese beiden Schichten sofort und erreichen ein vorhersehbares Ergebnis in der Produktion.

• wenn das Interface komplexe Filterungen aufweist — hat dies Auswirkungen auf die Struktur der Datenbank und der API;
• wenn es schrittweise Formulare gibt — wird ein Mechanismus zur Speicherung von Zwischendaten benötigt;
• wenn Lazy Rendering oder unendliches Scrollen umgesetzt wird — muss das Backend auf Paging vorbereitet sein.

Bei Webdelo nehmen Designer an der Planung der Architektur teil und synchronisieren die UX-Logik frühzeitig mit der Entwicklung. Dies hilft, Konflikte zwischen den „Wünschen des Designs“ und den „Möglichkeiten des Systems“ zu vermeiden.

In Projekten mit hoher Datendichte - wie Handelsplattformen, Verwaltungsoberflächen, Analysesystemen - ist es besonders wichtig, die Schnittstelle so zu gestalten, dass der Benutzer sich auf das Wesentliche konzentrieren kann. Wir bewerten jedes Element auf dem Bildschirm: Ist es im Moment notwendig, hilft es bei der Entscheidungsfindung, lenkt es vom Zielhandeln ab?

Um die Wahrnehmungslast zu verringern und die Arbeit mit großen Informationsmengen zu vereinfachen, verwenden wir mehrere Techniken:

• Wir gestalten die Struktur der Schnittstelle so, dass Blöcke und Elemente logisch verbunden sind und der Benutzer sie als ein Ganzes wahrnimmt;
• Wir setzen visuelle Akzente - Hervorhebungen, Icons, Farbpunkte - um das Wesentliche hervorzuheben;
• Wir bringen sekundäre Aktionen in kontextuelle Blöcke oder Dropdown-Elemente, damit sie die Arbeit an den Hauptaufgaben nicht stören.

Dank dieses Ansatzes kann der Benutzer sich schneller in der Schnittstelle orientieren, verbraucht keine Energie für unnötige Aktionen und kann seine Arbeitsaufgaben sicher und ohne Überlastung der Aufmerksamkeit ausführen.

Weniger visuelle Ablenkung - mehr Fokus. Dieser Ansatz macht die Schnittstelle leichter wahrnehmbar und erhöht die Arbeitsgeschwindigkeit mit dem System.

Jeder Bildschirm realisiert ein konkretes Nutzer-Szenario und enthält nicht einfach nur Steuerungselemente. Die Seiten werden auf die spezifischen Ziele des Nutzers ausgerichtet — mit Fokus auf das Ergebnis und nicht auf das Visuelle. Wir beschreiben, welches Ziel der Nutzer erreichen soll, und gestalten den minimal notwendigen Weg dorthin.

Dieser Ansatz reduziert die Anzahl der Schritte, macht das Verhalten des Systems vorhersehbar und die Benutzeroberfläche verständlich. Um das Design auf reale Aufgaben zu konzentrieren, formulieren wir die Handlungsszenarien des Nutzers.

Zum Beispiel:

• „Der Nutzer kommt, um schnell ein Produkt zu finden und zu kaufen“
• „Der Nutzer filtert Angebote nach Status und fügt einen Kommentar hinzu“
• „Der Nutzer erstellt einen Bericht für den Monat und lädt eine PDF herunter“

Solche Szenarien werden zur Grundlage für das Interface-Design. Für jedes Szenario wird die Logik des Bildschirms aufgebaut. In diesem Kontext ist ein „Bildschirm“ ein logisch abgeschlossener Schritt in der Interaktion, in dem der Nutzer ein Ziel erreicht: Filtern, Auswählen, Bestellen, Ansehen oder Bearbeiten. Ein Bildschirm — eine Handlung. Dies erhöht die Verständlichkeit, Geschwindigkeit und Steuerbarkeit des Systems.

Figma — unser Hauptwerkzeug für das Design von Benutzeroberflächen. Wir nutzen es als organisiertes Arbeitsumfeld mit klaren Regeln, Struktur und wiederholbaren Ansätzen. Das ermöglicht es dem Team, synchron, wiederholt und ohne Überraschungen zu arbeiten.

Innerhalb jedes Projekts:

• UI-Komponenten und Bibliotheken befinden sich in separaten Dateien mit klarer Nutzungslogik;
• jedes Element ist wiederverwendbar: Schaltflächen, Eingabefelder, Icons, Karten, Blöcke;
• Namen von Ebenen, Frames und Seiten sind nach den Vereinbarungen des Teams standardisiert;
• die Struktur der Dateien spiegelt die Struktur der Szenarien wider und nicht nur die Seite des Produkts.

Eine solche Systematik hilft, das Design schnell zu skalieren, Duplikate zu vermeiden und beschleunigt die Einarbeitung neuer Teammitglieder. Es ist für Entwickler einfacher, sich zurechtzufinden, und für Designer leichter, das Layout aufrechtzuerhalten.

Um Chaos in den Dateien zu vermeiden und die Stabilität des Prozesses zu gewährleisten, gehen wir mit Layouts genauso um wie mit Code. Jedes Layout ist eine festgelegte Logik, mit einer Historie von Änderungen, verständlichen Kommentaren und einer genauen Übereinstimmung mit den Bedürfnissen des Entwicklungsteams. Dies ist nicht nur wichtig für die Qualität der Umsetzung, sondern auch für die Bewahrung eines einheitlichen Kontexts im Team.

Nach Genehmigung:

• die festgelegte Version wird gespeichert und darf ohne separate Aufgabe nicht geändert werden;
• Kommentare, Anmerkungen, Variablennamen und das Verhalten von Komponenten werden hinzugefügt;
• die Übertragung erfolgt über Figma Specs und/oder den Export von Variablen in ein für das Frontend geeignetes Format (zum Beispiel Farb-, Abstand- und Schriftart-Tokens).

Ein solcher Prozess schließt Missverständnisse zwischen dem, "wie es gezeichnet ist" und "wie es umgesetzt ist", aus. Alles ist dokumentiert, die Versionen sind festgelegt, und die Änderungen sind kontrolliert.

Ein einheitlicher visueller Stil und die Wiederholbarkeit von Lösungen sind die Grundlage für ein skalierbares UX. Zu diesem Zweck erstellen und pflegen wir unsere eigenen UI-Kits, die die visuellen und logischen Regeln der Benutzeroberfläche widerspiegeln. Sie umfassen sowohl grundlegende Elemente (Schaltflächen, Felder, Symbole) als auch komplexere Blöcke, die in Szenarien wiederholt werden.

Häufig basieren sie auf:

• Tailwind UI,
• Vuetify (wenn das Projekt auf Vue basiert),
• benutzerdefinierten Lösungen für Laravel Blade oder React.

Das Hauptprinzip — jedes Element im UI-Kit = Komponente im Code. Dies vereinfacht die Arbeit sowohl für Designer als auch für Entwickler. Komponenten lassen sich leicht skalieren, austauschen und an Themen anpassen. Das UI-Kit sorgt für ein einheitliches Erscheinungsbild der Benutzeroberfläche, verringert die Anzahl von Bugs und beschleunigt die Entwicklung.

Damit die Benutzeroberfläche zwischen dem Layout und dem Code nicht verloren geht, ist der Designer in den Prozess in allen Phasen eingebunden. Er ist an Diskussionen beteiligt, beantwortet Fragen, überprüft die Umsetzung und nimmt an Entscheidungsprozessen teil. Dies erleichtert die Kommunikation und hilft, die Logik, die im Design bereits während der Planungsphase festgelegt wurde, einzuhalten.

Das ermöglicht:

• das Verhalten von Elementen sofort zu präzisieren;
• Fragen zur Integration von Figma → Code ohne Verzögerungen zu klären;
• die Umsetzung anhand von Spezifikationen und Layouts zu prüfen.

Wir arbeiten mit Vue, Tailwind, Blade und berücksichtigen die Einschränkungen der Plattform von Anfang an. Das hilft, Elemente zu gestalten, die den technischen Möglichkeiten und Einschränkungen des Systems entsprechen. Die Umsetzung wird stets auf Übereinstimmung mit dem Layout überprüft – hinsichtlich Abständen, Schriftarten und Verhalten.

Damit die Benutzeroberfläche sofort vom Nutzer „erfasst“ wird und keine unnötigen Fragen aufwirft, wenden wir eine Reihe bewährter Prinzipien und Muster an. Diese Ansätze ermöglichen es, eine verständliche visuelle Struktur zu schaffen, die Navigation zu vereinfachen und die Entscheidungsfindung zu beschleunigen. Sie basieren auf Wahrnehmungsforschungen sowie auf unserer praktischen Erfahrung in komplexen B2B-Systemen. In unserer Arbeit nutzen wir:

• visuelle Hierarchie: wichtige Elemente zuerst, unterstützende später;
• Kontrast und Maßstab: damit Knöpfe, Links und Überschriften unter allen Bedingungen sichtbar sind;
• Fitts'ches Gesetz: wir verkürzen die Entfernung zur Handlung, vergrößern klickbare Bereiche;
• Miller-Regel: wir überladen den Bildschirm nicht, gruppieren Informationen in Blöcken.

Jedes Element – von der Überschrift bis zum Eingabefeld – muss verständlich und logisch in die Benutzeroberfläche integriert sein. Wir überprüfen die Lesbarkeit, Prioritäten und die Reihenfolge der Wahrnehmung bereits in der Entwurfsphase. Dies hilft, die Benutzeroberfläche transparent und komfortabel für den Nutzer zu gestalten, noch bevor die Entwicklung beginnt.

Konsistenz ist einer der Hauptfaktoren, die das Vertrauen der Nutzer in das System beeinflussen. Die Benutzeroberfläche wird klarer, wenn ähnliche Aktionen und Elemente sich gleich verhalten. Dies ist besonders wichtig in komplexen Systemen, in denen der Benutzer zwischen vielen Bildschirmen und Szenarien wechselt.

Um dies zu gewährleisten, tun wir:

• gemeinsame Interaktionsmuster verwenden;
• einen einheitlichen visuellen Stil durch das UI-Kit unterstützen;
• das Verhalten von Komponenten und Animationen im Design-Leitfaden formalisieren.

Dies vereinfacht sowohl das Verhalten des Nutzers als auch die Umsetzung des Systems. Die Benutzeroberfläche wird vorhersehbar und lässt sich leicht skalieren – ohne übermäßigen Aufwand zur Aufrechterhaltung eines einheitlichen Stils.

Formulare werden oft zum Engpass im Benutzerweg. Sie kommen praktisch in jedem Szenario vor: von der Registrierung bis zur Berichterstattung. Ein schlecht durchdachtes Formular kann den Benutzer aufhalten, selbst wenn das restliche System benutzerfreundlich ist.

Damit Formulare wirklich helfen und nicht hinderlich sind, tun wir in jedem Projekt:

• die Struktur der Formulare zu vereinfachen: nur die notwendigen Felder, ohne Überladung;
• Inline-Hinweise und ein Ausfüllbeispiel neben dem Feld zu verwenden;
• die Validierung sofort beim Ausfüllen durchzuführen, ohne die Seite neu zu laden;
• Fehler verständlich anzuzeigen: Text, Farbe, Icon, Fokus auf das Feld.

Ein Formular ist der Ort, an dem der Benutzer der System Daten übermittelt. Und wenn an dieser Stelle Schwierigkeiten auftreten, hat das direkte Auswirkungen auf die Metriken: Abbrüche, unvollendete Aktionen, Anfragen an den Support. Daher ist ein durchdachtes Formular nicht nur „Komfort“, sondern Teil des Geschäftsergebnisses.

Barrierefreiheit ist das wichtigste Merkmal eines reifen Interfaces. Sie bestimmt, wie komfortabel Benutzer mit unterschiedlichen Interaktionsmethoden – Maus, Tastatur, Bildschirmlesegeräte – mit dem System arbeiten können. Es ist nicht nur eine Formalität, sondern die Grundlage der Universalität des Produkts. Wir integrieren sie bereits in den frühesten Phasen des Projekts, um die Benutzerfreundlichkeit für alle Nutzer sicherzustellen, unabhängig von ihrem Gerät oder ihren Wahrnehmungseigenschaften.

Im Rahmen jedes Projekts stellen wir sicher:

• ausreichender Kontrast zwischen Text und Hintergrund;
• lesbare Schriften ohne dekorative Übertreibungen;
• Navigation mit der Tastatur (Tab-Fokus);
• Beschreibungen für Screenreader (aria-labels, alt).

Solche Dinge sind in der Designphase leicht zu berücksichtigen und schwierig nachträglich zu korrigieren. Deshalb tun wir es sofort.

Bei der Gestaltung von Schnittstellen integrieren wir immer die Anpassung an mobile Geräte als Teil der allgemeinen UX-Strategie. Es ist keine Ergänzung, sondern ein wesentlicher Nutzungskontext: Der Benutzer hält das Gerät in der Hand, interagiert mit dem Finger und arbeitet in einem begrenzten Raum. Wir passen die Szenarien an solche Bedingungen an.

In solchen Schnittstellen berücksichtigen wir:

• große und leicht druckbare Tasten;
• einfache, aufeinanderfolgende Aktionen ohne Überlastung;
• Slider, Akkordeons, ausfahrende Panels zur Organisation von Inhalten.

Komplexe Schnittstellen können für Mobilgeräte angepasst werden, wenn man dies im Hinterkopf hat. Wir tun dies zu Beginn, nicht in der letzten Phase.

Wenn wir mit Handelsoberflächen arbeiten, stehen nicht Ästhetik, sondern Zuverlässigkeit, Lesbarkeit und Risikominderung an erster Stelle. Streaming-Daten, hohe Entscheidungsfindungsgeschwindigkeit, Dichte der Elemente — all dies erfordert höchste Klarheit. In einem unserer Projekte standen wir vor der Herausforderung: Die Benutzer mussten gleichzeitig Änderungen im Diagramm verfolgen, Entscheidungen treffen, Transaktionen durchführen und Benachrichtigungen überwachen. Alles — im Rahmen einer einzigen Oberfläche.

Die wichtigsten Aufgaben waren:

• so viele Informationen wie möglich ohne Überlastung anzuzeigen;
• sofortige Rückmeldung auf Benutzeraktionen zu geben;
• zufällige Fehler beim Arbeiten mit Aufträgen zu vermeiden.

Wir haben einen szenariobasierten Ansatz angewendet: Die Oberfläche wurde in Module unterteilt, und wir konzentrierten uns jeweils auf eine Aktion. Zum Beispiel wurde der Handelsblock nur bei Mouseover angezeigt, das Diagramm — mit anpassbaren Schichten, Benachrichtigungen — in einer separaten Logik, die den Hauptfluss nicht störte.

Das Ergebnis war eine Benutzeroberfläche, die den Fokus unterstützt, den Benutzer nicht überlastet und ein sicheres Arbeiten unter Bedingungen hoher Datendichte ermöglicht. Dieser Ansatz verringert die Wahrscheinlichkeit von Fehlern, spart Zeit und steigert die Effizienz der Arbeit des Traders.

UX-Redesign bedeutet nicht „das Aussehen aktualisieren“, sondern die Verbesserung des Nutzerwegs. Wir betrachten dies als Forschungs- und Ingenieuraufgabe: Zuerst ermitteln wir, wo Nutzer verloren gehen, welche Aktionen zu viele Klicks oder Aufmerksamkeit erfordern. Ein Beispiel ist ein CRM-System, dessen Fülle an Elementen eine schnelle Orientierung erschwerte. Die ursprüngliche Benutzeroberfläche enthielt:

• mehr als 12 Punkte im Seitenmenü,
• überladene Formulare mit 20+ Feldern,
• Aktionen ohne visuelle Hinweise oder Gruppenlogik.

Nach dem Redesign:

• die Anzahl der Klicks für das Schlüssel-Szenario reduzierte sich von 9 auf 4;
• die durchschnittliche Bearbeitungszeit für Aufgaben sank um 35%;
• die Anzahl der Supportanfragen bezüglich der Benutzeroberfläche fiel im Quartal um 48%.

Wir haben die Struktur der Navigation vollständig neu aufgebaut, die Felder reduziert, Inline-Hinweise hinzugefügt und die wichtigsten Aktionen hervorgehoben. Das Redesign zeigte deutliche Effekte: Die Benutzer führten die Schlüsselaktionen schneller aus, und der Supportaufwand für das System benötigte weniger Ressourcen. Wir haben die Benutzeroberfläche nicht nur vereinfacht — wir haben sie zu einem effektiven Werkzeug in den Händen des Kunden-Teams gemacht.