RSSFacetnavigatie: briljante oplossing voor wissen actieve filters
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 designgewijs 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 superlogisch 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.
Superintuïtief en u verliest er geen extra regel mee, in tegenstelling tot de oplossing van Apple.
Dus ja, eigenlijk toch wel briljant.
Ere wie ere toekomt
De klant kunnen we niet verklappen, het designbureau dat met het idee op de proppen kwam wel. Het Brusselse Tentwelve.
Benieuwd hoe uw website beter kan?
Volg dan onze Usability workshop, laat een expert review doen of - de allerbeste oplossing – doe een gebruikerstest.
Dit artikel gaat over design, facetten, navigatie, Usability.
Op de hoogte blijven van nieuwe artikels?
Abonneer u op onze RSS feed of onze nieuwsbrief.
8 reactiesReageer op dit artikel
Reageer op dit artikel
Steven Noels (22-06-2010)
Maar Karl toch, dit is goud van oud.
http://www.vlerick.be/nl/facetedBrowser/programme-finder?filter.1.facetName=DomainHierarchy&filter.1.queryValue=matchesPath%28%27%2Fdaisy%3A13435-VLK%401%3A3%27%29%20OR%20%24DomainHierarchy%20matchesPath%28%27%2Fdaisy%3A13435-VLK%401%3A3%2F**%27%29&filter.1.displayValue=%2FICT%20%26%20Business%20Process%20Management%2F…&filter.1.operator=has%20path&filter.1.isDiscrete=false&limitToSiteCollection=false&limitToSiteVariant=true&orderBy=name%20ASC&chunkOffset=1&chunkLength=10&activeNavPath=/opleidingen/programme-finder&options=
Karl Gilis (22-06-2010)
Steven,
Die url is een beetje lang en werkt niet zo goed. Misschien een url-shortner gebruiken.
Op die website zie ik echter niet de methode zoals hierboven beschreven. Wel de ‘oude methode’ met bovenaan een vakje met de actieve filters. Zoals op http://bit.ly/affYVA
Dat is redelijk, maar de hierboven beschreven methode is nog beter en intuïtiever. Bovendien verdwijnt de facetcategorie niet; het behouden van die categorie wordt meer en meer als een best practice beschouwd. Zie o.a. http://bit.ly/cL9S2P
Goede website trouwens die van Vlerick.
Steven Noels (23-06-2010)
Ah, nu begrijp ik je punt. Ja, hoewel jouw alternatief technisch perfect mogelijk is hebben we toen (engineers als we zijn) voor de oude “in your face” methode gekozen. En ja, jouw voorstel is wel zo netjes eigenlijk.
Wat de website betreft: er is enige drang tot technische vernieuwing (lees: tijd voor nieuwe bezems) maar ik ben zéér benieuwd of ze ooit een betaalbaar én equivalent technisch alternatief gaan vinden. Er zijn zoveel duivelse details in hun structuur/navigatie/publishing – er zal serieus gerationaliseerd moeten worden om daar pakweg een Sharepoint neer te kunnen poten.
En ere wie ere toekomt: Marlon heeft zich, zich baserend op jouw aanzet, toen uitstekend gekweten van de moeilijke taak om een volledig uitgediepte IA op te stellen.
Karl Gilis (21-08-2010)
En wij maar denken dat wij op basis van interviews en gebruikerstesten de volledige informatiearchitectuur hadden uitgewerkt. En dat we dat samen met mock-ups van elke pagina in een lastenboek gegoten hadden. Als ik dat lastenboek en het prototype naast de afgewerkt website leg, zie ik niet zo goed waar er nog veel ‘uitgediept’ is.
Ere wie ere toekomt. Marlon heeft daar een goed design gemaakt en jullie hebben daar met Daisy een goed platform neergezet en zijn er in geslaagd uit een kluwen van interne databanken een transparante website te toveren.
Erwin Claassen (27-08-2010)
Karl,
ik heb toch mijn twijfels bij de vormgeving in het geval een filter geselecteerd is. Zo lijkt het teveel ofdat “Alle materialen” een kopje is, en geen link… ook al staat het aantal erachter. Zou het niet gebruiksvriendelijker zijn dat je onder Materiaal nog eens een optie ‘Alle materialen’ hebt, ingesprongen als de andere filters?
Karl Gilis (27-08-2010)
@Erwin
Wij hadden ook onze twijfels over deze oplossing. De gebruikerstesten maakten echter duidelijk dat dit systeem ontzettend goed werkt.
In in usability gaat het om de gebruikers, niet om de mening van de experts…
Jonathan (30-08-2010)
Karl,
ik mis nog iets in jouw benadering (die ik wel volledig volg tot nu toe)
waar ligt jouw mening tov een lijst van filters binnen een bepaalde categorie (bv “filter op locatie”) waarbij slechts de eerste 5 of 10 of … filters getoond worden, en de rest van de filters binnen die categorie, die minder relevant zijn, verborgen worden achter een “meer opties” linkje ?
ik heb hierover wel reeds wat nuttige info kunnen terugvinden, maar hoe meer meningen, hoe beter.
daarop volgt dan ook een probleempje:
een gebruiker selecteert een filter, en volgens jouw benadering hierboven:
* wordt de geselecteerde filter visueel uitgelicht
* blijven de andere filteropties binnen de categorie ook nog zichtbaar
wat indien de gebruiker een filter selecteerde die verborgen zat achter de “meer opties” ?
het is misschien een gevorderde stap in het gebruik van facets, maar het is een idee dat denkpistes kan openen
mijn eerste idee als IA zou zijn: als je zoveel filters binnen 1 categorie hebt, dan is de informatiestructuur niet goed. Maar soms heb je die niet in de hand, wanneer je aan de beheerders een CMS geeft …
Karl Gilis (31-08-2010)
@Jonathan
Als de keuzes binnen 1 filter zeer lang zijn, dan wordt het inderdaad moeilijker.
Denkpistes:
1. Kan de lijst korter? Echt niet? Jawel toch?
2. Als het gaat om locaties, plaatsen wij al snel ene zoekbox (met auto aanvullen)
3. Show more, is een optie. In de artikels hieronder daarover meer uitleg.
Interessante artikels:
* Over mogelijkheden qua show more
* Bring back the dead ends