Usability-Best-Practices für die Filterfunktion im Online-Shop

Usability-Best-Practices für die Filterfunktion im Online-Shop

Userlutions Team | Apr 28, 2017 | User-Experience-Tipps

Nutzen Sie beim Onlineshopping auch die Filterfunktion?

Ja? Kein Wunder, schließlich erleichtert Sie uns die Suche nach den passenden Produkten enorm:

Schlichtes weißes Businesshemd im mittleren Preisrahmen in Größe L

Rote Lackschuhe mit kleinem Absatz in Größe 39

13“ Laptop mit 8GB RAM, 2,4 GHz, unter 500€

Doch welche Anforderungen muss ein Filtersystem erfüllen, um die Nutzer beim Shopping ideal zu unterstützen und die Usability zu steigern?

Und wann, wie und wo sollten Filter überhaupt angeboten werden?

Aus unseren RapidUsertests konnten wir einige Best-Practices für gute Filter ableiten. Und wir geben Ihnen Tipps, wie Sie Ihre Filterfunktion auf Nutzerfreundlichkeit testen können.

Warum sollte ich eine Filterfunktion in meinem Online-Shop anbieten?

Filter dienen der Eingrenzung von Produkten. Gerade bei vielen Produkten bieten sie den Nutzern Orientierung, erhöhen die Usability und die Kaufentscheidung wird erleichtert.

Warum Filterfunktion einsetzen? Beispiel Asos

Abb. 1: Filter vereinfachen die Suche nach dem richtigen Produkt enorm. Bei 5.940 Kleidern, wie hier bei Asos sind sie unverzichtbar.

Welche Filter sollte ich in meinem Online-Shop anbieten?

Entscheidungskriterien beachten: Welche Filter Sie anbieten sollten, ist sehr von den Informationen abhängig, die für die Kaufentscheidung benötigt werden. Sie sollten sich bei der Filter-Auswahl an diesen Entscheidungskriterien des Nutzers orientieren. Die essentielle Frage lautet also: Was müssen meine Kunden über das Produkt wissen, um ihre Kaufentscheidung treffen zu können?
Auch innerhalb eines Shops können Produkte völlig unterschiedliche Entscheidungskriterien haben und damit andere Filter erfordern.

Fokus auf nicht-visuelle Eigenschaften: Sie sollten sich dabei vor allem auf Produkteigenschaften konzentrieren, die nicht durch das Produktfoto abgedeckt werden. Bei einem großen Angebot ist es aber sinnvoll, auch nach äußerlichen Eigenschaften, wie der Farbe, filtern zu können – wenn dies für die Kaufentscheidung relevant ist.

Sortierungsmöglichkeiten anbieten: Auch bei einem guten Filtersystem, sollten Sie Ihren Kunden ermöglichen, die gefilterten Ergebnisse nach bestimmten Kriterien zu sortieren (z.B. Preis, Bewertungen). Bei der Auswahl der Sortierungsmöglichkeiten helfen Ihnen auch die Entscheidungskriterien.

Eine kleine Studie zur Filterauswahl im Online-Shop lesen Sie hier: Welche Filter biete ich in einem Online-Shop an? Ein Usability-Insight

Wie finde ich die Entscheidungskriterien meiner Nutzer heraus?

Da die Auswahl der richtigen Filter und Sortierungen elementar für eine hohe Conversion-Rate sein kann, sollten Sie sich nicht auf Einzelmeinungen verlassen.

Wie Ihre Nutzer zu einer Kaufentscheidung kommen, können Sie mit User-Research herausfinden.

In einem Crowd-Usability-Test können Sie sich außerdem absichern, ob Sie sich für die richtigen Filter entschieden haben. Lassen Sie dazu die Tester dazu nach einem Produkt in Ihrem Shop suchen und fragen sie zu Beginn:

Was sind deine Kriterien für das, was du gleich suchst? Welche Informationen brauchst du, um deine Entscheidung zu treffen?

Wie viele Filter sollte ich anbieten?

Auch die nötige Anzahl der Filter ist von Produkt und Angebot abhängig. Hier einige Faustregeln:

  • Bieten Sie die Filter an, die für die meisten Nutzer entscheidend sind. Zu viele Filter können die Suche auch schnell unübersichtlich machen.
  • Je mehr Produkte Sie in einer Kategorie anbieten, desto detaillierter sollte die Filtermöglichkeit sein.
  • Für mehr Übersichtlichkeit: Platzieren Sie die relevantesten Filter (die auf jeden Fall jeder braucht) nach oben.

Falls Sie nur sehr wenige Produkte anbieten, brauchen Sie eventuell keine Filter. In diesem Fall sollten die wichtigsten Entscheidungskriterien aber schon auf der Übersichtsseite sichtbar sein.

Wo sollten die Filter platziert werden?

Die meisten Shops platzieren die Filter auf der linken Seite oder oberhalb der Produktübersicht. So gehen Sie sicher, dass die Filterfunktion nicht übersehen wird.

Vorteile der Platzierung links:

  • Die etablierteste Variante
  • Es ist leichter, mehrere Filter gleichzeitig auszuwählen
  • Die Nutzer müssen nicht jedes Mal wieder ganz nach oben scrollen, um die Filter anzupassen.

 

Warum die Filterfunktion links sein sollte

Abb. 2: Mister Spex platziert die Filter auf der linken Seite, so wie die meisten Onlineshops.

 

Vorteile der Platzierung oben:

  • Sie sind auffälliger platziert, so dass auch ungeübte Filternutzer sie nicht übersehen.
  • Die Reihenfolge der Filter ist nicht so bedeutend, wie auf der linken Seite, da die Filter zum Teil auch nebeneinander platziert werden.

 

Warum die Filterfunktion oben sein sollte

Abb. 3: Zalando platziert die Filter oberhalb der Produktübersicht.

Wie sollte ich die Filterfunktion darstellen?

Je nach Art des Filters haben sich Schieberegler und Checkboxen bewährt. Außerdem wichtig:

Live-Aktualisierungen: In Usability-Tests von Desktop-Seiten haben sich Live-Aktualisierungen als nützlich erwiesen. Wird ein neuer Filter ausgewählt sollte sich die Produktübersicht also bereits aktualisieren, allerdings ohne dass die gesamte Seite neugeladen wird. Diese Best-Practice gilt allerdings nicht für mobile Shops (dazu unten mehr).

Anzahl der Produkte anzeigen: In jedem Fall sollte angezeigt werden, wie viele Produkte sich in einem Filter befinden, z.B. wie viele Produkte es von einer bestimmten Marke gibt. (z.B. Otto)

Kein Ergebnis: Tritt der Fall ein, dass nach einer Filterung keine Ergebnisse mehr angezeigt werden konnten, sollten Sie dem Nutzer einen guten Ausweg anbieten. (z.B. „Wenn Sie [diesen Filter] aufheben, bekommen Sie wieder Ergebnisse.“)

 

Otto zeigt die Produktanzahl des Filters an

Abb. 4: Otto.de zeigt an, wie viele Produkte sich innerhalb eines Filters befinden. Die Anzahl wird bei jeder Filterauswahl aktualisiert.

Welche Besonderheiten gibt es bei mobilen Geräten?

Auf den kleinen Displays von mobilen Geräten gibt es einige Besonderheiten bei der Darstellung von Filtern:

  • Für die Filteransicht sollte die gesamte Größe des Bildschirms genutzt werden. Ein Akkordeon-Menü macht die Ansicht übersichtlich. (Abb. 5)
  • Anders als am Desktop sollte sich die Ansicht NICHT nach jeder Filterauswahl aktualisieren, sonst drohen Orientierungsverlust und Frustration bei langen Ladezeiten. Verwenden Sie stattdessen einen Button „Filter anwenden“, der während der Filterwahl immer sichtbar ist.
  • Vermeiden Sie „Doppeltes Scrollen“. Wenn die gesamte Seite gescrollt werden kann, sollten die Filter also keine eigene unabhängige Scroll-Möglichkeit haben.
    In einem Akkordeon-Menü kann dies verhindert werden, indem Sie alle Optionen eines Filters anzeigen, wenn dieser ausgeklappt wird. Bei sehr vielen Optionen können Sie dann z.B. die 20 meistgenutzten Optionen anzeigen und am Ende der Liste einen „mehr“-Button anbieten, um alle weiteren Optionen anzuzeigen.

Die Filterfunktion im Desktop-Portal von Booking.com

Die Filterfunktion der Booking.com App mit Filter-Anwenden-Button

Abb. 5: Auf der Desktop-Seite aktualisiert Booking.com die Ergebnisse bei jeder Filter-Auswahl. In Ihrer App gibt es hingegen einen „Ergebnisse anzeigen“-Button. Die gefilterten Unterkünfte werden also erst angezeigt, nachdem alle benötigten Filter ausgewählt wurden.

Usability-Tests von Filtern – Best Practices

Auch wenn Sie alle diese Hinweise beachtet haben, sollten sie die Nutzerfreundlichkeit Ihrer Filterfunktion mit Ihrer Zielgruppe testen. Werden die Filter gefunden und genutzt? Bieten Sie wirklich alle notwendigen Filter an? Sind die Filterergebnisse erwartungskonform?

Deshalb hier noch einige Tipps für Usability-Tests der Filterfunktion:

  • Stellen Sie die Aufgaben aus der Perspektive des Nutzern, so dass er sich mit der Produktsuche identifizieren kann:„Suche nach einer Hose, die deinen (Preis-)Vorstellungen entspricht und die du selbst kaufen würdest.“Vermeiden Sie dabei aber Schlüsselwörter wie „filtere“, „grenze ein“, um zu sehen, ob die Filter gefunden und genutzt werden. Nur so können Sie natürliche Nutzerverhalten beobachten.
  • Gehen Sie in einer nachfolgenden Aufgabe oder der Nachbefragung noch einmal auf die Filterfunktion ein:„Hast du die Filterfunktion genutzt? Haben dir noch weitere Filtermöglichkeiten gefehlt?“

Zusammenfassung: Was bei der Filterfunktion im Online-Shop beachtet werden muss

Die Filterfunktion erleichtert es Ihren Kunden, ein Produkt zu finden, das ihren Vorstellungen entspricht. Das müssen Sie für eine gute Usability beachten:

  • Entscheidungskriterien Ihrer Kunden analysieren
  • Filter anhand der wichtigsten Entscheidungskriterien auswählen
  • Relevanteste Filter oben platzieren
  • Filterfunktion links oder oberhalb der Produktübersicht platzieren
  • Auf Desktop: Live-Aktualisierung
  • Auf mobile: „Filter anwenden“-Button
  • Usability-Tests der Filterfunktion durchführen

Weiterlesen: Viele weitere Tipps, wie Sie Ihren Onlineshop optimieren können

Welche Filter bieten Sie in Ihrem Online-Shop an? Haben Sie noch weitere Best-Practices? Schreiben Sie uns einen Kommentar 🙂

UX-Mas im E-Commerce: Wie Sie Ihren Shop auf das Weihnachtsgeschäft vorbereiten (+Checkliste)

UX-Mas im E-Commerce: Wie Sie Ihren Shop auf das Weihnachtsgeschäft vorbereiten (+Checkliste)

Andreas Krauss | Okt 21, 2016 | User-Experience-Tipps

Weihnachten steht vor der Tür und damit beginnt auch der Ausnahmezustand für alle Onlineshop-Betreiber. Doch auch Ihre Kunden werden gestresster und sensibler, je näher die Bescherung rückt. Wie können Sie also die User Experience Ihrer Kunden optimieren, um das Weihnachtsgeschäft für beide Seiten so harmonisch wie möglich zu gestalten?

Wir konnten in Weihnachtstests der vergangenen Jahre einige Erkenntnisse über das Mindset der Nutzer in dieser nervenaufreibenden Zeit sammeln, aber möchten auch ein paar Best Practices unserer Kunden vorstellen.

Vor einiger Zeit haben wir Ihnen an dieser Stelle bereits die vier Käufertypen zu Weihnachten vorgestellt. Während den Frühkäufern ein entspanntes Geschenke-Shopping wichtig ist, sind die Spät- und Last-Minute-Käufer umso panischer und hektischer. Keine Geschenke für ihre Liebsten zu finden oder – fast noch schlimmer – zu spät gelieferte Geschenke sind der Schrecken dieser User in der Weihnachtszeit. Ihre Priorität: Alles MUSS klappen – und zwar rechtzeitig!

Die Käufertypen zur Weihnachtszeit

Verschiedene Käufertypen haben auch unterschiedliche Bedürfnisse zur Weihnachtszeit. Vor allem das Mindset der Spät- und Last-Minute-Käufer muss bei den Weihnachtsvorbereitungen berücksichtigt werden.

Website für das Weihnachtsgeschäft optimieren

Um Ihren Kunden schon bei der Geschenkauswahl und dem Bestellprozess eine gute User Experience zu bescheren, sollten Sie auf Ihrer Website folgende Dinge beachten:

 

Die Lieferung – schnell und zuverlässig

Offene Kommunikation der Lieferzeiten: Sätze wie „Um Ihre Bestellung noch vor dem 24. zu erhalten, müssen Sie diesen Artikel bis zum XX. bestellt haben.“ sind Weihnachtsmusik in den Ohren Ihrer Kunden. Um die Conversion zu erhöhen, geben Sie diesen Hinweis am besten schon auf der Homepage. Auch eine Anzeige, wie groß Ihr Bestand bestimmter Artikel noch ist, kann hilfreich für die Kunden sein. Natürlich müssen Sie diese Versprechen aber auch einhalten können.

Gerade der Last-Minute-Käufer ist in großer Eile und daher durchaus bereit, mehr für eine Express-Lieferung zu bezahlen. Auch hier schnitten in unseren Usability-Tests Shops besonders gut ab, die diese Information schon auf der Homepage kommunizierten.

Nicht jeder kann seine Geschenke persönlich überreichen, deshalb ist die Angabe einer abweichenden Lieferadresse zu Weihnachten besonders wichtig. Auch die Möglichkeit, einen persönlichen Gruß zu verfassen, kommt gut an. In diesem Kontext auch relevant:

Versandbestätigung und Tracking-Code: Geben Sie Ihren Kunden Sicherheit und benachrichtigen Sie sie, sobald die Lieferung verschickt wurde. Auch Möglichkeiten zur Sendungsverfolgung werden in dieser Zeit noch mehr wertgeschätzt als sonst.

 

Die Verpackung – pragmatisch, aber mit dem gewissen Extra

Bei großer Familie und vielen Freunden kann das Verpacken der Geschenke schon mal einen ganzen Nachmittag in Anspruch nehmen. Ihre Kunden sind deshalb froh, wenn Geschenkverpackungen angeboten werden. Aus dem Einzelhandel sind sie es aber auch gewohnt, diesen Zusatzservice kostenlos zu bekommen.  In unseren Tests konnten wir daher beobachten, dass Nutzer frustriert sind, wenn sie sehr viel für das Einpacken bezahlen sollen. Wählen Sie lieber eine schlichtere Verpackung, die Sie ohne hohe Kosten anbieten können.

Geschenkverpackungen kommen beim Nutzer gut an, aber sollten nicht zu teuer sein.

Achtung, Originalverpackung! Sie verschicken Ihre Waren in der Originalproduktverpackung? Weisen Sie auf jeden Fall auf der Produktdetailseite oder vor der Buchung darauf hin! Kunden mit neugierigen Kindern werden es Ihnen danken.

 

Design und Inhalte – keep it simple!

Kein Kitsch: 

„Dieser Punkt hängt zwar vom Geschmack Ihrer Zielgruppe ab, aber in unseren Usability-Tests wurde kitschiger Weihnachtsschmuck (Stichwort: animierte Schneeflocken) von den meisten Nutzern als störend empfunden. Wir raten daher zu einem dezenten Winter- und Weihnachtsdesign, das sich nicht unnötig aufdrängt.“
Claudia Heinze, UX-Beraterin, Userlutions

Unsere kitschige Weihnachtskarte von letztem Jahr

Letztes Jahr haben wir bei unserer Weihnachtskarte unsere eigenen Ratschläge nicht befolgt und auf stereotype Weihnachtsklischees gesetzt. Ausnahmen bestätigen schließlich die Regeln 😉

Countdowns verursachen Stress: Anzeigen wie „noch 4 Tage bis zur Bescherung“ am besten noch mit Minuten und Sekunden Anzeige verstärken den ohnehin schon enormen Stress der Kunden. Anstatt sie zu animieren, fühlen sie sich unter Druck gesetzt, wie wir in Usability-Tests der letzten Jahre sehen konnten.

Und dann hat man auch noch diese Familienmitglieder und Freunde, die einfach schon alles haben und sich nie etwas wünschen. Da kommen Geschenke-Tipps und Inspirationen genau richtig. Eine einfache aber effektive Möglichkeit zur Conversionrate-Optimierung. Wichtig in diesem Zusammenhang: Möglichst sprechende Filtermöglichkeiten der Geschenke-Tipps. Je nach Typ sollten von verspielten bis praktischen Inspirationen alles dabei und schnell auffindbar sein.

 

Usability – bei gestressten Kunden wichtiger denn je

Performance optimieren: Die technische Infrastruktur muss darauf ausgerichtet sein, viele Anfragen verarbeiten zu können. Gewährleisten Sie Ihren Kunden einen reibungslosen Shop-Besuch ohne lange Ladezeiten oder gar Ausfälle.

Stellen Sie im gesamten Bestellprozess eine maximale Transparenz und Kontrolle für den Nutzer sicher. Dies fängt bei einem fehlerfreien und transparenten Checkout an, aber betrifft auch eine klare Bestellbestätigung auf der Danke-Seite und in einer entsprechenden Bestätigungs-E-Mail.

Funktionierende Gutscheineinlösung: Wenn Sie auf Ihrer Website Gutscheine anbieten, sollten Sie auf jeden Fall sichergehen, dass der Einlösungsprozess nach Weihnachten einwandfrei funktioniert und verständlich ist. Hier bietet sich ein Usability-Test an, um Probleme rechtzeitig zu identifizieren.

Customer Experience für das Weihnachtsgeschäft optimieren

Kundenservice-Team aufstocken: Gestresste Kunden sind besonders aufmerksamkeitsbedürftig, sie müssen daher mit vielen Support-Anfragen rechnen. Versuchen Sie die Kunden auf Ihrer Website schon so gut es geht abzuholen. Aber vergrößern Sie auf jeden Fall auch Ihr Customer-Service-Team in dieser Zeit.

Funktioniert der Customer Service trotzdem mal nicht, wenden sich viele enttäuschte Kunden heutzutage auch an Ihre Social-Media-Kanäle. Bereiten Sie Ihr Social-Media-Team daher darauf vor, nicht nur auf die Weihnachtszeit einzustimmen und für Inspirationsquellen zu sorgen, sondern auch im Kundenservice agieren zu müssen.

Genauso wie der Einzelhandel müssen auch Onlineshops nach Weihnachten mit vermehrten Rückerstattungen und Umtauschen rechnen. Eine transparente Darstellung der Rückgabe- und Umtauschrechte kann offene Fragen und Unsicherheiten klären und Kaufanreize bieten.

Natürlich freuen sich Ihre Kunden über Sonderaktionen zur Weihnachtszeit, seien es Rabatt-Aktionen oder spezielle Weihnachtsangebote. Machen Sie Versprechungen wie 24-Stunden-Lieferungen, sollten Sie diese aber auf jeden Fall gewährleisten können. Geht dieser Plan nicht auf, werden Ihre Kunden Ihnen das länger verübeln als wenn Sie dieses Angebot gar nicht erst gemacht hätten.

Extra-Tipp: Konkurrenztests zu Weihnachtszeit

Um von den Fehlern und Best-Practices der Konkurrenz zu lernen, empfehlen wir außerdem Wettbewerbertests zur Weihnachtszeit durchzuführen und so im nächsten Jahr die Nase vorn zu haben.  So hat es letztes Jahr auch unser Kunde CEWE gemacht: Für ihren Fotoservice analysierten sie die gesamte Customer Journey auf ihrer eigenen Seite, aber auch auf elf Konkurrenzseiten, inklusive Verpackungsgestaltung und Produkttests. Auf diese Weise konnten sie wichtige Rückschlüsse für Website, Versand, Verpackung und Produktqualität ziehen, von denen sie in diesem Jahr profitieren werden. In Kürze werden wir zu diesem Projekt eine Case-Study veröffentlichen, schauen Sie also in nächster Zeit mal wieder vorbei! Ein kleiner Vorgeschmack: Die Verpackung hat bei Kunden einen höheren Stellenwert, als Sie vielleicht denken…

Fazit: Mit Usability- und Customer-Experience-Optimierungen stressfrei in die Feiertage

In der stressigen Weihnachtszeit ist es wichtiger denn je, Ihre Nutzer an jedem Schritt des Kaufprozesses abzuholen und auf ihre Probleme einzugehen. Kommunizieren Sie offen und transparent, vor allem auch dann, wenn mal etwas nicht nach Plan läuft und es zu Verzögerungen kommt. Wenn dann auch technisch alles funktioniert steht auch Ihnen und Ihren Kollegen einem stressfreien Start in die Feiertage nichts mehr im Wege.

Damit Sie mit Ihrem Team alle Punkte noch einmal durchgehen können, haben wir sie in unserer Checkliste „Wie Sie Ihren Onlineshop auf das Weihnachtsgeschäft vorbereiten“ zusammengefasst.

Userlutions wünscht fröhliche Weihnachten

Viel Erfolg und frohe Weihnachten! 🙂

Weiterlesen: Nicht nur für die Weihnachtszeit – Wie Sie Ihren Onlineshop optimieren

Wenn wir Ihnen mit vorweihnachtlichen Usability- oder Customer-Experience-Tests unter die Arme greifen können, chatten oder rufen Sie uns gerne an (Tel.: 030 544 87 024).