Les boutons de réservation qui fonctionnent: texte, couleur et emplacement

Un bouton de réservation invisible est l'erreur la plus coûteuse d'un site hôtelier. Pas un temps de chargement lent, pas de mauvaises photos, pas d'avis manquants. Un client qui veut réserver et ne peut pas rapidement voir comment le faire retourne sur Booking.com. Cette réservation vous coûte 15 à 25 pour cent de commission, et c'était évitable.

Pourquoi le bouton de réservation se trompe souvent

La plupart des sites hôtelier sont construits avec attention à l'atmosphère, au texte et aux photos. Le bouton de réservation est ajouté plus tard comme une considération technique secondaire. Le résultat est un bouton qui se trouve dans la barre de menu, de la même couleur que le reste de la navigation, avec un texte comme « Réserver » dans une typographie qui ne se démarque pas.

Les clients ne cherchent pas. Ils scannent. Ils déplacent leur œil sur la page en cherchant quelque chose qu'ils reconnaissent comme « ici je peux réserver ». Si ce n'est pas là immédiatement, ils n'arrêtent pas pour parcourir plus longtemps, ils ferment l'onglet.

Trois choses déterminent si un appel à l'action (le bouton qui invite à agir) fonctionne: le texte, la couleur et l'emplacement. Les trois doivent être justes. Un texte parfait au mauvais endroit ne livre rien. Une couleur frappante avec un texte vague non plus.

Le texte: ce qui est sur le bouton

C'est le domaine où la plupart des hôtels gagnent le plus, car les textes de bouton standards sur les sites hôtelier sont presque universellement mauvais.

« Vérifier la disponibilité » fonctionne si bien car cela correspond à ce que le client fait à ce moment: voir si votre hôtel est disponible à ses dates. Cela ne demande rien, cela propose quelque chose. Une fois que le client est dans le module de réservation, celui-ci prend le relais.

« Réserver directement et économiser » ne fonctionne que si vous offrez réellement quelque chose en échange. Une réduction de 5 pour cent hors taxe, une boisson gratuite à l'arrivée ou une annulation gratuite que la plateforme n'offre pas. Dites « économiser » quand le prix est identique à Booking.com et vous endommagez la crédibilité. Mettez l'avantage à côté du bouton et comment le rendre crédible c'est expliqué dans Confiance et urgence sur votre page de réservation.

Évitez les textes génériques comme « Cliquez ici » ou « Aller à la page de réservation ». Ces textes ne disent pas au client ce qu'il obtient. Ils ralentissent la décision au lieu de l'accélérer.

La couleur: se démarquer sans crier

Le bouton de réservation doit être le seul endroit de votre page où la couleur d'accent apparaît. Si cette couleur apparaît aussi dans votre logo, bas de page et sous-titres, elle n'est plus frappante.

Les règles sont simples:

• Choisissez une couleur avec un contraste suffisant avec le fond. WCAG 2.1 exige un rapport de contraste d'au moins 4.5:1 pour le texte sur un bouton. Ce n'est pas un choix esthétique mais une question de lisibilité.
• Utilisez la couleur d'accent uniquement pour le bouton de réservation et peut-être un surbrillance. Pas pour les titres, pas pour les liens dans le texte.
• Sites sombres: boutons clairs (blanc, jaune, orange). Sites clairs: boutons sombres ou vifs (vert, rouge, bleu foncé).
• Assurez-vous que le texte sur le bouton lui-même est lisible. Le texte blanc sur un bouton jaune clair n'est pas lisible.

L'orange convertit bien sur de nombreux sites, mais pas parce que l'orange en soi fonctionne. Elle convertit parce que la plupart des sites hôtelier ont une palette de couleurs neutre ou froide, et l'orange comme seule couleur chaude se démarque là.

L'emplacement: au-dessus de la ligne de flottaison puis à nouveau

Au-dessus de la ligne de flottaison c'est ce que le visiteur voit sans faire défiler. Sur un écran laptop moyen c'est environ 600 à 700 pixels de hauteur. Sur mobile moins. Si le bouton de réservation n'apparaît qu'après faire défiler, il est invisible pour une grande partie de vos visiteurs.

Le bouton doit apparaître à trois endroits:

1. Dans la barre de navigation, toujours visible. La navigation collante (qui défile avec) garde le bouton constamment à la vue. Le bouton dans la navigation peut être légèrement plus petit, mais doit toujours se démarquer par la couleur.
2. Au-dessus de la ligne de flottaison, dans le premier écran. Pas caché dans un coin, mais central ou en évidence à droite, sur ou juste sous les images d'ambiance.
3. Après chaque description de chambre ou section de prix. Le client qui a lu une chambre qui leur convient veut réserver à ce moment. Si le bouton n'est pas visible alors, il fait défiler plus loin et perd l'impulsion.

Sur des pages plus longues (avec plusieurs types de chambres, offres forfaitaires ou arrangements) le bouton peut apparaître quatre ou cinq fois. Ce n'est pas du spam, c'est un design attentionné.

Mobile: plus grand que vous le pensez

Sur mobile personne ne clique avec un curseur, mais avec un pouce. La zone tactile d'un pouce moyen est grande, mais sa précision est basse. Un bouton qui a l'air bien sur desktop est souvent trop petit sur téléphone ou assis trop près d'autres boutons.

Suivez ces minimums:

• Hauteur minimum du bouton: 48 px
• Largeur minimum du bouton: 120 px, de préférence large au bord de l'écran
• Distance par rapport aux autres éléments cliquables: au moins 8 px

Vérifiez aussi si le bouton est toujours visible dans votre navigation mobile. Sur de nombreux sites le bouton de réservation disparaît dans un menu hamburger sur mobile. Le client doit alors appuyer deux fois pour le trouver: une fois pour ouvrir le menu, une fois sur le bouton. Chaque étape supplémentaire coûte des réservations.

Les erreurs courantes alignées

• Bouton de la même couleur que la navigation. Le client ne voit aucun élément d'action, juste un deuxième lien de menu.
• Texte « Réserver » ou « Réserver maintenant » sans contexte. Trop définitif pour des clients toujours en exploration.
• Bouton uniquement en bas de la page. La moitié de vos clients ne défile pas si loin.
• Sur mobile le bouton disparaît dans le menu hamburger. La visibilité chute fortement.
• La couleur du bouton ne change pas au survol. Un bouton qui change au survol confirme qu'il est cliquable. Sans cet effet cela ressemble parfois à un design plat.
• Différents textes de bouton tout au long de la page. « Réserver maintenant » en haut, « Réserver » à mi-chemin, « Vérifier la disponibilité » en bas confond le client. Choisissez un texte et tenez-vous-y.

Test A/B sur un petit site

Le test A/B formel, montrant deux variantes au même moment à différents visiteurs, nécessite beaucoup de trafic. Pour la plupart des petits sites hôtelier c'est des milliers de visiteurs par variante, par variante séparément. Vous ne l'atteindrez probablement pas.

Ce que vous pouvez faire: un test séquentiel. Utiliser deux semaines de variante A (texte et couleur du bouton actuel), puis deux semaines de variante B (texte ou couleur modifiés), et comparer le pourcentage de visiteurs qui passent au module de réservation. Pas une preuve statistique, mais cela vous donne une direction. Si la variante B obtient constamment de meilleurs résultats, conservez-la.

Améliorez vos chances d'un résultat équitable en changeant une seule chose à la fois. Texte ou couleur, jamais les deux dans le même test.

Le bouton est une partie, pas la solution

Un bon bouton de réservation augmente vos réservations directes, mais il ne fonctionne pas seul. Le client doit d'abord croire que réserver auprès de vous est plus sûr et moins cher que via la plateforme, puis il doit traverser un formulaire qui ne l'effraie pas. Un bouton parfait au-dessus d'une page pleine de doute livre peu.

Donc regardez votre site comme une chaîne. Les photos et la promesse de prix amènent le client à cliquer, le bouton capture cet impulsion, le formulaire le complète. Si un lien échoue, la réservation s'écoule toujours vers Booking.com. Changer le texte du bouton de « Vérifier la disponibilité » à « Réserver directement et économiser » n'aide pas si le client abandonne à mi-chemin dans un formulaire lent ou manque de confiance.

Pour aborder la chaîne entière au lieu d'éléments uniques, commencez par L'optimisation de la conversion sur votre site hôtelier. Là vous voyez comment le bouton, la confiance, le formulaire et le prix ensemble définissent votre pourcentage de réservation, et quel ordre apporte le plus de gain.

Ce que vous pouvez faire maintenant

Allez sur votre propre site et vérifiez trois choses: Le bouton de réservation est-il visible sans faire défiler? A-t-il une couleur qui n'apparaît nulle part ailleurs sur la page? Et a-t-il un texte qui invite plutôt que de repousser?

Si l'un des trois n'est pas juste, vous avez une amélioration concrète que vous pouvez faire aujourd'hui.

Voulez-vous aller plus loin: lisez Les cinq erreurs sur 80 pour cent des sites hôtelier néerlandais pour le tableau plus grand, ou vérifiez Neuf erreurs dans votre formulaire de réservation pour ce qui se passe après que le client clique sur le bouton. Voulez-vous examiner votre site entier pour voir ce qui fonctionne et ce qui ne fonctionne pas, Ce qu'un site hôtelier doit minimalement avoir vous aide à progresser. Un aperçu de tous les articles autour des réservations directes se trouve dans la Section conversion site web. Calculez ce que la meilleure conversion apporte avec la Calculatrice d'économies, ou faites-la implémenter via Création de site web.