Boekingsknoppen die werken: tekst, kleur en plek

Een onzichtbare boekingsknop is de duurste fout op een hotelsite. Niet een trage laadtijd, niet slechte foto's, niet het ontbreken van reviews. Een gast die wil boeken en niet snel genoeg ziet hoe dat moet, gaat terug naar Booking.com. Die boeking kost je 15 tot 25 procent commissie, en dat was vermijdbaar.

Waarom de boekingsknop zo vaak fout gaat

De meeste hotelsites zijn gebouwd met aandacht voor sfeer, tekst en foto's. De boekingsknop is er later bijgekomen, als een technische bijzaak. Het resultaat is een knop die in de menubalk staat, dezelfde kleur heeft als de rest van de navigatie, en de tekst "Reserveren" draagt in een lettertype dat niet opvalt.

Gasten zoeken niet. Ze scannen. Ze bewegen hun oog langs de pagina op zoek naar iets dat ze herkent als "hier kan ik boeken". Als dat er niet meteen is, scrollen ze niet langer, maar sluiten ze het tabblad.

Drie dingen bepalen of een CTA (call to action, de knop die aanzet tot actie) werkt: de tekst, de kleur en de plek. Alle drie moeten kloppen. Een perfecte tekst op de verkeerde plek levert niets. Een opvallende kleur met een vage tekst ook niet.

De tekst: wat er op de knop staat

Dit is het onderdeel waar de meeste hotels het meeste winnen, want de standaardteksten op hotelsites zijn bijna universeel slecht.

"Check beschikbaarheid" werkt zo goed omdat het aansluit bij wat de gast op dat moment doet: kijken of jouw hotel beschikbaar is op zijn data. Het vraagt niets, het biedt iets. Zodra de gast in de boekingsmotor zit, neemt die het over.

"Boek direct en bespaar" werkt pas als je er ook iets tegenover stelt. Een korting van 5 procent zonder btw, een gratis drankje bij aankomst, of flexibele annulering die het platform niet biedt. Zeg je "bespaar" terwijl de prijs hetzelfde is als op Booking.com, dan schaadt het je geloofwaardigheid. Het voordeel naast de knop zetten en hoe je dat geloofwaardig brengt, lees je in vertrouwen en urgentie op je boekingspagina.

Vermijd generieke teksten als "Klik hier" of "Ga naar boekingspagina". Die teksten zeggen de gast niet wat hij krijgt. Ze vertragen de beslissing in plaats van die te versnellen.

De kleur: opvallen zonder te schreeuwen

De boekingsknop hoort de enige plek op je pagina te zijn waar de accentkleur terugkomt. Als die kleur ook in je logo, je footer en je subtitels zit, is hij niet meer opvallend.

De regels zijn eenvoudig:

• Kies een kleur die voldoende contrasteert met de achtergrond. WCAG 2.1 schrijft een contrastverhouding van minimaal 4,5:1 voor tekst op een knop. Dat is geen esthetic keuze maar leesbaarheid.
• Gebruik de accentkleur alleen voor de boekingsknop en eventueel voor een enkele highlight. Niet voor koppen, niet voor links in de tekst.
• Donkere sites: lichte knoppen (wit, geel, oranje). Lichte sites: donkere of felle knoppen (groen, rood, donkerblauw).
• Zorg dat ook de tekst op de knop zelf leesbaar is. Witte tekst op een lichtgele knop is onleesbaar.

Oranje converteert op veel sites goed, maar niet omdat oranje op zichzelf werkt. Het converteert goed omdat de meeste hotelsites een neutrale of koele kleurpalette hebben, en oranje daar als enige warme kleur in opvalt.

De plek: boven de vouw en daarna opnieuw

Boven de vouw is wat de bezoeker ziet zonder te scrollen. Op een gemiddeld laptopscherm is dat zo'n 600 tot 700 pixels hoog. Op mobiel minder. Als de boekingsknop pas na het scrollen verschijnt, is hij voor een groot deel van je bezoekers onzichtbaar.

De knop hoort op drie plekken terug te komen:

1. In de navigatiebalk, altijd zichtbaar. Sticky navigatie (die meescrollt) houdt de knop continu in beeld. De knop in de navigatie mag iets kleiner zijn, maar moet nog steeds opvallen qua kleur.
2. Boven de vouw, in het eerste scherm. Niet verstopt in een hoek, maar centraal of prominent rechts, op of direct onder de sfeerbeelden.
3. Na elke kameromschrijving of sectie met prijzen. De gast die een kamer heeft gelezen die bij hem past, wil op dat moment boeken. Als de knop dan niet in beeld is, scrolt hij verder en raakt de impuls kwijt.

Op langere pagina's (met meerdere kamertypes, pakketaanbod of arrangementen) mag de knop vier of vijf keer terugkomen. Dat is geen spam, dat is begrijpend ontwerp.

Mobiel: groter dan je denkt

Op mobiel klikt niemand met een cursor, maar met een duim. De tikzone van een gemiddelde duim is groot, maar de precisie ervan is laag. Een knop die op desktop er goed uitziet, is op telefoon vaak te klein of staat te dicht op andere knoppen.

Hanteer deze ondergrenzen:

• Minimale knoophoogte: 48 px
• Minimale knoopbreedte: 120 px, bij voorkeur breed tot aan de rand van het scherm
• Tussenruimte met andere klikbare elementen: minimaal 8 px

Controleer ook of de knop in de mobiele versie van je navigatie nog zichtbaar is. Op veel sites verdwijnt de boekingsknop in een hamburger menu op mobiel. Dan moet de gast twee keer tikken om hem te vinden: een keer om het menu te openen, een keer op de knop zelf. Elke extra stap kost je boekingen.

Veelgemaakte fouten op een rij

• Knop in dezelfde kleur als de navigatie. De gast ziet geen actie-element, maar een tweede menulink.
• Tekst "Reserveren" of "Boek nu" zonder context. Te definitief voor gasten die nog aan het kijken zijn.
• De knop staat alleen onderaan de pagina. De helft van de gasten scrollt niet zo ver.
• Op mobiel verdwijnt de knop in het hamburgermenu. Zichtbaarheid daalt fors.
• De kleur van de knop wijzigt niet bij hoveren. Een knop die op hover verandert, bevestigt dat hij klikbaar is. Zonder dat effect ziet hij er soms uit als een vlak.
• Verschillende knopteksten door de pagina. "Boek nu" bovenaan, "Reserveer" halverwege en "Check beschikbaarheid" onderaan verwarren de gast. Kies een tekst en houd die aan.

A/B-testen op een kleine site

Formeel A/B-testen, waarbij je twee varianten tegelijk toont aan verschillende bezoekers, vereist veel verkeer. Voor de meeste kleine hotelwebsites zijn dat duizenden bezoekers per variant, per variant apart. Dat haal je waarschijnlijk niet.

Wat je wel kunt doen: een sequentiele test. Gebruik twee weken variant A (huidige knoptekst en kleur), dan twee weken variant B (gewijzigde tekst of kleur), en vergelijk het percentage bezoekers dat doorklikt naar de boekingsmotor. Geen statistisch bewijs, maar het geeft je richting. Als variant B structureel beter scoort, houd je die aan.

Vergroot je kans op een eerlijk resultaat door maar een ding tegelijk te wijzigen. Tekst of kleur, nooit allebei in dezelfde test.

De knop is een onderdeel, niet de oplossing

Een goede boekingsknop verhoogt je directe boekingen, maar hij staat niet op zichzelf. De gast moet eerst geloven dat boeken bij jou veiliger en voordeliger is dan via het platform, en daarna een formulier doorlopen dat hem niet afschrikt. Een perfecte knop boven een pagina vol twijfel levert weinig op.

Bekijk je site daarom als een keten. De foto's en de prijsbelofte zetten de gast aan tot klikken, de knop vangt die impuls, het formulier maakt het af. Faalt een schakel, dan lekt de boeking alsnog weg naar Booking.com. Een knoptekst van "Check beschikbaarheid" naar "Boek direct en bespaar" wijzigen helpt niet als de gast halverwege afhaakt op een traag formulier of een gebrek aan vertrouwen.

Wil je de hele keten aanpakken in plaats van losse elementen, begin dan bij conversie-optimalisatie voor je hotelsite. Daar zie je hoe knop, vertrouwen, formulier en prijs samen je boekingspercentage bepalen, en welke volgorde de meeste winst oplevert.

Wat je nu kunt doen

Ga naar je eigen site en check drie dingen: Is de boekingsknop zichtbaar zonder te scrollen? Heeft hij een kleur die nergens anders op de pagina terugkomt? En staat er een tekst op die uitnodigt in plaats van afstuurt?

Als een van de drie niet klopt, heb je een concrete verbetering die je vandaag nog kunt doorvoeren.

Wil je daarna verder: lees de vijf fouten die op 80 procent van de Nederlandse hotelsites staan voor het bredere beeld, of kijk bij negen fouten in je boekingsformulier voor de stap nadat de gast op de knop heeft geklikt. Wil je ook de rest van je site nalopen op wat werkt en wat niet, dan helpt wat een hotelwebsite minimaal nodig heeft je op weg. Een overzicht van alle artikelen rond directe boekingen vind je in de hub over website-conversie. Bereken wat betere conversie je oplevert met de besparingscalculator, of laat het uitvoeren via website bouwen.