Navigation
Faceteret filtrering
Faceteret filtrering lader brugeren indsnævre et stort katalog ved at kombinere flere uafhængige egenskaber (mærke, størrelse, farve, pris) på én gang — helst med live-tællere. På store kataloger er kvaliteten af filtreringen ofte det, der afgør, om brugeren finder noget eller forlader siden.
Definition
Faceteret filtrering giver brugeren flere uafhængige filtre (pris, farve, mærke …), der kan kombineres og tælles op i realtid.
Hvorfor det virker
Kvaliteten af produktliste og filtrering er afgørende for frafald. I Baymards store usability-studie så sites med middelmådig produktliste-usability frafaldsrater på 67–90%, mens sites med bare et lidt optimeret filter-værktøj så 17–33% — for brugere, der ledte efter præcis de samme produkter.1
De fleste sites præsterer stadig dårligt: 58% af desktop- og 78% af mobil-webshops har »poor« til »mediocre« produktliste-UX i Baymards benchmark. Der er altså stort at hente ved at få filtreringen rigtig.2
Faceteret navigation giver struktur, ikke bare filtrering: den er mere fleksibel og nyttig end systemer med kun ét eller to filtre og hjælper brugeren med at forstå, hvad kataloget indeholder. Til gengæld koster den mere at bygge og betjene, så et enkelt filter er nogle gange hurtigere at forstå.4
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Kataloget er stort og har flere meningsfulde dimensioner at sortere efter.
- Brugere kommer med forskellige, specifikke behov.
- Antal resultater bør opdateres synligt, mens filtre vælges.
Hvornår du bør undgå det
- Listen er kort nok til at skimme direkte.
- Der findes reelt kun én relevant filter-dimension.
Best practices
Vis altid de aktive filtre — og gør dem nemme at fjerne
Saml de valgte værdier øverst, hver med et »x«, plus en »ryd alle«. 20% af sites undlader det, så brugeren mister overblikket.2
Vis antal resultater ved hvert filter
Live-tællere (fx »Blå (34)«) hjælper brugeren med at vælge, hvor der er noget at finde, og undgå nul resultater.3
Tillad flere værdier i samme facet
Inden for én facet bør værdier følge ELLER-logik, på tværs af facetter OG-logik. Brug afkrydsningsfelter, ikke radioknapper — 14% af sites tillader ikke multi-valg.2
Tilbyd de essentielle filter- og sorteringstyper
Baymard finder, at 51% ikke altid tilbyder de 5 essentielle filtertyper, og 69% ikke alle 4 sorteringstyper (pris, vurdering, bestseller, nyeste).2
Brug kategorispecifikke facetter
Filtrene skal matche de egenskaber, produkttypen har (fx RAM/processor for bærbare), og bruge et ordforråd uden jargon — sæt brede facetter (mærke, pris, farve) først.4
Skjul ikke filtrene på mobil
Brug et fuldskærms- eller bottom-sheet-overlay med en fastgjort »Filtrér og sortér«-knap i stedet for at presse filtrene ind i en trang plads.3
Gør filtreringen tilgængelig
Saml afkrydsningsfelter i en fieldset med legend, annoncér det opdaterede resultattal via et aria-live-område, og oplys brugeren, hvis filtre anvendes automatisk (WCAG 3.2.2 On Input).5
Typiske fejl
Aktive filtre vises ikke
Uden en samlet oversigt kan brugeren ikke se eller fortryde, hvad der er valgt (20% af sites).
Tvungent enkeltvalg
At forhindre flere værdier i samme facet, hvor brugeren naturligt vil vælge fx to mærker.
Manglende resultat-tællere
Uden tal må brugeren anvende filtret i blinde og risikere nul resultater.
Generiske facetter og jargon-labels
Filtre, der ikke matcher det viste, eller labels brugeren ikke forstår.
Auto-anvendte filtre uden annonceret ændring
Desorienterer skærmlæser- og kognitivt udfordrede brugere (WCAG 3.2.2-risiko).
Eksempler i praksis
Booking.com
Ofte fremhævet: kombinerbare facetter i venstre kolonne (pris, stjerner, anmeldelsesscore, faciliteter) med live-tællere.
Store mode-webshops (fx Zalando, ASOS)
Ofte fremhævet: multi-valg-facetter for størrelse, farve, mærke og pris med en tydelig oversigt over aktive filtre.
Ofte stillede spørgsmål
Hvad er forskellen på et filter og en facet?
Et filter er en enkelt kontrol, der fjerner de resultater, som ikke opfylder et kriterium. Faceteret navigation er et system af flere filtre — ét for hver egenskab (mærke, størrelse, farve, pris) — som kan kombineres samtidig. Alle facetter er filtre, men faceteret navigation er den samlede, flerdimensionelle struktur.
Skal brugeren kunne vælge flere værdier i det samme filter?
Ja. Inden for én facet bør værdier følge ELLER-logik (fx mærke: A ELLER B), mens der på tværs af facetter bruges OG-logik. Brug afkrydsningsfelter, ikke radioknapper. Baymard finder, at 14% af sites ikke tillader dette.
Hvorfor er det vigtigt at vise antal resultater ved hvert filter?
Live-tællere (fx »Blå (34)«) hjælper brugeren med at vælge, hvor der er noget at finde, og undgå at ende med nul resultater.
Skal jeg vise de aktive filtre et sted?
Ja. Vis de valgte filtre samlet øverst, hver med et »x« til at fjerne dem, plus en »ryd alle«. 20% af webshops undlader det, hvilket gør det svært for brugeren at justere sit valg.
Hvordan håndterer jeg filtre på mobil?
Gem dem ikke væk i en trang plads. Brug et fuldskærms- eller bottom-sheet-overlay med en fastgjort »Filtrér og sortér«-knap. Mobil er svagest: 78% af mobile webshops har »poor« til »mediocre« produktliste-UX mod 58% på desktop.
Er faceteret filtrering tilgængeligt for skærmlæsere?
Det kræver arbejde. Saml afkrydsningsfelter i en fieldset med legend, annoncér det opdaterede resultattal via et aria-live-område, gør alle filtre betjenbare med tastatur, og hvis filtre anvendes automatisk, så oplys brugeren om det (WCAG 3.2.2, niveau A).
Kilder
Relaterede mønstre
Udforsk videre
Sorterbar datatabel
Store datasæt med sortering, kolonnestyring og sidenavigation.
Se mønster →Breadcrumbs
Vis brugerens placering i hierarkiet og en vej tilbage.
Se mønster →Tags og chips
Kompakte, klikbare etiketter til at filtrere, vælge og indtaste — fra filter-chips og fjernbare filter-pills til input-chips og forslags-chips.
Se mønster →