UI/UX mit kleinem Budget: Große Wirkung durch gezielte Maßnahmen

In einer idealen Welt steht für jedes Softwareprojekt ein eigenes UI/UX-Team bereit. In der Realität jedoch reichen oft schon wenige gezielte Maßnahmen, um aus einer funktionalen, aber wenig ansprechenden Oberfläche ein effektives Werkzeug zu machen, das Nutzer:innen wirklich unterstützt. 

Die Herausforderung 

Viele IT-Teams stehen vor der Situation, dass selbstentwickelte Software zwar intensiv genutzt wird, das Thema UI/UX im Alltag jedoch häufig zu kurz kommt. Designer:innen sind selten verfügbar, das Budget ist begrenzt. Dennoch besteht der Anspruch, eine Anwendung zu schaffen, die nicht nur funktioniert, sondern auch intuitiv und attraktiv ist. Genau mit dieser Herausforderung sah sich unser Kunde konfrontiert. Doch gemeinsam schafften wir mit kleinem Budget große Wirkung. Wie das klappt, verraten wir hier. 

Ein pragmatischer, strukturierter und kollaborativer Ansatz 

Ein bewährtes Vorgehen beginnt mit einer pragmatischen und kollaborativen Herangehensweise. Bereits in der Vorbereitungsphase empfiehlt es sich, typische User durch Personas zu repräsentieren und die gesamte Reise der Enduser mithilfe einer User Journey Map abzubilden. Bei diesem Kunden konnte sie sehr einfach aus der bestehenden Customer Journey Map abgeleitet werden. Diese Methoden sind fest im zweiten Schritt des User-Centered Designs verankert und helfen, die tatsächlichen Bedürfnisse der User zu verstehen und gezielt Lösungen zu entwickeln. 

Abbildung 1: User-Centered Design Prozess, adaptiert von Atiyeh Vaezipour et al. “Enhancing eco-safe driving behaviour through the use of in-vehicle human-machine interface: A qualitative study”. Transportation Research Part A: Policy and Practice 100 (June 2017) 

Es empfiehlt sich, einen Workshop mit einem interdisziplinären Team zu veranstalten, der das Ziel verfolgt, die Herausforderungen zu verstehen, kreative Lösungsansätze zu entwickeln und das Zielbild für die UI/UX-Initiative zu definieren.  

Bei diesem Kunden wurde der Workshop mit einer Einführung ins Thema gestartet, gefolgt von der Vorstellung der Persona und der User Journey Map. Anschließend gab es einen gemeinsamen Live-Walkthrough durch die Software. Alle Beteiligten waren eingeladen, sich Notizen über die Software zu machen: Was funktioniert gut? Wo gibt es Unsicherheiten? Welche Aspekte stören im täglichen Gebrauch? Die gesammelten Beobachtungen wurden anschließend gemeinsam diskutiert und priorisiert. Oft werden dabei zahlreiche kleine Stolpersteine sichtbar, die im Entwicklungsprozess leicht übersehen werden. Ein Beispiel, welches dabei identifiziert wurde, war die Farbgebung eines Input-Feldes, welches aufgrund eines User-Fehlers rot eingefärbt wurde und mit einem roten Häkchen versehen war. Dieses Häkchen und das Input-Feld sollten grün werden, wenn die Eingabe richtig getätigt wird. Wichtig ist es auch, vermeintliche Kleinigkeiten zu berücksichtigen. Zum Beispiel haben fast 10% der Männer eine Rot-Grün-Schwäche, weshalb sie nicht unterscheiden können, ob dieses Input-Feld nun rot oder grün ist und ein Häkchen darauf hindeutet, dass alles in Ordnung ist. 

Abbildung 2: Unpassender Mix aus Farbgebung und Icons kann zu Verwirrung führen, daher nicht empfohlen 

Für diesen Kunden war es besonders erfreulich, dass dieser Live-Walkthrough viele Stärken der Software aufgezeigt hat, welche anhand von Design Prinzipien literarisch untermauert werden konnten. Beispiele dafür sind deren Verwendung von Breadcrumbs, welche die erste von den 10 Heuristiken von Nielsen „Sichtbarkeit des Systemstatus“ einhält.  

Abbildung 3: Breadcrumbs, die dem User zeigen, wo er sich befindet 

Um die Erwartungshaltung der Product Owner besser zu verstehen, empfiehlt es sich, gemeinsam Ziele für die Weiterentwicklung zu definieren. Daraus lassen sich konkrete Design-Prinzipien ableiten – sowohl für das UI als auch für das UX. Besonders wirkungsvoll ist es, Theorie und Praxis direkt miteinander zu verknüpfen.  

Dazu kann man in einer kreativen Phase beispielsweise mit der Crazy-8-Methode arbeiten. So wird das Denken „out of the Box“ gefördert und es können in kurzer Zeit zahlreiche Ideen gesammelt werden. (Diese und weitere kreative Methoden haben wir in unserem Design Thinking Toolkit zusammengefasst.) Die Ergebnisse, die bei dieser kreativen Methode entwickelt wurden, wurden gemeinsam geclustert, mit Dot-Voting vorpriorisiert und abschließend mit der MoSCoW-Methode final priorisiert. Am Ende steht eine klare Roadmap, die zeigt, welche Verbesserungen sofort angegangen werden sollten und welche später folgen können.  

Prototyping und Umsetzung 

Mit diesen Erkenntnissen konnten verschiedene Flows in Figma ausgearbeitet werden. Für alle, die Figma nicht täglich nutzen: Flows sind dort interaktive Abläufe, die zeigen, wie Nutzer:innen durch verschiedene Screens und Funktionen einer Anwendung navigieren. Sie sind ideal, um Prozesse und Designs schnell erlebbar zu machen und Feedback einzuholen, bevor etwas aufwendig umgesetzt wird. 

Gerade wenn Zeit und Budget begrenzt sind, ist es entscheidend, den Fokus auf die wesentlichen Prozesse zu legen. Statt jedes Detail auszuarbeiten, konzentriert man sich auf die Kernfunktionen, die den größten Mehrwert bringen. Wiederverwendbare UI-Komponenten helfen dabei, Entwicklungsaufwand zu reduzieren und Geschwindigkeit zu gewinnen. Dabei ist wichtig, dass die UI-Komponenten möglichst einfach sind – mit wenigen Status und nicht wie in einem professionellen Design System für ganze Designer-Teams. Ebenso wichtig ist es, frühzeitig Feedback einzuholen, was im Fall von unserem Kunden auch getan wurde. Das Workshop-Team traf sich erneut, um die Ergebnisse zu diskutieren und anschließend eine weitere, kurze Umsetzungs-Iteration zu drehen.  

Der größte Mehrwert für den Kunden lag darin, UI-Komponenten im neuen Design schnell zu entwickeln und auf die gesamte Software zu übertragen. Das Team erhielt dadurch eine klare Richtung für die Weiterentwicklung und konnte unmittelbar handlungsfähig werden. 

Zusammenfassung: So erzielen Sie schnelle UI/UX-Erfolge 

• Pragmatismus vor Perfektion: Setzen Sie auf schnelle, testbare Schritte statt auf langwierige Komplettlösungen. Vereinfachte Design Systeme mit wenigen Komponenten (UI-Elementen) reichen für erste Flows meist schon aus.  

• Details machen den Unterschied: Selbst kleine Änderungen – wie bei dem Beispiel mit dem roten Häkchen – können die User Experience spürbar verbessern. 

• Frühes Feedback einholen: Iterative Prototypen und schnelle Tests verhindern teure Nacharbeiten.  

• Kollaboration nutzen: Binden Sie alle relevanten Rollen ein, um unterschiedliche Perspektiven und Ideen zu vereinen. Selbst  

• Struktur und Wiederverwendbarkeit: Arbeiten Sie mit klaren Prozessen und modularen UI-Komponenten, um Zeit und Kosten zu sparen. 

Exkurs: UI vs. UX – Wo liegt der Unterschied? 

Oft werden die Begriffe „UI“ (User Interface) und „UX“ (User Experience) synonym verwendet, obwohl sie unterschiedliche Aspekte der Gestaltung betreffen. UI beschreibt die visuelle und interaktive Oberfläche einer Anwendung, also die Farben, Typografie, Buttons, Layout und alle Elemente, die User sehen und bedienen. UX hingegen umfasst das gesamte Nutzungserlebnis: Wie intuitiv ist die Navigation? Wie schnell findet man die gewünschten Funktionen? Wie fühlt sich der Prozess an? Von der ersten Interaktion bis zum Abschluss einer Aufgabe.  

Kurz gesagt: UI beschreibt den Look und UX das Feeling. Beide Disziplinen greifen ineinander, aber eine schöne Oberfläche allein macht noch keine gute User Experience. Erst wenn Design, Funktionalität und Nutzerbedürfnisse zusammenpassen, entsteht ein stimmiges Gesamtbild. 

Titelbild: fauxels von Pexel