Gebruiksvriendelijke filters

Gebruiksvriendelijke filters

Danielle Enzler
Danielle Enzler - 20 augustus 2019
Joshua Rodriguez

Bij een webshop, concertagenda of kennisbank zijn filters handig. Omdat je soms niet altijd weet wat je precies zoekt of omdat de zoekfunctie te veel resultaten geeft en je verder wil specificeren. Maar hoe zorg je voor een gebruiksvriendelijk filter? In dit artikel geven we een aantal tips.

Definieer filters vanuit de gebruiker

Omdat het implementeren van filters een sterke technische component heeft, is de verleiding groot om het groeperen en benoemen van filters té technisch en functioneel te benaderen. Welke filters je bedenkt en hoe je ze noemt, moet je vanuit de doelgroep bekijken. Denk hierbij aan filteropties die niet een categorie aanduiden maar meer een interesse of behoefte zoals ‘goed om te dansen’ of ‘voor gezinnen met +3 kinderen’.

Voorbeeld: Theater aan de Parade

 

Sta meerdere filterkeuzes toe

Een gebruiker kan op zoek zijn naar een eettentje waar hij buiten kan eten, maar ook waar honden zijn toegestaan. Je wil gebruikers dus niet beperken om maar één filteroptie te mogen kiezen. Door meerdere filteropties te kunnen combineren, kan de gebruiker snel en eenvoudig zijn zoekopdracht verfijnen en sneller bij zijn gewenste resultaat uitkomen. 

Voorbeeld: Elkaarverstaan.nu

 

Maak een bewuste keuze over de positie

Nadat de inhoud van de filters is bepaalt, stel je jezelf de volgende vraag: Stoppen we de filters links van de items in een zijbalk of boven de items in een horizontale balk? Aan beide opties zitten voor- en nadelen. Het grootste voordeel van een zijbalk is dat je er veel filteropties in kwijt kunt en komende jaren moeiteloos kunt uitbreiden. Een nadeel is dat mensen de filters dan kunnen verwarren met reclame banners en ze dus niet zien. Filters die lager op de pagina staan zien ze ook slechter. Dit komt vooral voor als er ook een aantal filter- en sorteeropties bovenaan staan. Gebruikers denken dan dat die mogelijkheden de enige zijn en gebruiken die opties dan ook alleen.
Dan zou je denken dat een horizontale bovenbalk dé oplossing is, gebruikers zien ‘m tenslotte altijd. Er is wel een nadeel, namelijk dat deze balk niet eindeloos gevuld kan worden. Een mogelijke oplossing hiervoor is dat je bepaalde filters uitlicht en de rest onder een laatste knop ‘meer filters’ stopt. Mooi voorbeeld hierbij is AirBnB, zie hieronder. Belangrijk is dat je hiërarchie aanbrengt en de belangrijkste filters ‘uitlicht’.

Voorbeeld: AirBNB

 

Verstop gekozen filters niet

Wanneer iemand gefilterd heeft en vervolgens de gekozen filters wil aanpassen, dan zal deze persoon eerst zoeken op de plek waar hij ze heeft aangezet. Als hij ze daar niet kan terugvinden kan er paniek ontstaan, zeker wanneer een blind persoon via z’n toetsenbord het filter niet kan uitzetten (daarover zodadelijk meer). Daarom moeten de filters altijd op dezelfde plek blijven staan. Wat je wel kan doen is de gekozen filters herhalen boven de filters of resultaten. Als je ze daar nog extra opsomt kan de gebruiker ze daar snel controleren en eventueel deselecteren. 

Voorbeeld: Knauf

 

Zorg dat de terugknop nuttig is

Je wil dat iemand die in een productaanbod aan het filteren is de terugknop gebruikt om één filter ongedaan te maken, en niet gelijk terugschiet naar, bijvoorbeeld, de homepage. Laat daarom de terugknop invloed uitoefenen op de filtering.

Bied verschillende weergaven aan

De inhoud van een overzicht bepaalt de weergave van de pagina. Als een gebruiker op zoek is naar een locatie is een kaartview erg handig, maar als hij op zoek is naar bijvoorbeeld een wasmachine dan is een lijstweergave met de kenmerken prettiger om doorheen te bladeren.
Google Maps is op dit gebied een goed voorbeeld. Je kunt restaurants zoeken op de kaart wanneer de geografische locatie je grootste zorg is, maar je kunt ook in een lijstweergave de resultaten bekijken voor wanneer de beslissing meer afhangt van de beoordeling, prijs of het soort eten. 

Voorbeeld: Google maps

 

Communiceer filters niet altijd als filter

Tijdens het onboardingsproces van een nieuwe website kun je de gebruiker een aantal onderwerpen laten kiezen die hij interessant vindt. De gebruiker heeft dan niet het idee dat hij aan het filteren is, maar achter de schermen wordt er toch een selectie gemaakt en past de inhoud zich aan.

Voorbeeld: Theater aan de parade

 

Maak filters toegankelijk

Last but not least: Zorg ervoor dat je filters toegankelijk zijn voor het toetsenbord en dat alles goed opgelezen wordt door voorleesapparatuur. Voor blinde mensen is het helemaal belangrijk dat de (gekozen) filters op dezelfde plek blijven staan, omdat ze de volgorde van de filters onthouden. Wanneer er dan opeens een andere volgorde is, of ze de gekozen filters niet meer opgelezen krijgen en dus niet uit kunnen zetten, ontstaat er paniek. 

Andere dingen waar je op kunt letten als ontwerper, is dat je de pagina niet ververst als er een filteroptie gekozen wordt (kun je oplossen door de inhoud realtime aan te passen en een arialive attribuut toe te voegen) en de gebruiker niet helemaal bovenaan de pagina te laten starten, maar gewoon op dezelfde plek blijft. En wanneer je uitklapfilters hebt is de status ‘gesloten’ of ‘geopend’ een must. 

Verrijk filteren met sorteren

Filteren en sorteren zijn twee verschillende dingen. Met filteren verwijder je inhoud uit zicht en met sorteren orden je de inhoud volgens een bepaalde parameter. Gebruikers gebruiken beide door elkaar, bijvoorbeeld: vakantiehuisjes gefilterd op ‘strand op loopafstand’, gesorteerd op prijs laag - hoog. Sorteren op prijs is een stuk gebruiksvriendelijker dan moeten filteren op bijvoorbeeld 0-200 euro. Eén van de twee uitsluiten is dus geen goede optie, biedt beide aan.

Voorbeeld: All of bach
Maar dit is lang niet alles

Maar dit is lang niet alles

Er zijn natuurlijk nog veel meer dingen waar je op moet letten en die je mee kan nemen in het realiseren van (toegankelijke) filters. Maar met bovenstaande tips kom je al een heel eind. Wil je meer weten? Bel voor informatie of een kop (filter)koffie naar Daniëlle Enzler of Paul Traas op 010 221 02 00.