Heeft je website een zoekfunctie, dan is het belangrijk dat bezoekers ze meteen herkennen als de zoekfunctie. En dat ze weten hoe het ding werkt. Erg moeilijk is dat niet, al toonden we in onze vorige screenshot vrijdag dat sommige webbouwers het graag moeilijk maken. Daarom deze tips voor een goede zoekinterface.
Voor wie gelden deze tips?
Onderstaande tips gelden voor 99% van alle websites. Alleen wanneer zoeken en vinden tot de core van jouw business behoort, mag de zoekfunctie complexer. We hebben het dan bijvoorbeeld over jobsites, immosites, zoekertjessites en sommige e-commerce websites.
Zoekinterface = invulveld + knop
De basisregel is erg eenvoudig: de zoekinterface bestaat uit een invulveld met daarachter een knop ‘Zoeken’. Een zoekfunctie zonder knop is leuk voor webbouwers en webprofessionals, maar niet alle surfers weten dat op ‘Enter’ drukken de zoekfunctie activeert.
Invulveld: leeg en voldoende groot
Basisregels voor het invulveld:
- Minstens 25 karakters groot, zodat er zonder problemen 2 woorden zichtbaar zijn.
- Uiteraard moet je er meer dan 25 karakters in kunnen typen. Het aantal karakters moet onbeperkt zijn. Maar die vallen dan wel ‘buiten beeld’.
- Standaard is het invulveld leeg. Zet er dus geen tekst à la ‘Trefwoord’ of ‘Zoek hier’ in. Mensen weten heus wel waarvoor een zoekfunctie dient.
- Herkenbaar als invulveld. Gebruik een witte of op zijn minst lichte achtergrond en omlijn het invulveld.
- Wie frivool wil doen, mag de hoeken afronden. Dat is zowat de enige creativiteit die je je kan veroorloven. Toch als je een goede zoekfunctie wilt.
Knop: hoe duidelijker, hoe beter
- De knop lijkt qua vorm best zo veel mogelijk op een standaardknop.
- Effen, liefste lichte achtergrondkleur. Alles tussen wit en grijs werkt uitstekend.
- Redelijk hoekig. Wie echt wil, mag afronden (joepie, alweer vrijheid…).
- Omlijn de knop.
- Voor de criticasters die dat overdreven vinden: als grafisch uitgewerkte knoppen veel beter zouden werken dan standaardknoppen, hadden Google of eBay de standaard zoekknop al lang vervangen.
- Geef de knop een duidelijk opschrift: ‘Zoek’ of ‘Zoeken’. Nietszeggende opschriften als ‘Go’ of symbooltjes als een vergrootglas of een pijltje helpen de bezoeker niet.
Zoekfunctie: aankondigen is overbodig
Als je deze regels volgt, is je zoekfunctie duidelijk herkenbaar. Het is dan ook overbodig om voor de zoekfunctie nog iets te zetten als ‘Zoek:’ of ‘Zoekfunctie:’. Zo win je meteen ook wat witruimte.
Ook ‘Enter’ activeert de zoekfunctie
Omdat je website er niet alleen is voor de ‘gemiddelde surfer’, moet je er ook voor zorgen dat de ervaren surfer vlot met je zoekfunctie kan werken. Zorg dat de zoekfunctie start wanneer je na het ingeven van de zoekterm de ‘Enter’-toets gebruikt.
Geavanceerd zoeken: weg ermee
En geavanceerd zoeken dan? Tenzij je site draait rond immo, jobs, zoekertjes of je duizenden producten aanbiedt, volstaat een eenvoudig invulveld met knop ‘Zoeken’. Geloof ons: voor de gemiddelde surfer is het doorworstelen van een geavanceerde zoekfunctie even makkelijk als het in handstand opfietsen van de Mont Ventoux.
Joggink says
Niet volledig akkoord, vooral met volgende 2 punten:
Zoekfunctie: aankondigen is overbodig:
zoiezo moet ieder formulier voorzien zijn van een fieldset met legend, en iedere input van een label, thans volgens de WAI (w3.org). Met css kun je deze wel visueel niet tonen, maar soit…
Ook ‘Enter’ activeert de zoekfunctie
Da’s een feit, maar niet voor de reden die je opnoemt. Niet iedereen beschikt over een muis, of over een toestenbord. Usability is niet enkel voor mensen die kunnen zien én beschikken over een goede motoriek. Visueel of motorisch gehandicapten, mensen met een alternatief media moeten ook gemakkelijk kunnen zoeken…
Karl Gilis says
@Joggink
1. Aankondigen: overbodig?
Dan zou de zoekfunctie van Google het WAI aan zijn laars lappen? Als ik goed ben ingelicht, is het gebruik van het title-attribuut evenwaardig aan een label. Dat wil volgens mij zeggen dat het label niet verplicht is. Labels raden we bij formulieren normaal gezien altijd aan, bij de zoekfunctie niet omdat het in die kleine oppervlakte redundant is met de title en het opschrift van de knop.
Voor de niet-techneuten:
– Het label is wat doorgaans voor het invulveld staat om duidelijk te maken waarvoor dat invulveld dient, bijvoorbeeld ‘Voornaam en naam’. In de html code moet dat label verwijzen naar het overeenstemmende formulierveld, waardoor duidelijk is welk label voor welk veld dient (‘label for’).
– De title is een stukje html code dat bij het veld wordt gevoegd. Dat maakt voor blinden duidelijk waarvoor het veld dient. Ziende mensen zien zo’n title verschijnen als tooltip.
Zie ook http://www.anysurfer.be/nl/… en http://www.anysurfer.be/nl/…
2. Enter
Je hebt gelijk dat dit voor blinden en motorisch gehandicapten een must is. Of het daarom meteen ook dé reden is, vind ik te kort door de bocht.
In onze opleidingen zien we voortdurend dat heel veel webverantwoordelijken (jammer genoeg) absoluut niet wakker liggen van blinden en gehandicapten. Als wij andere argumenten (zoekrobotvriendelijkheid, bruikbaarheid, …) aandragen voor dezelfde regels, staan ze er echter wel voor open. Daarom dus dat we in onze teksten vaak andere argumenten gebruiken om dezelfde boodschap te verkondigen.
Jonathan says
Akkoord met de regel “less is more” : zo veel mogelijk overbodige info uit de layout halen. Zo ook bij een zoekformulier.
Aan de andere kant zie ik niet in waarom zaken als “Vul jouw zoekterm in” en een icoontjs storend zouden kunnen gaan werken.
Voorbeeld: http://www.netlash.com/
Naar mijn gevoel draagt een klein subtiel icoontje vaak bij tot een snellere herkenbaarheid (een beeld zegt meer dan 1000 woorden), maar uiteraard moet dit subtiel door de designers verwerkt worden.
Concreet voor dit geval, vind ik dit niet storend.
Jouw mening ?
Karl Gilis says
@Jonathan
1. Tekst in het zoekveld zorgt dat het zoekveld minder hard opvalt als een invulveld (er staat immers al tekst in). Een leeg invulveld valt gewoon harder op.
2. Een beeld zegt meer dan 1.000 woorden. Dat is dus niet altijd waar. Een icoon zegt veel minder dan tekst als Home, Print, Zoek etc. Als aanvulling op de tekst kan een klein icoontje eventueel, maar zeker nooit enkel een icoontje.
Jonathan says
Akkoord
Aanvulling bij punt 2:
Het is inderdaad beter om een combinatie te maken van tekst + icoon.
Een icoon apart ‘zou’ tot verwarring kunnen leiden.
(“Wat betekent dit icoontje ?”)
Misschien was ik hier dus niet duidelijk genoeg.
Stel de tekst: “Mijn inbox”
Sites dit dit hebben, zoals communities, zullen deze tekst (link) wel op verschillende plekken in de website beschikbaar maken.
Het lijkt me dan beter om deze tekst te laten aanvullen met een klein subtiel maar herkenbaar icoontje.
Wanneer gebruikers de pagina ‘scannen’ is het voor hen eenvoudiger om dit icoontje te zien, dan de tekst “mijn inbox” te moeten lezen.
* het moet passen in het design
* het moet bijdragen tot de scanbaarheid van een pagina om terugkomende elementen vlotter te vinden (inbox, favorieten, printen, zoeken, …)