Leitfaden zur Nutzererfahrung bei der dialogbasierten Filterung

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

Visuelle Anzeigeelemente

Die Platzierung und das Erscheinungsbild 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 unter dem Falz angezeigt werden.

  • Begründung: Wenn der Filter horizontal oben auf der Seite angezeigt wird, können die Produktergebnisse nach unten verschoben werden. Dadurch sinkt die unmittelbare Sichtbarkeit der Produkte und die Kosten der Funktion steigen. 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 sehen Sie ein Beispiel für die Implementierung eines horizontalen Scrollbereichs:

Beispiel für die horizontale Darstellung von Elementen

Optimale Platzierung

Platzieren Sie den dialogbasierten Filter 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 gut sichtbar platziert wird, kann dies dazu führen, dass Produktanzeigen weiter unten auf der Seite und damit nicht sofort sichtbar sind. 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 Unterhaltungselement verdrängt wird.

  • Hohe Kaufbereitschaft: 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-Benutzeroberflächen. Implementieren Sie den konversationellen Filter nicht als Chatfenster. Dadurch werden Nutzer von der Hauptweboberfläche weggeleitet. Das kann den vorgesehenen Web-Checkout-Ablauf stören, den Entwickler in der Regel mit erheblichem Zeitaufwand optimieren.

Zusätzliche Überlegungen für Mobilgeräte

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 konversationelle Filterung zu ersetzen, um mehr Platz auf dem Bildschirm für gezieltere Produkte zu schaffen. Alle angewendeten Filter können das Produktraster global aktualisieren, unabhängig von ihrem Ursprung.

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 den konversationellen Filtern 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 globalen Filtern anzuzeigen.
  • Intelligente Folgefrage: Die nächste Frage, die der Nutzer sieht, sollte auf der Grundlage aller angewendeten Filter relevant sein, 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

Vertex AI Search for Commerce kann basierend auf den Wertnamen im Produktkatalog bis zu 20 Multiple-Choice-Optionen präsentieren. 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 mit kommerzieller Suche 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 Grundidee hinter der konversationellen Filterung besteht darin, dass Sie dynamische Funktionen wie diese schnell in allen Ihren Produkten bereitstellen können, nicht nur für die wenigen Top-Suchanfragen, für die die visuellen Elemente entwickelt wurden. Entfernen Sie daher Elemente, die durch die konversationelle Filterung 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: Eine dauerhaft auf dem Bildschirm angezeigte Leiste enthält die Fragen und Optionen. Die Funktion wird vor den Produkten angezeigt und 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 Verlaufsereignisdaten trainiert werden. Frühere Ereignisdaten 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 Verlaufsdaten, da bei Verlaufsereignissen manchmal wichtige Informationen fehlen. So lassen sich Live-Abfragedaten besser für die laufende Optimierung nutzen.