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

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

Userlutions Team in User-Experience-Tipps
Lesezeit: 6 Minuten · 28. April 2017
von | 28. April 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 bisher 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. So wird vermieden, dass die Orientierung des Nutzers auf der Seite durch ein „Hochspringen“ verloren geht. Besonders positiv ist die Variante der Live-Aktualisierung, wenn der Nutzer ohne konkrete Filtervorstellungen an die Suche herantritt und sich eher im „Explorationsmodus“ befindet. Er steigt direkt in die Produktauswahl ein.

Mehrfachauswahl: Im Gegensatz zur Darstellungsweise in Mobile-Shops finden wir bei Desktop-Anwendungen erstaunlich selten die Möglichkeit einer Mehrfachauswahl mit anschließendem „Filter anwenden“-Button. Hier ist zu bedenken, dass Auswahlmöglichkeiten sich zwangsläufig gegenseitig bedingen und sich Produktverfügbarkeiten so durch zusätzliche Filter verändern können (z. B. kein Smartphone der Marke Samsung unter 300€ verfügbar). Eine Aktualisierung wird an gegebener Stelle also ohnehin notwendig.

Des Weiteren verstecken Mehrfachwahl-Filtermenüs oft die feineren Unterfiltermöglichkeiten, die sich erst durch Öffnen der entsprechenden Oberkategorie offenbaren und dem Nutzer hier einen direkten Gesamtüberblick verwehren.

Technische Herausforderung:  Aus technischer Sicht bedeutet jede einzelne Filterauswahl (jedes „Häkchensetzen“) einen unabhängigen Request, der nicht mit anderen Auswahlmöglichkeiten kombiniert in einem Ausführungsbefehl gecodet werden kann. Jede Filteranfrage wird demnach auf dem Nutzerpfad bis zum „Filter anwenden“-Button ohnehin einzeln und unverzüglich an den Server gesendet und umgesetzt.

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.“)

 

Faustregel: Identifizieren Sie Fälle, in denen der Nutzer eine Mehrfachauswahl mit hoher Wahrscheinlichkeit als zwingend notwendig erachtet. Ermöglichen Sie ihm diese. In allen anderen Fällen haben sich Live-Aktualisierungen bewährt.

 

 

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: Mehrfachauswahl dann, wenn es wahrscheinlich ist, dass der Nutzer diese als notwendig empfindet. Ansonsten: Live-Aktualisierungen.
  • 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 🙂

15 Best-Practices für Usability-Tests mit Prototypen, die Sie kennen sollten

15 Best-Practices für Usability-Tests mit Prototypen, die Sie kennen sollten

Sophie Krüger in Testing-Tipps
Lesezeit: 5 Minuten · 20. September 2016
von | 20. September 2016 | Testing-Tipps

Frühe Fehler sind besser als späte Fehler. Das gilt auch für die Usability: Nutzungsprobleme, die bereits in der Prototyp-Phase entdeckt werden, lassen sich deutlich schneller und kostengünstiger beheben als Fehler, die erst nach der Programmierung oder dem Live-Gang gefunden werden. In diesem Beitrag nennen wir daher ein paar Best-Practices für Usability-Tests von Prototypen und decken Fallstricke auf, die es zu vermeiden gilt.

Welche Prototypen mit RapidUsertests getestet werden können und wie diese Tests ablaufen, haben wir schon in einem früheren Beitrag erklärt. Getestet werden kann alles von klickbaren PDFs, über Wireframes bis hin zu High Fidelity Prototypen – auch von mobilen Websites und Apps.

Der Ablauf von Usability-Tests mit Prototypen

Den Nutzern Zugangsdaten zur Verfügung stellen – Oft ist es sinnvoll, Prototypen im Web mit einem Passwortschutz zu versehen. Geben Sie den Testern in der ersten Aufgabe Zugangsdaten, um auf den Prototyp zugreifen zu können.

Prototyp an den Haupt-Use-Cases ausrichten – Um eine gute Basis für die Optimierung des Prototyps zu schaffen, sollte er die Haupt-Use-Cases abdecken und darauf optimiert sein. Diese müssen sich in den Aufgaben des Usability-Tests widerspiegeln. Sprich: Es müssen nicht alle Links klickbar sein, sondern nur die wichtigsten Links.

Am wichtigsten: Richtige Verlinkungen im Prototyp

Prototypen, deren Verlinkungen in Sackgassen oder aus dem Prototyp herausleiten, führen dazu, dass Sie keine aufschlussreichen Ergebnisse erhalten und der Aufwand umsonst war. Die Nutzer verlieren die Orientierung oder landen auf den falschen Seiten und müssen den Test daher abbrechen. Diese Orientierungsverluste beeinträchtigen die Testergebnisse und sind unnötig, wenn sie aufgrund unsorgfältiger Verlinkung des Prototyps entstanden sind. Hier Tipps zur optimalen Verlinkung:

Konsistente und logische Links setzen – Alle Links müssen in sich logisch und konsistent sein, um die Nutzer nicht zu verwirren. Wenn das Logo auf einer Seite zur Homepage verlinkt, sollte es das auf allen anderen Seiten auch tun. Genau so sollten Links in der Navigationsleiste die Nutzer immer zur gleichen Seite führen.

Nicht aus dem Prototyp heraus linken – Vor allem bei Usability-Tests, die nicht moderiert werden (wie RapidUsertests) sollten keine Verlinkungen aus dem Prototyp herausführen, z.B. zu einer bereits fertigen Webseite. Dies würde das Risiko bergen, dass die Nutzer nicht wieder zum Prototyp zurückfinden.

Nur die notwendigen Links – Bei unmoderierten Usability-Tests gibt es niemanden, der die Nutzer wieder auf den richtigen Weg leitet, wenn sie sich in der Linkstruktur verlaufen. Deshalb sollte der Prototyp bei dieser Art von Tests im Idealfall nur Links beinhalten, die für den Test auch wirklich benötigt werden.

Fragen, was die Nutzer hinter nicht-klickbaren Links erwarten würden – Auch wenn in einem Prototyp noch nicht alle Links funktionieren, können Sie die Nutzer fragen, was sie hinter diesen Links erwarten würden. So testen Sie, ob die Erwartung/das Verständnis mit Ihrer Absicht übereinstimmt.

Wie die Nutzer instruieren? – Best-Practices

Auf unfertige Website/App hinweisen – Die Nutzer sollten auf jeden Fall zu Beginn des Tests instruiert werden, dass es sich um eine unfertige Website/App handelt. Das Wort ‚Prototyp‘ könnte dabei zu unklar sein. Ohne diesen Hinweis behandeln die Nutzer die Website/App wie ein fertiges Produkt.

Fokus der Nutzer steuern – Instruieren Sie die Nutzer, worauf sie achten sollen und was sie missachten können. Geht es in dem Test z.B. um die Navigation, sollten die Tester wissen, dass sie ihr Hauptaugenmerk darauf legen sollen und das Design noch vernachlässigen können.

Prototypen-Usability-Tests - Nutzerführung

Die Tester brauchen klare Instruktionen, damit sie den Usability-Test nicht frustriert abbrechen.

Tipp:

Nicht notwendige Elemente ausblenden – Manche Prototyping-Programme (axure, invision, marvelapp) hinterlassen Bedienelemente im Prototyp (Dialogboxen, Inhaltsverzeichnis), die für die Nutzer verwirrend und ablenkend sind. Diese Elemente lassen sich ausblenden, was allerdings häufig vergessen wird.

Prototypen mobiler Websites und Apps testen

Einsatz auf möglichst vielen Geräten ermöglichen – Bei RapidUsertests testen die Nutzer von zu Hause auf ihren eigenen Geräten, was die Tests besonders realistisch macht. Das bedeutet aber auch, dass sie auf einer Vielzahl verschiedener Geräte durchgeführt werden und der Prototyp auf so vielen verschiedenen Geräten und Bildschirmgrößen funktionieren sollte.

Der App-Name muss Vertrauen erwecken – Sollen sich die Nutzer eine unfertige App herunterladen, sollte der Name der APK-Datei bzw. des Prototyps vertrauenswürdig sein. Sonst werden die Nutzer skeptisch und werden nicht an dem Usability-Test teilnehmen.

iOS-Prototypen müssen im App-Developer-Tool veröffentlicht werden – Dieser Veröffentlichungsprozess dauert in den meisten Fällen einige Tage und muss in den Test-Zeitplan eingeplant werden.

App-Prototypen müssen sich wie Apps anfühlen – Wird der App-Prototyp über den Browser aufgerufen, sollten die Nutzer sich die App auf dem Startbildschirm anzeigen lassen („add to home screen“), damit sie das Look-and-feel einer App bekommen. Hierzu müssen die entsprechenden Instruktionen gegeben werden.

Usability-Tests mit Wireframes

Wireframes besser mit Moderator testen – Wireframes sind eine sehr rohe Form von Prototypen. Sie haben oft nur wenig Content und sehen ohne das Design sehr abstrakt aus. Dadurch sind sie oft nicht selbsterklärend und von den Nutzern wird ein hohes Abstraktionsvermögen verlangt. Es ist daher empfehlenswert einen Usability-Test mit einem Moderator im Labor durchzuführen, der bei Verständnisproblemen eingreifen kann.

Prototypen-Usability-Tests - Wireframes

Wireframe-Tests mit Crowd-Usability-Tests – Entscheidet man sich doch für einen Wireframe-Test mit Crowd-Usability-Tests, wie RapidUsertests, gilt es Folgendes zu beachten:

  • Selbsterklärende Gestaltung – Der Wireframe muss so selbsterklärend wie möglich sein, um die Nutzer auch ohne einen Moderator durch den Prototyp leiten zu können.
  • Sinnhaften Content liefern – Die Nutzer brauchen konkrete Inhalte, um sich im Prototyp zurechtzufinden. Lorem-Ipsum-Text und andere Platzhalter sollten vermieden werden.
  • Nutzer instruieren – Um den Nutzern in das richtige Mindset zu versetzen, sollten sie vor dem Test darauf hingewiesen werden, dass es sich um eine Website/App im Anfangsstadium handelt und worauf sie ihren Fokus beim Test legen sollen bzw. dass sie nicht das Design bewerten sollen.

Gründe gegen Crowd-Usability-Tests mit klickbaren PDFs

Von unmoderierten Tests klickbarer PDF-Prototypen raten wir aus folgenden Gründen ab:

PDF-Prototypen sind scrollbar – Dies kann den Nutzerfluss behindern und lässt den Test an Realitätsnähe verlieren.

PDF-Prototypen sind unberechenbar – Links in PDF-Prototypen sind unberechenbarer als bei anderen Prototyp-Arten. So passiert es zum Beispiel öfter, dass man zur Mitte der verlinkten Seite springt.

Tests, die von einem geschulten Moderator geleitet werden, können jedoch auch mit klickbaren PDFs durchgeführt werden.

Mit unserer Usability-Agentur Userlutions können Sie übrigens auch Prototypen in noch früheren Stadien, zum Beispiel Papier-Prototypen, testen. Außerdem konzipieren unsere UX-Experten bei Bedarf den Prototyp oder einzelne Seiten für Sie.

Haben Sie schon einmal einen Usability-Test eines Prototyps durchgeführt? Was sind Ihre Best-Practices?