AI & Creativity – #2: UX und Design mit KI kombinieren, für hyper-personalisierte Online-Anzeigen

von Dennis Oswald -

In einem meiner letzten LinkedIn-Beiträge gab ich einen kurzen Einblick, wie die „Generative Fill“-Funktionen von KI-Tools die Anpassung von Key Visuals in Online-Anzeigen revolutionieren könnten. Für das diesjährige WebSummerCamp 2023 habe ich diesen experimentellen “Probelauf“ um die Aspekte UX und Texterstellung erweitert, um die Zukunft von hyperpersonalisierten Online-Bannern mit KI aufzuzeigen.

Die neuen „Generative Fill“-Funktionen von Photoshop (Beta) oder beispielsweise die "vary region"-Funktion von Midjourney geben dem Benutzer mehr Kontrolle über das Ergebnis und die Konsistenz der KI-generierten Bilder und ermöglichen spezifische Anpassungen einzelner Bereiche oder Elemente. Dies ermöglicht es uns, spezifische Anpassungen an einzelnen Bereichen oder Elementen vorzunehmen. Dies öffnet die Tür zu endlosen Möglichkeiten, insbesondere wenn diese generierten Visuals mit passenden generierten Texten kombiniert werden..

Beginnen wir dieses prototypische Experiment, indem wir es uns so “bequem” wie möglich machen: Wir arbeiten an einem Projekt für das obere Management und wollen es mit Hilfe unserer neuen KI-Freunde ChatGPT und Midjourney so schnell und einfach wie möglich lösen:

  • Das Setup: Wir werden ChatGPT verwenden, um uns mit der uns gestellten Aufgabe vertraut zu machen, UX-Forschung zu simulieren, Zielgruppen und User Stories zu erarbeiten und mehr über die Interaktion der Nutzergruppen zu erfahren.
  • Die Persona: Im nächsten Schritt formen wir prototypische Personas und versuchen, sie zu visualisieren. Wir werden auch mehr über ihre Schmerzpunkte und Gewinne erfahren, die wir später in unserer Online-Banner-Kommunikation ansprechen könnten.
  • Die Banner: Wir werden die wichtigsten visuellen Elemente für Online-Banner erstellen, indem wir ChatGPT und Midjourney für die Text- und Bildelemente kombinieren und sie mit der Bild-zu-Video-Funktion von Runway animieren.
  • Die Hyper-Personalisierung: Mit Midjourneys „Vary Region“-Funktion ist es nun möglich, bestimmte Bildteile anzupassen und zu verfeinern. Dies ermöglicht es uns, so viele kontrollierte Variationen zu erstellen, wie wir möchten. Schließlich können wir ChatGPT verwenden, um eine passende Überschrift für jede Variation zu finden und die Online-Banner stark zu personalisieren.

Spoiler

TLDR – kurz und knapp
Fassen wir es zusammen, da dieser Blogbeitrag ein langes Scroll-Erlebnis sein wird. Wir werden veranschaulichen, wie wir vorhandene KI-Tools für UX verwenden können, eine Persona erstellen und die Erkenntnisse in ultrakundenspezifische Online-Banner-Visuals umwandeln können.

 

IMG_001

 

1. Teil – Das Setup

Wie man anfängt
Zuerst geben wir ChatGPT ein kurzes Briefing über das, was wir erreichen wollen - in unserem Beispiel wollen wir ein "informatives Online-Gesundheitsportal" erstellen. Wir fragen nach möglichen Zielgruppen und Inhaltsbereichen, um in das Thema einzutauchen.

IMG_002

Es liefert uns sechs Zielgruppen und sieben informative Inhaltsbereiche. Während die Ergebnisse der Zielgruppen uns zeigen, nach wem wir suchen könnten, können die Segmente ein wertvoller Hinweis für die Navigation oder die Artikelbezeichnungen sein:

IMG_003

User Stories - Bedürfnisse und Ziele herausfinden
Wir bitten Chat-GPT um 3-4 (es können auch mehr sein) Benutzergeschichten für jede Zielgruppe und beauftragen es, die generierten Geschichten mit einigen Hintergrundinformationen zu begründen:

IMG_004

In diesem Fall helfen uns die zusätzlichen Informationen in der zweiten und dritten Spalte bereits, besser zu verstehen, für wen unser "Online-Gesundheitsportal" interessant sein könnte und was genau gesucht wird erreicht werden will:

IMG_005

Auswahl einer Benutzergeschichte - für weitere Informationen über Interaktionen.
Wir wählen eine der vorgeschlagenen Benutzergeschichten aus: "Ein Benutzer, der kürzlich eine Diagnose erhalten hat, sucht nach Informationen", und fragen nach möglichen Interaktionen mit unserer Website:

IMG_006

Die bereitgestellte Antwort ist recht allgemein gehalten, könnte aber bereits einige hilfreiche Hinweise für uns enthalten, z.B.:

  • Empfehlungen von Ärzten sind wahrscheinlich, also sprechen Sie sie in den Anzeigen an
  • Die Suchleiste ist ein entscheidendes Merkmal; daher sollte sie gut sichtbar sein
  • Patientengeschichten machen es persönlich und sollten hervorgehoben werden
  • Lesezeichen-Funktionen, helfen dem Benutzer und verlinken ihn mit der Seite
IMG_007

Von der allgemeinen, hin zur spezifische User Story
Um mehr zu erfahren, könnten wir weitere Erkenntnisse gewinnen, indem wir die User Journey spezifischer gestalten, und beispielsweise nach einer harmlosen Diagnose und einer schweren Diagnose fragen:

IMG_008
IMG_009

 2. Teil – Die Persona

Jetzt wird’s persönlich - Ein Steckbrief mit Fakten und Zahlen.
Wir überprüfen, ob ChatGPT sich noch an unsere Zielgruppen zu Beginn erinnert. Dann bitten wir es, zwei davon auszuwählen - z.B. Ältere Menschen & Pflegekräfte und Gesundheitsbewusste - und für jede zwei Persona-Profile zu erstellen:

IMG_010
IMG_011

Jetzt wird’s persönlich - Verleihen wir der Sache ein Gesicht.
Wählen wir Helga Meyer (73) und Lisa Müller (32) für die folgenden Schritte aus und fragen ChatGPT nach Aufforderungen, Bilder in Midjourney zu erzeugen, indem wir den Text einfach kopieren und einfügen, ohne den vorgeschlagenen Text zu bearbeiten, und sehen, was wir erhalten:

IMG_012

 

IMG_013

Achtung! - Kognitive Verzerrungen und Stereotypen!

Vor dem nächsten Schritt möchte ich zwingend auf das Problem der Voreingenommenheit und Stereotypen bei der Verwendung von KI-Tools hinweisen. Leider sind wir alle davon betroffen - im wirklichen Leben, wie beim Schreiben von Prompts und der Auswahl der Ausgaben - und die KI-Tools tun dies aus verschiedenen Gründen, in erster Linie aufgrund von Trainingsdaten: Garbage in - garbage out.

Je trivialer der eingegebene Prompt ist, desto größer ist leider die Wahrscheinlichkeit eines verzerrten Outputs - bitte bedenken Sie dies und versuchen Sie, dem entgegenzuwirken.

Wenn Sie mehr zu diesem Thema erfahren möchten, empfehle ich Ihnen z.B.:

Optimierung der Prompts
Da wir hier nicht zufrieden sind, werden wir unsere Prompts direkt in Midjourney analysieren und optimieren, um so den Bildern und ihren kontextuellen Hintergründen mehr "Tiefe" zu verleihen. Dies kann auf zwei Arten in Midjourney geschehen:

  • /shorten: Dieser Befehl hilft uns bei der Analyse unseres Prompts, indem er anzeigt, welche Teile oder Wörter von Midjourney bei der Erstellung des Bildes berücksichtigt und welche ausgenommen (durchgestrichen) wurden
  • /describe: Laden Sie ein Bild, das den Stil/Inhalt repräsentiert, als Referenz hoch und lassen Sie Midjourney erklären, wie es dieses Bild generieren würde.
IMG_014

Zwischenstopp
Bislang haben wir für zwei Personas - Lisa Müller (32) und Helga Meyer (72) - klassische Basisprofile erstellt.

IMG_015

Value Proposition Canvas – Pains & Gains
Fordern wir ein Value Proposition Canvas (VPC) an, um mehr über die Schmerzen (pains) und Vorteile (gains) unserer Nutzer bei der Interaktion mit der Online-Gesundheitsplattform herauszufinden:

IMG_016
IMG_017

3. Teil – Der Banner

Kommunikation ist das A und O - gewinnen Sie ihre Aufmerksamkeit
In den nächsten Schritten wollen wir die Aufmerksamkeit unserer Personas wecken und erstellen ein beispielhaftes Online-Banner mit Textelementen (Überschrift, Text) und Key Visuals.

Überschrift & Text
Bitten wir ChatGPT, geeignete Headlines und Copy-Texte für eine Social-Media-Anzeige zu erstellen, die den Charakter unserer ausgewählten Persona und ihre Schmerzen und Vorteile gemäß der VPC abdecken.

IMG_018

 

IMG_019

Key visuals – ChatGPT für Prompts
Jetzt wollen wir Key Visuals für unsere Online-Banner erstellen, die die Aufmerksamkeit unserer Persona erregen, die wir als Prompt zur Bildgenerierung benutzen können.

IMG_020
IMG_021

Key visuals – Midjourney für die Bildgenerierung
Schauen wir, was wir bekommen, und wählen eines für die folgenden Schritte aus:

IMG_022

Generative Fill - das Bild bearbeiten
Mit den neuen generativen Füllfunktionen, z.B. Photoshop (Beta) oder Midjourneys Option "vary region", war die Erweiterung eines Bildes noch nie so einfach wie jetzt.

IMG_023

Bring it all together.
Da wir nun alles haben, was wir brauchen, schauen wir uns an, was wir bisher erreicht haben: Wir haben eine Persona, einen Titel, einen Text und ein Key Visual:

IMG_024

Runway - Bewegung zum Standbild hinzufügen
Sie haben Recht, wir werfen schliesslich kein Papier auf den Bildschirm. Wenn Sie in Ihrer Online-Anzeige eine laufende Frau zeigen, sollten wir sie auch animieren.
Mit KI-Tools wie Runway ist es jetzt möglich, Videos durch Eingabe eines anderes Video (Video-2-Video), durch Textaufforderungen (Text-2-Image) und mittels Referenzbild (Image-2-Video) zu erzeugen.

Wir verwenden die Image-2-Video-Option und ziehen unser Referenzbild einfach per Drag & Drop ins Eingabefeld.

IMG_025

Nachdem wir das generierte Video heruntergeladen haben, können die gewünschten Textelemente mit einem beliebigen Videoeinfügungstool wieder hinzufügt werden.

4. Teil – Die Hyper-Personalisierung

Entfaltung des Potenzials von hyper-personalisierten Bannern mit KI
Kommen wir zum unterhaltsamen Teil, der das zukünftige Potenzial von ultra-angepasster oder hyper-personalisierter Online-Werbung demonstriert - insbesondere, wenn dies in der nächsten Generation dieser KI-Tools automatisiert wird.

Unendliche Möglichkeiten dank generativer Füllung
Die neuen generativen Füllfunktionen sind ein Segen für die Bildbearbeitung. In Photoshop Beta (generative Füllung) und Midjourney (vary region) können Sie nun das gesamte Bild oder bestimmte Teile markieren und durch einfaches Be- bzw. Umschreiben die Eingabeaufforderung verfeinern. Im Gegensatz dazu bleiben die nicht markierten Details in der anschließend generierten Bildversion unverändert. Dies führt zu einer hohen Konsistenz innerhalb der erstellten Motivserien in ihren Variationen.

Vergessen Sie also die A/B-Tests, denn die A/XYZ-Tests stehen vor der Tür...

IMG_027

Variante der Variante
Je nach Vorstellungskraft – oder den Marketing-Ergebnissen aus der Forschung :-) - können wir die Hintergründe oder die Modelle ändern, indem wir einfach die Beschreibung des ursprünglichen Prompts in Teilen anpassen, z.B.:

  • den Hintergrund beibehalten, ändern Sie das Modell
  • das Modell beibehalten, den Hintergrund ändern
IMG_028
IMG_029

Grenzenlose Möglichkeiten – hier beginnt die Magie.
Offen gesagt, es gibt keine Grenzen, da wir unzählige {Variablen} auf das Hauptmotiv einzeln oder sogar in Kombination anwenden können – denken Sie nur an die Möglichkeiten, die sich hier bieten!

  • {Heritage}, {Gender}, {Age}, {Size}, {Styling}, {Clothing}, {Background}, {Time of Year/Day}, {Props}, {...}
IMG_030

Varianten in Midjourney
Für einen tieferen Einblick in {Varients} in Midjourney empfehle ich Rory Fynns Linkedin Post "5 Time Saving Features in MidJourney 5.2". Kleiner Tipp am Rande, Rory Fynn ond seine Posts sind Gold wert, um über Midjourney zu lernen.

Und weiter geht’s.
Nun, da wir einen "Stammbaum" mit Variationen der wichtigsten visuellen Elemente erstellt haben, können wir zudem die schriftliche Kommunikation anpassen.
Wir geben ChatGPT ein kurzes Briefing, um den Kontext festzulegen, und geben ihm die Aufgabe, die Schlagzeilen und Copy-Texte anzupassen, indem wir die verschiedenen Themen beschreiben.

IMG_031

Et voilà
Als Ergebnis haben wir nun mehrere Kampagnenbilder mit jeweils passenden, massgeschneiderten Überschriften/Texten..
Diese Vielzahl an theoretischen Varianten könnten jetzt als Online-Banner-Anzeigen geschaltet, getestet und auf der Grundlage der von Analysen gewonnenen Daten erneut angepasst werden.

IMG_032

Fazit

Die Zukunft der hyper-personalisierten Banner mit KI hat gerade erst begonnen!
KI-Tools für die Erstellung von Texten und Bildern entwickeln sich in rasantem Tempo. Sie sind de facto darauf ausgelegt, mit Komplexität und großen Datensätzen umzugehen. Ich bin davon überzeugt, dass die in diesem prototypischen “Probelauf” aufgezeigten Anwendungen und Arbeitsschritte bald rationalisiert und sogar automatisiert werden.

Dies wird nicht nur zu einer Produktivitätssteigerung auf der konzeptionellen und kreativen Seite führen, sondern in Verbindung mit der Datenanalyse auch die Tür zu einem hyper-personalisierten Marketing öffnen.

Der hier durchgeführte “exemplarische Probelauf” soll aufzeigen, welche neuen Möglichkeiten sich hier eröffnen; er soll aber bei aller Begeisterung nicht verschweigen, dass es eines verantwortungsvollen Umgangs mit diesen KI-Werkzeugen bedarf. 

Ein Grund dafür ist die VErsuchung, sich vorschnell für die erstbeste Lösung zu entscheiden, ohne gründlich zu hinterfragen, welche Datensätze für die Ergebnisse verwendet wurden, und sie mit "echter" Recherche zu vergleichen. Werden sie nicht moralisch hinterfragt und unkritisch verwendet, kann dies bestehende Probleme (z.B. Bias) verstärken und zu mittelmäßigen Ergebnissen statt zu innovativen Lösungen führen.

Letztlich liegt es also wieder an uns selbst, daher gilt:

Don't be scared; just be creative!

Comments

Diese Seite verwendet Cookies. Einige dieser Cookies sind unverzichtbar, während andere uns helfen, deine Erfahrung zu verbessern, indem sie uns Einblicke in die Nutzung der Website geben.

Ausführlichere Informationen über die von uns verwendeten Cookies findest du in unserer Datenschutzrichtlinie.

Einstellungen anpassen
  • Notwendige Cookies ermöglichen die Kernfunktionen. Die Website kann ohne diese Cookies nicht richtig funktionieren und kann nur deaktiviert werden, indem du deine Browsereinstellungen änderst.