8 AI-Tools für euren UX- und UI-Designprozess

Durch meine Recherche und Experimente habe ich verschiedene AI-Tools untersucht und bewertet, wie sie sich von der Discovery-Phase bis zur finalen Übergabe in meinen Designprozess integrieren lassen. Sehen wir uns anhand eines hypothetischen Szenarios an, wie AI unseren Designprozess verbessern kann.

Stellt euch vor, ihr betreibt ein Unternehmen, bei dem Menschen Alpakas für ihre Veranstaltungen buchen können. Ihr habt sechs Alpakas zur Verfügung, und Kunden dürfen maximal zwei Tiere für höchstens zwei Stunden buchen, um ihr Wohlbefinden zu gewährleisten. Derzeit können Kunden nur telefonisch buchen, was den Prozess umständlich und ressourcenintensiv macht und eine effektive Planung erschwert.

Um das System zu vereinfachen und zu modernisieren, beschließt ihr, den Buchungsprozess zu digitalisieren. Nutzen wir AI, um ein umfassendes digitales Buchungssystem zu entwickeln, das den gesamten Prozess von Anfang bis Ende abdeckt.

AI-Tools effektiv nutzen

ChatGPT

Ich weiß, das mag offensichtlich wirken, und ihr denkt vielleicht: „Nun, ich weiß bereits, was ich mit ChatGPT machen kann.“ Aber wartet – es kann weit mehr, als einfach Lorem Ipsum zu ersetzen.

ChatGPT kann User Personas zum Leben erwecken, indem es Antworten generiert, die reale Nutzerinteraktionen nachbilden. In unserem Fall können wir ChatGPT nutzen, um erste Ideen aus UX- und Research-Perspektive zu entwickeln. Sehen wir, ob es uns dabei helfen kann, unsere Zielgruppe besser zu verstehen.

Hier ist mein erster Prompt:

ChatGPT lieferte einen ziemlich guten Vorschlag für den Einstieg:

Ein fiktives Szenario kann den gesamten Prozess der Empathiebildung deutlich unterstützen. Sehen wir uns an, wie ChatGPT uns bei der Erstellung von User Personas helfen kann.

ChatGPT kann als Inspirationsquelle dienen und bestehende User Personas wirkungsvoll ergänzen. Das ist besonders vorteilhaft für Projekte mit begrenztem Budget oder wenig Zeit, in denen sich klassische User-Research-Prozesse nur schwer umsetzen lassen. Dennoch ist es wichtig, auch die Nachteile zu berücksichtigen.

Die Erkenntnisse aus diesem Ansatz können hypothetisch sein und möglicherweise weit von den tatsächlichen Erfahrungen realer Nutzer entfernt liegen. Meiner Ansicht nach kann diese Methode zwar wertvolle Erkenntnisse liefern, sollte aber mit Vorsicht eingesetzt und, wo möglich, durch fundiertere User-Research-Methoden ergänzt werden.

QoQo

Mit QoQo könnt ihr User Personas erstellen, euer UX Writing verbessern, User Journeys generieren und sogar Skripte für Nutzerinterviews erstellen. Im Vergleich zu ChatGPT ist es besonders praktisch, weil es als Figma-Plugin integriert ist.

Hinweis: QoQo funktioniert als Plugin in Figma.

Nachdem wir Zielkunden und User Personas identifiziert haben, visualisieren wir sie und erstellen mit QoQo eine Customer Journey Map. Ich habe eine der Personas verwendet, die mir ChatGPT erstellt hatte, und QoQo hat sie detaillierter ausgearbeitet und erweitert.

Nachdem ich QoQo mit einem ausreichend detaillierten Briefing getestet habe, ist mein Eindruck, dass es besonders gut durchdachte Personas und Customer Journey Maps generiert.

Ich finde es als Ausgangspunkt äußerst hilfreich, um Empathie für Zielkunden aufzubauen. Besonders bei der Vorbereitung von Workshops und der Zusammenarbeit mit Stakeholdern ist es ein hervorragendes Tool.

QoQo spart nicht nur Zeit, sondern bietet auch einen umfassenden Ausgangspunkt, der fast alle Aspekte der User Journey abdeckt. Echte Daten von euren Nutzern sind jedoch die wichtigste und glaubwürdigste Grundlage für eure Designentscheidungen. Deshalb ist es entscheidend zu erkennen, dass dieses Tool die User-Research- und Discovery-Phase in eurem Designprozess nicht ersetzen kann.

TheyDo

TheyDo unterstützt euch bei der Erstellung von User Journeys, die funktionsübergreifende Zusammenarbeit und fundierte Analysen fördern. Das Tool automatisiert die Zuordnung von Erkenntnissen, extrahiert und kategorisiert wichtige Ergebnisse aus Kundenfeedback und Interviews. Es identifiziert und hebt sogar die wirkungsvollsten Themen hervor und ist damit eine wertvolle Unterstützung für euren Designprozess.

Leider hatte ich noch keine Gelegenheit, die Journey-AI-Funktionen von TheyDo auszuprobieren, da sie noch entwickelt werden. Daher kann ich keine konkrete Bewertung dieses AI-Tools abgeben. Auf Grundlage der Basisfunktionen erscheint mir jedoch ein Aspekt hilfreicher als bei QoQo: die Möglichkeit, User-Research-Erkenntnisse in die Software zu integrieren und darauf basierend eine User Journey zu erstellen.

Die AI unterstützt dabei, die Daten zu kategorisieren und in umsetzbare Erkenntnisse zu überführen. Da ich sie noch nicht ausprobiert habe, bin ich etwas skeptisch, wie effektiv sie mit User-Research-Daten umgehen kann, die umfangreich und vielfältig sind. User-Research-Daten umfassen sowohl quantitative als auch qualitative Daten, wobei die Verarbeitung qualitativer Daten eine gewisse Herausforderung darstellen kann.

Relume

Dieses AI-Tool eignet sich hervorragend, um mithilfe einer vielseitigen Komponentenbibliothek schnell Sitemaps und Wireframes zu erstellen und Layouts mühelos anzupassen. Die daraus entstehenden Designs lassen sich nahtlos in Figma importieren.

Kehren wir zu unserem Beispiel zurück: der Entwicklung eines Buchungssystems für die Vermietung von Alpakas. Relume AI bietet einen Ausgangspunkt für die Sitemap – besonders mit einem detaillierten Prompt, da dies die Ergebnisse und die Texte verbessert.

Es dient sowohl als Inspiration als auch als anpassbare Grundlage, mit der sich die Sitemap einfach bearbeiten lässt. Das erleichtert wiederum die Erstellung von Wireframes mit echten Inhalten statt generischem Lorem-Ipsum-Text – ein Aspekt, den ich sehr schätze.

Das Tool ist besonders nützlich für Responsive Design: Ihr könnt verschiedene Layouts über die Bibliothek testen oder sie anhand eurer Ideen anpassen. Meiner Erfahrung nach reduziert es den manuellen Aufwand bei der Wireframe-Erstellung erheblich. So bleibt mehr Zeit für wichtige Aufgaben, etwa Lösungen zu iterieren und Nutzertests mit diesen detaillierten Wireframes vorzubereiten.

UIzard

Das obige Wireframe erscheint mir völlig unpassend. Kommt es euch bekannt vor? Es ähnelt dem Layout von Airbnb.

In der kostenlosen Version erstellt UIzard lediglich ein Wireframe auf Basis eures Prompts und zeigt die UI als Vorschau an. Vergleicht man die von UIzard generierten Wireframes jedoch mit denen von Relume, wirken erstere weniger ausgereift. Ergebnisse und Inhalte passen nicht so gut zum Prompt. Beispielsweise verwendet UIzard Lorem-Ipsum-Text, wodurch es schwierig ist, über ein generisches Layout hinaus den Mehrwert des Wireframes zu erkennen.

Auch die generierte UI wirkt grob und eignet sich nicht als finales Design; sie erfordert umfangreiche Änderungen. Das Layout ist eher generisch und bietet wenig Inspiration.

Generieren wir die UI erneut und nutzen sie für die nächste Phase:

Attention Insight

Attention Insight ist ein KI-gestütztes Tool, das Heatmaps zur Aufmerksamkeit erstellt. Damit lassen sich potenzielle Performance-Probleme bereits in der Designphase für unterschiedliche Interfaces identifizieren – von Websites bis zu mobilen Apps.

Finden wir heraus, ob das Alpaka-Website-Design von UIzard die Aufmerksamkeit der Nutzer effektiv auf sich zieht:

Mein Eindruck nach dem Ausprobieren von Attention Insight: Es ist ein hilfreiches Tool mit vielseitigen Einsatzmöglichkeiten. Neben einer Heatmap bietet es auch einen Klarheitswert, der auf verschiedenen Designaspekten basiert, darunter Textmenge, Kontrast, Größe und Farbsättigung. Ich würde mir allerdings mehr Details dazu wünschen, wie dieser Wert berechnet wird und welche Kriterien für die Erstellung der Heatmap gelten. Da die Daten nicht von echten Nutzern stammen, sollten die Ergebnisse als Orientierung dienen.

Mir fallen mehrere Anwendungsfälle ein. Zum Beispiel ist es für A/B-Tests und dafür, sicherzustellen, dass euer Design die Aufmerksamkeit der Nutzer effektiv gewinnt, äußerst wertvoll.

Attention Insight kann zudem als überzeugender Beleg in Design-Pitches gegenüber Stakeholdern dienen und dabei helfen, die Gründe für Designentscheidungen zu veranschaulichen.

Das Tool ist besonders effektiv, wenn ihr klare Designziele habt. Wenn ihr beispielsweise die Aufmerksamkeit stärker auf den Call to Action (CTA) lenken möchtet, kann Attention Insight Design-Iterationen analysieren und ermitteln, welche am besten zu euren Zielen passt.

Weitere Tools für UI-Design

Magician (Figma-Plugin)

Als Figma-Plugin vereinfacht Magician den Designprozess, indem es schnell Bilder, Icons und Texte generiert. Das steigert die Effizienz eures Design-Workflows erheblich.

Icons8 Background Remover (Figma-Plugin)

Dieses Figma-Plugin ist unverzichtbar, um hochwertige, vielseitige Grafiken zu erstellen. Es vereinfacht das Entfernen von Hintergründen und sorgt dafür, dass eure Grafiken sauber und für vielfältige Anwendungen bereit sind.

KI und Chancen für die Zukunft

KI ist nichts, wovor ihr Angst haben müsst. Stattdessen bietet sie euch die Chance, in eurer Designpraxis zu lernen und zu wachsen. Die meisten KI-Tools für UI/UX-Design sollen Designer inspirieren und dabei unterstützen, außergewöhnliche Nutzererlebnisse zu schaffen. Beim Design für Menschen ist es jedoch entscheidend, die Grenzen von KI zu kennen – etwa mögliche Probleme durch fehlenden Kontext oder unzureichende Ressourcen zu bestimmten Themen.

Darüber hinaus spielen ethische Überlegungen eine wichtige Rolle für den verantwortungsvollen Einsatz von KI. Wenn wir uns dieser Faktoren bewusst bleiben, können wir KI-Tools möglichst effektiv nutzen.

Nutzt KI in eurer täglichen Arbeit, und ihr werdet entdecken, wie sie eure Designprozesse verbessert, Aufgaben vereinfacht und eure kreative Inspiration fördert. Die Möglichkeiten sind endlos, und die Zukunft des Designs ist zweifellos eng mit den Fähigkeiten künstlicher Intelligenz verbunden.

Einige Unternehmen priorisieren UX für ihren Markenerfolg, andere nicht. Das kann an der Unsicherheit darüber liegen, welchen finanziellen Nutzen UX-Design bringt und wie es sich auf Unternehmen auswirkt. Lest unseren Blogbeitrag und erfahrt mehr.