Goed zoekveld

Bijna elke website, inclusief die van mij, heeft een zoekformulier. Veel mensen kiezen direct het zoekformulier en laten de prachtig opgestelde navigatie­menu’s links liggen. Zoekvelden zijn prettig omdat ze overal vergelijkbaar er uitzien en vergelijkbaar werken, dus grote consistentie en herkenbaarheid. Je typt een paar woorden en je vindt na een paar clicks de informatie die je zoekt. Als het goed gaat natuurlijk, want anders ben je als bezoeker snel vertrokken naar Google.

Daarnaast geeft een zoekveld houvast voor bezoekers die wel met behulp van de menu’s navigeren. De bezoeker denkt (onbewust): Als ik er niet snel uitkom kan ik altijd nog de zoekfunctie gebruiken. Daardoor durft de bezoeker eerder zijpaden te bewandelen. Die bezoeker zou wel eens uw volgende klant kunnen zijn. Zo’n belangrijk onderdeel als het zoekformulier moet je dus met zorg vormgeven. Denk daarom goed na over plaatsing, vorm, veldgrootte, veldtype, placeholder, knop, etiket en kleurgebruik. Deze elementen van het zoekveld ga ik wat dieper op in en vertel erbij wat het dilemma is, wat een goede keuze kan zijn en waarom dat zo is.

Plaats zoekveld naast of onder logo

Het zoekformulier zie je bij veel websites rechtsboven omdat een bezoeker met zijn ogen eerst de bovenkant scant. Het stelt de bezoeker gerust als hij de zoekmogelijkheid herkent. De andere kant, linksboven is een slechte plek omdat daar altijd een bedrijfslogo staat. Zet het zoekformulier daarom rechtsboven, maar niet hoger dan het logo. Het logo is het beeldmerk en een herkenningspunt, een soort psychisch ankerpunt. Het is de plek waar de ogen-scan begint. Het geeft vertrouwen dat hij of zij op de juiste website is gekomen. Na het scannen van het logo gaan de ogen automatisch verder, verder naar rechts of naar beneden, maar niet naar boven. Als ontwerper moet je het scannen door de ogen van de bezoeker goed en plezierig leiden.

Maak zoekveld 27 karakters of langer

Het zoekveld zelf moet royaal ogen. Als bezoeker wil je al je zoektermen in één keer kunnen overzien. Jakob Nielsen, bekend publicist over dit onderwerp, vond in één van z’n usability studies dat zoekvelden op het Internet — gemiddeld 18 karakters — veel te klein zijn. Een veel beter aantal is 27 karakters. Hiermee vang je 90% van alle zoekacties af. Nog breder is beter maar ga niet te ver natuurlijk. Het moet er wel als een zoekveld blijven uitzien.

Gebruik ronde hoeken voor afbakening

Een zoekformulier geeft een totaal ander resultaat dan een veld waarmee je je voor een nieuwsbrief aanmeldt en toch lijken de velden hiervan te vaak op elkaar. Omdat een zoekveld zo belangrijk is heeft Apple besloten om alle zoek­velden in Mac OS X extra op te laten valen door de linker en rechterkant af te ronden en halfbol te maken. Steeds vaker zie ik deze oplossing op het web terug. Een prima ontwikkeling.

Gebruik geen placeholder

Een placeholder is vooraf ingevulde tekst in het zoekveld. Het beschrijft hoe de zoekfunctie werkt, bijvoorbeeld: Type hierin uw zoektermen. Pas als je met je muis binnen het zoekveld klikt verdwijnt de placeholder en kan je je zoektermen intypen. Ik adviseer geen placeholders te gebruiken, omdat bezoekers een leeg wit veld verwachten, zonder opmerkingen erin. Het brengt de bezoeker in verwarring want een zoekveld met placeholder lijkt minder op een zoekveld. Daarnaast geeft de leegte van een wit veld een helder signaal af, namelijk dat je erin kunt typen. Er zijn absoluut uitzonderingen waar een placeholder juist wel verstandig is, maar daar moet je dan wel goede redenen voor hebben.

Inspireer met etiket

Een etiket (label) direct links of boven het zoekveld is niet per se nodig. Sommige webbouwers gebruiken een etiket om aan te geven dat het hier om een zoekformulier gaat. Beter is om een duidelijke ‘zoekknop’ te gebruiken. Als je voldoende ruimte hebt en je wilt per se het zoekformulier verder aankleden dan kan je, om te inspireren, een voorbeeld als label plaatsen, zoals: ‘Zoekvoorbeelden: usability; verwachting’. Zorg er dan wel voor dat de zoekvoorbeelden relevant zijn voor jouw website. Als bonus kan je de voorbeelden klikbaar maken zodat gebruikers geen tekst hoeven in te voeren.

Gebruik ‘Zoek’ voor knoptekst

In Microsoft Windows hebben bijna alle meldingen een ‘Annuleer’ en ‘Ok’ knop. Heel irritant want je moet altijd het hele bericht lezen en begrijpen om te weten wat een ‘Ok’ knop zal doen. Zorg daarom dat een knop een actie beschrijft en dat geldt niet alleen voor zoekformulieren. Gebruik altijd werkwoorden als knopteksten. De knopteksten ‘Zoek’, ‘Vind’, en ‘Ga’ zie ik vaak in zoekformulieren. Ik adviseer ‘Zoek’ te gebruiken omdat dat het best beschrijft welke actie je ermee uitvoert. De knoptekst ‘Ga’ kan van alles betekenen en is niet specifiek. ‘Vind’ is ook niet geschikt omdat het nog helemaal niet vast staat dat je iets zult vinden.

Kies lichte achtergrond en donkere rand

Mensen zijn ermee vertrouwd om met donkere inkt op een witte achtergrond te schrijven. Wijk hier niet van af als je een opvallend en duidelijk zoek­formulier wilt hebben. Kies daar rondom een donkere rand zodat het zoekveld goed opvalt. Een rand is een sterke scheiding tussen vlakken. Veel sterker dan een verschil in achtergrondkleur.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.