ChatGPT für Designer im Check

müßige Mehrarbeit oder tadelloses Tool?

Moritz Franzke

User Experience Designer

Der aktuelle Hype um künstliche Intelligenz ist kaum zu umgehen. Aktienpreise schießen in die Höhe, sobald ein Unternehmen Andeutungen in Richtung AI macht, zahlreiche Expert*innen prophezeien den Beginn einer neuen Ära der Wertschöpfung und längst hat das Thema KI seinen Platz am Tisch beim heimischen Abendessen eingenommen.
Vor allem seitdem ChatGPT Bilder-Input akzeptiert und interpretieren kann, ist die (zumindest theoretische) Nützlichkeit für Designer um ein Vielfaches gestiegen. Die gewonnene Multimodalität ermöglicht Usern die Eingabe von Designs per Bilddatei, auf die ChatGPT dann reagiert. Sei es direktes Feedback auf die Usability eines Designs, gemeinsames Erarbeiten von User Flows, Accessibility Checking, Erstellen von Personas aus eingegebenen Datenquellen oder der Prüfung von Designs nach bekannten Design Guidelines – die denkbaren Use Cases sind nahezu endlos.

Allerhöchste Zeit also, ChatGPT einmal auf Herz und Nieren zu prüfen! Wo können wir Zeit sparen? Wie lässt sich die Qualität unserer Designs verbessern? Werden schon übermorgen Designer in Scharen durch LLMs ersetzt werden? Finden wir es heraus.

Im folgenden Test wurden verschiedene Anwendungsfälle geprüft und mit der klassischen Herangehensweise verglichen. Als Beispiel wird dabei die Erstellung einer Rezepteapp genutzt. Die Konzeption dieses kleinen Experimentes stellen wir hier genauer vor.

Von der Idee bis zur Umsetzung in Screen Designs begleitet uns dabei die künstliche Intelligenz und muss sich beweisen. Damit wir in unseren Prompts mit der KI nicht jedes Mal definieren müssen, wie sich ChatGPT verhalten soll (UX Designer, der nach Best Practices arbeitet etc.), nutze ich das GPT „UX Guy“. GPTs sind vortrainierte Versionen von ChatGPT, die auf ein Anwendungsgebiet spezialisiert sind und von jeder Person erstellt werden können. Neben UX Guy habe ich auch ein anderes GPT mit UX Bezug getestet, welches im Erstversuch allerdings etwas schlechter abgeschnitten hat.

Am Anfang war die Konzeption

Bisher steht nur die grobe Idee – eine App, die es Usern ermöglicht, ein Foto ihres Kühlschrankinhalts zu machen und anhand dessen eine AI dann Rezeptvorschläge liefert. So weit, so gut.

Damit aus einer Idee auch ein sinnvolles Produkt werden kann, muss das Ganze natürlich noch genauer ausdefiniert werden. Dabei geht es darum, ob das potenzielle Produkt die richtigen Probleme löst. Um das herauszufinden, werden Nutzungsszenarien beleuchtet, bisherige Vorgehensweisen bei den entsprechenden Szenarien betrachtet und die damit einhergehenden Pain Points gesammelt. Damit kann die Ausgangsidee, zumindest auf grundsätzlicher Ebene, validiert oder falsifiziert und entsprechend abgeändert werden.

Im traditionellen Ansatz haben wir uns zu einer Brainstorming Session am Whiteboard verabredet. Die grobe Visualisierung der Idee anhand eines User Flows hat uns dabei geholfen, das Produkt Stück für Stück zu durchdenken. Am Ende kamen wir auf zwei Anwendungsszenarien und die Möglichkeit, statt eines Fotomodus möglicherweise mit Spracheingabe vorzugehen.

Problematisch bei der Herangehensweise per Foto ist vor allem das Erkennen des gesamten Kühlschrankinhalts – besonders bei normalen Kühlschränken wie man sie in der Regel bei Privatpersonen vorfindet. Unaufgeräumt, mit Fächern samt ominöser Tupperdosen. Sollen nur einzelne Zutaten ausgewählt werden, könnte dies viel Input von den Usern verlangen. So müssten etwa erkannte Zutaten abgewählt oder alle relevanten Lebensmittel eigens für das Foto zusammengestellt werden.

Dennoch hat die Bildeingabe auch ihre Vorteile. So ist der Wow-Faktor dabei größer, was bei unserem kleinen Experiment durchaus eine Rolle spielt. Größere Mengen an Lebensmitteln können ebenfalls schneller aufgenommen werden, sodass User sich hier Zeit sparen und den Mund nicht fusselig reden müssen.

Unser freundlicher UX Guy findet die Grundidee „quite innovative“. In kurzer Zeit klappert er die Idee aus verschiedenen Perspektiven ab, wie etwa UX/UI Design, User Needs oder auch Privacy Concerns. Dabei weist das Programm bereits auf ein paar Herausforderungen hin und macht eigenständig Vorschläge für Features.
Möglichkeiten zur Problemlösung etwa bei der Erkennung versteckter Zutaten im Kühlschrank macht unser intelligenter Assistent noch nicht.
Erst auf die Nachfrage, ob er eine bessere Konzeptidee für eine App hat, welche dieselben Probleme löst, kommen einige Lösungsansätze. Neben der manuellen und sprachlichen Eingabe der Zutaten durch den User anstelle des Fotos wird auch Barcode Scanning vorgeschlagen. Zusätzlich kommt das Tool auf weitere Featureideen wie einer Community, dem dauerhaften Tracking von Vorräten durch Einkaufslisten sowie Push-Notifications zu ablaufenden Lebensmitteln.

Weitere Vorteile der Spracheingabe werden von unserem digitalen UX Experten nicht erdacht. Beim Brainstorming hingegen sind wir bereits auf einige Vorteile gekommen. So könnte man bei der Eingabe des Users diesem die Möglichkeit bieten, neben den Zutaten auch schon dessen Präferenzen und Erwartungen an die später generierten Rezepte aufzunehmen und visuell als Tags darzustellen.

Let’s get visual!

Wir haben uns dazu entschieden sowohl die Version mit Bilderkennung als auch eine mit Spracherkennung grob zu konzeptionieren. Dazu wurden Happy Flows erstellt und die damit verbundenen Screen States gesammelt. Auf dieser Basis wurden auch Featurebestandteile, die nicht zwangsläufig in ein MVP inkludiert werden müssen, identifiziert.

Um einen ähnlichen Output von ChatGPT zu erlangen, fragen wir den UX Guy nach dem Happy Path in Form eines User Flows. Innerhalb kürzester Zeit liefert der fleißige Helfer die Antwort. In den sechs Abschnitten User Onboarding, Main Functionality, Recipe Suggestions, Additional Features, Continuous Engagement sowie User Support and Settings sind die einzelnen Steps eines Users durch die App stichpunkthaft geschildert. Da die Kurzbeschreibungen nicht allzu ausführlich ausfallen und der Assistent ohnehin bei jeder Antwort das Angebot dranhängt, visuelle Konzepte seiner Ideen zu kreieren, probieren wir das an dieser Stelle gleich mal aus.
Auf die Bitte, drei visuelle Konzepte für die Screens Home, Image Processing sowie Recipe Results zu erstellen, wirft das Tool diese nach kurzer Wartezeit aus.
Tatsächlich hält sich ChatGPT bei der Erstellung der visuellen Versionen äußerst nahe an seine bereits vorgestellten Ideen. Konsistente Screen Designs, die erkennbar kohärent sind, gibt das Tool dabei allerdings nicht aus. Auch Featurebestandteile werden durch die erstellten Screens nicht deutlicher, allerdings können die Bilder schon als Inspirationsquelle für weitere Überlegungen dienen.

Generell fällt spätestens hier auf, dass der digitale Helfer sehr erpicht auf die visuelle Ausarbeitung ist. Richtigerweise müsste das GPT eher heißen „UX Guy mit starker Vorliebe zu UI“.

Um auch in der klassischen Variante der Ausarbeitung den Schritt zum visuellen Design zu machen, haben wir ein kleines Moodboard mit verschiedenen visuellen Stilen erstellt, die thematischen Bezug haben.

Ein guter Punkt, um unser GPT einmal auf den Prüfstand verschiedener Stilrichtungen zu stellen. Die bisher ausgegebenen Visuals ähneln sich stark. In der Recherche für das Moodboard wollen wir allerdings verschiedenen Stilen und visuellen Ideen nachgehen, um diese nach und nach auf etwas Spezifisches herunterzubrechen.
Zur Ideation stoßen wir ChatGPT dazu an, einen Screen der App beispielhaft in fünf verschiedenen Stilen darzustellen. Der Assistent entscheidet sich für die Stile Flat, Skeumorphic, Material, Minimal und Vintage, beschreibt diese jeweils kurz und gibt uns dann die Screendesigns aus.

Die Screens sind als solche nicht zu gebrauchen, dazu war der Prompt zu allgemein gefasst. Interessant ist es zumindest, die verschiedenen Stile schon einmal interpretiert in UI-Komponenten zu haben. Gefällt uns einer davon besonders gut, ließe sich das Bild dazu nutzen, weitere Inspiration mit ähnlicher Stilrichtung zu generieren.

Auf diese Art und Weise gehen wir bei dem bisherigen Ansatz des Erstellens von Moodboards ebenfalls vor: Visuelle Stile werden erkundet, sobald einer besonders gut passt, werden auf Basis dessen mit entsprechenden Keywords visuelle Beispiele zusammengetragen. Allerdings suchen wir dazu nicht nur nach User Interfaces, sondern allem Möglichen, was das Look & Feel für eine App informieren könnte.

ChatGPT erstellt uns auf Wunsch hin auch gleich ein gesamtes Moodboard. Ich habe dazu den ersten Screen mit Flat Design als Ausgangsbasis auserkoren und die KI machen lassen. Das Ergebnis kann sich zumindest als Teil eines Moodboardes durchaus sehen lassen. Klassische Bestandteile eines vollständigen Moodboardes wie etwa Farbwelten, Formsprache, Iconografie oder Texturen lassen sich hier zumindest ansatzweise wiederfinden.

Design nach Regelbuch – nichts leichter als das?

Stehen die User Flows und darauf aufbauend die Features und Screens, geht es ans Designen. Wir entscheiden uns im App-Experiment dafür, direkt mit iOS Komponenten zu arbeiten. So lässt sich recht schnell erkunden, wie eine fertige App einmal aussehen könnte.
Zu einem Design System wie iOS gehören natürlich auch Regeln und Guidelines, die es einzuhalten gilt. Es muss beim Designprozess sichergestellt werden, dass die Screens alle Regeln auch befolgen. Klare Regeln und Strukturen, die bereits in digitaler Form ausführlich dokumentiert sind, klingt wie der wahr gewordene Traum für jede Maschine. Aber ist es das auch für unseren AI Asisstenten?
Wir finden es heraus, indem wir einen schnell zusammengestellten Screen als Bilddatei zum UX Guy schicken und ihn um Überprüfung nach Apples Human Interface Guidelines bitten.

Schon bevor ich auf „Senden“ klicke, weiß ich bereits um einige Problemfelder des Screens. Die Kontrastwerte der Tags sind viel zu gering, während der Titel der Navigation Bar zum einen redundant ist, zum anderen offensichtlich keinen Mehrwert bietet, da er bereits nach einem Wort ausgepunktet wird.
Bei einer Schriftgröße unter 17 px empfiehlt Apple einen Kontrastwert von 4,5:1, welcher im Design teils nicht eingehalten wird. Der Titel könnte nach Guidelines einfach weggelassen werden. Normalerweise sind all das leicht zu behebende Mängel. Um ChatGPT einmal auf den Prüfstand zu stellen, sind einige offensichtliche Fehler im Design allerdings perfekt geeignet.

ChatGPT prüft für uns 12 Aspekte, die nacheinander aufgelistet sind. Dabei werden durchaus Inhalte des Designs referenziert, allerdings auch teilweise außer Acht gelassen.
Grundsätzlich lobt der KI-Helfer das Design, empfiehlt aber allgemein die Farben, Kontrastwerte im Text sowie Klarheit in der Gestaltung interaktiver Elemente zu optimieren. Der Titel in der Navigationsbar wird nicht aufgegriffen.

Wirklich hilfreich ist die Prüfung nicht ausgefallen, vor allem wenn mehrere Screens zu checken sind. Dazu sind die Hinweise zu vage gehalten und dürften sich bei mehreren Kontrollen auch schnell wiederholen. Für aufstrebende Designer oder Menschen ohne Zugriff auf Design Expertise könnte die KI hier ein paar sinnvolle Anstupser in die richtige Richtung geben, auch wenn im Zweifel die tatsächlichen Guidelines ohnehin konsultiert werden sollten.

Fazit

ChatGPT wird so schnell keine UX / UI Designer ersetzen – so viel dürfte sicher sein. Während des Designprozesses zeigt das Tool bisher nur schemenhaft sein Potenzial. Unterschätzen sollte man die Nützlichkeit dennoch nicht. Vor allem bei Extrapolation, also der Ausgabe mehrerer Daten basierend auf weniger Input, weiß das Tool zu begeistern. Das hat sowohl die Ideationphase mit ChatGPT’s Ideen zu unterschiedlichen Features als auch die Ausgabe verschiedener Stile gezeigt. Durch die leichtgewichtige Chat Anwendung lässt sich in kürzester Zeit schon einmal ein Grundstock an brauchbaren Informationen zusammentragen, auf dem in den nächsten Schritten dann aufgebaut werden kann.

Meine Empfehlung: unbedingt weiter im Design Prozess einsetzen, testen und so nach und nach die richtigen Handgriffe und Tricks finden, um der eigenen Arbeit einen Tempoboost zu verpassen und die Qualität der Designs zu verbessern.

Noch mehr spannende Blogbeiträge

15.02.2024 von Dimitri Krieger

CI Hackathon 2023: KI @ CI

24 Stunden Hackathon, ein Thema: KI @ CI! Bei unserem letzten Hackathon hat sich eine Projektgruppe dem Thema künstliche Intelligenz gewidmet.

23.03.2023 von Timo Walter

Transfer Learning

Für Trainingsdaten im Machine Learning gilt häufig: Viel hilft viel. Data Scientist Timo zeigt, wie man auch mit wenigen eigenen Daten viel erreichen kann.