Usability blog » facetnavigatie

De Efteling, waar je mindervaliden makkelijk kan vermijden

Karl Gilis — Fri, 09 Sep 2011 09:45:52 +0000

Ah, de Efteling. Wie heeft er geen goede herinneringen aan dit familievriendelijk pretpark?

Zo’n dagje Efteling wil je natuurlijk niet laten verpesten door een of andere gehandicapte die naast je plaatsneemt in een attractie waar je een half uur voor hebt moeten aanschuiven.

Dat weten ze bij de Efteling ook wel. Daarom kan je in hun filternavigatie snel alle attracties opvragen die niet toegankelijk zijn voor mindervaliden.

Handig, toch?

Voor de slechte verstaander

Mindervaliden hebben natuurlijk evenveel recht op een dagje Efteling als wie dan ook. En ze mogen ook altijd naast mij komen zitten.

Het gaat ons om de vreemde logica van de filter- of facetnavigatie. Het doel van filters of facetten is net dat de bezoeker die dingen kan selecteren die voor hem belangrijk zijn. Volgens ons zullen mensen dan ook eerder zoeken naar attracties die wel geschikt zijn voor mindervaliden dan andersom.

Hetzelfde geldt voor de minimale lengte. Als je kleine kinderen hebt, wil je weten waar je naartoe kan met kinderen die kleiner zijn dan 110 of 120 cm. Niet welke attracties niet geschikt zijn voor hen.

Lees zeker ook volgende artikels

Zelf iets bizars, onhandigs of keigoeds gezien?

Laat het ons weten via het contactformulier of e-mail.

Met dank aan Stijn Knapen voor deze geweldige tip!

Artikels die je zeker ook interesseren

Facetnavigatie: beste methode voor wissen van actieve filters

Karl Gilis — Thu, 17 Jun 2010 14:45:29 +0000

Stand van zaken na vorig artikel

In ons artikel met 4 designtips voor een facetnavigatie hadden we het onder meer over hoe je actieve filters moet wissen.

Puur qua design waren wij ontzettend te spreken over de uitwerking van NOS.nl (het linkse voorbeeld hieronder).

En we moesten een beetje lachen met de kneuterige oplossing van Apple dat in elke categorie een item ‘Alle …’ zet (het rechtse voorbeeld hieronder).

Tijd om te testen

Een paar dagen na dat artikel deden we in opdracht van een klant gebruikerstesten op een mock-up waarbij facetten een essentieel onderdeel van de site waren. Een zeer goede aanpak trouwens als u de usability van uw website echt grondig wil aanpakken: testen vooraleer hem te maken.

Wat hebben we geleerd uit die testen?

Design speelt niet zo’n grote rol
Zolang het maar duidelijk is welke filters actief zijn. Door een kleurverschil van lettertype of achtergrond of iets meer fancy zoals de NOS doet.
Vervang de naam van de facetcategorie door ‘Alle …’
Zodra in een categorie een filter actief is, vervangt u de naam van de categorie door ‘Alle …’. Dat was voor alle testpersonen superduidelijk.
8 op 10 personen klikte op de gewijzigde categorienaam, de andere 2 op de actieve filter (om hem zo weer uit te zetten).

Enkele voorbeelden

Facetcategorie ‘Materiaal’ wordt bij een actieve filter ‘Alle materialen’
Facetcategorie ‘Grootte’ wordt bij een actieve filter ‘Alle groottes’

De afbeelding hieronder is een absoluut niet-gedesignde versie van wat we getest hebben. Het is alleen bedoeld om het principe te verduidelijken. Dus aub geen comments over mooi of lelijk…

Is deze oplossing zo briljant?

Neen. Ze is gewoon erg logisch en eenvoudig. En waarschijnlijk zijn er al sites die het ook op die manier doen.

De meeste websites pakken het echter anders aan. En zijn niet zo intuïtief. Geloof ons, we hebben al veel soorten facetnavigaties getest. En dit is echt een uitstekende oplossing.

Heel intuïtief en je verliest er geen extra regel mee, in tegenstelling tot de oplossing van Apple.

Dus ja, eigenlijk toch wel briljant.

Lees zeker ook deze artikels

Benieuwd hoe jouw website beter kan?
Volg dan onze usability workshop, laat een expert review doen of - de allerbeste oplossing – doe een gebruikerstest.

Artikels die je zeker ook interesseren

Filteren in productcatalogus: 4 tips voor een facetnavigatie

Karl Gilis — Mon, 10 May 2010 08:12:36 +0000

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.

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.

Rechts is geen goed idee
Uit gebruikerstesten blijkt dat facetten aan de rechterkant door de helft van de surfers genegeerd worden. Rechts is nu eenmaal niet de meest bekeken zone van een webpagina, ook niet als daar filters staan. (Lees ons artikel met 7 argumenten voor een navigatie links in plaats van rechts.)

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?

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

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.
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.

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!

Benieuwd hoe jouw website beter kan?
Schrijf je dan in voor onze Usability workshop. Meer dan 300 tevreden deelnemers gingen je al voor.

Verwante artikels

Artikels die je zeker ook interesseren

Artikels en citaten over copywriting, usability en split testing

Karl Gilis — Thu, 10 Sep 2009 13:41:46 +0000

3 artikels in verband met usability, of user experience zoals velen dat zo modieus omschrijven. En verder nog een handige tool, wat citaten en een filmpje.

Leesvoer

6 schrijftips voor een onweerstaanbare website
Oké, de titel is misschien ietwat overdreven, maar dat is net de bedoeling. Ik vind vooral de eerste vijf tips goed. De laatste is door de zwakke voorbeelden nogal -euhm- zwak.
Best Practices for Designing Faceted Search Filters
Neen, niet weglopen door deze titel. Het is een absolute aanrader voor iedereen die een uitgebreid gamma aan producten, diensten of evenementen aanbiedt op z’n site. Webbouwers en techneuten noemen dat facetten. Het gaat gewoon om een systeem waarbij de bezoeker via verschillende criteria uw aanbod kan filteren. Zoals je het kent van eBay of Amazon.
Of UiTinVlaanderen.be, om maar eens een website te noemen waar wij aan meewerkten.
How To Increase Site Performance Through A/B Split Testing
Goede kennismaking met A/B of split testing, een methode waarbij varianten van eenzelfde pagina willekeurig getoond worden en de conversie wordt bijgehouden. Google heeft daar met Google Website Optimizer een goede tool voor.
En uiteraard: AGConsult helpt je graag om varianten uit te denken die beter zullen scoren.

Handige tool

Spoon Browser Sandbox
Webgebaseerde toepassing die toelaat om eender welke moderne browser (IE8/IE7/IE6, Firefox, Safari, Chrome, Opera) te draaien zonder dat je die zelf moet installeren. Om de toepassing te gebruiken moet je wel eenmalig een plug-in installeren.

Citaten

“Easy reading is damn hard writing.” Nathaniel Hawthorne
“Effective writing for the web is 80 percent planning/thinking and 20 percent writing.” Kris Mausser
“User experience design. Hoe hol kan een term zijn? Ik heb elke dag 100en user experiences. 99% daarvan is slecht.” Karl Gilis (Geef toe, die had je niet zien aankomen…)

Filmpje

South park: The Website review meeting
“It’s only a bug if the user finds it and complains about it.”