UI/UX-Design

UX entscheidet, wie ein Produkt funktioniert; UI entscheidet, wie diese Entscheidung aussieht. Keines von beiden reicht allein aus — das eine sorgt für Verständlichkeit, das andere für Vertrauen.

Fallstudie

13 Bereiche auf einem einzigen Bildschirm vereinen

Was wir predigen, setzen wir in unserem eigenen Produkt um. dmu ONE vereint 13 Geschäftsbereiche – Finanzen, Vertrieb, CRM, Projekte, Betrieb, Lager, Beschaffung, Personalwesen, Marketing, Berichtswesen, Archiv und Einstellungen – sowie 67 Funktionen in einem einzigen mobilen Ablauf. Der folgende reale Screenshot zeigt, wie sich diese Vereinfachung in der Oberfläche niederschlägt.

Startbildschirm der dmu ONE App auf einem Android-Smartphone
  • Navigation13 Bereiche, nicht in ein einziges unteres Menü gepresst — sondern in einer Hierarchie organisiert, die das meistgenutzte priorisiert.
  • InformationshierarchieDas Tagesgeschäft steht ganz oben; Berichte und Einstellungen liegen eine Ebene dahinter.
  • KontrastDie Akzentfarbe erscheint nur dort, wo eine Aktion nötig ist; der Rest der Oberfläche bleibt zurückhaltend.

01

Zwei unterschiedliche Disziplinen, eine Erfahrung.

UX-Design (User Experience) legt fest, für wen ein Produkt existiert, welches Problem es löst und mit welchen Schritten diese Lösung erreicht wird. Recherche, Informationsarchitektur, Nutzerflüsse und Usability-Tests sind die Werkzeuge dieser Disziplin. UI-Design (User Interface) macht diese Entscheidungen sichtbar und greifbar: Farbe, Typografie, Button-Zustände, Mikrointeraktionen.

Die beiden zu trennen ist didaktisch nützlich, in der Praxis lassen sie sich jedoch nicht voneinander lösen. Eine Oberfläche, die makellos aussieht, in der Nutzer aber nicht finden, was sie suchen, ist ein UI-Erfolg und ein UX-Misserfolg; ein Design mit dem richtigen Ablauf, das aber kein Vertrauen vermittelt, ist das Gegenteil davon. Ein gutes Produkt verlangt, dass beides gleichzeitig stimmt.

02

Erst die Struktur, dann der Bildschirm.

Der UX-Prozess beginnt nicht mit einem Bildschirm, sondern mit Fragen: Was versucht der Nutzer hier zu tun, welche Information braucht er zuerst, welcher Schritt erzeugt unnötige Reibung? Die Antworten auf diese Fragen bilden die Informationsarchitektur — das Gerüst, das festlegt, welcher Inhalt wo und in welcher Hierarchie steht.

Sobald die Informationsarchitektur klar ist, kommen Nutzerflüsse und grobe Wireframes ins Spiel. In dieser Phase gibt es noch keine Farbe und keine Typografie — die einzige Frage lautet, ob der Ablauf sinnvoll ist. Tests sind an diesem Punkt günstig — eine Box zu verschieben kostet weit weniger, als einen fertig entwickelten Bildschirm neu zu programmieren.

03

Konsistenz entsteht aus einem System, nicht aus einzelnen Bildschirmen.

UI-Design bedeutet nicht, ein Wireframe mit einer visuellen Sprache zu bekleiden — es ist eine eigenständige Ingenieursdisziplin. Ein Button wird nicht nur einmal gestaltet — er wird zusammen mit seinen Zuständen für normal, Hover, gedrückt, deaktiviert und ladend entworfen. Fehlt einer dieser Zustände, kann der Nutzer nicht mehr mit der Oberfläche „sprechen“.

Deshalb erzeugt ausgereifte UI-Arbeit keine einzelnen Bildschirme, sondern eine Komponentenbibliothek: wiederverwendbare Karten, Formularfelder, Badges, Abstandsregeln. Die Unterstützung von hellem und dunklem Design in DMUs eigenen Oberflächen ist ebenfalls ein Ergebnis dieses systematischen Ansatzes — ein einziger Satz an Komponenten, der unter zwei unterschiedlichen Lichtbedingungen konsistent bleibt.

04

Barrierefreiheit ist keine nachträglich hinzugefügte Ebene.

Ausreichender Farbkontrast, gut lesbare Schriftgrößen, bequem antippbare Buttonflächen und eine mit Screenreadern kompatible Beschriftung — all das ist das Design selbst, keine nachträglich als „Barrierefreiheits-Update“ hinzugefügte Ebene. Für einen Nutzer mit eingeschränktem Sehvermögen ist unzureichender Kontrast eine ebenso reale Hürde wie eine winzige Tippfläche für einen Nutzer mit eingeschränkter motorischer Fähigkeit.

Diese Prinzipien schaffen zugleich für alle eine bessere Erfahrung: hoher Kontrast bleibt auch im Sonnenlicht lesbar, großzügige Tippflächen stören auch einen Nutzer in Bewegung nicht. Barrierefreiheit bedeutet, für die gesamte Bandbreite realer Nutzungsbedingungen zu gestalten, nicht für eine schmale Nutzergruppe.

05

Der Prozess ist der Beweis, nicht die Behauptung.

13 Geschäftsbereiche und 67 Funktionen in einer einzigen mobilen App zu vereinen war keine theoretische UX-Übung — es war ein reales Problem, das Recherche, Informationsarchitektur, Prototyping, Usability-Tests und wiederholte Iteration erforderte. dmu ONE ist das Ergebnis dieses Prozesses, und der ehrlichste Weg, DMUs UI/UX-Ansatz zu beschreiben, besteht darin, ihn direkt zu zeigen.

Mobile App-Entwicklung: Individuelle mobile Apps, die mit Ihrer Modulanzahl skalieren