Leitfaden zur Nutzererfahrung bei der dialogbasierten Filterung

Eine erfolgreiche Implementierung der dialogbasierten Produktfilterung hängt von einem durchdachten User Experience-Design ab.

Visuelle Anzeigeelemente

Das Placement und die Darstellung des konversationellen Filters haben einen erheblichen Einfluss auf seine Effektivität.

Vertikales und horizontales Layout

Hier einige Überlegungen zur Entscheidung für ein vertikales oder horizontales Layout:

  • Empfehlung: Priorisieren Sie ein horizontal ausgerichtetes, vertikal kompaktes Design. So wird das Risiko minimiert, dass Produktergebnisse „below the fold“ (mit Scrollen sichtbar) angezeigt werden.

  • Begründung: Wenn der Filter horizontal oben auf der Seite angezeigt wird, können die Produktergebnisse nach unten verschoben werden. Dadurch steigen die Kosten der Funktion, da die unmittelbare Sichtbarkeit der Produkte verringert wird. Außerdem kann durch die Minimierung von Leerraum zwischen Elementen mehr Platz auf der Webseite geschaffen werden, um zusätzliche Produktkacheln zu präsentieren.

Lange Attribute verarbeiten

Wenn die Multiple-Choice-Optionen lang sind (z. B. Markennamen), sollten Sie sie nicht in neue Zeilen umbrechen, da dies die Höhe der Elemente erhöht. Lassen Sie sie stattdessen horizontal über die Seite hinausgehen und aktivieren Sie das seitliche Scrollen.

Hier ein Beispiel für die Implementierung von horizontalem Scrollen:

Beispiel für die horizontale Darstellung von Elementen

Optimale Platzierung

Platzieren Sie den Konversationsfilter nach 3 bis 5 Produktzeilen. So wird verhindert, dass die ursprüngliche Produktliste durch das Unterhaltungselement verdrängt wird.

Ein wichtiger Punkt bei dieser Platzierung ist, dass die Leiste zum Filtern von Unterhaltungen vertikal so kompakt wie möglich sein sollte. Wenn die Funktion zum Filtern von Produkten über Konversationen prominent platziert wird, können Produktanzeigen weiter unten auf der Seite und damit außerhalb des unmittelbaren Sichtfelds erscheinen. Das kann ein Nachteil sein, da Käufer weniger Produkte sehen. Daher müssen die Produkte, die sichtbar sind, so relevant wie möglich sein.

  • Seite (vertikal) im Vergleich zu oben (horizontal): Platzieren Sie den Konversationsfilter nach 3 bis 5 Produktzeilen. So wird verhindert, dass die ursprüngliche Produktliste durch das konversationelle Element verdrängt wird.

  • Hohe Berücksichtigung: Wenn die konversationelle Produktfilterung Ihre Hauptmethode zum Einschränken der Produktauswahl wird, sollten Sie die manuelle Filterleiste vollständig minimieren oder ersetzen. So können Sie eine weitere Spalte mit Produktartikeln hinzufügen.

Desktop- und mobile Version

Desktop-Implementierungen haben sich bewährt, die Ergebnisse auf Mobilgeräten sind jedoch weniger konsistent und die Leistungssteigerungen insgesamt geringer. Die begrenzte Bildschirmgröße auf Mobilgeräten erfordert einen kreativeren und bewussteren Ansatz für das Placement.

  • Empfehlung: Priorisieren Sie zuerst die Implementierung auf Computern gegenüber der auf Mobilgeräten. Die größere Bildschirmgröße auf dem Desktop ermöglicht mehr Flexibilität bei der Gestaltung von Creatives. Auf dem kleineren Bildschirm von Mobilgeräten müssen Entwickler bestimmte Elemente priorisieren.

  • Vermeiden: Chatfenster-Oberflächen. Implementieren Sie den konversationellen Filter nicht als Chatfenster. Dadurch werden Nutzer von der Hauptweboberfläche weggeleitet und der vorgesehene Web-Bezahlvorgang, den Entwickler in der Regel mit erheblichem Zeitaufwand optimieren, wird unterbrochen.

Zusätzliche Überlegungen zu Mobilgeräten

Auch das mobile Web und Apps sollten beim Testen unabhängig voneinander behandelt werden. Tests für mobile Apps sind von Natur aus schwierig durchzuführen, bieten aber mehr Flexibilität. Das mobile Web lässt sich oft schneller testen, bringt aber für verschiedene mobile Webbrowser unterschiedliche Nachteile mit sich.

Nutzerinteraktion mit Filtern

In diesem Abschnitt wird beschrieben, wie Sie die konversationelle Produktfilterung konfigurieren. Es wird empfohlen, statische, fest codierte Filterelemente durch dynamische Konversationsfilter zu ersetzen, um mehr Platz auf dem Bildschirm für gezieltere Produkte zu schaffen. Alle angewendeten Filter, unabhängig von ihrem Ursprung, können das Produktraster global aktualisieren.

Nachfolgende Fragen im Chat werden an alle angewendeten Filter angepasst, sodass beide Multiple-Choice-Optionen verfügbar sind.

Einheitliche globale Filter

Nutzer können sowohl mit Konversationsfiltern als auch mit allen verbleibenden angewendeten Filterelementen interagieren. Ihre Frontend-Implementierung muss mit diesem Szenario umgehen können.

Einheitliche globale Filter haben folgende Eigenschaften:

  • Globale Anwendung: Wenn ein Nutzer ein beliebiges Filterelement auf der Seite auswählt, unabhängig davon, ob es sich um einen konversationellen Produktfilter oder ein statisches Filterelement handelt, muss das Produkt-Grid aktualisiert werden, um Ergebnisse mit allen angewendeten globalen Filtern anzuzeigen.
  • Intelligente Folgefrage: Die nächste Frage, die der Nutzer sieht, sollte auf dem vollständigen Satz angewendeter Filter basieren, unabhängig davon, welches Element der Nutzer auswählt. Wenn ein Käufer beispielsweise den Filter color aus dem konversationellen Element und den Filter size aus dem klassischen Filterelement auswählt, sollte in der nachfolgenden konversationellen Frage nicht gefragt werden, welche Größe der Käufer wünscht.

Typen filtern

Mit der dialogbasierten Produktfilterung können Sie sowohl Multiple-Choice-Auswahlen auf der Website verwenden.

Multiple-Choice-Frage

Bei der KI-basierten Suche für Commerce können basierend auf den Wertnamen im Produktkatalog bis zu 20 Multiple-Choice-Optionen angezeigt werden. Die Optionen werden in einer sortierten Liste der relevantesten Auswahlmöglichkeiten angezeigt. Lange Optionen wie lange Markennamen sorgen dafür, dass Nutzer horizontal scrollen können, anstatt dass der Text in neue Zeilen umgebrochen wird. So bleibt die Anzeige vertikal kompakt.

Fest codierte Elemente ersetzen

Viele Entwickler von Websites für die Suche im E-Commerce haben in ihrer Weboberfläche vorgefertigte, manuelle Komponenten für Kategoriefilter, die für Anfragen mit dem höchsten Umsatzpotenzial vorgesehen sind. Diese Filterkomponenten sind in der Regel teuer, zeitaufwendig in der Herstellung und nicht sehr interaktiv.

Beispiel für fest codierte Elemente Abbildung 2. Beispiel für die Anzeige eines fest codierten Elements.

  • Empfehlung: Die grundlegende Idee hinter der konversationellen Filterung besteht darin, dynamische Funktionen wie diese schnell in allen Ihren Produkten bereitzustellen, nicht nur für die wenigen Top-Anfragen, für die die visuellen Elemente entwickelt wurden. Entfernen Sie daher Elemente, die durch die Konversationsfilterung ersetzt werden sollen. Vermeiden Sie zwei konkurrierende Gruppen von Filterelementen, die ähnliche Funktionen haben. So wird Platz auf dem Bildschirm geschaffen, um gezieltere Produkte zu präsentieren.

Ideen für Tests

Hier einige Ideen für Tests:

  • Platzierung zwischen Produktzeilen: Fügen Sie die Komponente nach drei bis fünf Produktzeilen ein. So wird verhindert, dass die ursprünglichen Produktanzeigen durch das Konversationselement verdrängt werden.
  • Flyout oder Pop-up: Verwenden Sie eine Schaltfläche, die ein Dialogfeld oder Flyout-Menü mit den Filterfragen auslöst. Das Flyout kann in vorhandene Filter-Pop-ups integriert werden oder ein separates Element sein.
  • Fixierte Leiste: In einer dauerhaft auf dem Bildschirm angezeigten Leiste werden die Fragen und Optionen präsentiert. Das Video wird vor den Produkten platziert, nicht darunter.
  • Hinweise zum Testen: Achten Sie beim Testen auf Mobilgeräten und Computern darauf, dass diese Tests unabhängig voneinander durchgeführt werden. Das Kaufverhalten für die einzelnen Geräte variiert stark. Die visuellen Komponenten, die auf einem Gerät funktionieren, lassen sich möglicherweise nicht auf das andere übertragen.

Datenaufnahme und ‑qualität

Die Intelligenz des Vertex AI-Modells basiert auf Daten zur Nutzerinteraktion. Beim Onboarding-Prozess werden Daten in zwei Phasen aufgenommen.

Phase 1: Erster Start mit historischen Ereignissen

Das Modell kann mit Verlaufsdaten zu Ereignissen trainiert werden. Verlaufsdaten zu Ereignissen werden zuerst in die Google-Umgebung aufgenommen. So kann das Modell auch neue Projekte ohne Live-Interaktionsdaten erkennen.

Phase 2: Umstellung auf Live-Abfragedaten

Nachdem die Funktion aktiv ist und mit dem Erfassen von historischen Daten begonnen hat, verwendet Vertex AI den Live-Anfragedatenstream, um das Bereitstellungsmodell zu optimieren. Die Daten aus Live-Abfragen sind in der Regel von höherer Qualität als die erfassten Verlaufsereignisdaten, da bei Verlaufsereignissen manchmal wichtige Informationen fehlen. Dadurch sind Live-Abfragedaten effektiver für die laufende Optimierung.