Slechte filters doden conversies in stilte. Shoppers mailen je niet om te zeggen dat de filters verwarrend waren. Ze vertrekken gewoon.
Het Baymard Institute ontdekte dat slecht filteren een van de top 5 UX-fouten is op ecommercesites. 76 procent van de grote ecommercesites heeft filterbruikbaarheidsproblemen die ernstig genoeg zijn om verlating te veroorzaken. Jouw filters zijn er waarschijnlijk een van.
Deze gids behandelt elk filterpatroon dat ertoe doet: faceted navigation, prijssliders, multi-select-logica, mobiele drawer-UX, weergave van actieve filters, de no-results-val, filterpersistentie, URL-structuur voor SEO en sectorspecifieke patronen. Elke sectie bevat een specifieke actie die je deze week kunt implementeren.
De filter- en zoeksystemen in je winkel zijn complementair. Voor de zoekkant, lees Ecommerce Search UX Strategies. Dit artikel behandelt de browse- en filterkant.
Waarom filter-UX direct omzet aanjaagt
Shoppers die filters gebruiken, bekijken 3 keer meer producten dan shoppers die dat niet doen. Ze converteren ook tegen hogere percentages. Dat komt niet doordat filterende gebruikers gemotiveerder zijn. Het komt doordat goede filter-UX de juiste producten sneller naar voren brengt, waardoor de frictie die aankopen doodt wordt weggenomen. In gedocumenteerde gevallen heeft investeren in filter-UI-design conversielifts van 4 tot 6 procent opgeleverd op de betreffende categoriepagina’s. Een van de verbeteringen met de hoogste ROI die beschikbaar is zonder de advertentie-uitgaven te verhogen.
Zonder filters is een catalogus van 500 producten ruis. Met filters is het een gecureerde shortlist. Het filtersysteem is het mechanisme dat catalogusomvang van een nadeel in een troef verandert.
De meeste winkels doen dit op dezelfde vier manieren verkeerd:
Filters zijn te generiek. “Categorie,” “Prijs,” “Merk” op een meubelwinkel dekt de basis. Maar shoppers willen ook filteren op kamer, stijl, materiaal, montage vereist en levertijd. Generieke filters dwingen shoppers om door irrelevante producten te scrollen.
Filters breken op mobiel. 55 procent van het ecommerceverkeer is mobiel. Sidebar-filters werken niet op een 375px-scherm. Toch sturen de meeste winkels hun desktop-filterindeling naar mobiel met minimale aanpassing.
Filters creëren doodlopende paden. Slechte filterlogica leidt tot pagina’s met nul resultaten. De shopper past twee redelijke filters toe en krijgt niets. Ze bouncen. Je hebt een koper verloren.
Filters blijven niet behouden. De shopper past filters toe, klikt op een product, drukt op terug, en alle filters zijn weg. Ze beginnen opnieuw. De meesten doen dat niet.
Los deze vier problemen op en je filtergedreven conversiepercentage verbetert meetbaar. Dit artikel laat je zien hoe.
Faceted navigation: de basis van productontdekking
Faceted navigation, ook wel faceted search genoemd, is het systeem dat shoppers laat filteren op meerdere attributen tegelijk. Het is wat iemand in staat stelt een “marineblauw, linnen, kingsize dekbedovertrek onder €150” te vinden zonder één woord te typen.
Het principe is simpel: elk productattribuut is een potentieel filterfacet. Kleur, maat, merk, materiaal, prijsklasse, beoordeling, beschikbaarheid. Shoppers selecteren waarden over meerdere facetten, en de resultatenset versmalt tot producten die aan alle geselecteerde criteria voldoen.
Goede faceted navigation volgt zes regels:
Regel 1: Toon alleen relevante facetten voor de huidige categorie. Toon geen “Mouwlengte” op een schoenencategoriepagina. Toon geen “Schoenbreedte” op een truienpagina. Dynamische facetten die zich aanpassen aan de huidige productset verminderen de cognitieve belasting en houden het filterpaneel scanbaar.
Regel 2: Orden facetten op beslissingsprioriteit. Het facet dat de meeste irrelevante producten elimineert, gaat eerst. Voor fashion is dat meestal maat (shoppers kunnen niet kopen wat niet past) of prijs. Voor elektronica is het merk of compatibiliteit. Voor meubels is het kamer of materiaal. Test je specifieke categorie met echte gebruikers om de juiste volgorde te vinden.
Regel 3: Toon productaantallen op elke facetwaarde. “(47)” naast “Blauw” vertelt de shopper dat er blauwe producten beschikbaar zijn. “(0)” vertelt hen het niet te proberen. Toon aantallen en werk ze dynamisch bij naarmate andere filters worden toegepast. Dit voorkomt doodlopende selecties voordat ze plaatsvinden.
Regel 4: Klap facetten in die niet direct nodig zijn. Toon de bovenste 4 tot 6 waarden in elk facet en verberg de rest achter een “Toon meer”-link. Volledige facetlijsten overweldigen shoppers en maken het paneel te lang om te scannen. Progressive disclosure houdt het paneel beheersbaar.
Regel 5: Maak multi-facet-selectie mogelijk met AND-logica over facetten, OR binnen. “Blauw OR Rood” (binnen kleur) AND “Onder €100” (prijsfacet) AND “Nike” (merkfacet) is het patroon dat de meeste shoppers verwachten. Dwing AND-logica af over facetten. Gebruik OR-logica binnen hetzelfde facet. Deze verwachting schenden verwart gebruikers en levert irrelevante resultaten op.
Regel 6: Verwijder geen facetten die geen resterende waarden hebben. Een facet midden in de sessie verbergen omdat geen producten matchen, doet shoppers denken dat het filter kapot is. Toon in plaats daarvan het facet met alle waarden grijsgemaakt en een “(0)“-aantal. De shopper begrijpt de beperking in plaats van verwarring te ervaren.
Regel 7: Gebruik gewone klanttaal voor filterlabels. Interne producttaxonomie komt zelden overeen met hoe shoppers denken. “Itemtype” is vager dan “Categorie.” “SKU-groep” betekent niets voor een shopper. “Stijl” is duidelijker dan “Productclassificatie.” Test je filterlabels door ze hardop voor te lezen aan iemand die je catalogus niet kent. Als ze aarzelen, moet het label worden herschreven. Filtercategorieën die jargon gebruiken, zorgen ervoor dat shoppers ze volledig overslaan, wat betekent dat je filterpaneel zijn werk niet doet, zelfs als de onderliggende data correct is.
Prijssliders: de mechanica goed krijgen
Prijs is het meest gebruikte filter in ecommerce. 72 procent van de shoppers filtert op prijs in minstens één sessie per bezoek. De prijsfilter-UX bepaalt of die interactie soepel of frustrerend is.
Een range slider zou deze zes elementen moeten hebben:
Dubbele handles. Eén handle voor de minimumprijs, één voor de maximumprijs. Sliders met één handle stellen alleen een maximum in, wat shoppers dwingt tot een tweede interactie om de ondergrens in te stellen. Gebruik altijd dubbele handles.
Tekstinvoervelden naast de slider. Precisie-shoppers willen “€45 tot €120” direct typen. Een slider naar exacte waarden slepen is omslachtig. Toon bewerkbare getalvelden naast de slider en houd ze gesynchroniseerd. Wanneer de shopper een waarde typt, werkt de slider bij. Wanneer ze slepen, werkt de invoer bij.
Realtime update van het productaantal. Naarmate de shopper de prijsklasse aanpast, werk je het productaantal direct bij. “34 producten getoond” vertelt hen dat de klasse haalbaar is voordat ze hem toepassen.
Histogram boven de slider. Een staafdiagram dat de verdeling van producten per prijs toont, helpt shoppers hun klasse te kalibreren. Als de meeste producten zich tussen €50 en €150 clusteren, passen ze zich dienovereenkomstig aan. Dit ene element verhoogt de prijsfilter-engagement met 20 tot 30 procent in A/B-tests.
Snap-naar-rond-getalgedrag. Shoppers denken in ronde getallen. €50, €100, €150. Stel de slider in om naar ronde waarden te snappen en toon ronde getallen als het standaardmaximum. Toon geen “€147,83” als sliderendpunt. Toon “€150” en laat precisie-invoer exacte waarden afhandelen.
Vooraf ingevulde populaire klassen. Toon onder de slider 3 tot 4 aanklikbare prijsklasse-opties: “Onder €50,” “€50 tot €100,” “€100 tot €200,” “Boven €200.” Deze werken voor shoppers die in buckets denken in plaats van klassen en besparen hen de slider-interactie volledig.
Multi-select versus single-select: wanneer welk gebruiken
De meeste filterattributen zouden multi-select moeten ondersteunen. De meeste winkels implementeren single-select. Deze mismatch kost conversies.
Multi-select (OR-logica binnen een facet) is van toepassing wanneer shoppers mogelijk een van meerdere waarden willen. Kleur is het duidelijkste voorbeeld. Een shopper die zoekt naar een blauw of marineblauw shirt zou beide kleuren moeten kunnen selecteren. Hen beperken tot één kleur betekent dat ze twee aparte sessies nodig hebben om alle relevante producten te zien. Multi-select met OR-logica lost dit op.
Gebruik multi-select voor: kleur, merk, materiaal, maat, stijl, collectie.
Single-select (radiobuttonlogica) is van toepassing wanneer waarden elkaar uitsluiten en het combineren ervan een tegenstrijdigheid oplevert. Geslacht is het meest voorkomende voorbeeld. “Heren AND Dames”-kleding is niet logisch als gecombineerd filter. “Maat 40 AND maat 42” ook niet (je kunt maar één maat dragen). Voor deze attributen is single-select met radiobuttons correct.
Gebruik single-select voor: geslacht, maat (wanneer maatsystemen onderscheidend zijn), abonnementsniveau, voorraadstatus (op voorraad / niet op voorraad).
Het implementatiesignaal: als het selecteren van twee waarden in een facet een betekenisvolle, niet-lege resultatenset zou opleveren, gebruik dan multi-select. Als twee waarden elkaar van nature uitsluiten, gebruik single-select.
Onderscheid ze visueel. Checkboxes signaleren multi-select. Radiobuttons signaleren single-select. Gebruik geen checkboxes voor radiogedrag of omgekeerd. Shoppers kennen deze conventies en raken in de war wanneer ze worden geschonden.
Weergave van actieve filters: laat shoppers zien wat ze hebben toegepast
80 procent van de shoppers die filters toepassen, onthoudt niet alle filters die ze hebben ingesteld. Dit is geen geheugenfalen. Het is een UX-falen. Als actieve filters niet duidelijk worden weergegeven, verliezen shoppers het overzicht over hun zoekcontext en maken ze onjuiste aannames over de resultaten.
De oplossing is filter chips (ook wel filter pills of badges voor actieve filters genoemd). Dit zijn kleine tags die boven het productraster worden weergegeven, elk representerend één toegepast filter. Elke chip toont de filternaam en -waarde en heeft een X-knop om hem te verwijderen.
Zes regels voor de implementatie van filter chips:
Toon chips boven het productraster, niet in het filterpaneel. Chips moeten zichtbaar zijn zonder het filterpaneel te openen. Ze in het paneel plaatsen ondermijnt het doel.
Label chips duidelijk. “Kleur: Blauw” is beter dan alleen “Blauw.” De categorienaam voorkomt verwarring wanneer hetzelfde woord in meerdere facetten voorkomt (bijv. “Materiaal: Wit” versus “Kleur: Wit”).
Maak het X-target groot. Op mobiel heeft de X-knop een 44px taptarget nodig. Kleine taptargets veroorzaken verkeerde tikken die per ongeluk filters verwijderen. Dat is frustrerend.
Voeg een “Alles wissen”-knop toe. Eén klik om alles te resetten. Plaats hem rechts van de chips of eronder. Laat shoppers filters niet één voor één verwijderen.
Werk het productraster direct bij wanneer een chip wordt verwijderd. Geen apply-knop nodig voor het verwijderen van een chip. Het is een directe actie die een onmiddellijk resultaat zou moeten hebben.
Toon het totale aantal actieve filters op de filterknop op mobiel. “Filters (3)” vertelt de shopper dat ze 3 actieve filters hebben voordat ze het paneel openen. Dit ene detail vermindert filterverwarring op mobiel aanzienlijk.
Mobiele filter-UX: drawer versus inline
Desktop-filter-UX en mobiele filter-UX zijn verschillende problemen. Een sidebar die goed werkt op 1280px is onbruikbaar op 375px. Je hebt een ander patroon nodig voor mobiel, en je moet het juiste kiezen.
De filter drawer (bottom sheet of full-screen overlay) is het standaardpatroon voor mobiele filter-UX. De shopper tikt op “Filter,” een paneel schuift omhoog vanaf de onderkant (bottom sheet) of bedekt het scherm (full-screen overlay). Ze stellen hun filters in en tikken op “Toon X resultaten” om toe te passen.
De drawer werkt omdat het de filter-UI zijn eigen toegewijde ruimte geeft. De shopper probeert niet tegelijkertijd producten te zien en filters te bedienen. Ze focussen op filters en keren dan terug naar de resultaten.
Best practices voor drawers:
- Open naar het meest gebruikte facet, niet naar de bovenkant van een lange lijst
- Toon altijd een sticky “Toepassen” / “Toon X resultaten”-knop onderaan
- Voeg een “Reset”-knop toe om alles te wissen zonder te sluiten
- Sluit de drawer automatisch na het toepassen van filters (laat de shopper geen “terug”-knop zoeken)
- Animeer het openen/sluiten voor oriëntatie (300ms ease is de standaard)
Inline filters (horizontaal scrollende filter chips bovenaan het productraster) werken voor eenvoudigere filterscenario’s met 3 tot 6 filteropties. ASOS gebruikt dit patroon effectief op mobiel. Elk filter is een aantikbare chip die een subpaneel opent voor dat specifieke attribuut.
Inline werkt wanneer:
- Je minder dan 8 totale filteropties hebt
- Filters single-attribute zijn (tik op “Maat” om alleen het maatfilter te openen)
- Het productraster de primaire focus is en filters secundair zijn
De faalmodus van inline filters: wanneer er meer dan 8 opties zijn, wordt de horizontale scroll onhandelbaar. Shoppers kunnen niet zien hoeveel filters beschikbaar zijn zonder te scrollen. Verborgen filters worden niet gebruikt.
Kies de drawer voor complexe catalogi (fashion, meubels, elektronica). Kies inline voor gerichte categoriepagina’s met beperkte filterdimensies.
Filterresultaataantallen: het getal dat doodlopende paden voorkomt
Elke filterwaarde zou moeten tonen hoeveel producten matchen. Dit ene datapunt voorkomt het meest voorkomende filterfalen: de doodlopende nul-resultatenpagina.
Dit is wat er gebeurt zonder aantallen: een shopper selecteert “Blauw” (47 producten), selecteert dan “Linnen” (3 producten), selecteert dan “King” (0 producten). Ze zien nul resultaten en haken af. Als aantallen waren weergegeven, hadden ze “(0)” naast “King” gezien na het selecteren van de andere twee filters en een andere maat gekozen.
Dynamische aantallen werken bij naarmate filters worden toegepast. Statische aantallen tonen het totaal zonder filtercontext. Dynamische aantallen zijn veel waardevoller en de engineering-investering waard.
Bij het implementeren van dynamische aantallen:
Werk aantallen bij voor alle facetwaarden wanneer een filter verandert. Als de shopper “Blauw” selecteert, werk dan het aantal op elke andere facetwaarde bij om de resterende producten binnen blauw te weerspiegelen. Dit vertelt hen precies wat beschikbaar is binnen hun huidige selectie.
Maak waarden met 0-aantal grijs of verberg ze. Een waarde met 0 matchende producten is een doodlopend pad. Maak hem grijs om te signaleren dat hij onbeschikbaar is (verberg hem niet volledig, anders denkt de shopper dat je dat attribuut helemaal niet voert). Een onbeschikbare waarde met zichtbare context is minder frustrerend dan een waarde die mysterieus verdwijnt.
Werk aantallen asynchroon bij zonder een volledige paginaherlading. Het filterpaneel zou niet moeten flikkeren of herladen terwijl aantallen worden bijgewerkt. Haal aantaldata op de achtergrond op en werk de UI soepel bij.
Performance-aantekening: dynamische aantalqueries kunnen duur zijn op grote catalogi. Cache agressief en gebruik benaderende aantallen voor catalogi van meer dan 10.000 SKU’s. Een benaderend aantal (“~40 resultaten”) is waardevoller dan een traag exact aantal.
Progressive disclosure: filtercomplexiteit beheren
Een filterpaneel met 15 volledig uitgeklapte facetten, elk met 20 waarden, is overweldigend. Shoppers lezen filterpanelen niet van boven naar beneden. Ze scannen naar wat voor hen relevant is en negeren de rest. Maar een muur van opties maakt scannen moeilijker.
Progressive disclosure lost dit op. Toon het minimum dat nodig is om te beginnen filteren. Onthul meer op verzoek.
Drie niveaus van progressive disclosure:
Niveau 1: Standaard ingeklapte facetten. Toon de facetnaam (bijv. “Materiaal”) maar niet de waarden. De shopper klapt het facet uit wanneer hij het wil. Dit vermindert visuele rommel zonder iets permanent te verbergen.
Niveau 2: Afgekapte waardelijsten. Toon de bovenste 5 tot 8 waarden in elk uitgeklapt facet. Verberg de rest achter “Toon alle X opties.” De verborgen waarden zijn toegankelijk maar maken het paneel niet te vol.
Niveau 3: Secundaire facetten volledig verborgen. Voor facetten die minder dan 15 procent van de shoppers gebruikt, verberg je ze achter een “Geavanceerde filters”- of “Meer filters”-sectie. Ze zijn beschikbaar maar verbruiken geen primaire paneelruimte.
De ordening van progressive disclosure doet ertoe: zet de meest gebruikte facetten bovenaan en klap ze standaard uit. Zet minder gebruikte facetten lager en klap ze standaard in. Test je specifieke gebruikersbestand om de juiste configuratie te vinden. Heatmaps en sessieopnames op je filterpaneel onthullen precies welke facetten in welke volgorde worden gebruikt.
De no-results-val: de grootste faalmodus van je filtersysteem
De no-results-pagina is waar filter-UX conversies doodt. De shopper paste geldige filters toe, verwacht resultaten en ziet niets. Hun volgende actie is in 73 procent van de gevallen de site verlaten, niet de filters verfijnen.
Het doel is om een shopper nooit nul resultaten te laten bereiken. Je voorkomt dit met drie mechanismen:
Toon live aantallen voordat filters worden toegepast. Dynamische aantallen (hierboven behandeld) zijn je eerste verdedigingslinie. Als elke filterwaarde zijn resultaataantal toont, corrigeren shoppers zichzelf voordat ze nul bereiken.
Valideer filtercombinaties en waarschuw voordat ze worden toegepast. Wanneer een combinatie nul resultaten zou opleveren, toon dan een waarschuwing op de “Toepassen”-knop: “Deze filters leveren 0 producten op. Verwijder één filter om resultaten te zien.” Dit is een lastiger engineeringprobleem maar een aanzienlijke UX-verbetering.
Ontwerp de nul-resultatenpagina voor herstel. Wanneer nul resultaten wel voorkomen, moet de pagina de shopper een weg vooruit geven:
- Toon welke filters actief zijn (via chips) en maak ze makkelijk te verwijderen
- Stel de enkele filterverwijdering voor die het waarschijnlijkst resultaten oplevert (“Verwijder ‘Linnen’ om 12 resultaten te zien”)
- Toon 6 tot 8 bestsellers uit de categorie zonder toegepaste filters (gelabeld “Populair in [Categorie]”)
- Voeg prominent een “Wis alle filters”-knop toe
- Voeg een zoekbalk toe die vooraf is geladen met de categorienaam
De benchmark van het Baymard Institute: een goed ontworpen nul-resultatenpagina behoudt 35 tot 45 procent van de shoppers die anders zouden afhaken. Dat is herwinbare omzet uit een designfix van één dag.
Filterpersistentie: laat shoppers niet opnieuw beginnen
De filterstaat zou behouden moeten blijven gedurende de productbrowsesessie. Wanneer een shopper filters toepast, op een product klikt en op terug drukt, zou hij precies zoals hij ze achterliet moeten terugkeren naar zijn gefilterde resultaten.
Dit is een browsergeschiedenisprobleem dat de meeste winkels slecht oplossen. De terugknop op de meeste winkels keert terug naar een ongefilterde categoriepagina. Elk filter is weg. De sessiecontext van de shopper is vernietigd.
Drie implementatiebenaderingen:
URL-gebaseerde filterstaat. Elke filterselectie werkt de URL bij met queryparameters (bijv. /schoenen?kleur=blauw&maat=42&merk=nike). De terugknop van de browser keert terug naar de exacte URL met die parameters, wat de gefilterde staat herstelt. Dit is de juiste benadering en degene die ook SEO ten goede komt.
Session storage. Sla de filterstaat op in sessionStorage aan de clientzijde. Wanneer de shopper op terug drukt, lees de opgeslagen staat en pas hem opnieuw toe. Dit werkt zonder URL-parameters maar ondersteunt geen deeplinks of bookmarken.
JavaScript pushState. Werk de URL programmatisch bij met JavaScript pushState naarmate filters worden toegepast, zonder een paginaherlading. Dit combineert de voordelen van URL-gebaseerde staat met de snelheid van AJAX-filteren.
URL-gebaseerde filterstaat is de aanbevolen benadering. Het blijft behouden bij terugnavigatie, ondersteunt het bookmarken en delen van gefilterde pagina’s, en levert crawlbare URL’s voor SEO. Implementeer het en je lost persistentie en SEO tegelijk op.
URL-structuur voor SEO: hoe filterpagina’s organisch verkeer aanjagen
Gefilterde categoriepagina’s kunnen ranken in zoekmachines als ze correct gestructureerd zijn. “Dames blauwe linnen jurken onder €100” is een query die echte shoppers zoeken. Als jouw filtercombinatie een crawlbare URL met die content creëert, kun je dat verkeer binnenhalen.
De SEO-kans met gefilterde pagina’s heeft vier vereisten:
Canonical-URL’s voor filtercombinaties die het indexeren waard zijn. Niet elke filtercombinatie verdient indexering. “Blauwe AND Rode AND Groene jurken in de maten 36, 38, 40 onder €75” is te specifiek om zoekvolume te hebben. Maar “Blauwe linnen jurken” misschien wel. Gebruik canonical-tags om filterpagina’s die je niet geïndexeerd wilt hebben naar de basiscategoriepagina te wijzen. Maak speciale SEO-geoptimaliseerde pagina’s voor filtercombinaties met echt zoekvolume.
Schone, leesbare URL-parameters. /jurken/blauw/linnen/ is crawlbaarder dan /categorie?id=14&kleur=3&materiaal=7. Gebruik betekenisvolle URL-slugs voor filterwaarden in plaats van database-ID’s. Dit verbetert ook het delen van links.
Unieke title tags en meta descriptions voor belangrijke filterpagina’s. Een pagina voor “Blauwe linnen jurken” zou een title tag moeten hebben die zegt “Blauwe linnen jurken | [Winkelnaam]” en niet “Jurken - Gefilterd | [Winkelnaam]”. Dynamische titelgeneratie op basis van actieve filters is een halve-dag-developmenttaak met betekenisvol SEO-voordeel.
Voorkom parameter-explosie. Te veel crawlbare filtercombinaties creëren duplicate content en crawl budget-problemen. Gebruik robots.txt of noindex om indexering te beperken tot specifieke filtercombinaties. Een veelvoorkomende aanpak: indexeer single-facet gefilterde pagina’s (één filter toegepast), noindex multi-facet-combinaties.
De meeste Shopify-thema’s handelen filter-URL-SEO niet goed out of the box af. De apps Boost Commerce en Facets op Shopify bieden SEO-vriendelijke URL-configuraties. Op WooCommerce handelt de Yith Ajax Navigation-plugin dit af met configureerbare SEO-instellingen.
Sectorspecifieke filterpatronen
Verschillende productcategorieën hebben verschillende filtervereisten. Generieke filterontwerpen falen omdat ze dezelfde patronen toepassen op categorieën met fundamenteel verschillende beslissingsprocessen.
Fashion en kleding
De drie dominante filters in fashion zijn maat, kleur en prijs. Ze zouden de eerste drie facetten in elk fashion-filterpaneel moeten zijn. Secundaire filters die aanzienlijk gebruik aanjagen: materiaal, stijl (casual/formeel/sportief), gelegenheid, merk en mouwlengte.
Kritieke fashion-specifieke vereisten:
- Visuele kleurswatches in plaats van tekstlabels. “Marineblauw” als kleurswatch is informatiever dan “Marineblauw” als tekst. Shoppers kunnen de tint visueel beoordelen. Implementeer swatches van 16x16px of groter met hex-kleurwaarden.
- Indicatie van maatbeschikbaarheid. Maak maten grijs die niet beschikbaar zijn over de gefilterde productset. Shoppers zouden niet op producten hoeven te klikken om te ontdekken dat hun maat niet op voorraad is.
- Geslachtsfilter op het hoogste niveau. Op winkels die meerdere geslachten bedienen, zou geslachtsfiltering moeten plaatsvinden vóór categorieselectie, niet erna. De producten van het verkeerde geslacht naar voren brengen in een zoekresultaat is een frustrerende ervaring.
Elektronica en technologie
De dominante beslissingsfactoren in elektronica zijn technische specificaties: processorsnelheid, RAM, schermgrootte, batterijduur, compatibiliteit. Generieke filters missen dit volledig.
Elektronica-specifieke vereisten:
- Specificatie-gebaseerde facetten. “Schermgrootte: 13” tot 14"" en “RAM: 16GB” zijn elektronicafacetten. Bouw je facetlijst uit de daadwerkelijke specificatie-attributen van je catalogus.
- Compatibiliteitsfiltering. “Compatibel met iPhone 15” is een kritiek filter voor accessoires. Implementeer compatibiliteit als een eersteklas filter, geen zoekverfijning.
- Geaggregeerd beoordelingsfilter. Elektronica-shoppers vertrouwen sterk op reviews. Een prominent geplaatst “4 sterren en hoger”-filter jaagt aanzienlijke engagement aan.
Meubels en wonen
Meubelshoppers filteren eerst op kamer, dan stijl, dan materiaal, dan afmeting, dan prijs. Deze volgorde doet ertoe. De meeste meubelwinkels brengen prijs eerst naar voren (omdat dat is wat hun generieke filtertemplate doet) terwijl kamer en stijl sneller meer irrelevante producten elimineren.
Meubel-specifieke vereisten:
- Kamerfilter als facet op het hoogste niveau. “Woonkamer / Slaapkamer / Eetkamer / Kantoor” is hoe meubelshoppers denken. Implementeer het als het eerste filter.
- Afmetingsfilters. “Breedte: 120 tot 160cm” is een betekenisvol filter voor meubels. Gebruik range sliders voor afmetingen.
- Montage vereist / geen montage vereist. Dit is een belangrijke beslissingsfactor. Een shopper die geen meubels wil monteren, klikt niet door 30 producten om erachter te komen.
- Levertijdfiltering. “Op voorraad voor directe levering” versus “4 tot 6 weken” is kritiek voor meubelshoppers met specifieke timingbehoeften.
Gezondheid en beauty
Huidtype, zorg, ingrediënt en formulering zijn de beslissingsdrijvers in gezondheid en beauty. “Moisturizer voor droge huid met SPF” is een geldige query die via filtering zou moeten oplossen.
Beauty-specifieke vereisten:
- Huidtypefilter. “Droog / Vet / Gecombineerd / Gevoelig / Normaal” moet een eersteklas facet zijn.
- Zorgfilter. “Anti-aging / Verhelderend / Hydratatie / Acne / SPF” sluit direct aan op aankoopintentie.
- Ingrediënt-gebaseerde filtering. “Bevat retinol / hyaluronzuur / vitamine C” is een betekenisvol filter voor beauty-shoppers. Tag producten met kerningrediënten en stel ze beschikbaar als facetten.
- Cruelty-free / vegan-filter. Deze waarden beïnvloeden aankoopbeslissingen aanzienlijk in de beautycategorie. Maak ze makkelijk om op te filteren.
Filter-UX in de praktijk implementeren: een geprioriteerde checklist
Als je vanaf nul begint of een filteraudit doet, hier is waar je je op moet richten in volgorde van prioriteit:
Week 1: Repareer de fundamentele problemen
- Schakel dynamische productaantallen in op alle filterwaarden
- Voeg een “Wis alle filters”-knop toe
- Implementeer filter chips boven het productraster met verwijderfunctionaliteit
- Zorg dat de filterstaat behouden blijft bij terugnavigatie (URL-gebaseerde staat)
Week 2: Repareer mobiel
- Implementeer een filter drawer voor mobiel
- Voeg een sticky “Toon X resultaten”-knop toe in de drawer
- Vergroot alle taptargets naar minimaal 44px
- Test op echte apparaten (geen browser-emulators)
Week 3: Repareer de no-results-val
- Audit je huidige nul-resultaatpercentage op gefilterde pagina’s
- Ontwerp en implementeer een herstelgerichte nul-resultatenpagina
- Voeg waarschuwingen voor filtercombinaties toe voordat filters worden toegepast die nul producten zouden opleveren
Week 4: Optimaliseer voor je categorie
- Herorden facetten op beslissingsprioriteit voor jouw specifieke productcategorie
- Voeg sectorspecifieke filtertypes toe (kleurswatches voor fashion, specs voor elektronica, kamer voor meubels)
- Implementeer progressive disclosure op facetten met lange waardelijsten
Maand 2: SEO en geavanceerde features
- Implementeer URL-gebaseerde filterstaat met een schone parameterstructuur
- Stel canonical-tags in voor filtercombinaties die je niet geïndexeerd wilt hebben
- Voeg dynamische title tags toe voor belangrijke filtercombinaties
- Evalueer AI-gepersonaliseerde filterordening voor terugkerende gebruikers
Filterprestaties meten
Volg deze vier metrics maandelijks om de filter-UX-prestaties te peilen:
Filtergebruikspercentage. Welk percentage van de categoriepaginabezoekers interacteert met minstens één filter? Het branchegemiddelde is 15 tot 20 procent op desktop, 8 tot 12 procent op mobiel. Onder 10 procent op desktop betekent dat je filters moeilijk te vinden of irrelevant zijn.
Filter-naar-aankoop-conversiepercentage. Welk percentage van de sessies met filtergebruik eindigt in een aankoop? Vergelijk met je algehele conversiepercentage. Goed ontworpen filters zouden 1,5x tot 2x je baseline-conversiepercentage moeten produceren.
Nul-resultaatpercentage op gefilterde pagina’s. Welk percentage van de filtercombinaties levert geen producten op? Doel: onder 3 procent. Boven 10 procent betekent dat je filterlogica doodlopende paden creëert.
Filterverlatingspercentage. Welk percentage van de sessies waarin een filter wordt geopend, resulteert erin dat het filterpaneel wordt gesloten zonder enig toegepast filter? Hoge verlating (boven 40 procent) betekent dat het paneel verwarrend of overweldigend is.
Stel event tracking voor deze vier gedragingen in in GA4 of je analysetool. Filterinteracties zijn custom events die expliciete implementatie vereisen. De meeste standaard-setups leggen ze niet vast.
Het filtersysteem is de motor van je categoriepagina
Filters zijn geen nice-to-have. Ze zijn het mechanisme dat een productcatalogus in een gepersonaliseerde winkelervaring verandert. Krijg ze goed en je verkort de time-to-product, verhoogt de productweergaven en converteert meer browsers in kopers.
De patronen in dit artikel zijn niet theoretisch. Faceted navigation met dynamische aantallen, multi-select OR-logica, persistentie via URL-staat, mobiele drawers met sticky apply-knoppen, en herstel van nul-resultatenpagina’s zijn allemaal bewezen patronen met gedocumenteerde conversie-impact.
Begin met de vierwekenchecklist hierboven. Repareer eerst fundamentele problemen. Ga over op mobiel. Adresseer de nul-resultaten-val. Optimaliseer daarna voor je specifieke categorie.
Je filters zijn op dit moment al in gebruik. De vraag is of ze shoppers helpen producten te vinden of ze naar je concurrenten sturen.
Voor de complementaire zoekkant van productontdekking, lees Ecommerce Search UX Strategies. Voor wat er gebeurt nadat shoppers naar een product hebben gefilterd, behandelt Product Page Anatomy de conversie-elementen op de bestemmingspagina.
Wat je hierna moet lezen
- The €50,000 Ecommerce Mistakes - de UX-patronen (inclusief filterfouten) die ecommercewinkels serieuze omzet kosten
- Product Page Anatomy - het structurele blauwdruk voor de pagina waar shoppers op landen na het filteren
- Ecommerce Search UX Strategies - de andere helft van categorienavigatie: zoeken
- Plantinum: ecommerce-redesign voor een Nederlands interieurmerk - hoe filter- en navigatie-UX werd herontworpen voor een wonen- en tuin-e-commercewinkel