Navigation
Facetteret filtrering
Facetteret filtrering er den filtrering, du kender fra store webshops, hvor brugeren indsnævrer kataloget ved at kombinere flere uafhængige filtre (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
Facetteret 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 har stor betydning for frafald. I Baymards store usability-studie, hvor brugerne ledte efter præcis de samme produkter, 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%.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.2
Facetteret navigation 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 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 facetteret filtrering?
Facetteret filtrering, også kaldet facetteret søgning eller facetteret navigation, giver brugeren flere uafhængige filtre (pris, farve, mærke …), der kan kombineres og tælles op i realtid. Det bruges især i webshops og andre store kataloger med flere meningsfulde dimensioner at sortere efter.
Hvilke filtre bør en webshop have?
Filtrene skal matche de egenskaber, produkttypen har (fx RAM og processor for bærbare), og bruge et ordforråd uden jargon. Sæt brede facetter som mærke, pris og farve først. Baymard finder, at 51% af webshops ikke altid tilbyder de 5 essentielle filtertyper, og 69% ikke alle 4 sorteringstyper (pris, vurdering, bestseller, nyeste).
Hvad er forskellen på et filter og en facet?
Et filter er en enkelt kontrol, der fjerner de resultater, som ikke opfylder et kriterium. Facetteret 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 facetteret 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, så brugeren har svært ved 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. Problemet er størst på mobil, hvor 78% af webshops har »poor« til »mediocre« produktliste-UX mod 58% på desktop.
Er facetteret 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: filter-chips, fjernbare filter-pills, input-chips og forslags-chips.
Se mønster →