Ga naar hoofdinhoud

Filters

Let op: dit patroon is nog in ontwikkeling.
Voorbeeld nog niet beschikbaar
Voorbeeld HTML
<em>Voorbeeld nog niet beschikbaar</em>

Filters maken het voor gebruikers makkelijker om informatie te ontsluiten. Door het instellen van een of meerdere filters wordt er een overzicht van items getoond die gefilterd zijn op de gemaakte keuzes.

Wanneer gebruik je filters​

Als er een grote hoeveelheid informatie ontsloten moet worden waarbij de gebruiker zelf invloed moet kunnen uitoefenen op het gewenste resultaat.

Anatomie van filters​

Filters bestaan uit:

  • Filtercategorie
  • Filterwaarden in een filtercategorie
  • Sorteermogelijkheid
  • Actieve filters overzicht

Richtlijnen​

  • Toon de filters horizontaal wanneer er voldoende ruimte is omdat er een beperkt aantal filtercategorieën getoond hoeft te worden.
  • Toon de filters vertical aan de linkerkant wanneer er beperkt ruimte is bovenaan de pagina in het geval er veel filtercategorieën getoond moeten worden.
  • Filtercategorieën moeten de belangrijkste aspecten bevatten die relevant zijn voor de wensen van de gebruiker.
  • Creëer indien nodig aparte filtercategorieën per overzichtspagina.
  • Gebruik geen vakjargon en schrijf duidelijke labels voor de filterwaarden.
  • Bepaal de volgorde van de filtercategorieën op basis van belangrijkheid. Waarbij de globale filtercategorieën als eerste getoond worden en daarna de specifiekere filtercategorieën.
  • Bepaal per filtercategorie op welke manier de filterwaarden gesorteerd moeten worden. In sommige gevallen is dit alfabetisch maar in andere gevallen is een handmatige sortering logischer.
  • Maak het mogelijk om meerdere filterwaarden binnen een filtercategorie te kiezen waar dit van toepassing is.
  • Laat zien welke filterwaarden een gebruiker geselecteerd heeft op de plek waar de gebruiker deze heeft geselecteerd.
  • Toon de actieve filters bovenaan het overzicht met de mogelijkheid om de filterwaarde te verwijderen.
  • Pas de filters automatisch toe wanneer ze gekozen worden. Dit zorgt ervoor dat de gebruiker direct resultaat ziet en het bespaart ruimte om dat er geen submit button getoond hoeft te worden.
  • Biedt indien mogelijk een zoeken functionaliteit aan die kan zoeken in alle beschikbare filtercategorieën.
  • Wanneer er veel filterwaarden zijn (20+) biedt dan een mogelijkheid aan boven de filterwaarden om de filterwaarden verder te verfijnen.
  • Maak het mogelijk om door filterwaarden heen te scrollen als dit er veel zijn. Hiermee voorkom je dat de gebruiker door lange lijst geen overzicht van alle beschikbare filter opties.
  • Toon alleen filterwaarden die resultaten opleveren als er op door gefilterd wordt.

Rijkshuisstijl​

Vanuit de Rijkshuisstijl zijn er geen richtlijnen wat betreft filters.

Bronnen​