Teil 2: Algolia Onboarding - Konzeption und Gestaltung des User Interface

Im ersten Teil unserer Artikelserie zum Algolia Onboarding hast Du erfahren, wie Du die die richtigen Weichen stellen kannst, damit Dein E-Commerce-Projekt mit den intelligenten Suchalgorithmen von Algolia von Anfang an erfolgreich wird. Wir haben Dir gezeigt, wie Du mit dem passenden Zielbild, dem richtigen Projektteam und der passenden Zeitplanung loslegen kannst.

In diesem zweiten Teil dreht sich alles um die Konzeption und die Gestaltung des User Interface. Worauf kommt es beim Aufbau der UI-Komponenten an? Wie wirken sich die Einstellungen für Suchfeld und Suchergebnisseiten aus? Was solltest Du beachten, wenn keine Ergebnisse gefunden werden? Wie kannst Du das Tracking nutzen?

‍

Die Artikelreihe im Überblick

• ‍Teil 1: Worauf kommt es beim Algolia Onboarding an?
• ‍Teil 2: Algolia Onboarding - Konzeption und Gestaltung des User Interface
• ‍Teil 3: Von Indexierung bis Integration: Das A und O beim Algolia Onboarding
• ‍Teil 4: Abschließende Konfiguration von Algolia

‍

Die Herausforderung: Das Detail liegt in den Einstellungen

Grundsätzlich muss sich die Suche immer an den Problemen der Zielgruppe orientieren und kann daher unterschiedliche Funktionen enthalten. Dennoch gibt es einige Standards, die bei der Konzeption und im Design berücksichtigt werden können, um eine positive Nutzererfahrung zu schaffen. So kann eine Suche ihre Qualitäten voll entfalten, wenn sie von den Benutzerinnen und Benutzern auch als solche erkannt und angenommen wird. Dabei profitiert sie wie kaum eine andere Komponente auf einer Webseite von der historischen Entwicklung.

Aber verschiedene mentale Modelle und Erwartungen von berühmten Vorbildern und dem erlernten Nutzerverhalten können sowohl positive als auch negative Effekte bringen. Es ist zwar naheliegend, als Ausgangspunkt sich an großen Namen zu orientieren und Experimente wohldosiert und mit sinnvollen Vorgehensweisen einzubauen, aber auch hier gilt: Große Markennamen müssen nicht mit einer positiven Nutzererfahrung einher gehen und haben auch nicht dieselbe Zielgruppe wie Dein Projekt  – dazu aber später in unserer Artikelreihe mehr.

‍

1. Struktur und Aufbau der UI-Komponenten

Überlege zuerst, wieso Du eine Suche überhaupt integrieren möchtest? Welches aktuelle Business Problem möchtest Du lösen? Auf welches Ziel soll die Suche einzahlen? Verbinde diese ersten Definitionen mit der Herausforderung Deiner Kundinnen und Kunden: Welches Problem haben Nutzerinnen und Nutzer, welches Du mit der Suche lösen kannst?

Nachdem die Visionen und die Ziele festgelegt sind, kannst Du Überlegungen treffen, welche Funktionalitäten überhaupt angeboten werden und wie sie angeordnet sind.

Dazu muss Dein Team zunächst Deine Nutzerinnen und Nutzer und vor allem Dein Angebot verstehen. User Experience ist ein Prozess der kontinuierlichen Verbesserung. Gemeinsam definieren wir im Vorfeld, wann Dein Projekt erfolgreich ist. Dies messen und validieren wir kontinuierlich. Sollte etwas nicht laufen wie geplant, müssen wir die Gründe dafür genau hinterfragen. Liegt es an der Nutzererfahrung?  Haben Nutzerinnen und Nutzer dieses Problem gar nicht? Ooder ist das Problem nicht groß genug, so dass gar keine Lösung benötigt wird?

Ziel ist die Ausarbeitung von einem Business-Problem-Statement, die Definition von KPIs, die Platzierung des Suchfelds auf der Website und die Festlegung des Suchumfangs inklusive aller Funktionen.

Welche Ziele und Bedürfnisse haben die Kundinnen und Kunden? Welche Verhaltensweisen legen sie an den Tag? Welche Herausforderungen und Probleme wollen sie mit der Suche lösen? Welcher Inhalt können über die Suche erreicht werden? Wie löst der Wettbewerb diese Aufgabe?

Auf Basis dieser Erkenntnisse entwickeln wir gemeinsam mit Dir ein UX-Konzept. Hierfür kannst Du Tools wie Figma nutzen oder einfach auf einem Miro-Board konzeptionelle Überlegungen treffen.

Algolia selbst bietet mit seiner "Inspiration Library" und dem "UI Design Kit", in die Erfahrungen aus unzähligen Projekten geflossen sind. Es bildet eine gute Grundlage für zur Einsparung von Ressourcen und Aufwänden, indem das UI Design Kit von Algolia verwendet wird.

Wenn dieser konzeptionelle und gestalterische Prozess eine gewisse Reife erreicht hat, ist es sinnvoll, die Zwischenergebnisse mit den Nutzerinnen und Nutzern zu testen und das Feedback wieder in das Produkt einfließen zu lassen. Die Annahmen können wir gemeinsam über A/B-Tests oder mit Nutzerinterviews validieren. Denn was für uns gut und richtig erscheint, muss für die Zielgruppe noch lange nicht geeignet sein. Daher ist es zwingend erforderlich, solche zentralen Entscheidungen auf einer möglichst breiten Basis zu treffen.

‍

‍

2. Das Suchfeld

Das Suchfeld ist der zentrale Einstiegspunkt in die Search Experience und verdient daher die größte Aufmerksamkeit. Wo ist es auf der Website platziert und wie groß ist es? Gibt es einen Platzhaltertext, einen "Call to Action" oder die Möglichkeit, die Eingabe mit einem Klick zu löschen? Sind Animationen als zusätzliche Eyecatcher erwünscht?

Die großen Player machen es vor und prägen damit gleichzeitig die Erwartungen der Nutzerinnen und Nutzer an eine solche Funktion. Ein prominentes Eingabefeld im Header, meist kombiniert mit einem Platzhaltertext, der kurze Nutzungshinweise gibt, daneben eine Lupe zum Absenden der Suchanfrage.

Je dominanter und attraktiver ein Suchfeld zur Nutzung einlädt, desto größer sind auch die damit verbundenen Erwartungen.

Du steuerst also selbst, wie stark sich eine Suche als Navigationsinstrument anderen benachbarten Elementen wie der klassischen Navigation über- oder auch unterordnet. Sobald die Nutzerinnen und Nutzer in das Suchfeld hineinklicken, beginnt die Interaktion. Noch bevor sie etwas eintippen, können ihre letzten, eingegebenen Suchausdrücke angezeigt werden. Oder vielleicht besonders populäre Produkte, viel gelesene Inhalte oder meistgenutzte Suchbegriffe können empfohlen werden. Beginnen User dann zu tippen, kann die Suche unmittelbar wertvolles Feedback geben. Hier gibt es zwei unterschiedliche, aber sehr verbreitete Vorgehensweisen.

Instantsearch

Die Instantsearch ersetzt die Suchergebnisseite. Sie erscheint unmittelbar nach der Eingabe der ersten Buchstaben und listet die Treffer wie auf einer normalen Suchergebnisseite einschließlich der dazugehörigen Filter bzw. Facetten auf. Bei jeder weiteren Eingabe und Änderung des Suchbegriffs passen sich die angezeigten Treffer sofort und ohne erneutes Laden der Seite an.

Autocomplete

Die Autocomplete-Funktion ist ein Overlay, das sich bei der Sucheingabe automatisch unterhalb des Suchfeldes öffnet. Dieser Bereich kann mit beliebigen Informationen befüllt werden. So zum Beispiel mit der "Query Suggestion" von Algolia, die auf Basis eines bereits eingegebenen Teilausdrucks weitere populäre Begriffe vorschlägt. Diese können mit einem Klick als Suche ausgelöst werden.

Natürlich können auch erste Produkte als Teaser angezeigt werden oder Kategorien, in denen besonders viele Ergebnisse gefunden wurden. Mit der sogenannten föderierten Suche können ergänzend zur bisherigen Sucheingabe auf dieser Fläche weitere Suchergebnisse unterschiedlicher Art und Herkunft dargestellt werden. Neben den Produkten selbst können auch Inhalte wie Artikel aus anderen Algolia-Indizes mit völlig abweichenden Strukturen oder Ranking Strategien dargestellt werden.

3. Die Suchergebnisseite

Zwar bietet die Autocomplete-Funktion bereits eine ganze Reihe Spielraum, um gesuchte und empfohlene Inhalte anzuzeigen. Aber sie stellt nur eine sinnvolle Ergänzung zur Suchergebnisseite dar.

Welche Informationen pro Treffer sollen für die Nutzerinnen und Nutzer überhaupt angezeigt werden? Welche Bilder werden dargestellt? Wie wird mit Preisen umgegangen? Soll der Hersteller des Produktes angezeigt werden? Soll der Suchausdruck in den gefundenen Treffern hervorgehoben werden? Wie soll eigentlich mit Varianten umgegangen werden? Welche Filter bzw. Facetten werden angeboten, um die Ergebnisse einzuschränken? Kann ich die Treffer sortieren und nach welchen Kriterien? Soll es eine Paginierung der Liste geben?

So könnten Deine Suchergebnisse aussehen: Die relevantesten Ergebnisse in Kachel- oder Listendarstellung. Varianten können schon auf der Ergebnisseite betrachtet werden. Jede Variante verfügt über mehrere Bilder, die per Slider gewechselt werden können. Eine horizontale Liste mit Filtern, bei der die Filterwerte mit den meisten Ergebnissen bequem als erstes dargestellt werden.

Alternativ zu einer Paginierung gibt es eine Infinite-Hits-Funktion, welche die Ergebnisse beim Scrollen automatisch nachlädt.

In der Konzeptions- und Gestaltungsphase kannst Du genau planen, wie die Ergebnisse Deinen Kundinnen und Kunden präsentiert werden und welche Funktionen sie vorfinden sollen. Auch hier kannst Du auf Best Practices zurückgreifen und damit das Risiko von Fehlentscheidungen minimieren.

‍

‍

4. Keine Ergebnisse gefunden

Auch wenn im Vorfeld in der Benutzerführung alles von Dir getan wurde, um dieses Ereignis auszuschließen: Es kann immer einmal dazu kommen, dass gar kein Ergebnis zum eingegebenen Suchausdruck gefunden wurde.

Sicher ist es ratsam, Deinen Kundinnen und Kunden ein Feedback zu geben, wie der Suchausdruck lautet, zu dem kein Ergebnis gefunden wurde. Denn vielleicht ergibt sich daraus schon eine erste Erkenntnis im Fall von Tippfehlern.

Eine regelmäßige Auswertung der Analytics-Daten von Algolia und hier insbesondere der "Searches without Results" kann Dir einen Aufschluss über die Gründe für schlechte Suchergebnisse geben.

Handelt es sich beispielsweise um Suchausdrücke, die in Deinem Shop in einer anderen Terminologie oder Schreibweise verwendet werden, so können über das Algolia-Backend sehr einfach Synonymbeziehungen zu Suchausdrücken mit relevanten Treffern hergestellt werden. "Pyjama" findet nun auch "Schlafanzug". So liefert die vorherige Suche ohne Treffer jetzt relevante Ergebnisse.

Hilfreich können aber auch kleine Handlungsempfehlungen sein, die zu weiteren potenziellen Suchergebnissen führen. Häufig werden populäre Kategorien oder beliebte Produkte wie Top-Seller oder ergänzende Produkte zum aktuellen Warenkorb angezeigt, die für Kundinnen und Kunden interessant sein könnten.

Neben der Überprüfung der Algolia-Einstellungen hinsichtlich der Zero Results kann im Frontend auch eine Query-Suggestion unterstützen, falls diese Funktion noch nicht vorhanden ist.

‍

5. Plane das Tracking

Wenn Benutzerinnen und Benutzer Deine Suche verwenden, auf die Ergebnisse klicken, die Produkte in den Warenkorb legen und im weiteren Bestellprozess kaufen, so bietet es sich das Tracking dieser Ereignisse an. Aus diesen sogenannten Insight Events kannst Du eine Menge Informationen ableiten und der Algorithmus Deiner Algolia-Suche kann sich eigenständig optimieren, um über die Zeit immer bessere Ergebnisse und Vorschläge zu liefern.

So lernt Algolia die Nutzerinnen und Nutzer kennen, um die Ergebnisse mehr und mehr zu personalisieren und ihren individuellen Vorlieben anzupassen. Aber auch die KI-Funktionalitäten wie Dynamic Re-Ranking profitieren von der Schwarmintelligenz von Algolia. So werden die Ergebnisse, die zu einem Suchausdruck häufig geklickt und gekauft werden, wiederum höher platziert, als es der konventionelle Ranking-Algorithmus eigentlich vorsieht.

Möchtest Du herausfinden, ob sich Veränderungen an einzelnen Algolia-Einstellungen positiv auswirken, eignet sich dafür ein A/B-Test.

Mit der Integration der Insights API kannst Du auch A/B-Tests durchführen: Während eine Hälfte der Nutzerinnen und Nutzer die alten Einstellungen behalten, lässt Du die andere Hälfte mit den neuen Einstellungen suchen.

Am Ende kannst Du ermitteln, welche Variante die höheren Conversions erzielt hat. Dies sind nur einige Beispiele, in denen Insight Events die Leistungsfähigkeit von Algolia steigern können. Als Teil des Interaktionskonzeptes empfehlen wir Dir, die Events schon direkt im Design-Mockup zu planen. Algolia bietet dafür eine ganze Reihe von Informationen, welche Events wo platziert werden und welche empfohlen oder eher optional sind.

Grundsätzlich kannst Du jede Benutzeraktion an Algolia übermitteln, sei es das Abspielen eines Videos, der Klick in einer E-Mail oder das Scrollen bis zum Ende eines Artikels. Für das Team haben aber andere Ereignisse Vorrang, die mit der Suche im Zusammenhang stehen:

• Suchergebnis aus Sucherergebnisliste angeklickt
• Suchergebnis aus Sucherergebnisliste in den Warenkorb gelegt
• Produktdetailseite via Suche in den Warenkorb gelegt
• Produktdetailseite in den Warenkorb gelegt
• Suchergebnis aus Autocomplete angeklickt
• Suchergebnis aus Autocomplete in den Warenkorb gelegt
• Filter- bzw. Facettenwert wurde angezeigt
• Filter- bzw. Facettenwert wurde angeklickt

Algolia lernt aus jedem einzelnen Ereignis. Sie verändern das Verhalten der eingesetzten KI und beeinflussen Trends und Empfehlungen, die sich im Ergebnis widerspiegeln. Sollen sie sich durch Personalisierung auch auf das persönliche Nutzungserlebnis auswirken, ist es essenziell, für jeden User eine individuelle User-ID zu erzeugen. Diese sorgt bei jeder Aktion für Wiedererkennung und hilft so, noch relevantere Inhalte anzubieten.

‍

‍

Abschluss der Gestaltung und zukünftige Anpassungen

Alle oben genannten Überlegungen müssen neben der Desktop-Auflösung, die ja in der Regel viel Platz bietet, ebenfalls für Tablet- und Mobile-Auflösungen getroffen werden. Schließlich soll die Nutzung der Suche auch auf diesen Geräten eine angenehme Erfahrung bieten.  Ist das Design fertiggestellt und evaluiert, sollten weitere Anpassungen nach dem Live-Gang auf Basis der erhobenen Daten erfolgen. Design-Varianten und Analytics-Daten können mit Hilfe von A/B-Tests überprüft werden. Diejenigen Varianten sollten gewinnen, bei denen die meisten Clicks und Conversions gemessen werden.

Wichtig dabei ist es, immer nur ein Detail, wie Farbe, Anordnung, Wording, etc. zu ändern. Dadurch erhältst Du  eine möglichst eindeutige Entscheidungsgrundlage.

‍

Zielgerichtete Beratung für Dein Algolia-Projekt

Wie Du in unserer Artikelserie schon längst erkannt hast, ist Algolia ein herausragendes Werkzeug, um für Deine Kundinnen und Kunden die besten Suchergebnisse zu liefern. Unsere Agentur kernpunkt unterstützt Dich beim Onboarding von Algolia. Wir beraten Dich bei der optimalen Systemauswahl, unterstützen bei der technischen Integration von Algolia in Deinem E-Commerce-Projekt, helfen Dir mit einer Algolia-Review bei der Optimierung Deines Projekts oder begleiten Dein Team mit den passenden Schulungen und Trainings.

Wenn Du die Suche in deinem Online-Shop grundlegend mit innovativen KI-Algorithmen ausrüsten möchtest und die Conversion Rate steigern willst, sprich unser Team direkt an.