UI/UX für Vibe Coder: Der praktische Einstieg

Du hast deiner KI erklärt, welche Anwendung du entwickeln möchtest, ein paar Fehlermeldungen beseitigt und so lange an den Komponenten gearbeitet, bis alles einigermaßen zusammenpasst. Jetzt steht der erste Prototyp vor dir. Vielleicht ist es dein erstes größeres Projekt, vielleicht hast du schon mehrere Anwendungen mit Codex, Cursor oder einem anderen Coding-Assistenten gebaut. Jedenfalls funktioniert die Sache, und das ist ein guter Anfang.

Dann zeigst du die App jemandem, der sie noch nie gesehen hat.

Die Person betrachtet den Bildschirm, bewegt den Mauszeiger über ein paar Elemente und fragt schließlich: „Wo kann ich mich denn jetzt anmelden?“ Du zeigst auf den Button, der für dich vollkommen offensichtlich war. Dein Gegenüber nickt, klickt darauf und bleibt beim nächsten Formularfeld wieder hängen.

Solche Situationen gehören zu den Gründen, warum es UI/UX-Design überhaupt gibt. Eine Anwendung kann technisch funktionieren und trotzdem unnötig schwer zu bedienen sein. Und je schneller wir Software entwickeln können, desto leichter übersehen wir manchmal die Entscheidungen, die zwischen einem funktionierenden Prototypen und einem guten Produkt liegen.

Dafür musst du nicht erst ein Designstudium absolvieren. Du solltest allerdings verstehen, welche Fragen du deiner Anwendung stellen musst.

Genau darum geht es in diesem Artikel.

1. Gute UI/UX beginnt nicht mit Farben

Stellen wir uns vor, du möchtest mit einem KI-Coding-Assistenten eine kleine Plattform entwickeln, über die sich Menschen für Workshops anmelden können. Es gibt verschiedene Angebote, freie Plätze und ein Formular zur Reservierung.

Dein erster Prompt könnte ungefähr so aussehen:

Erstelle eine moderne, responsive Workshop-Plattform mit einer Übersicht aller Workshops, einer Detailseite und einem Buchungsformular. Das Design soll professionell und benutzerfreundlich sein.

Die KI wird daraus wahrscheinlich etwas entwickeln können, das zumindest wie eine brauchbare Anwendung aussieht.

Nur hast du ihr bisher kaum erklärt, wie die Menschen diese Anwendung verwenden sollen.

Wer sind die Besucher? Suchen sie einen ganz bestimmten Workshop oder möchten sie sich zunächst inspirieren lassen? Wissen sie bereits, wann sie Zeit haben? Müssen sie vor der Anmeldung Informationen über den Veranstaltungsort erhalten? Und wie wichtig ist es, dass ein Buchungsvorgang auch unterwegs auf dem Smartphone funktioniert?

All diese Fragen können Einfluss auf das Design haben. Trotzdem tauchen sie in vielen Entwicklungsbriefings nicht auf.

Hier hilft es, zwei Begriffe auseinanderzuhalten, die häufig gemeinsam verwendet werden.

UI steht für User Interface, also die sicht- und bedienbare Oberfläche einer Anwendung. Dazu gehören Buttons, Formulare, Navigationen, Farben, Typografie und sämtliche Elemente, mit denen Menschen interagieren.

UX steht für User Experience, also das gesamte Nutzungserlebnis. Dabei geht es unter anderem darum, ob Menschen ihre Ziele erreichen, wie viel Aufwand dafür notwendig ist und ob sie die Anwendung als verständlich und verlässlich erleben.

Ein gut gestalteter Button gehört zur UI. Die Entscheidung, ob der Nutzer diesen Button überhaupt benötigen sollte, ist eine UX-Frage.

Das eine lässt sich nicht vollständig vom anderen trennen.

Für unsere Workshop-Plattform formulieren wir deshalb zunächst eine konkrete Nutzeraufgabe:

Eine interessierte Person möchte einen passenden Workshop finden, prüfen, ob noch Plätze verfügbar sind, und sich anschließend verbindlich anmelden.

Damit haben wir etwas, woran sich der Entwurf messen lässt.

Das klingt nach einem kleinen Schritt. Tatsächlich verändert er den gesamten Blick auf die Anwendung. Wir beurteilen nicht mehr nur, ob eine Seite schön aussieht, sondern ob sie dabei hilft, eine bestimmte Aufgabe zu erledigen.

2. Nicht alles auf dem Bildschirm ist gleich wichtig

Eine der häufigsten Schwächen unerfahrener Interface-Entwürfe ist die fehlende visuelle Hierarchie.

Stell dir vor, unsere Workshop-Plattform begrüßt Besucher mit einer riesigen Überschrift: „Discover amazing experiences“. Darunter stehen drei gleich große Karten mit den Begriffen „Explore“, „Learn“ und „Get Started“. Ein violetter Button fordert dazu auf, weiterzumachen.

Die Seite könnte modern aussehen. Trotzdem bleibt unklar, was diese Aktionen eigentlich bedeuten.

Ein interessierter Besucher möchte vielleicht einfach wissen, welcher Workshop als Nächstes stattfindet.

Genau diese Information sollte deshalb leicht zu finden sein.

Wir ändern unseren Entwurf. Statt einer allgemeinen Marketingbotschaft zeigt die mobile Startseite jetzt den nächsten verfügbaren Workshop. Sein Titel ist gut lesbar, Datum und Uhrzeit stehen unmittelbar darunter. Die Anzahl freier Plätze ist erkennbar, und ein eindeutig beschrifteter Button führt zur Reservierung.

Eine zweite, weniger auffällige Aktion ermöglicht es, alle Workshops anzusehen.

Plötzlich benötigt die Oberfläche nicht mehr Informationen, sondern eine bessere Gewichtung.

Das ist die Aufgabe visueller Hierarchie: Menschen erkennen zu lassen, welche Inhalte zusammengehören, welche Informationen wichtig sind und welche Handlung als Nächstes möglich ist.

Dafür stehen verschiedene Gestaltungsmittel zur Verfügung. Größe kann Bedeutung vermitteln, Abstand kann Gruppen voneinander trennen und Kontrast kann Aufmerksamkeit lenken. Auch die Position eines Elements spielt eine Rolle, wobei die Wirkung vom Layout, der Lesrichtung und dem Nutzungskontext abhängt.

Das bedeutet allerdings nicht, dass der wichtigste Button immer besonders groß oder knallblau sein muss.

Eine Oberfläche, auf der alles Aufmerksamkeit verlangt, hat am Ende keine klare Hierarchie mehr.

Wenn du deinen eigenen Entwurf überprüfen möchtest, stelle dir eine einfache Frage: Was sollte eine Person auf diesem Bildschirm als Erstes erkennen?

Wenn dir darauf keine eindeutige Antwort einfällt, solltest du wahrscheinlich noch nicht über Button-Radien nachdenken.

3. Ein konsistentes Design braucht weniger Entscheidungen, als du denkst

Sobald die grundlegende Struktur steht, können wir uns mit der visuellen Gestaltung beschäftigen.

Hier beginnt häufig der Teil, an dem Vibe Coding besonders viel Spaß macht. Du änderst eine Farbe, probierst eine andere Schriftart aus oder lässt die KI einen neuen Kartenstil generieren. Wenige Sekunden später wirkt die gesamte Anwendung anders.

Das ist praktisch. Es kann aber auch zu einer Sammlung zufälliger Designentscheidungen führen.

Vielleicht verwendet die Startseite großzügige Abstände, während auf der Workshop-Detailseite alles eng zusammengedrängt ist. Manche Buttons haben leicht abgerundete Ecken, andere sind pillenförmig. Die Überschriften besitzen unterschiedliche Größen, ohne dass dahinter eine erkennbare Systematik steckt.

Jedes einzelne Element mag ordentlich aussehen. Zusammen wirken sie trotzdem unruhig.

Die Lösung ist nicht unbedingt ein umfangreiches Design System mit Hunderten Komponenten. Für eine kleine Anwendung genügt zunächst ein überschaubares Regelwerk.

Typografie: Nicht jede Überschrift braucht eine eigene Größe

Beginne mit einer gut lesbaren Schrift und wenigen klar unterscheidbaren Textebenen.

Ein möglicher Ausgangspunkt wäre eine große Seitenüberschrift, kleinere Abschnittsüberschriften und ein einheitlicher Fließtext. Dazu kommen sparsam eingesetzte Beschriftungen für Metadaten wie Datum oder Kategorie.

Entscheidend ist, dass dieselbe Bedeutung wiedererkennbar gestaltet wird. Wenn Workshop-Titel auf einer Seite fett und groß sind, sollten sie an vergleichbaren Stellen nicht plötzlich wie unauffällige Fußnoten aussehen.

Für längere Texte würde ich außerdem auf eine angenehme Zeilenlänge achten. Auf großen Bildschirmen muss ein Absatz nicht über die gesamte verfügbare Breite laufen. Auf Smartphones sind ausreichend große Schrift, vernünftiger Zeilenabstand und genügend Platz an den Seiten wichtiger als möglichst viele sichtbare Wörter.

Abstände: Beziehungen sichtbar machen

Abstände gehören zu den unscheinbarsten und gleichzeitig wirkungsvollsten Werkzeugen im UI-Design.

Elemente, die zusammengehören, sollten auch räumlich als Gruppe erkennbar sein. Zwischen verschiedenen Gruppen darf dagegen mehr Platz liegen.

Auf unserer Workshop-Karte könnten Titel und Datum näher beieinanderstehen, während der nächste Workshop durch einen größeren Abstand oder eine deutliche Trennung beginnt.

Viele Designsysteme verwenden dafür eine Abstandsskala, beispielsweise auf Basis von 4 oder 8 Pixeln. Die konkreten Werte sind weniger wichtig als ihre konsistente Anwendung.

Wenn du jeden Abstand einzeln schätzt, entstehen schnell kleine Unregelmäßigkeiten. Mit einer überschaubaren Skala fällt es leichter, unterschiedliche Komponenten aufeinander abzustimmen.

Farben: Eine Funktion ist wertvoller als ein schöner Verlauf

Auch beim Farbsystem würde ich zurückhaltend beginnen.

Du brauchst eine gut lesbare Textfarbe, einen passenden Hintergrund, dezente Flächen zur Gruppierung und eine erkennbare Akzentfarbe für wichtige Aktionen.

Zusätzliche Farben können Statusinformationen unterstützen. Dabei sollte eine Bedeutung aber nicht ausschließlich über Farbe vermittelt werden.

Wenn ein Workshop ausgebucht ist, hilft die rote Farbe allein wenig. Der Text „Ausgebucht“ macht die Information eindeutiger und ist auch für Menschen verständlich, die Farbunterschiede nicht zuverlässig erkennen können.

Ein konsistentes System nimmt dir nicht die kreative Freiheit. Es verhindert vor allem, dass du dieselben grundlegenden Entscheidungen auf jeder Seite erneut treffen musst.

Und genau darin liegt sein Wert beim Vibe Coding: Du kannst der KI klare Regeln mitgeben, statt nach jeder Generierung wieder über die visuelle Richtung zu verhandeln.

4. Ein Interface muss auch nach dem Klick funktionieren

Bisher haben wir vor allem die Darstellung unserer Workshop-Plattform betrachtet.

Jetzt möchte jemand einen Platz reservieren.

Die Person öffnet den Workshop, trägt ihre Daten ein und drückt auf „Platz reservieren“. Was passiert anschließend?

In einem einfachen Prototypen führt der Button möglicherweise direkt zur nächsten Seite. Vielleicht erscheint eine Erfolgsmeldung. Vielleicht verändert sich auch nur der Inhalt eines Containers.

Für eine tatsächlich verwendbare Anwendung reicht es nicht, ausschließlich den idealen Ablauf zu gestalten.

Wir müssen auch berücksichtigen, was während der Verarbeitung passiert und wie sich das System bei Problemen verhält.

Bei unserer Buchungsfunktion gibt es mindestens vier Situationen.

Vor der Reservierung ist der Button als eindeutige Aktion erkennbar. Die Person versteht, ob die Anmeldung verbindlich ist und welche Informationen dafür benötigt werden.

Während der Verarbeitung zeigt die Anwendung, dass die Anfrage bearbeitet wird. Das verhindert Unsicherheit und kann helfen, versehentliche Mehrfachklicks zu vermeiden. Technisch sollte die Buchungslogik zudem gegen doppelte Reservierungen abgesichert sein; ein deaktivierter Button allein genügt dafür nicht.

Nach erfolgreicher Reservierung erscheint eine klare Bestätigung. Idealerweise enthält sie den Workshoptitel, den Termin und die Information, was als Nächstes passiert. Falls eine Bestätigungs-E-Mail versendet wird, sollte die Anwendung das nur behaupten, wenn der Versand tatsächlich angestoßen beziehungsweise entsprechend bestätigt wurde.

Bei einem Fehler erklärt das Interface, was schiefgegangen ist und welche Möglichkeiten bestehen. Ein allgemeines „Something went wrong“ ist dafür selten besonders hilfreich.

Diese Rückmeldungen gehören nicht zu den kosmetischen Details einer Anwendung. Sie sind ein wesentlicher Teil ihrer Bedienbarkeit.

Jakob Nielsen beschreibt diesen Gedanken in seinen bekannten Usability-Heuristiken als Visibility of System Status: Systeme sollen Menschen verständlich darüber informieren, was gerade geschieht.

Der Grundgedanke ist einfach. Wer eine Aktion ausführt, muss erkennen können, ob sie angekommen ist und welches Ergebnis sie hatte.

Gute Fehlermeldungen helfen weiter

Dasselbe gilt für Formulare.

Angenommen, jemand trägt bei der Workshop-Anmeldung eine ungültige E-Mail-Adresse ein. Eine wenig hilfreiche Umsetzung markiert das Feld lediglich rot und zeigt die Meldung „Ungültige Eingabe“.

Besser wäre eine konkrete Erklärung direkt am Feld: „Bitte gib eine gültige E-Mail-Adresse ein, zum Beispiel name@beispiel.de.“

Die Person weiß nun, welches Problem vorliegt und wie sie es beheben kann.

Dabei sollten Fehlermeldungen nicht nur farblich sichtbar, sondern auch für unterstützende Technologien nachvollziehbar sein. Beschriftungen, Fehlermeldungen und betroffene Eingabefelder müssen technisch sinnvoll miteinander verknüpft sein.

Das W3C zeigt in seinem Tutorial zur Formularvalidierung entsprechende Umsetzungsmöglichkeiten.

Wir sollten außerdem hinterfragen, welche Eingaben überhaupt notwendig sind.

Benötigt die Workshop-Plattform für eine einfache Reservierung wirklich eine vollständige Postadresse, ein Geburtsdatum und ein Passwort? Vielleicht reichen Name und E-Mail-Adresse. Vielleicht kann die Buchung ohne Benutzerkonto erfolgen.

Jedes unnötige Feld kostet Aufmerksamkeit und erhöht den Aufwand.

Gute UX besteht manchmal schlicht darin, etwas wegzulassen.

5. Mobile First bedeutet mehr als ein schmales Desktop-Layout

Nehmen wir an, unsere Workshop-Plattform wurde zunächst auf einem großen Monitor entwickelt.

Alles passt wunderbar nebeneinander. Die Navigation ist gut sichtbar, zwei Spalten präsentieren Workshop-Informationen und das Formular besitzt ausreichend Platz.

Auf dem Smartphone wird die Oberfläche anschließend einfach untereinander angeordnet.

Technisch mag sie damit responsiv sein. Ob sie mobil gut funktioniert, ist eine andere Frage.

Vielleicht erscheint vor dem eigentlichen Workshop erst ein riesiger dekorativer Hero-Bereich. Vielleicht nimmt eine Bildfläche den gesamten ersten Bildschirm ein. Oder der Button zur Reservierung ist so weit unten platziert, dass Besucher zunächst durch mehrere Abschnitte scrollen müssen.

Für eine mobile Ansicht sollten wir die Informationshierarchie deshalb bewusst überprüfen.

Welche Information wird unterwegs zuerst benötigt? Welche Elemente müssen dauerhaft sichtbar sein, und welche dürfen weiter unten stehen? Lassen sich alle Aktionen bequem erreichen?

Gerade Vibe Coder sollten sich angewöhnen, ihre Anwendungen frühzeitig auf einem schmalen Bildschirm zu betrachten, statt Mobile erst ganz am Ende zu behandeln.

Das bedeutet nicht, dass Desktop unwichtig wird. Gute responsive Gestaltung berücksichtigt unterschiedliche Nutzungssituationen, anstatt nur dieselbe Anordnung in verschiedene Bildschirmbreiten zu pressen.

Accessibility ist kein optionales Extra

Spätestens an dieser Stelle kommen wir zur Barrierefreiheit.

Ein Interface sollte nicht nur für Menschen funktionieren, die eine Maus verwenden, gut sehen und sich problemlos durch komplexe Anwendungen bewegen können.

Manche Nutzer sind auf die Tastatur angewiesen. Andere verwenden Screenreader, benötigen höhere Kontraste oder vergrößern Texte. Hinzu kommen alltägliche Situationen: grelles Sonnenlicht, ein beschädigter Touchscreen oder die Bedienung mit nur einer Hand.

Die Web Content Accessibility Guidelines, kurz WCAG, geben dafür überprüfbare Anforderungen vor.

Für normalen Text gilt auf Konformitätsstufe AA grundsätzlich ein Mindestkontrast von 4,5:1 gegenüber dem Hintergrund. Bei großem Text sind es 3:1. Für interaktive Ziele nennt WCAG 2.2 auf Stufe AA grundsätzlich eine Mindestgröße von 24 × 24 CSS-Pixeln, wobei bestimmte Ausnahmen gelten.

Das sind keine universellen Idealmaße für jede Gestaltung, sondern Mindestanforderungen mit klar definierten Bedingungen. Gerade auf Touchscreens können größere Bedienflächen sinnvoll sein.

Mindestens genauso wichtig ist die Tastaturbedienbarkeit.

Du kannst dafür einen einfachen ersten Versuch machen: Öffne deine Anwendung und benutze sie, ohne die Maus anzufassen. Mit der Tabulatortaste solltest du die interaktiven Elemente erreichen können. Ein sichtbarer Fokuszustand muss erkennen lassen, welches Element ausgewählt ist.

Prüfe außerdem, ob Buttons wirklich Buttons sind, Formulare verständliche Labels besitzen und Informationen nicht ausschließlich durch Symbole oder Farben vermittelt werden.

Natürlich ersetzt diese kurze Prüfung keinen vollständigen Accessibility-Audit. Aber sie hilft dabei, grundlegende Probleme früh zu erkennen.

Und auch hier gilt: Nur weil deine KI semantisch korrekt wirkenden Code erzeugt, solltest du nicht automatisch davon ausgehen, dass die gesamte Bedienung barrierefrei ist.

6. Wie du KI sinnvoll in deinen Designprozess einbindest

Vielleicht fragst du dich inzwischen, ob du für gutes UI/UX-Design nun sämtliche Entscheidungen selbst treffen musst.

Nein. KI kann gerade bei diesen Aufgaben nützlich sein.

Sie kann unterschiedliche Layoutvorschläge entwickeln, bekannte Usability-Prinzipien erklären, Komponentenvarianten erzeugen oder dich auf mögliche Probleme aufmerksam machen. Sie kann sogar dabei helfen, aus einer vagen Idee ein strukturierteres Briefing zu entwickeln.

Der Unterschied liegt darin, wie du sie einsetzt.

Wenn du einfach verlangst, deine Anwendung „schöner und moderner“ zu machen, überlässt du ihr den größten Teil der gestalterischen Entscheidungen.

Wenn du dagegen die Nutzeraufgabe, den Kontext und klare Prüfkriterien formulierst, erhältst du eine bessere Grundlage für die Zusammenarbeit.

Für unsere Workshop-Plattform könnte ein Briefing beispielsweise so aussehen:

Entwickle eine mobile Workshop-Buchungsseite für Menschen, die einen passenden Workshop finden und sich möglichst unkompliziert anmelden möchten.

Priorisiere Workshoptitel, Datum, Uhrzeit, Verfügbarkeit und die Reservierungsaktion.

Stelle zunächst zwei unterschiedliche Informationsarchitekturen vor. Begründe, welche Nutzeraufgaben jeweils im Mittelpunkt stehen und welche Nachteile die Entwürfe besitzen.

Verwende ein konsistentes Abstandssystem, gut lesbare Typografie und sichtbare Fokuszustände. Berücksichtige Lade-, Erfolgs- und Fehlerzustände.

Beginne mit einfachen Wireframes. Erzeuge erst nach der Auswahl eines Konzepts die ausgearbeiteten React-Komponenten.

Das Entscheidende daran ist nicht die Länge des Prompts.

Wir bitten die KI nicht nur um ein Ergebnis, sondern machen die zugrunde liegenden Entscheidungen sichtbar.

Ich würde außerdem vermeiden, den ersten Vorschlag direkt umzusetzen. Gerade bei der grundlegenden Seitenstruktur lohnt es sich, mehrere Varianten zu betrachten.

Vielleicht stellt sich heraus, dass eine Workshop-Liste mit direkten Reservierungsaktionen besser geeignet ist als eine aufwendige Detailseite. Vielleicht benötigen bestimmte Workshops aber ausführliche Informationen, bevor sich Menschen anmelden können.

Welcher Ansatz sinnvoller ist, lässt sich nicht allein durch die Anzahl der Komponenten beurteilen.

Die KI darf deinen Entwurf auch kritisieren

Eine besonders hilfreiche Anwendung ist der UX-Review eines bestehenden Interfaces.

Statt die KI sofort Code verändern zu lassen, kannst du sie zunächst bitten, die aktuelle Gestaltung anhand einer konkreten Nutzeraufgabe zu beurteilen.

Zum Beispiel:

Analysiere das Interface meiner Anwendung aus UX-Perspektive.

Die wichtigste Nutzeraufgabe lautet: Einen passenden Workshop finden und einen Platz reservieren.

Untersuche Informationshierarchie, Verständlichkeit, Interaktionsfeedback, Fehlervermeidung, mobile Bedienbarkeit und Accessibility.

Unterscheide zwischen Problemen, die sich direkt aus dem vorhandenen Interface erkennen lassen, und Vermutungen, die durch Nutzertests überprüft werden müssten.

Priorisiere die drei wichtigsten Verbesserungen und begründe sie. Verändere zunächst keinen Code.

Diese letzte Anweisung finde ich besonders wertvoll.

Wenn ein KI-Assistent sofort beginnt, Komponenten umzubauen, verschwinden schnell die Gründe hinter seinen Änderungen. Eine vorgeschaltete Analyse macht es leichter, die Empfehlungen zu verstehen, zu hinterfragen und bewusst auszuwählen.

Allerdings bleibt ein KI-Review eine ergänzende Einschätzung. Das System kann Probleme übersehen, Inhalte falsch interpretieren oder Änderungen empfehlen, die in deinem Nutzungskontext wenig sinnvoll sind.

Es ersetzt keine Tests mit echten Nutzern.

7. Dein erster UX-Check: 20 Fragen für deine eigene App

Bisher haben wir unsere beispielhafte Workshop-Plattform verbessert. Jetzt bist du dran.

Öffne eine Anwendung, die du selbst mit KI entwickelt hast, und entscheide dich für eine wichtige Nutzeraufgabe. Vielleicht möchtest du einen Eintrag erstellen, eine Datei hochladen oder eine Buchung abschließen.

Versuche diese Aufgabe vollständig durchzuspielen, möglichst ohne währenddessen Code oder Gestaltung zu verändern.

Die folgenden 20 Fragen helfen dir dabei, Probleme systematischer zu erkennen.

Nutzeraufgabe und Orientierung

1. Ist innerhalb weniger Sekunden erkennbar, wofür die aktuelle Seite gedacht ist?
2. Können Nutzer die wichtigste Aktion ohne längere Suche finden?
3. Sind die verwendeten Begriffe für die Zielgruppe verständlich?
4. Enthält die Seite Informationen oder Funktionen, die für diese Aufgabe eigentlich überflüssig sind?

Visuelle Hierarchie und Gestaltung

5. Ist klar, welche Überschrift, Information oder Aktion die höchste Priorität besitzt?
6. Sind zusammengehörige Inhalte visuell sinnvoll gruppiert?
7. Werden Schriftgrößen, Abstände und Farben konsistent verwendet?
8. Sind interaktive Elemente eindeutig als solche erkennbar?

Interaktion und Rückmeldungen

9. Ist vor einer Aktion verständlich, was anschließend passieren wird?
10. Zeigt die Anwendung an, wenn eine Aktion gerade verarbeitet wird?
11. Erhalten Nutzer nach wichtigen Aktionen eine eindeutige Bestätigung?
12. Können Fehler verstanden und möglichst einfach behoben werden?

Mobile Bedienung und Barrierefreiheit

13. Funktioniert die wichtigste Aufgabe auf einem schmalen Smartphone-Bildschirm?
14. Sind Texte ausreichend gut lesbar und kontrastreich?
15. Können alle wesentlichen Funktionen mit der Tastatur bedient werden?
16. Sind Eingabefelder beschriftet und Bedienelemente ausreichend groß beziehungsweise sinnvoll voneinander getrennt?

Abschluss und tatsächlicher Nutzen

17. Können Nutzer die Aufgabe ohne unnötige Zwischenschritte abschließen?
18. Ist am Ende eindeutig erkennbar, ob die Aufgabe erfolgreich erledigt wurde?
19. Welche Stelle verursacht vermutlich die größte Unsicherheit oder den meisten Aufwand?
20. Welche einzelne Änderung würde diese Nutzeraufgabe am stärksten vereinfachen?

Du musst nicht sofort alle Probleme lösen.

Suche dir die drei wichtigsten Auffälligkeiten heraus und versuche zu beschreiben, warum sie problematisch sein könnten. Notiere außerdem, worauf deine Einschätzung beruht: auf einem klar erkennbaren Fehler, einer bekannten Gestaltungsregel oder einer bislang ungeprüften Annahme.

Diese Unterscheidung hilft dabei, nicht jede Vermutung als gesicherte Erkenntnis zu behandeln.

Anschließend kannst du gezielt Änderungen vornehmen und denselben Ablauf erneut durchspielen.

Wenn möglich, bitte zusätzlich eine Person aus der tatsächlichen Zielgruppe, die Aufgabe ohne deine Hilfe zu erledigen. Beobachte, an welchen Stellen sie zögert, zurückgeht oder Fragen stellt. Eine einzelne Beobachtung beweist noch kein allgemeines Problem, kann aber wertvolle Hinweise für die nächste Verbesserung liefern.

8. Die wichtigste Fähigkeit ist nicht, schöne Oberflächen zu erzeugen

Wenn du mit Vibe Coding beginnst, wirst du wahrscheinlich viel Zeit damit verbringen, neue Funktionen zu erstellen. Das ist verständlich. Es macht Spaß, wenn eine Idee plötzlich als echte Anwendung auf dem Bildschirm erscheint.

Und vermutlich wird KI in Zukunft noch mehr von dieser Arbeit übernehmen können.

Was dadurch nicht automatisch einfacher wird, ist die Frage, welche Funktionen sinnvoll sind, wie Menschen sie verstehen und ob sie im Alltag tatsächlich helfen.

Genau deshalb lohnt es sich, UI/UX-Grundlagen zu lernen.

Nicht, weil jede Anwendung ein preisverdächtiges Design benötigt. Auch nicht, weil du jede Entscheidung eines professionellen Designers übernehmen müsstest.

Sondern weil du anfängst, deine eigene Software mit anderen Augen zu betrachten.

Du bemerkst, wenn eine Hauptaktion zwischen unwichtigen Informationen verschwindet. Du hinterfragst, ob ein Formular wirklich sechs Felder braucht. Du denkst darüber nach, was nach dem Klick passiert, und erkennst, dass ein fehlender Fokuszustand mehr als ein optischer Schönheitsfehler sein kann.

Vor allem hörst du auf, einen fertigen Screenshot automatisch mit einem fertigen Produkt gleichzusetzen.

Das Schöne daran: Du musst nicht alles auf einmal beherrschen.

Beginne bei deiner nächsten App mit einer einzigen Nutzeraufgabe. Gestalte den Weg dorthin bewusst, prüfe die wichtigsten Zustände und lass jemanden ausprobieren, ob die Bedienung verständlich ist.

Vielleicht wirst du dabei feststellen, dass deine Anwendung gar nicht mehr Komponenten benötigt.

Vielleicht braucht sie sogar weniger.

Gutes UI/UX-Design beginnt nicht damit, dass du alles schöner machst. Sondern damit, dass du verstehst, was für deine Nutzer besser werden muss.

---

Quellen und weiterführende Literatur

• Nielsen, Jakob: 10 Usability Heuristics for User Interface Design. Nielsen Norman Group. Grundlegende Prinzipien unter anderem zu Systemrückmeldungen, Konsistenz, Fehlervermeidung und Nutzerkontrolle.
• W3C: Web Content Accessibility Guidelines (WCAG) 2.2. Offizielle Anforderungen an barrierefreie Webinhalte, darunter Kontrastverhältnisse, Tastaturbedienbarkeit und Zielgrößen.
• W3C Web Accessibility Initiative: Validating Input. Praxisleitfaden zur verständlichen und zugänglichen Formularvalidierung.
• Google Search Central: Creating Helpful, Reliable, People-First Content. Ergänzende Leitlinien für die Veröffentlichung eigenständiger, hilfreicher und nachvollziehbarer Webinhalte.

Redaktioneller Hinweis: Die Workshop-Plattform und die beschriebenen Verbesserungen sind konstruierte Lehrbeispiele. Für diesen Artikel wurde weder ein tatsächlicher Codex-Vergleich noch ein Usability-Test mit Teilnehmenden durchgeführt. Die Empfehlungen basieren auf etablierten Gestaltungsprinzipien und dienen als Einstieg, nicht als vollständiger UX- oder Accessibility-Audit.

Weiterlesen: Wer gestaltet die Nutzererfahrung beim Vibe Coding? · Warum KI-generierte Websites oft gleich aussehen.