Usability blog » webdesign

Waarom een submenu op een overzichtspagina een slecht idee is

Karl Gilis — Thu, 19 Jan 2012 08:10:05 +0000

Geen ballast op overzichtspagina’s

Je website moet zo opgebouwd zijn dat iedere bezoeker vlot zijn doel kan bereiken. (Want iedereen bezoekt je website met een bepaald doel.)

Overzichtspagina’s spelen daarin een belangrijke rol. Een rubriek- of overzichtspagina is elke pagina tussen de homepage en een detailpagina. (Als je niet vertrouwd bent met deze termen, lees dan ons artikel over de 3 paginatypes van elke website.)

Een overzichtspagina heeft 2 belangrijke doelen:

Overzicht geven van het (diepere) aanbod
Zorgen dat de bezoeker snel de juiste keuze kan maken

Daarom noemen wij een overzichtspagina ook een keuzepagina. En alles wat de surfer hindert in het maken van keuzes, is ballast.

7 redenen waarom een submenu ballast is

1. Minder focus, meer afleiding

Een submenu neemt ruimte in en staat vol met links. En smeekt dus om aandacht van de bezoeker.

Tegelijkertijd is er het contentgedeelte dat om aandacht zit te hengelen.

Het submenu draagt niets bij en zorgt voor onnodige afleiding.

Waar moet de bezoeker nu vooral naar kijken? Naar alles? Zijn het exact dezelfde keuzes? Is de info in het contentgedeelte belangrijker dan het menu of niet?

2. Herhaling van de keuzes = verloren ruimte

Als de keuzes in het submenu overeenkomen met de keuzes in het middendeel, zijn ze overbodig.

Het submenu is een herhaling van het middendeel. Schrappen die handel!

Schrap de subnavigatie en je hebt meer ruimte voor je keuzes.

3. Keuzes niet in dezelfde volgorde = verwarring

Als de keuzes in het submenu in een andere volgorde staan dan die op het middendeel wordt de verwarring natuurlijk alleen maar groter.

Van het adagio 'Don't make me think' hebben ze bij Fedweb nog nooit gehoord...

Leuk om de ogen en gezichtsuitdrukking te zien van testpersonen tijdens een user test, maar nefast voor je website.

Een van de basisregels van usability is namelijk: vermijd alles wat aanleiding kan geven tot verwarring.

4. Deels andere keuzes = meer verwarring

Kan het nog verwarrender? Tuurlijk! Op sommige sites komen de keuzes in het submenu niet helemaal overeen met die in het contentgedeelte.

Het waarom van dit fenomeen ontgaat me. Al weet ik wel dat het absoluut niet werkt.

Waarom er in het submenu meer zaken staan dan in het contentgedeelte is een raadsel.

Vraag in het voorbeeld van CAT maar eens aan een gebruiker of CAT ook ‘Lift Trucks’ maakt. Minstens de helft van de testpersonen zal ‘neen’ zeggen. Omdat de meeste mensen focussen op het contentgedeelte.

5. Volledig andere keuzes = nog meer verwarring

Omdat ze in het contentgedeelte van de pagina geen zaken willen herhalen die in de subnavigatie staan, zetten sommige webmasters in dat middendeel andere informatie. Zoals nieuwsberichten.

Klinkt goed, maar in de praktijk werkt het gewoon niet.

Totaal andere keuzes in het submenu dan in het middendeel zorgen voor verwarring.

Tijdens gebruikerstesten zien we dat de meeste surfers ofwel naar het menu kijken, ofwel naar het contentgedeelte. Zelden overlopen ze de links in beide delen.

6. Middendeel vullen met onzin = belachelijk

Hasselt is een stad met een heleboel troeven. Indrukwekkend. Daar kunnen Antwerpen, Gent, ... een puntje aan zuigen.

Nog een alternatief: lul het contentgedeelte gewoon vol. Het achterliggend idee: “Als er geen links in staan, zullen de mensen uiteindelijk wel naar de linkerkant kijken en klikken in het submenu”.

Dat is gedeeltelijk wel waar. Al bestaat het gevaar dat heel wat gebruikers alleen je bullshit zien en wegklikken voor ze het submenu deftig hebben overlopen.

Deze blokjes met links zijn al heel wat beter. Nu nog dat submenu schrappen...

Bij Hasselt hebben ze intussen al heel wat van hun blabla-teksten geschrapt. Gelukkig.

Want echt waar: als je denkt dat een pagina vullen met blabla-tekst niet zo erg is, hoop ik dat je geen job hebt die iets te maken heeft met het web.

7. Het middendeel zo goed als leeg laten = nog belachelijker

Oké, er is nog 1 slechter idee. Het middendeel leeg laten of er 1 dwaze zin zetten.

Wauw. Geweldig. Hier kan ik zoeken naar de belangrijke gebeurtenissen in mijn leven. Wat bedoelen ze? Het binnendraaien van mijn eerste lief op de botsauto's? Mijn eerste pretsigaret?

Zo ziet elke bezoeker meteen dat je geen flauw idee hebt van de basisbeginselen van informatiearchitectuur.

Besluit

De toegevoegde waarde van een submenu op een keuzepagina is meestal nul komma nul. Noegabollen. Nada.

Schrappen dus. Zodat je van je overzichtspagina’s heel zuivere keuzepagina’s kan maken.

Het zal de conversie van je website ten goede komen!

En een facetnavigatie?

Als je aanbod smeekt om een facetnavigatie, moet die uiteraard wel op je overzichtspagina’s staan.

Een filternavigatie heeft duidelijk een toegevoegde waarde. Ze laat toe om je aanbod te filteren op basis van de belangrijkste keuzecriteria van de bezoeker.

P.S.

Wil je te weten komen wat de belangrijkste hindernissen én oplossingen zijn om de gebruiksvriendelijkheid en conversie van je website te verbeteren?

Volg dan onze opleidingsdag webusability en schrijven voor internet.

Al meer dan 355 mensen volgden deze opleiding en gaven een gemiddelde score van 9,1/10.

Er zijn nog enkele plaatsen voor de editie van 24 mei 2012. De editie van 28 februari 2012 is volzet.

Schrijf je dus snel in voor deze hands-on opleiding.

Artikels die je zeker ook interesseren

Gemeente Zele: voor alle bijzondere momenten in je leven

10 keer een pleidooi voor meer usability

Karl Gilis — Mon, 20 Dec 2010 10:02:29 +0000

Ik gaf deze presentatie op het jaarcongres van FeWeb, de federatie van webontwikkelaars. De presentatie is in de eerste plaats bedoeld voor webbouwers, maar iedereen die betrokken is bij het maken en onderhouden van websites zal er inspiratie uithalen. Dat beloof ik je.

In deze presentatie

Zijn usabilityguru’s even oubollig als hun websites?
Heeft web usability nog een toekomst?
Wat is eigenlijk het doel van usability?
Gaan usability en design samen?
Waarom moet je in het websiteproces de architectuur- en bouwfase scheiden?
Wat doen poezen, hoeren en luxe callgirls in een presentatie over usability?

Klik linksonder in de presentatie op ‘menu’ en dan ‘view fullscreen’ om de presentatie in het groot te bekijken.
Volg deze link als je niets te zien krijgt (bijvoorbeeld op je iPad)

Lees zeker ook

Ontdek al onze diensten en opleidingen rond usability, conversie en informatiearchitectuur.

Volg AGConsult op Twitter voor nog meer interessante weetjes.

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

Productkeuze: goede en slechte voorbeelden

Karl Gilis — Wed, 13 Jan 2010 11:30:16 +0000

Productkeuze: een must

Zodra u 2 of meer producten of diensten hebt die min of meer vergelijkbaar zijn, moet u op de bovenliggende pagina deze producten of diensten zo voorstellen dat ze makkelijk te vergelijken zijn.

Het is namelijk uw taak om ervoor te zorgen dat uw bezoekers, potentiële klanten dus, het product of de dienst kunnen kiezen die het beste bij hen past. Dat is de service die de hedendaagse consument van u verwacht.

We schreven hierover eerder al een artikel onder de noemer ‘4 best practices om producten te vergelijken’.

Slechte voorbeelden

Te fluffy

Een typisch probleem van productvergelijkingen is dat de bewoordingen zo vaag zijn dat het eigenlijk geen vergelijking is.

Essent is een mooi voorbeeld van nietszeggende teksten. “Zeer aantrekkelijke prijs” versus “Zeer scherpe prijzen”: wat is het verschil?

Wisselende volgorde

Vergelijken is pas handig als de opgesomde zaken in dezelfde volgorde staan. Zo kan de bezoeker in één oogopslag vergelijken.

Nuon vindt dat blijkbaar iets te gemakkelijk. Daarom staat het zinnetje “Vaste energiekost, zelfs als de prijzen stijgen” respectievelijk als 2^de, 3^de en 1ste bullet.

Geen prijzen

Het is u waarschijnlijk ook opgevallen dat zowel Essent als Nuon hun uiterste best doen om over prijzen te spreken zonder cijfers te noemen.

Dat is creatief, maar absoluut niet wat de bezoeker wil. Zeg hoeveel iets kost. Altijd. Prijs speelt een belangrijke rol in het beslissingsproces. Hoe opener u bent over uw prijzen, hoe sneller u de bezoeker zal overtuigen.

Volzinnen

Copywriters mogen niet betaald worden per woord of aantal karakters dat ze schrijven. Kort en krachtig, daar gaat het om op internet.

Productkeuzes met ronkende volzinnen zijn not done. Vaak blinken ze ook uit in nietszeggendheid, zoals in dit voorbeeld van Hostbasket.

Alles onder elkaar

Zaken naast elkaar zijn makkelijker vergelijkbaar dan zaken onder elkaar. Hoe minder de bezoeker moet scrollen om uw aanbod te vergelijken, hoe beter.

Bij Belgacom staan alle producten onder elkaar. De bezoeker is verplicht om te scrollen en ziet dus nooit de vergelijkbare kenmerken van alle producten op 1 scherm. Niet erg handig.

Goede voorbeelden

Tabellen

Een tabel waarbij voor alle belangrijke kenmerken 1 lijn wordt vrijgemaakt is het handigste. Als dit voor uw aanbod mogelijk is, is het de beste manier. Surfers houden ervan. Het is superoverzichtelijk en handig.
Combell heeft dit goed begrepen.

Visuele sturing

Bij Combell zijn de duurdere producten groter en hebben ze meer sterren. Zulke visuele trucjes helpen. Of kiest u voor het kneusje met maar 1 ster? Dat zal wel voor de prutsers zijn, zeker?

Populairste oplossing benadrukken

Om in te spelen op het kuddegedrag van de gemiddelde mens, wordt in zo’n tabel vaak 1 oplossing prominenter in beeld gezet en aangeduid als de meest gekozen oplossing. Het voorbeeld hieronder komt van Shopify.

Meer uitleg in een uitgebreide tooltip

Bij Basecamp gaan ze nog een stap verder. Ze accentueren niet alleen de meest populaire oplossing, ze geven ook meer uitleg bij de verschillende kenmerken in een uitgebreide tooltip. (Wel jammer dat die alleen verschijnt bij de meest populaire oplossing.)

Duurste product eerst

Uit A/B-testen blijkt vaak dat door de duurste oplossing eerst te plaatsen, uw omzet stijgt. Volg dus ook op dat vlak het voorbeeld van Basecamp.

Blokjes

Als een tabel moeilijk is of u dat te saai vindt, zijn ‘blokjes’ een goed alternatief.

Een redelijk voorbeeld vinden we bij Telenet, waar de belangrijke gegevens (prijs, snelheid, volume) in de blokjes voldoende opvallen en dus makkelijk vergelijkbaar zijn. Pas op: een tabel zou nog beter zijn.

Na lang surfen vonden we dit neutraal gekozen voorbeeld van een bedrijf dat diensten rond usability aanbiedt. Een opsomming waarbij in elk ‘blokje’ de volgorde (inhoud, type rapport, workshopduur, prijs) hetzelfde is.

Hoe kan uw website beter?

Vraag het ons. Via een expert review leggen we ongetwijfeld enkele pijnpunten bloot.

U hecht weinig belang aan onze mening? Geen probleem. Met een gebruikerstest hoort u het ook eens van een ander. Van uw klanten bijvoorbeeld.

Artikels die je zeker ook interesseren

4 best practices om producten vergelijken

Karl Gilis — Wed, 02 Dec 2009 14:37:46 +0000

Iedereen vergelijkt

Voor iemand die een product of dienst wil kopen, is vergelijken een top taak. Niet alleen tussen het aanbod van verschillende bedrijven, maar ook binnen het aanbod van 1 bedrijf.

Die drang om te vergelijken, geldt voor b2c en b2b websites.

Laat vergelijken toe

Omdat vergelijken een top taak is, is het ontzettend belangrijk dat u ervoor zorgt dat dat makkelijk kan op uw website.

Als vergelijken moeilijk is, is de kans groot dat uw websitebezoekers passanten blijven en geen klanten worden.

Wat verwachten uw bezoekers?

Hoofdkenmerken van elk product of dienst duidelijk vermeld op de detailpagina, liefst als een opsomming.
Gelijkenissen en verschillen van gelijkaardige producten of diensten gepresenteerd op 1 pagina.
Niets zo vreselijk voor een bezoeker om pen en papier te moeten bovenhalen om pagina per pagina de producteigenschappen op te schrijven en zo de verschillen op te sporen.

Voorwaarden om te kunnen vergelijken

Duidelijke verschillen tussen uw gelijkaardige producten of diensten. Waarop moet een klant zijn beslissing baseren als u zelf niet duidelijk kan maken wat de verschillen zijn tussen oplossing A en B?
Om de vergelijking interessant te maken voor de bezoeker, moet u weten wat voor uw klanten de belangrijkste beslissingscriteria zijn.
Dat lijkt niet zo moeilijk, maar bij de helft van de onderzoeken die wij doen is er sprake van een verschil in visie tussen bedrijf en klant.

Wat moet u doen als u niet aan deze voorwaarden voldoet?

Zorgen dat u er wel aan voldoet!

De keuze is heel eenvoudig: aanpassen of klanten verliezen.

Minder dan 10 gelijkaardige producten of diensten?

Basisprincipe: alles op 1 pagina

Een zoekfunctie, wizard of wat voor extra hulp ook is overbodig. Mensen zijn niet geweldig slim, maar ze zijn ook niet achterlijk. (Bekijk hoe een zoekfunctie in een gamma van 8 producten uitdraait op een fiasco voor de bezoeker.)

Mogelijkheid 1: tabel

Heeft de voorkeur van bezoekers. Als het enigszins kan, moet u dit proberen.
Recente tests wijzen uit dat u een hogere omzet haalt als u de duurste producten eerst zet.

Bovenste rij: goede voorbeelden van Shopify en Combell, geordend van goedkoop naar duur. Basecamp (onderste rij) doet het net iets beter: van duur naar goedkoop en met een handige uitleg per item als u er met de muis over komt.

Mogelijkheid 2: afzonderlijke blokjes

Duidelijke titel.
Hoofdkenmerken in bullets, liefst op zo’n manier dat het echt makkelijk is de verschillende producten of diensten te vergelijken (o.a. door dezelfde aanpak en volgorde).
Prijs.
Elk blok is, als het even kan, in zijn geheel aanklikbaar.
Zet zoveel mogelijk blokjes naast elkaar. Dat is overzichtelijker dan alles onder elkaar te zetten.

Deze blokjes op de website van Telenet geven een behoorlijk overzicht.

Meer dan 10 gelijkaardige producten of diensten?

Filtersysteem

Uw volledige aanbod op 1 pagina met links een filtersysteem, ook wel facetten genoemd.

Twee geslaagde voorbeelden van verfijningen of facetten: Bol.com (links) en Booking.com (rechts)

7 aandachtspunten voor facetten

Zorg dat de hoofdkenmerken van de producten er in het overzicht uitspringen. Beperk u tot de kern.
Het filtersysteem moet links op de pagina staan. Rechts kan ook, maar is minder efficiënt. Bovenaan kan ook, maar duwt de resultaten naar onder en dat is jammer.
Beperk het aantal facetten tot de zaken die er voor de potentiële klant echt toe doen. Wat u belangrijk vindt, is niet relevant. Het enige wat telt, zijn de primaire beslissingscriteria van de bezoeker.
Zorg dat de criteria of facetten makkelijk aan- en uitvinkbaar zijn.
Vermijd dat de bezoeker keuzes kan maken die niets opleveren.
In veel gevallen is het handig dat de bezoeker de lijst ook kan ordenen op bepaalde criteria (alfabetisch, prijs, afmeting, …)
Als uw lijst met producten langer is dan bijvoorbeeld 25, kan u de resultaten best ‘pagineren’.

In latere artikels komen we zeker nog terug op de concrete uitwerking van een goede facettennavigatie, zowel qua inhoud, design als werking.

Gedetailleerde vergelijking

Een meer gedetailleerde vergelijking, waarbij zowat alle eigenschappen van vergelijkbare producten naast elkaar gezet worden in een tabel, biedt voor bepaalde producten zeker een meerwaarde.

Meer weten?

Andere mogelijkheden?

We hebben in dit artikel niet de pretentie volledig te zijn. Heeft u zelf iets goeds gezien of gemaakt? Zet het in de reacties hieronder of laat het weten via e-mail.

De regels van goede home-, rubriek- en detailpagina’s?
Ze komen aan bod tijdens onze usability workshop.

Artikels die je zeker ook interesseren

Plan België: Usability Awards 2009 juryprijs non-profit of overheidswebsite

Karl Gilis — Mon, 23 Nov 2009 09:48:57 +0000

De website van Plan België werd op de Usability Awards 2009 bekroond met de juryprijs voor ‘Meest gebruiksvriendelijke non-profit of overheidswebsite’.

Voornaamste pluspunten Plan België

1. Creatief en gebruiksvriendelijk

Omdat de websites van de meeste usabilityguru’s er niet meteen erg sexy uitzien (Useit.com iemand?), denken veel mensen dat gebruiksvriendelijkheid een synoniem is voor saai.

Dat dit absoluut niet waar is, bewijst Plan België.

Uit het juryrapport:

Grafisch creatief uitgewerkt en toch gebruiksvriendelijk
Aanstekelijk design
Aantrekkelijke site die overtuigend werkt

Of hoe totaal verschillende mensen los van elkaar hetzelfde zeggen. Ook dat is usability…

2. Goede categorisering en navigatie

De hoofdnavigatie (Wat doet plan, Steun plan, Over plan) is kort en duidelijk. Ook de indeling binnen die rubrieken is behoorlijk goed.

Die categorisering wordt verder in de verf gezet door de indeling van de rubriekpagina’s.

3. Focus op top taken

De top taken van de website (met name Planouder worden en een Gift doen) staan doorheen de website in de kijker. De hele website is als het ware rond die top taken opgebouwd.

4. Goede, gelaagde content

De website is gelukkig meer dan een oproep ‘geef ons uw geld’. Er staat heel veel inhoud op.

Twee zaken vallen daarbij op:

De teksten zijn goed geschreven en aangepast aan het web.
De inhoud wordt in ‘laagjes’ aan de bezoeker getoond, waardoor de bezoeker de informatie niet in één lading over zich heen krijgt.

Kan er niets beter?

Tuurlijk wel. Alles kan altijd beter.

Een paar verbeterpunten uit het juryrapport:

De look & feel van de website is op zich al redelijk druk. Op zich kan dat geen kwaad, maar door het overaanbod van cross-links in de rechterbalk worden sommige pagina’s té druk. Te veel zaken schreeuwen om de aandacht en dat werkt contraproductief. Zorg dat elke pagina een duidelijke focus heeft
De broodkruimel is verre van ideaal. Lees onze 7 tips voor een goede broodkruimel
Zoekresultaten kunnen beter, vooral de voorstelling ervan. De zinnen in de zoekresultaten, moeten duidelijk maken waarover de pagina’s gaan. Lees onze tips voor een goede zoekresultatenpagina
Niet echt fantastisch in Internet Explorer 6, op dit ogenblik toch nog goed voor minstens 10% van de bezoekers. Recente cijfers over schermresoluties

Benieuwd wat er goed en minder goed is aan uw website?

Artikels die je zeker ook interesseren

Page fold + manke productzoeker = slechte user experience

Karl Gilis — Fri, 20 Nov 2009 08:22:36 +0000

De website van Orange Luxemburg gaat op de pagina met abonnementen volledig de mist in.

Wat is er mis met de user experience van Orange.lu?

Een horizontale lijn over de hele breedte van het scherm, net op een plaats waar bij veel mensen de vouwlijn (page fold, paginavouw) ligt.
Een ‘productzoeker’ die de hele bovenkant van het scherm inpalmt, en waarbij de resultaten verschijnen in de onderste zone. En dus vaak onder de vouwlijn. Zonder enige indicatie boven de vouwlijn dat de gebruiker moet scrollen om de resultaten te zien.
Producten die blijven staan, ook als ze niet voldoen aan de zoekcriteria. Er staat alleen geen knop ‘Meer info’ bij.
Heel veel combinaties in de ‘productzoeker’ leveren geen enkel resultaat op.
Het meest bizarre: de hele ‘productzoeker’ dient om de weg te vinden in het gigantische aanbod van maar liefst 8 producten.
U leest het goed: 8 producten.
Om daar een keuze uit te maken worden er 4 vragen gesteld.
U leest ook dit goed: 4 vragen.

Maar het design is wel mooi. Joepie.

Geniet mee van deze unieke ‘user experience’ (3 minuten, met geluid) of probeer het zelf eens.

http://www.youtube.com/watch?v=ERI6NTZ6mIc

Meer lezen of weten?

Artikels die je zeker ook interesseren

Ancienne Belgique: Usability Awards 2009 juryprijs commerciële of bedrijfswebsite

Karl Gilis — Mon, 16 Nov 2009 17:33:38 +0000

De website van Ancienne Belgique, www.abconcerts.be, werd op de Usability Awards 2009 bekroond met de juryprijs voor ‘Meest gebruiksvriendelijke commerciële of bedrijfswebsite’.

Voornaamste pluspunten website Ancienne Belgique

1. Ondersteunende vormgeving

Het design is functioneel en aangenaam. Eenvoudig en sober zodat het niet afleidt van waar het de bezoeker om te doen is: het concertaanbod van de AB.

Zoals een jurylid zegt: “Verfrissend rechttoe-rechtaan”.

2. Goede en duidelijke primaire navigatie

Home, Concerten, Projecten, Artiesten, ABtv en AB Radio. Meer moet dat niet zijn. Daar komt het gros van de bezoekers voor. (Al is ‘Projecten’ misschien niet ideaal als term. Lees ons artikel over duidelijke termen in je website menu.)

3. Goede concertfiches

Duidelijke en consistente voorstelling van de concerten met vaste infotypes (Overzicht, Publiek, Vervoer…) in een heldere en perfect uitgevoerde tabblad-navigatie.

Bovenaan op de tab ‘Overzicht’ van een concertpagina staat meteen alle essentiële info. Duidelijk.

4. Interessante communityfuncties

De jury is erg gewonnen voor nuttige communityfuncties zoals ticketruil en carpoolen. Ook de manier waarop functies als ‘Stel mij in als aanwezig’ en ‘Download kalenderbestand’ worden geïntegreerd, kan op bijval rekenen.

“De web 2.0 features zijn aanwezig, maar niet op zo’n manier dat je je als bezoeker verplicht voelt om ze te gebruiken.” “Het is niet zo dat de community belangrijker is dan waar het echt om gaat: de concerten.”

5. ABtv en AB Radio

Hip als ze zijn, appreciëren de juryleden ook de integratie van video en geluid op de website van een concertzaal. Niet omwille van de features op zich, maar om de eenvoud ervan, zowel qua presentatie als werking.

Heeft Ancienne Belgique de perfecte website?

Ben ik de ideale man?

De perfecte website bestaat niet. Ancienne Belgique heeft een heel goede website, maar er zijn ook minpuntjes.

Subnavigatie binnen de rubriek ‘Concerten’
Het is moeilijk om alle concerten binnen een bepaalde genre te vinden. De rechterkolom en de ‘tag cloud’-achtige voorstelling zijn niet goed. (Sommige juryleden hebben deze functionaliteit zelfs niet opgemerkt. Lees ons artikel over de dood van de rechterbalk.)
Deze genres zouden veel makkelijker te vinden moeten zijn.
Terminologie
‘Stel mij in als aanwezig’ en ‘Download kalenderbestand’ klinken een beetje techneuterig. ‘Ik kom naar dit concert’ en ‘Voeg concert toe aan mijn kalender’ zijn laagdrempeliger.
Tickets kopen
Een wel erg grote breuk met het informatieve luik van de website.
Registratie hier, registratie daar
Is het wel slim dat de bezoeker zich voor zowat alles moet registreren? (Het antwoord: Neen, registratie is slecht voor je verkoop.)
Copywriting
De tekst op de concertpagina’s is vaak erg massief en brochureachtig. Niet echt aangepast aan het web.
Bekijk een voorbeeld

Hoe kan jouw website beter?

Artikels die je zeker ook interesseren

Paginavouw en scrollen: feiten en fictie

Els Aerts — Thu, 15 Oct 2009 12:44:51 +0000

In het artikel ‘The myth of the page fold: evidence from user testing’ stelt het Britse cxpartners dat rekening houden met de paginavouw overbodig is omdat surfers geen bezwaar hebben tegen scrollen.

Dat willen wij toch even nuanceren. (Geef toe, dat had u van ons niet verwacht: de woorden ‘wij’ en ‘nuanceren’ zo dicht bij elkaar.)

Wat is de paginavouw?

Met de term paginavouw wordt de imaginaire lijn bedoeld tussen dat deel van de webpagina dat u kan zien zonder te scrollen en dat deel dat zichtbaar wordt nadat u scrollt.

De vouwlijn legt men traditioneel op ongeveer 570 pixels van de bovenrand. Dat komt plusminus overeen met wat iemand op zijn scherm ziet in een resolutie van 1024 op 768. Uit recente cijfers over schermresolutie blijkt echter dat 70% van de surfers in hogere resoluties surft. U moet uitgaan van die realiteit en dus rekening houden met meerdere vouwlijnen op 1 pagina.

Scrollen mensen nu of niet?

Dat hangt ervan af.

Waar hangt het van af? Van het type pagina en type website.

1. Home- en overzichtspagina’s

A. Nieuwswebsites

Op nieuwswebsites speelt paginalengte nauwelijks een rol. De meeste bezoekers komen om het nieuws te overlopen. Zij hebben liever een lange pagina met bijvoorbeeld per artikel een titel en een veelzeggende introzin dan een korte pagina met enkel headlines. Het overlopen van de lange pagina brengt de lezer immers sneller op de hoogte dan de korte pagina, die te weinig info bevat en hem dus verplicht om meer te klikken.

Voor nieuwswebsites zouden we zelfs bijna durven zeggen: hoe langer, hoe beter.

Nieuwswebsites moeten zich weinig aantrekken van de lengte van hun home- en rubriekpagina’s.

B. Grote, bekende webwinkels

Grote webwinkels die duizenden producten aanbieden én die bekend zijn bij het grote publiek kunnen zich probleemloos langere home- en overzichtspagina’s veroorloven. We hebben het dan over online shops zoals Amazon of reiswebsites zoals Neckermann.

De meeste bezoekers weten wat ze van dergelijke websites kunnen verwachten. Hun surfgedrag kan ruwweg in 2 groepen verdeeld worden:

Zoekers
Mensen die weten wat ze willen. Zij gebruiken de zoekfunctie. De rest van de homepage kan hen gestolen worden.
Browsers
Dit omvat zowel koopjesjagers die komen zien wat de interessante aanbiedingen zijn als surfers die ‘ongeveer’ op zoek zijn naar iets. Zij overlopen vluchtig de homepage of ‘slenteren’ door de overzichtspagina’s die hen interesseren (bijvoorbeeld de overzichtspagina van ‘romans – thrillers’ of ‘skivakanties’).

Opgelet: we zeggen duidelijk dat bekende webwinkels het zich kunnen veroorloven. Het is dus geen must.

Amazon trekt zich weinig aan van de vouwlijn. eBay doet toch haar best om zoveel mogelijk nuttige info boven de vouwlijn te plaatsen.

C. Doorsnee bedrijf of organisatie

Op een overheidswebsite of de site van een doorsnee bedrijf scrollen mensen liever niet op homepages en overzichtspagina’s. Dat zeggen ze spontaan tijdens gebruikerstesten. Het blijkt ook uit hun surfgedrag tijdens gebruikerstesten en wordt gestaafd door analyse van logfiles. (Gebruik daarvoor de functie ‘site overlay’ in uw Google Analytics account.)

Mensen verwachten op dergelijke websites, en zeker op de homepage, dat de belangrijke info onmiddellijk zichtbaar is. Dat ze geen moeite moeten doen om die te zien.

Dat verwachtingspatroon is ook logisch. Ze komen naar zo’n website om iets te doen. En dat doel willen zo snel mogelijk bereiken. Dat gaat het best door alle links naar alle belangrijke onderdelen meteen te tonen.

VMW doet haar uiterste best om alle info boven de vouwlijn te plaatsen, zowel op de homepage als op de overzichtspagina’s.

Mag er dan niets onder de vouwlijn staan?
Natuurlijk mag u zaken onder de vouwlijn plaatsen, al was het maar omdat de meerderheid surft in hogere resoluties dan 1024 x 768. En uiteraard zullen sommige mensen wel scrollen. Ga er echter niet van uit dat uw bezoekers wel zullen scrollen. Plaats daarom boven de vouwlijn altijd de belangrijke links, de top taken van uw bezoekers. Lager op uw pagina kan u dan minder belangrijke info zoals nieuws, evenementen, etc. plaatsen.

Hoe kan u meer mensen laten scrollen?
Door duidelijk te maken dat de pagina niet stopt bij de paginavouw. Zorg bijvoorbeeld dat al een stuk te zien is van de content die lager op de pagina staat. Dat helpt om meer mensen te laten scrollen. En vermijd dat er net op die plek over de hele schermbreedte een lege zone is of een dwaze reclame staat.

Vlerick en Belgium.be plaatsen de essentiële links boven de vouwlijn. Doordat de titels van de lager liggende blokken zichtbaar zijn, zal een redelijk percentage bezoekers wel scrollen.

2. Detailpagina’s

Op detailpagina’s speelt lengte nauwelijks een rol. Mensen zullen zo lang blijven scrollen als uw informatie hen interesseert.

Maak boven de vouwlijn wel duidelijk wat de pagina te bieden heeft. Daar zijn verschillende manieren voor, afhankelijk van het type detailpagina.

A. Productpagina’s

Executive summary
Een korte samenvatting van de belangrijkste info op de pagina. De productpagina’s van Amazon zijn hier een mooi voorbeeld van. U ziet meteen foto, productnaam, prijs en of het product in voorraad is of niet. Alles wat dus superbelangrijk is, heeft u meteen gezien.

Tab-bladen
Tab-bladen of in-page tabs zijn interessant als u echt veel informatie heeft over een bepaald product (vb: productbeschrijving, technische specificaties, referenties). U gebruikt ze best in combinatie met een executive summary. Zoals bijvoorbeeld op KeepYourCooler.com.

B. Contentpagina’s

Betekenisvolle springlinks
Een aanklikbare inhoudstafel van de pagina. De lange detailpagina’s van de provincie Vlaams-Brabant zijn hier een mooi voorbeeld van. Lees ons artikel over springlinks voor meer achtergrondinfo.

Opgelet: ook bij detailpagina’s moet u altijd duidelijk maken dat de pagina niet ‘stopt’ bij de paginavouw. Geef een hint van de content onder de paginavouw.

Gebruikerstesten zijn belangrijk, maar ze zeggen niet alles

De conclusies van het Britse artikel zijn volledig gebaseerd op gebruikerstesten. Zoals u weet, zijn wij fervente voorstanders van gebruikerstesten. Maar ze zijn niet zaligmakend.

Gebruikerstesten zijn kwalitatief onderzoek. Om een boude stelling als ‘de paginavouw is een mythe’ hard te maken, heb je meer bewijsmateriaal nodig. Cijfers uit kwantitatief onderzoek, zoals logfile-analyse. Daarbij zal je vaak zien dat links boven de vouwlijn gemakkelijk 3 keer zo veel aangeklikt worden als links onder de vouwlijn. En het weigeringspercentage van zinloos lange pagina’s zal hoger liggen dan korte pagina’s.

Of mensen scrollen op een pagina of niet, is belangrijk. Maar het is niet het enige wat telt. Hoeveel mensen verlaten zo’n pagina met weinig content boven de vouwlijn? Hoeveel mensen kopen het product op zo’n pagina?

Moraal van het verhaal

Is de paginavouw een mythe? Neen. De paginavouw heeft wel degelijk impact op het surfgedrag van de gebruiker.

Plaats belangrijke zaken bovenaan op de pagina en houd er in uw design rekening mee dat u duidelijk maakt dat de pagina niet stopt bij de paginavouw.

Meer over effectieve home-, overzichts- en detailpagina’s?
Volg onze usability workshop.
Uw beste investering ooit!

Artikels die je zeker ook interesseren

De website uitgelegd

Karl Gilis — Fri, 21 Aug 2009 09:08:13 +0000

Al jaren proberen usabilitymensen en goede designers aan -euhm- minder goede ontwerpers duidelijk te maken dat een website voor elke bezoeker meteen bruikbaar moet zijn.

Zonder uitleg.

Een website die uitleg nodig heeft, is een slechte website

Hoe lang u ook heeft nagedacht over uw website, hoe mooi het idee oogt op papier, hoe innovatief en uniek het ook is en hoe hard u het ook beschouwt als uw kind: als de gemiddelde bezoeker niet meteen aan de slag kan met het resultaat, dan moet het idee de vuilbak in.

De maker van www.cocoonstudio.com denkt daar duidelijk anders over. Dit is wat een bezoeker te zien krijgt (na uiteraard eerst even een introfilmpje geskipt te hebben).

Mooi. We zullen eens kijken naar de ‘services’.

Zeer interessant. Maar ik kan blijkbaar nergens op klikken. Wat nu gedaan?

Wacht eens even. Wat is dat piepkleine vraagteken links onderaan?

Voilà. Daar is de handleiding voor de website. Handig toch?

Met dank aan lezer Stijn Zwanckaert voor de tip.
Zelf nog iets vreemds gezien op het web? Laat het ons weten.

Artikels die je zeker ook interesseren

Focus: de basis van een goede webpagina

Karl Gilis — Tue, 19 May 2009 09:00:50 +0000

Lezend in ‘Learning to see creatively’, een boek over fotografie van Bryan Peterson, viel het me op hoeveel parallellen er zijn tussen een goede foto en een goede webpagina.

Focus!

Een paar citaten van Peterson:

“Amateurs often end up with pictures that have too many points of interest. The resulting lack of direction and subsequent confusion alienates the eye, forcing it to move on, seeking satisfaction elsewhere.”
“Without order you have chaos. With chaos comes stress. With stress comes the inability to perform well.”

Dat klopt. Ook voor websites.

Slechte webpagina’s hebben te veel focuspunten. Het gevolg: de ogen weten niet waar kijken, en de bezoeker is weer weg naar Google om elders bevrediging te zoeken.

Het is onvoorstelbaar hoe vaak we tijdens gebruikerstesten mensen tilt zien slaan omdat ze niet weten waar ze moeten kijken. Door overvolle pagina’s slagen ze er niet meer in de belangrijke dingen ook daadwerkelijk te zien.

Minder is meer

Voor een opdracht voor een reisbrochure moest Peterson een foto nemen die ‘Amsterdam en Nederland’ moest uitstralen.

Poging 1 (linksboven)
Bloemen, fietsen, een gracht en duifjes (die hij zelf eten gaf om ze in beeld te houden). Resultaat: te veel aandachtspunten. Gepruts.
Poging 2 (rechtsboven)
Duifjes weg en de achtergrond proberen te vereenvoudigen door een voorbijrijdende tram. Resultaat: nog steeds te druk.
Poging 3 (onder)
Een radicaal ander standpunt en focus op de basis: tulpen, de fietsen en op de achtergrond het rustgevende water. Resultaat: een rustige foto met maximale impact.

Focus. Dat is wat elke goede website moet hebben, vanaf de homepage tot de detailpagina. Alleen die dingen in beeld brengen die er echt toe doen.

Net zoals Google op de homepage blijft focussen op de zoekfunctie, ondanks de tientallen tools die ze intussen hebben.

Schaamteloze reclame
AGConsult helpt bedrijven en overheden al sinds 2001 hun online focus vinden.
Benieuwd of wij een beter standpunt kunnen vinden voor uw website? Contacteer ons.

Artikels die je zeker ook interesseren

Horizontale lijnen kunnen wel!

Karl Gilis — Thu, 07 May 2009 10:48:22 +0000

Met dit artikel gaan we een beetje in tegen de blogregels, maar we doen het toch. Het is een reactie op een reactie van een lezer op het artikel ‘Homepage design: horizontale lijn’. Onze argumentatie werd zo lang dat we besloten hebben er een apart artikel van te maken. Wie wil volgen, leest dus best eerst het origineel.

1. Horizontale ankerpunten kunnen wel

Ik kan niet Photoshoppen dus als ik mock-ups maak, is het altijd in html. Dat doe ik al 15 jaar en ik maak toch zo’n 10 ontwerpen per jaar voor niet echt kleine klanten. Het lukt me wel om daarin horizontale lijnen te krijgen, zelfs over ‘kolommen’ heen.

Ik ben blijkbaar niet de enige die dit kan:

www.gva.be (jammer dat ze de lijnen van het middendeel niet af en toe doortrekken naar de rechterkolom, al was het maar imaginair)
www.timesonline.co.uk (volgens mij de inspiratiebron van hierboven, in de beginfase liep daar de rechterbalk wel mee in het gareel van het middendeel)
www.smh.com.au (hier wordt de rechterbalk wel op enkele punten gesynchroniseerd met de lijnen in het midden)

Het kan dus. Dat wil zeggen dat iedereen het kan.
Geen voodoo, geen magie.

2. Het vraagt wat moeite

Dat is meestal zo als je iets echt goed wil doen. Maar als je je website beschouwt als een belangrijk deel van je business, moet je die moeite doen. Anders jaag je bezoekers weg.

Als je die moeite niet wil doen, maak dan als krant 1 pagina met 2 knoppen: ‘Bestel nu je krant in pdf’ en ‘Waar kan je onze krant kopen?’.

3. Die moeite is niet zo groot

Als je de pagina bekijkt, zie je dat er heel wat discipline is bij De Standaard: veel blokjes zijn bijna even groot. Dat is omdat ze veel aandacht besteden aan de titels en de intro’s. Juist omdat ze die moeite doen, kan je wel degelijk naar een beter gestructureerd design overstappen.

Wij hebben niets veranderd aan de inhoud. Alleen de foto bij het artikel over Withof hebben we weggelaten. Voor de rest is dit louter een herschikking van wat er staat.

Vergelijk het origineel met onze versie – opent in nieuw venster

4. Een wit gat is beter dan geen gat

Het wit gat in onze herwerking (bovenaan, boven het artikel over Withof) is er deels omdat we gewerkt hebben met wat er op de screenshot stond. Ook in het origineel is er trouwens een groot wit gat, bij het artikel over Elite Model Look.
Witte gaten kunnen geen kwaad. Ik heb tijdens al die gebruikerstesten en onderzoeken nog nooit een gebruiker een website zien verlaten omdat er wat witruimte was. Ik heb al wel veel mensen de zenuwen zien krijgen en horen vloeken omdat het scherm propvol stond.

5. Huzarenstukjes zijn nodig

Het is door huzarenstukjes dat websites zoals Google, eBay en Amazon zijn wat ze zijn. Grote successen.

Horizontale lijnen in webdesign zou ik niet direct een huzarenstuk noemen, maar het is een kleine moeite die rendeert.

6. Bijna alles kan

Dingen realiseren die zogezegd niet kunnen, maken het verschil. Als een webbouwer, graficus of programmeur zegt ’dat gaat niet’, bedoelt hij doorgaans:

Ik weet niet hoe dat moet.
Pff, dat is wel echt veel werk.
Het systeem is daar niet op voorzien.

Da’s jammer voor hem of haar, maar het wil dus zeggen: het kan wel.

Artikels die je zeker ook interesseren

Homepage design: horizontale lijn

Karl Gilis — Tue, 05 May 2009 17:15:38 +0000

Veel homepages staan overvol. Meestal is dat geen goed idee. Maar soms kan het niet anders. Voor een krantenwebsite is een heel lange homepage bijvoorbeeld eerder norm dan uitzondering.

Een lange homepage hoeft met andere woorden geen doodzonde te zijn. Toch niet als ze er netjes uitziet. Helaas lijkt het vaak alsof de verschillende onderdelen er willekeurig zijn opgegooid. Resultaat: een zootje zonder focuspunten voor het oog.

Horizontale lijn = rust

Er is een simpel element dat een pagina meteen rustiger maakt: de horizontale lijn. Dat kan soms effectief in de vorm van een horizontale lijn, al is het vaak voldoende om verschillende elementen op een imaginaire horizontale lijn te ordenen. Op die manier wordt een pagina meteen rustiger.

Voorbeeld: De Standaard

We hebben de oefening even snel gedaan met de homepage van De Standaard.

Vier belangrijke opmerkingen:

Wij zijn geen designers.
We hebben de bestaande elementen herschikt. Er is niets ‘gedesigned’. Enkel wat knip-, plak- en sleepwerk.
Zelfs het bizarre idee ’3, 4 of 5 kolommen – wat maakt het uit – we knallen ze er door elkaar op’ hebben we behouden.
We hebben de klus geklaard in 5 minuten.

De homepage zoals ze er in het echt uitziet

Na wat knip- en plakwerk

Wat denkt u?

Is het een stap vooruit? Of is het verschil verwaarloosbaar? We horen graag uw mening.

Artikels die je zeker ook interesseren

Zoekresultaten: 8 tips voor de lay-out

Els Aerts — Wed, 08 Apr 2009 15:53:18 +0000

Mensen die je zoekfunctie gebruiken, weten vaak wat ze willen.

Als zij snel vinden wat ze zoeken, is de kans groot dat je van die bezoekers klanten kunt maken.

Maak daarom de pagina met zoekresultaten zo overzichtelijk mogelijk. Vermijd elke onduidelijkheid. Met onze tips zal het aantal mensen dat je site verlaat op de zoekresultatenpagina drastisch verminderen.

1. Laat de zoekbox staan

Laat de zoekbox staan waar hij staat. Zet geen extra zoekbox op de resultatenpagina en verplaats de zoekbox ook niet. Dat zorgt alleen maar voor verwarring.

2. Laat in de zoekbox de zoekterm staan

Laat de zoekterm staan in de zoekbox. Zo kan een bezoeker de zoekopdracht makkelijk verfijnen en eventuele spelfouten snel corrigeren.

3. Begin met duidelijke feedback

Zeg bovenaan op elke resultatenpagina hoeveel resultaten een zoekopdracht heeft opgeleverd en herhaal de zoekopdracht. Doe dat in één zin: “Uw zoekopdracht x heeft y resultaten opgeleverd.”

Doe dit ook als er geen resultaten zijn.

4. Per resultaat titel en omschrijving

Presenteer de resultaten als een lijstje met per resultaat:

Aanklikbare paginatitel.
Korte omschrijving van de inhoud van de pagina. Deze omschrijving begint op een nieuwe lijn en is maximaal 3 regels lang (150 à 200 karakters).

Zowel de paginatitel als de omschrijving zijn enorm belangrijk om de bezoeker te helpen vinden wat hij zoekt.

5. Minstens 20 resultaten per pagina

Aarzel niet om minstens 20 resultaten op een pagina te tonen. De meeste surfers klikken niet door naar de tweede pagina met resultaten, terwijl ze wel naar beneden scrollen.

Als je 20 resultaten toont, is de kans dat ze een resultaat zien dat hen aanstaat, dubbel zo groot dan wanneer je er maar 10 toont.

6. Meer dan 20 resultaten?

Plaats dan onderaan op de pagina een aanklikbaar overzicht van het aantal resultatenpagina’s, zoals bijvoorbeeld Google doet. Op die manier kunnen gebruikers van de ene resultatenpagina naar de andere surfen zonder dat ze daarbij alle tussenliggende pagina’s moeten bekijken. Begin dit pagina-overzicht met een link ‘Vorige’ (behalve op de eerste pagina) en eindig met een link ‘Volgende’ (behalve op de laatste pagina).

7. Aanklikbaarheid

Respecteer zeker op de zoekresultatenpagina de basisregels van de aanklikbaarheid.

Onderlijn links en zet ze in een andere kleur dan je gewone tekst of paginatitels. Zorg dat de kleur voldoende opvalt en goed leesbaar is.
Zorg dat links naar bezochte pagina’s een meer verzadigde kleur hebben dan de gewone links. Zo kan een bezoeker snel zien welke pagina’s hij al bezocht heeft en welke niet. Niets zo frustrerend als ongewild twee keer op dezelfde link te klikken.

8. Schrap ballast

Meer moet er niet op een pagina met zoekresultaten staan. De bezoeker is heus niet geïnteresseerd in hoeveel documenten er in totaal doorzocht zijn, laat staan in hoeveel milliseconden de zoekresultaten geproduceerd werden. Zorg gewoon dat de zoekfunctie zo snel mogelijk werkt en dat de meest relevante resultaten bovenaan staan.

Wie gebruikt eigenlijk de zoekfunctie?

Uit onderzoek blijkt dat maar 5% van de surfers de zoekfunctie op websites gebruiken. Die groep valt grofweg in te delen in 3 groepen

Mensen die zeer goed weten wat ze zoeken (bijvoorbeeld mensen die de productnaam kennen)
Techneuten en ingenieurs
De meeste surfers gebruiken de zoekfunctie pas als ze via de navigatie of de homepage niet direct vinden wat ze zoeken. Als laatste uitweg dus.

Lees zeker ook volgende artikels

Meer weten?

Tijdens onze Usability workshop geven we heel wat tips over een efficiënte zoekfunctie. De ideale manier om te weten hoe je website beter kan.