AI-UI/UX-Reviewer: Designkritik zur Ursachenanalyse anhand von Screenshots

UI/UX Reviewer hilft Ihnen dabei, klarere und benutzerfreundlichere Interfaces zu entwickeln, indem ein Screenshot so gelesen wird, wie es eine erfahrene Designleitung tun würde – einschließlich Hierarchie, Abständen, fehlenden Zuständen, Barrierefreiheit und plattformspezifischen Konventionen. Während sich die meisten Feedbacks entweder in Pixel-Details verlieren oder eine automatisierte Checkliste abarbeiten, diagnostiziert dieses AI-Tool die Ursachen und zeigt Ihnen, was zuerst behoben werden sollte.

✅ Analysiert visuelle Hierarchie, Abstandssysteme und die Konsistenz von Komponenten anhand eines statischen Bildes ✅ Erkennt fehlende Leer-, Fehler-, Lade- und deaktivierte Zustände, die Screenshots verbergen ✅ Prüft Kontrast, Zielgröße und Farbunabhängigkeit anhand von Standards zur Barrierefreiheit ✅ Passt das Feedback an Designer, Entwickler, Produktmanager und Anfänger an

Eine Inkonsistenz bei Abständen ist selten ein Einzelfall. Meist bedeutet sie, dass kein Abstandssystem vorhanden ist. Eine verwaschene sekundäre Beschriftung ist selten einfach „ein Grau, das dunkler sein sollte“ – oft steckt ein Problem mit Schriftskalierung und Kontrast dahinter, das sich auf jedem Bildschirm wiederholen wird. Das ist der Unterschied zwischen einer Checklisten-Review und einer Review durch eine Designleitung.

Um zu verstehen, warum dieser Unterschied wichtig ist, lohnt sich ein Blick darauf, wie Produkte Nutzer heute tatsächlich enttäuschen – und warum die meisten Review-Prozesse gerade die Fehler nicht erkennen, die den größten Schaden verursachen.

Schnelle Antwort: Was ist UI/UX Reviewer?

UI/UX Reviewer ist ein AI-Designkritiker, der Screenshots analysiert, um Probleme bei Hierarchie, Abständen, fehlenden Zuständen und der Barrierefreiheit zu diagnostizieren – und anschließend Lösungen für die Ursachen vorschlägt. Die Bewertung erfolgt anhand der Absicht des Bildschirms, nicht anhand einer allgemeinen ästhetischen Präferenz.

Wichtige Funktionen:

• Diagnose von visueller Hierarchie, Typografie, Farben und Abständen in einem 8px-Raster
• Klarheit der Interaktion: Affordanzen, CTAs und vollständige Zustandsabläufe von Komponenten
• Barrierefreiheitsprüfung nach WCAG-Prinzipien statt einer nachträglich aufgesetzten Checkliste
• Plattformbewusste Kritik für iOS-, Android-, Web- und Desktop-Konventionen
• Nach Schweregrad geordnete Ergebnisse mit konkreten nächsten Schritten auf Systemebene

Warum die meisten UI-Reviews die tatsächlichen Nutzerprobleme übersehen

Interfaces werden immer dichter. Die WebAIM-Evaluierung von einer Million Startseiten aus dem Jahr 2026 ergab durchschnittlich 1.437 Elemente pro Seite – einen Anstieg um 22,5 % innerhalb eines einzigen Jahres. Mehr Elemente bedeuten mehr Stellen, an denen die Hierarchie zusammenbrechen, Beschriftungen fehlen und der Kontrast scheitern kann.

Barrierefreiheit ist die am besten messbare Form dieses Zusammenbruchs:

95,9 % – der zehn Millionen wichtigsten Startseiten wiesen 2026 erkennbare WCAG-2-Verstöße auf, gegenüber 94,8 % im Vorjahr

56,1 Fehler pro Seite – durchschnittlich erkannte Fehler bei der Barrierefreiheit, ein Anstieg um 10,1 % gegenüber 2025

83,9 % – dieser Startseiten scheiterten allein an Text mit zu geringem Kontrast

Diese sechs wiederkehrenden Fehlertypen – zu geringer Kontrast, fehlende Textalternativen für Bilder, nicht beschriftete Eingabefelder, leere Links, leere Schaltflächen und eine fehlende Dokumentsprache – machen weiterhin den Großteil der automatisch erkannten Fehler aus. WebAIM berichtet, dass 96 % der erkannten Fehler auf diese Kategorien entfallen. Automatisierte Prüfer sind hier nützlich. Sie sind jedoch unvollständig.

Das Framework der Nielsen Norman Group zu Forschungsmethoden zieht eine klare Grenze zwischen dem, was Menschen tun, und dem, was ein Tool zählen kann. Quantitative Scanner beantworten die Frage „Wie viele Kontrastfehler gibt es?“. Sie können nicht beantworten, ob die primäre Aktion visuell schwächer ist als ein sekundäres Chip-Element, ob ein Leerzustand nie gestaltet wurde oder ob die Filter eines Dashboards mit den Daten konkurrieren, denen sie dienen sollen. Das ist qualitative, absichtsbewusste Kritik – genau die Art von Arbeit, für die erfahrene Reviewer eingestellt werden, und die die meisten Teams erst einmalig, spät und unter Zeitdruck erhalten.

Die menschlichen Kosten sind nicht theoretisch. Schätzungsweise 1,3 Milliarden Menschen leben mit Behinderungen, und Klagen wegen mangelnder Barrierefreiheit bleiben in den Vereinigten Staaten ein aktuelles Compliance-Risiko. Unterdessen hat WCAG 2.2 Erfolgskriterien für mobile Ziele, die Sichtbarkeit des Fokus, Alternativen zu Drag-and-drop und eine Authentifizierung ergänzt, die Passwortmanager nicht blockiert – Standards, die viele veröffentlichte Produkte noch immer nicht umgesetzt haben.

Eine Review zu erhalten, die das Produkt tatsächlich verbessert, ist jedoch weiterhin frustrierend schwierig:

• Feedback kommt zu spät. Kritik trifft oft ein, wenn die Entwicklung bereits mitten in der Umsetzung steckt und ein Abstandssystem oder Navigationsmuster nur noch teuer geändert werden kann.
• Checklisten verwechseln Symptome mit Systemen. „Machen Sie diesen Abstand um 8px kleiner“ behebt die nächsten 40 Bildschirme nicht, wenn es keine 4/8px-Baseline gibt.
• Screenshots verbergen die UX. Leer-, Fehler-, Lade-, deaktivierte und Überlaufzustände sind die Stellen, an denen Produkte scheitern – und sie erscheinen nur selten im Happy-Path-Mockup.
• Tools und Geschmack reden aneinander vorbei. Entwickler erhalten ästhetische Hinweise, die sie nicht umsetzen können; Designer erhalten Kontrastverhältnisse ohne eine Diagnose der Hierarchie; PMs bekommen ein Meer gleich wichtiger Kleinigkeiten.

Genau dafür wurde eine erfahrene, screenshot-basierte Design-Review entwickelt.

Warum UI/UX Reviewer

UI/UX Reviewer behandelt jeden Upload als Designkritik und nicht als Lint-Prüfung. Zuerst wird die Absicht erfasst – was der Bildschirm ist, für wen er gedacht ist und was der Nutzer erreichen muss –, anschließend wird die Umsetzung an dieser Absicht gemessen. Ein minimalistischer Login und ein datenreiches Operations-Dashboard werden nicht nach derselben Bewertungsmethode beurteilt.

Traditioneller Ansatz	UI/UX Reviewer
Tage auf den Kalender eines erfahrenen Designers warten	Screenshot hochladen und noch in derselben Sitzung eine priorisierte Review erhalten
Automatisierte Scanner erkennen Kontrast und fehlende Beschriftungen	Diagnostiziert Hierarchie, Affordanzen, Texte und Zustände, die Scanner nicht sehen können
Pixel-Hinweise ohne zugrunde liegendes System	Benennt die Ursache – fehlende Schriftskalierung, fehlendes Abstands- oder Komponentensystem
Eine allgemeine Liste gleichwertiger Probleme	Kritisch / hoch / mittel / niedrig, nach Auswirkungen auf die Aufgabe geordnet
Derselbe Ton für jede Zielgruppe	Passt sich an Designer, Entwickler, PMs oder Anfänger an

Die Review ist konkret. Kontrast wird in Verhältnissen und WCAG-Begriffen besprochen, nicht mit „Dieses Grau wirkt hell“. Touch-Ziele werden anhand von Plattformvorgaben wie dem Apple-Mindestmaß von 44×44 pt und den Grundlagen der Barrierefreiheit von Material 3 geprüft. Fehlende Zustände werden als Ergebnisse benannt und nicht einfach in Gedanken ergänzt.

Hierarchie vor Dekoration

Größe, Gewicht, Farbe, Position, Nähe und Erhebung sollten die Aufmerksamkeit lenken. Wenn ein Rabatt-Badge lauter hervortritt als die Checkout-Schaltfläche, ist der Bildschirm nicht einfach „überladen“ – die Hierarchie ist umgekehrt. Der Reviewer beginnt mit dieser Problemklasse, weil sie das Verständnis blockiert.

Zustände als eigenständiges Ergebnis

Standard-, Hover-, aktiver, Fokus-, deaktivierter, Lade-, Leer-, Fehler- und Erfolgszustand ergeben eine vollständige Geschichte der Komponente. Fehlende Zustände sind die häufigste Entdeckung auf Expertenebene. Ein Formular, das nur in seinem perfekt ausgefüllten Zustand existiert, ist nicht fertig – selbst wenn die Pixel ausgefeilt aussehen.

Barrierefreiheit als Benutzerfreundlichkeit

WCAG 2.2 ist nach vier Prinzipien aufgebaut: wahrnehmbar, bedienbar, verständlich und robust. Die neuen Kriterien von 2.2 behandeln einen nicht verdeckten Fokus, eine Mindestzielgröße, Ziehbewegungen, konsistente Hilfe, redundante Eingaben und eine zugängliche Authentifizierung. Der Reviewer wendet diese Prinzipien diagnostisch an – Farbe trägt Bedeutung nie allein, die Fokusreihenfolge ergibt Sinn und Bewegung ist nicht zwingend erforderlich –, statt die Spezifikation lediglich aufzusagen.

Plattformkonventionen statt einer allgemeinen „aufgeräumten UI“

Die Human Interface Guidelines für iOS, Material 3 und Konventionen für Webformulare und Browser folgen unterschiedlichen Regeln. Eine untere Tab-Leiste, bei der die Darstellung ausgewählter und nicht ausgewählter Icons vertauscht ist, wird sich für iOS-Nutzer falsch anfühlen, selbst wenn sie visuell ordentlich wirkt. Der Reviewer erkennt die Plattform anhand visueller Hinweise, wenn Sie sie nicht angeben.

Beispiel-Prompts:

„Prüfe diesen iOS-Checkout-Bildschirm. Es ist ein MVP. Sage mir, was einen Erstnutzer davon abhalten könnte, zu bezahlen.“

„Dieses SaaS-Dashboard ist für Operationsmanager gedacht. Kritisiere Hierarchie und Dichte sowie alles, was ich für Leer- und Fehlerzustände nicht gestaltet habe.“

„Ich bin Entwickler und setze diesen Figma-Frame in React um. Gib mir umsetzungsorientierte Hinweise zu Abstandstokens, Kontrast und Trefferflächen.“

So funktioniert es

Sie benötigen zum Start keine vollständige Dokumentation des Designs Systems. Ein klarer Screenshot und ein Satz Kontext genügen. Der AI-Reviewer analysiert, was sichtbar ist, markiert, was anhand eines statischen Bildes nicht beurteilt werden kann, und priorisiert, was zuerst geändert werden sollte.

Schritt 1: Laden Sie den Bildschirm hoch, den Sie tatsächlich beurteilen lassen möchten

Erfassen Sie die echte UI oder das High-Fidelity-Mockup – das vollständige Fenster, nicht nur eine eng zugeschnittene Schaltfläche. Unscharfe, winzige oder stark komprimierte Aufnahmen durchlaufen eine Qualitätsprüfung: Sie werden um eine bessere Aufnahme gebeten, statt eine selbstsichere Review von Pixeln zu erhalten, die gar nicht vorhanden sind.

„Hier ist der Hero-Bereich der produktiven Startseite auf dem Desktop. Ignoriere die sprachliche Optimierung des Marketings und sage mir, ob CTA-Hierarchie und Kontrast standhalten.“

Schritt 2: Beschreiben Sie Absicht, Plattform und Entwicklungsstand

Ein einziger Satz verändert den Maßstab der Kritik. Ein MVP erhält Hinweise zur strukturellen Klarheit; ein Produkt vor dem Launch erhält Hinweise zu Struktur und Feinschliff. Nennen Sie die Plattform (iOS, Android, Web, Desktop) und die Aufgabe, die der Nutzer abschließen möchte.

„Android-Einstellungsbildschirm, Material 3, vor dem Launch. Nutzer finden die Benachrichtigungseinstellungen nicht.“

Schritt 3: Lesen Sie die priorisierte Kritik

Erwarten Sie eine Einschätzung des ersten Eindrucks, echte Stärken (konkret, nicht „sieht sauber aus“) und anschließend Probleme in der Reihenfolge ihres Schweregrads. Jeder Befund enthält eine Beschreibung des Problems, das zugrunde liegende Prinzip und eine konkrete Lösung. Lücken im System – keine Abstandsskalierung, keine Schriftskalierung, keine Komponentenbibliothek – werden als Ursachen benannt und nicht als Ansammlung unabhängiger Kleinigkeiten.

Schritt 4: Ergänzen Sie, was der Screenshot nicht zeigen kann

Bitten Sie um Leer-, Fehler-, Lade- und Überlaufzustände. Senden Sie einen zweiten Bildschirm aus demselben Ablauf, um die Konsistenz zu prüfen. Fordern Sie bei Iterationen eines Bildschirms einen expliziten Vorher-Nachher-Vergleich an: Was wurde besser, was schlechter und was ist noch offen?

„Dasselbe Dashboard, nachdem wir ein 8px-Raster ergänzt haben. Was ist besser geworden und was beeinträchtigt die Scanbarkeit weiterhin?“

Schritt 5: Machen Sie aus den Ergebnissen ein System statt eines Patches für einen Bildschirm

Wenn die Review feststellt, dass Ihre 12px-Abstände gegen ein 8px-Denkmodell arbeiten, besteht die Lösung aus einem Satz von Abstandstokens – nicht aus einem einzelnen Margin. Wenn Farbe die gesamte Bedeutung eines Status trägt, besteht die Lösung aus Form plus Beschriftung, und zwar überall dort, wo ein Status erscheint. Wenn das Produkt außerdem ein dokumentiertes visuelles System benötigt, um die nächste Runde von Abweichungen zu verhindern, kann der Brand Kit Generator diese Entscheidungen in Paletten, Typografie und Richtlinien übertragen, die das gesamte Team wiederverwenden kann.

Probieren Sie UI/UX Reviewer kostenlos aus – keine Kreditkarte erforderlich.

Ergebnisse & Anwendungsfälle

📊 Gründer prüft ein MVP, bevor es sich verfestigt

Szenario: Ein zweiköpfiges Startup steht kurz davor, einen Web-Onboarding-Ablauf den ersten 50 Nutzern zu präsentieren. Die Bildschirme sehen in Figma „sauber“ aus. Niemand hat Leerzustände, Fehlertexte oder die Frage geprüft, ob die primäre Schaltfläche im Darstellungsbereich eines mittelgroßen Laptops bestehen bleibt.

Traditioneller Ansatz: Einen Designer auf Teilzeitbasis buchen, eine Woche warten und eine Präsentation mit 40 nicht priorisierten Hinweisen erhalten – oder das Produkt veröffentlichen und aus der Abwanderung lernen.

UI/UX Reviewer: Laden Sie die drei zentralen Bildschirme mit dem Kontext „Consumer-Web-MVP, Aufgabe ist es, in weniger als zwei Minuten ein Konto zu erstellen und einen Mehrwert zu erkennen“ hoch. Sie erhalten eine nach Schweregrad geordnete Liste: konkurrierende CTAs bei der Planauswahl, keine Überspringen-Affordanz, Kontrastfehler bei Hilfetexten und ein fehlender Passwort-Fehlerzustand. Die 2–3 Änderungen mit dem größten Hebel werden ausdrücklich benannt.

• Erkennt Anti-Patterns im Onboarding (zu viele sichtbare Schritte, verzögerter Mehrwert hinter Formularen)
• Trennt blockierende Launch-Probleme von Feinschliff
• Gibt Gründern eine Sprache an die Hand, mit der sie die Entwicklung briefen können, ohne vorzugeben, eine Designleitung zu sein

💼 Produktdesigner führt eine QA vor der Übergabe durch

Szenario: Ein Produktdesigner ist für ein SaaS-Analytics-Dashboard verantwortlich. Die Entwicklung benötigt morgen die Spezifikationen. Der Designer spürt, dass die Dichte nicht stimmt, möchte aber vor der Behandlung der Datei als zentrale Referenz noch eine zweite Review auf dem Niveau einer Designleitung.

Traditioneller Ansatz: Einen viel beschäftigten Principal Designer per Slack anschreiben und auf asynchrone Kommentare zu einigen Frames hoffen.

UI/UX Reviewer: Senden Sie das Dashboard, die Filter und den Leerzustand. Die Review weist auf ein diagrammlastiges Layout ohne sichtbare umsetzbare Erkenntnisse, Filterelemente, die mit den Inhalten konkurrieren, und Zeilenaktionen hin, die die Erwartungen an Zielgrößen gemäß dem Zielgrößenkriterium von WCAG 2.2 nicht erfüllen. Stärken – etwa progressive Offenlegung auf Kartenebene und eine konsistente Ausrichtung numerischer Tabellenwerte – werden benannt, damit sie nicht versehentlich neu gestaltet werden.

• Systemische Kritik auf Peer-Niveau statt Hinweise zu Geschmack und Ästhetik
• Konsistenz über mehrere Bildschirme hinweg, wenn Sie mehr als einen Frame hochladen
• Eine Aufgabenliste, die Sie nach Schweregrad in Tickets umwandeln können

Wenn der nächste Schritt eher die Erkundung eines alternativen Layouts als die reine Annotation des aktuellen ist, kann der UI/UX Prototype Generator einen realistischen iOS-, Android- oder Web-Bildschirm erzeugen, der die empfohlene Hierarchie und die Plattformmuster bereits berücksichtigt.

📱 Mobile Engineer prüft die Umsetzung anhand des Mockups – auf einem Smartphone

Szenario: Ein iOS-Engineer hat einen Bildschirm zur Trainingsprotokollierung anhand eines Mockups umgesetzt. Auf einem echten iPhone befinden sich die sekundären Aktionen in den unerreichbaren oberen Ecken, die Darstellung des ausgewählten Tab-Icons wirkt vertauscht und die Listenzeilen sind antippbar, sehen aber statisch aus. Der Engineer möchte während des Pendelns umsetzungsorientiertes Feedback direkt auf dem Gerät in seiner Tasche erhalten.

Traditioneller Ansatz: Den Screenshot in einen Design-Kanal stellen und warten. Oder das Produkt veröffentlichen und in Sitzungsaufzeichnungen beobachten, wie Nutzer Schwierigkeiten haben, Gesten zu entdecken.

UI/UX Reviewer: Laden Sie den Gerätescreenshot von iOS oder Android hoch. Bitten Sie um HIG-/Material-Hinweise, eine Zuordnung der Daumenzone sowie eine Prüfung von Zielgrößen mit 44pt/48dp. Die Review unterscheidet zwischen „Das Mockup war falsch“ und „Die Umsetzung ist abgewichen“ und weist auf Kollisionen mit der Statusleiste sowie Probleme mit dem sicheren Bereich hin, die Desktop-Figma-Frames oft übersehen.

• Funktioniert mit vollständigem Funktionsumfang im Web, auf iOS und Android, sodass die Review auf demselben Smartphone erfolgen kann, auf dem der Fehler sichtbar wurde
• Auf Entwickler abgestimmte Hinweise: Trefferflächen, Fokus und Komponenten-Zustände statt unerklärter ästhetischer Vorlieben
• Prüfung von Plattformkonventionen anhand der Apple HIG und Material 3

Wenn das Marketing ein Landing-Visual benötigt, das zur gerade optimierten Produkt-UI passt, kann Graphic Designer markenkonforme Web- und Kampagnen-Assets erstellen, sodass Schaufenster und App nicht länger wie zwei verschiedene Produkte wirken.

FAQ

Ist UI/UX Reviewer kostenlos?

Ja. Sie können UI/UX Reviewer im kostenlosen Tarif mit allen Kernfunktionen und begrenzter monatlicher Nutzung verwenden. Kostenpflichtige Tarife erhöhen die Nutzung – Plus beginnt bei 20 $/Monat –, wenn Sie in jedem Sprint vollständige Abläufe prüfen. Für die Nutzung ist keine Kreditkarte erforderlich.

Wie unterscheidet sich UI/UX Reviewer von einem Scanner für Barrierefreiheit?

Scanner sind besonders gut darin, zählbare Fehler zu erkennen: Kontrast, fehlendes alt, nicht beschriftete Eingabefelder. Die eigene Methodik von WebAIM weist darauf hin, dass automatisierte Tools nicht jeden WCAG-Fehler erkennen können. Dieser Reviewer markiert solche Probleme ebenfalls und ergänzt anschließend Aspekte, die Scanner nicht sehen können – eine umgekehrte Hierarchie, fehlende Leer-/Fehler-/Ladezustände, schwache Affordanzen, Verstöße gegen Plattformkonventionen und die Frage, ob der Bildschirm seine erklärte Aufgabe erfüllt.

Kann das Tool Screenshots mobiler Apps prüfen und nicht nur Websites?

Ja. Wenn Sie keine Plattform angeben, leitet das Tool iOS, Android, Web oder Desktop aus visuellen Hinweisen ab und wendet anschließend die passenden Konventionen an: Navigationsleisten und sichere Bereiche auf iOS, Material-3-Muster auf Android sowie Formular- und Viewport-Verhalten im Web. Gerätescreenshots sind gültige Eingaben. Geben Sie an, wenn die Daumenzone und die Zielgröße besonders berücksichtigt werden sollen.

Funktioniert UI/UX Reviewer auf einem Smartphone?

Ja. Reviews laufen mit vollständigem Funktionsumfang im Web, auf iOS und Android, einschließlich Sprache-zu-Text, wenn Sie einen Bildschirm lieber beschreiben als tippen möchten. Das ist wichtig, wenn der Fehler nur auf einem echten Gerät auftritt.

Wie präzise ist die Designkritik?

Die Ergebnisse stützen sich auf etablierte Prinzipien – Gruppierung nach Gestalt, Fitts’ Law, WCAG 2.2 und HIG-/Material-Richtlinien der Plattformen – und nicht auf unerklärten Geschmack. Stilistische Vorlieben werden als solche gekennzeichnet. Kontrastaussagen bleiben vorsichtig formuliert, wenn sich exakte Hex-Werte aus einem komprimierten Screenshot nicht ablesen lassen. Der Reviewer bittet um ein besseres Bild oder einen fehlenden Zustand, statt etwas zu erfinden, das nicht sichtbar ist.

Kann das Tool einen vollständigen Ablauf oder nur einen Bildschirm prüfen?

Beides. Ein Screenshot liefert eine fokussierte Review. Mehrere Bildschirme ergänzen die Konsistenz über Bildschirme hinweg, die Logik des Ablaufs und Lücken im Designsystem (Abstände, Typografie, Komponenten). Iterationen desselben Bildschirms können explizit verglichen werden, damit Sie wissen, was sich tatsächlich verbessert hat.

Fazit

Die meisten Produkte scheitern nicht, weil ein Eckenradius falsch ist. Sie scheitern, weil die Hierarchie den Blick nicht führt, weil Leer- und Fehlerzustände nie gestaltet wurden, weil Kontrast und Zielgröße einen großen Teil der Nutzer ausschließen und weil niemand mit der Urteilskraft einer Designleitung den Bildschirm vor der Veröffentlichung geprüft hat.

UI/UX Reviewer stellt Ihnen dieses Urteil auf Abruf zur Verfügung: Screenshot hinein, nach Schweregrad geordnete Kritik heraus – mit Lösungen für die Ursachen statt einer Ansammlung von Symptomen. Nutzen Sie das Tool für das MVP, das kurz vor der Verfestigung steht, für das Dashboard vor der Übergabe oder für den Gerätescreenshot, der sich bereits ein wenig falsch anfühlt.

Probieren Sie UI/UX Reviewer jetzt aus. Entdecken Sie mehr bei Jenova.

---

Für Entwickler: UI/UX Reviewer ist programmgesteuert über die Jenova API verfügbar – integrieren Sie screenshotbasierte Designkritik mit einem einzigen API-Aufruf in Ihre Anwendung. Vollständige Dokumentation →