Um ein klares Endziel für Ihr Team zu haben, müssen Sie genau festlegen, was Ihre Nutzer in jeder Phase ihrer Suche sehen sollen. Es gibt ein großes Ökosystem an Design-Software - zu den professionelleren Angeboten gehören Figma und InVision Studio, aber Sie können genauso gut Miro oder sogar ein Blatt Papier verwenden. Bei der Gestaltung der UX sollten Sie die Richtlinien für Barrierefreiheit berücksichtigen. Außerdem sollten Sie sicherstellen, dass das von Ihnen entworfene Erlebnis auch für mobile Geräte geeignet ist und dass Ihr Design auf allen Bildschirmgrößen gut funktioniert.
Wenn Sie nicht sicher sind, wo Sie anfangen sollen, schauen Sie sich die Algolia-Inspiration Library an. Für E-Commerce-Anwendungsfälle können Sie sich auf das UI Design Kit für Best Practices verlassen. Es enthält vordefinierte und dennoch anpassbare Komponenten und ist in der Figma-Community verfügbar.
Jeder der folgenden Abschnitte beschreibt eine Phase in der User's Journey und enthält einige Fragen, die bei der Gestaltung zu stellen sind.
Je größer die Suchleiste ist, desto höher ist das Engagement. Es ist immer besser, die Suchleiste in einem einsatzbereiten Zustand zu präsentieren, nicht durch ein Symbol verdeckt. Traditionell suchen die Nutzer nach Suchleisten in der oberen rechten Ecke des Bildschirms.
- Wo kann der Nutzer auf die Suchleiste zugreifen?
- Wird diese animiert?
- Sagt der Textplatzhalter dem Benutzer, wonach er suchen kann?
Sobald die Nutzer mit der Suchleiste interagieren, erhalten sie ein Feedback. Dies ist die Gelegenheit, Ihren Nutzern weitere Aufforderungen und Angebote zu machen. Dies kann in Form eines Suchverlaufs des Nutzers, trendiger Produkte oder vorgeschlagener Suchbegriffe geschehen.
- Was passiert, wenn der Benutzer auf die Suchleiste klickt?
- Zeigen Sie die letzten Suchen an (diese werden als Plugin mit unserer Autocomplete Library angeboten)?
- Bieten Sie dem Nutzer häufig genutzte Inhalte an?
Für Desktop-Websites gibt es zwei Hauptmuster, die dem Benutzer ein ähnliches Erlebnis bieten: Sofortige Suche (instant search) und automatische Vervollständigung (autocomplete).
Die Sofortsuche rückt Ihre Ergebnisse in den Mittelpunkt und macht eine separate Ergebnisseite überflüssig. Dies eignet sich gut für Ergebnisse mit gutem Bildmaterial und für die Site-Search. Sehen Sie sich dieses E-Commerce-Beispiel aus unserer Inspirationsbibliothek an.
Die Autovervollständigung hingegen bietet ein Overlay, in dem Sie Informationen aus mehreren Quellen zusammenführen können. Sehen Sie sich dieses Beispiel einer Federated Search aus unserer Inspirationsbibliothek an.
Auf mobilen Geräten ist das Interaktions-Interface fehleranfälliger. Query Suggestions sind der beste Weg, um einen Nutzer zu Ergebnissen zu führen, die für seine Absicht relevant sind. Sie helfen den Nutzern, weniger zu tippen und schneller zu Ergebnissen zu gelangen. Sehen Sie sich dieses Beispiel aus unserer Inspirationsbibliothek an.
- Was passiert, wenn der Benutzer etwas in die Suchleiste eingibt?
- Schlagen Sie Query Suggestions vor? (Algolia bietet diese out of the box).
- Zeigen Sie verschiedene Arten von Ergebnissen in einer Federated Search an?
Für Desktop-Erfahrungen ist es üblich, die Facetten auf der linken Seite zu finden. In den letzten Jahren haben Modehändler damit begonnen, Dropdowns über den Ergebnissen zu verwenden. Die letztere Option verringert zwar das Engagement, bietet aber mehr Platz für die Anzeige von Produkten.
Bei mobilen Geräten befinden sich die Filter oft in einem separaten Fenster.
- Wie zeigen Sie dem Nutzer die Ergebnisse an?
- Bieten Sie dem Nutzer Facetten an, damit er seine Suche weiter verfeinern kann?
- Wie wird jeder der Facettenwerte dargestellt?
- Kann ein Benutzer alle ausgewählten Filter auf einmal löschen?
- Helfen Sie dem Benutzer bei der Navigation durch die Ergebnisse, indem Sie z. B. die Anzahl der Ergebnisse und die Seitenzahlen anzeigen?)
- Bieten Sie ‘sort by’ an, damit ein Benutzer seine Ergebnisse sortieren kann?
- Verwenden Sie eine hierarchische Kategorisierung, damit der Benutzer seine Ergebnisse leicht verfeinern kann?
- Haben Sie schon im Widget Showcase nachgesehen, was verfügbar ist?
- Möchten Sie Banner auf einer Homepage, Suchergebnisseite oder Kategorieseite anzeigen?
Manchmal suchen Benutzer nach Produkten oder Inhalten, die nicht in Ihrem Katalog vorhanden sind. Anstatt irrelevante Ergebnisse zu präsentieren, ist es am besten, ihnen eine hilfreiche Seite ohne Ergebnisse zu bieten, die andere Optionen für die weitere Suche aufzeigt, wie dieses Beispiel einer No Results-Seite zeigt.
- Was zeigen Sie dem Nutzer, wenn es keine Ergebnisse gibt?
- Bieten Sie gute Call-to-Actions an, um den Nutzer auf seinem Weg zu halten, z. B. durch die Anzeige von Bestsellern, anderen Kategorien oder Hinweisen, wie er weiter suchen kann?
- Ist klar, welche Suchanfrage zu keinen Ergebnissen führt?
