Tips voor een betere site

  • Al 5.769 abonnees
  • 1 keer per maand
  • Exclusieve tips en promo's

Filteren in productcatalogus: 4 tips voor een facetnavigatie

Waarom en wanneer filteren?

Als je meer dan 10 producten of diensten hebt die nauw met elkaar verwant zijn, is het handig dat de bezoeker je aanbod kan filteren op basis van de criteria die voor hem het belangrijkst zijn.

Bij een klassieke website navigatie bepaalt de website de volgorde van de keuzes. Die 'boomstructuur-benadering' is te beperkt voor websites met een groot aanbod. Verschillende bezoekers hebben verschillende basiscriteria.

Voorbeeld: vakantiewoning zoeken

Als ik een vakantiehuis zoek, is een zwembad essentieel. Voor jou primeert misschien de landelijke ligging en voor nog iemand anders is het budget de beslissende factor. 3 evenwaardige keuzes.

De enige goede oplossing: een navigatie met filters, ook wel facetten genoemd. Oké, een belachelijk ingewikkelde zoekfunctie kan natuurlijk ook, maar is niet echt een aanrader.

In dit artikel praten we over 4 designaspecten van een filternavigatie, die cruciaal zijn voor een goede usability en conversie optimalisatie.

Waar staat een facetnavigatie het best?

  • Links is de beste plaats
    Grote websites zoals Amazon, eBay en Google zetten de filters links. Zij hebben net iets meer bezoekers dan jouw website.  Deze websites creëren een verwachtingspatroon.
    Bovendien is de linkerzone de meest bekeken zone van een pagina. Als je wilt dat de filters gebruikt worden, zet je ze dus best daar. Apple doet het ook, op hun eigen website en in iTunes.
  • Bovenaan is een alternatief
    Bovenaan kan ook, maar is iets minder goed. Vooral omdat daardoor je aanbod naar beneden wordt geduwd. En dus minder zichtbaar is. (Vergeet niet dat hoewel mensen scrollen, ze 80% van hun tijd boven de vouwlijn doorbrengen.) In het voorbeeld van Cnet vallen de reviews zelfs buiten beeld.

Hoe actieve filters aanduiden?

  • In de filternavigatie zelf
    De beste manier om aan te duiden welke filters actief zijn, is door ze visueel te doen opvallen. Net zoals dat bij een gewone navigatie ook een best practice is (lees tip 4 van dit artikel over plaatsbepaling op een website).
    Nadeel van deze manier is dat als je veel filters en filtercategorieën hebt, het meer inspanning vraagt van de bezoeker om snel te zien welke filters allemaal actief zijn.
    Apple doet dit op erg propere manier. Booking.com is iets minder verfijnd in de uitwerking, maar wel duidelijk.
    Volgens ons is dit de beste methode om actieve filters aan te duiden.
  • In een blokje boven de filternavigatie
    De meest gebruikte manier. Voordeel is dat de bezoeker snel kan zien welke filters actief zijn. Nadeel is dat op die manier de filters zelf ietwat naar beneden geschoven worden. Op zich geen ramp maar in een volgend artikel over de logica van facetten zullen we zien dat deze methode op dat vlak toch wel wat tekortkomingen heeft.
  • Bovenaan op de pagina
    Iets minder gangbaar maar wel goed. Plaats bovenaan op de pagina een zin ‘x producten voldoen aan uw criteria:’ met dan een opsomming van de actieve filters. Plaats achter elke filter een rood kruisje om duidelijk te maken hoe de filters gewist kunnen worden.
    Deze manier kan gebruikt worden als aanvulling op de aanduiding in de filternavigatie zelf. Ze is vooral nuttig als je veel filters of filtercategorieën hebt. Ook minder ervaren surfers vinden dit best handig.

Hoe filters wissen?

NOS.nl: goede integratie van het kruisje om de filter te wissen

Via een kruisje in de aanduiding van de actieve filter
Zonder enige twijfel de beste manier. Intuïtiever kan niet. Proficiat NOS.nl!

The North Face: overbodige link 'Clear filter'

Door in elke filtercategorie een link 'Verwijder filter' te plaatsen
Ook duidelijk, maar tegelijkertijd nogal techneuterig en weinig aantrekkelijk. En het zorgt ook voor plaatsverlies. In dit geval helemaal overbodig omdat het filtersysteem gebruik maakt van checkboxen.

Apple: ook niet slecht, maar de hoofdkeuze alle kan eigenlijk weg

Door in elke filtercategorie een item ‘Alle …’ te zetten
Tja, we hadden van Apple een minder kneuterige oplossing verwacht. Nadeel van deze aanpak is dat je altijd een lijntje plaats moet opofferen aan de keuze 'Alle ...'
Bij de eerste manier (het kruisje in of naast de filter) is het aanbieden van de keuze 'alle ...' overbodig.

In de aparte blokjes
Als je met een blokje bovenaan in de linkernavigatie werkt of een zin bovenaan op de pagina, plaats je daar achter elke filter ook een rood kruisje.

Intussen hebben we nog een veel betere methode om filters te wissen.

Wat als je binnen 1 filter meerdere keuzes wil toelaten?

  • Denk eerst goed na of dat echt nuttig is voor de bezoeker.
  • Indien ja, plaats dan voor de filters een checkbox. Dat maakt duidelijk dat meerdere keuzes mogelijk zijn.
  • Voor de rest: volg bovenstaande richtlijnen.

Een volgende keer praten we over best practices qua logica van de facetten, want ook op dat vlak loopt het vaak helemaal fout.

Bemerkingen of aanvullingen op het designaspect van facetten? Reageren maar!

P.S. Maak van je website een succes dankzij onze online training

Tijdens deze online videotraining van Karl Gilis, de #3 conversie-expert ter wereld, krijg je:

  • Meer dan 100 tips die gegarandeerd je website beter maken
  • Massa’s voorbeelden en cases die glashelder tonen wat werkt en wat niet
  • Methodes en tools om de zwakke plekken van jouw site te identificeren
  • De beste strategieën en tactieken om die probleempunten gericht op te lossen
  • Je volgt de training wanneer jij wil en via het toestel dat jij wil

Ontdek het programma van de online training

Mis het volgende artikel niet!

  1. Volg ons op Twitter voor interessante links en extra tips.
  2. Like onze Facebookpagina
  3. Schrijf je in op onze maandelijkse nieuwsbrief

Cursus usability & conversie

Op 1 dag krijg jij de inzichten en geheimen die ik de voorbije 15 jaar geleidelijk aan heb ontdekt.

  • Hands-on workshop van 1 dag
  • Met korte bespreking van je eigen website
  • Massa's voorbeelden uit binnen- en buitenland
  • Al 526 mensen volgden deze cursus
  • Volgende editie: 6 maart 2018, Antwerpen