Un site internet orienté conversion aide le visiteur prêt à réserver à le faire sans détour : il trouve la barre de dates dès le premier écran, comprend ce que déclenche le bouton, voit l’hébergement, les avis et les conditions avant de s’engager, et peut tout faire du bout du pouce sur son téléphone. Cet article passe en revue six éléments de webdesign à vérifier sur un site d’hôtel, de chambres d’hôtes ou de location saisonnière, chacun illustré par un site publié, puis explique comment tester sans beaucoup de visiteurs.
Site internet orienté conversion : de quoi parle-t-on ?
La conversion, c’est le moment où un visiteur fait ce que vous attendez de lui : lancer une recherche de dates, réserver, demander une disponibilité, téléphoner. Un site internet orienté conversion est donc un site dont la mise en page, les textes et les boutons sont choisis pour rendre cette étape évidente, rapide et rassurante. Il ne s’agit ni de bousculer le visiteur ni de surcharger la page de fenêtres surgissantes : il s’agit de retirer ce qui l’empêche d’aller au bout.
Le taux de conversion mesure la part des visiteurs qui y arrivent. Pourquoi un site très visité peut convertir peu, et comment lire ce taux, c’est le sujet de l’article Pourquoi votre site ne convertit pas malgré un bon taux de fréquentation. Ici, on regarde ce que le webdesign d’un site d’hôtel peut changer, élément par élément.
| Élément | La question à se poser | Erreur fréquente |
|---|---|---|
| 1. La barre de réservation | Le visiteur peut-il lancer une recherche de dates dès le premier écran ? | Barre reléguée en bas de page, trop de champs, calendrier qui laisse choisir un jour passé. |
| 2. Le bouton de réservation | Voit-on en une seconde l’action principale et ce qu’elle déclenche ? | Plusieurs boutons de même poids, libellé vague (« En savoir plus »). |
| 3. La page hébergement | Les faits qui décident (couchages, voyageurs, surface, équipements) se lisent-ils sans défiler ? | Photos génériques, informations clés enterrées, aucun bouton sur la page. |
| 4. La preuve | Un visiteur qui hésite trouve-t-il un avis réel, avec sa provenance, près du bouton ? | Avis sans provenance, ou aucun avis visible. |
| 5. Le tarif et les conditions | Sait-on, avant la dernière étape, ce qui s’ajoute au tarif et comment annuler ? | Frais découverts au moment de payer. |
| 6. Le mobile | Le bouton principal reste-t-il à portée de pouce sans gêner la lecture ? | Barre fixe trop haute, zones tactiles trop petites, page qui saute au chargement. |
1. La barre de réservation d’un site d’hôtel : dates, voyageurs, un bouton
Son rôle. La barre de réservation est le raccourci du visiteur qui sait déjà ce qu’il veut : des dates, un nombre de voyageurs, et la recherche démarre. Placée sur le premier écran de l’accueil, elle lui évite de chercher un menu. Ce premier écran compte : dans une étude sur le défilement publiée en 2018, Nielsen Norman Group (NN/g) relevait que les visiteurs passaient environ 57 % du temps qu’ils consacrent à une page sur la partie visible sans défiler.
La bonne pratique.
- Peu de champs : arrivée, départ, voyageurs, un bouton. Chaque champ en plus ralentit le visiteur.
- Un bouton qui dit ce qu’il fait : « Rechercher » ou « Voir les disponibilités » plutôt que « Valider ».
- Un calendrier qui guide. NN/g, dans ses recommandations sur les champs de date, juge le calendrier particulièrement utile pour choisir une plage de dates, à réserver aux dates proches (moins d’un an), et recommande d’empêcher les dates illogiques (un départ avant l’arrivée, une date passée) en les désactivant et en les grisant. Un message qui nomme l’étape en cours (« Choisissez une date d’arrivée ») évite l’hésitation.
- Une version téléphone pensée pour le pouce : champs empilés ou sur deux étages, bouton pleine largeur.
L’erreur fréquente. Reléguer la barre dans une page « Réservation » que l’on doit trouver, empiler des champs facultatifs, ou proposer un calendrier qui ne distingue pas les jours impossibles : le visiteur découvre l’erreur une fois qu’il a cliqué.
Sur des sites publiés. Le webdesign d’un site d’hôtel peut placer cette barre de deux manières. Sur Chez MV, appart hôtel à La Ferté-Gaucher (première capture), elle se pose au pied de la photo d’accueil : Arrivée, Départ, Voyageurs, puis « Rechercher ». Sur l’Aire Naturelle La Folie, à Lagnes près d’Avignon (seconde capture), elle ajoute les enfants et se termine par « Chercher ».
Le calendrier de l’Aire Naturelle La Folie applique les deux conseils ci-dessus : les jours passés sont grisés, et un message annonce l’étape.
2. Le bouton de réservation : une action principale, nommée clairement
Son rôle. Dire au visiteur quelle est la prochaine étape. Un site propose souvent plusieurs actions (réserver, découvrir, appeler, lire un article) : le bouton de réservation d’un hôtel est celle que le site met au premier plan.
La bonne pratique. Une action principale par écran, avec un libellé qui nomme l’action et son objet (« Réserver votre séjour » plutôt que « Cliquez ici »), un contraste net avec le fond, et une action secondaire visuellement plus discrète (bouton à simple contour, lien). NN/g rappelle qu’un élément cliquable doit se reconnaître comme tel. Sur téléphone, la cible doit se toucher sans erreur : le critère 2.5.8 des règles d’accessibilité WCAG 2.2 (niveau AA) fixe, sauf exceptions, un minimum de 24 × 24 pixels CSS, et NN/g recommande au moins 1 cm sur 1 cm.
L’erreur fréquente. Poser côte à côte trois boutons de même poids, ou intituler le bouton principal « En savoir plus » : le visiteur ne sait plus lequel choisir. La hiérarchie visuelle est le sujet de l’article Maîtriser l’art de la hiérarchie visuelle dans la conception web, et la simplicité l’accompagne.
Sur un site publié. Sur la Villa Bellerose, maison de vacances à Beutin, sur la Côte d’Opale, le premier écran porte deux boutons : « Réserver votre séjour », plein, et « Découvrir la villa », simple contour. La hiérarchie se lit sans effort, et un bouton « Réserver » reste dans l’en-tête.
3. La page hébergement : l’essentiel avant la photo suivante
Son rôle. C’est ici que le visiteur décide : la chambre, l’appartement ou le gîte est-il le bon pour lui ? La page doit répondre vite aux questions pratiques, puis donner envie.
La bonne pratique.
- Les faits décisifs sous le titre : nombre de chambres, de voyageurs, surface, couchages.
- Des photos réelles du logement. D’après NN/g, les visiteurs ignorent les grandes images purement décoratives et examinent au contraire les photos qui apportent une information, comme celles de produits ou de vraies personnes de l’entreprise, plutôt que des photos de banque d’images montrant des personnes quelconques.
- Les équipements en liste lisible, pas dans un paragraphe.
- Le panneau de réservation à portée de vue, à côté du contenu, pas seulement en bas de page.
L’erreur fréquente. Des photos génériques, des informations clés enterrées en fin de page, une page sans aucun bouton de réservation : le visiteur doit remonter ou chercher.
Sur un site publié. Sur la page de l’appartement L’essentiel, Chez MV met sous le titre les faits qui décident (1 chambre, 3 voyageurs, 25 m², canapé lit), puis une description concrète. À droite, un panneau « Réserver — L’Essentiel » affiche le calendrier et reste en vue pendant que l’on parcourt les équipements et les options.
4. La preuve : des avis réels, avec leur provenance
Son rôle. Rassurer au moment où le visiteur hésite. NN/g distingue, dans son article sur la confiance accordée à un site, quatre facteurs de crédibilité : la qualité du design, la transparence sur ce qui concerne le client (« upfront disclosure »), un contenu complet, correct et à jour, et le lien avec le reste du web. NN/g relève aussi que les internautes se fient davantage à des sources extérieures, comme les sites d’avis et les réseaux sociaux, qu’au contenu publié par l’entreprise elle-même : un avis dont on connaît la provenance pèse plus qu’une formule anonyme.
La bonne pratique. Des extraits d’avis réels, recopiés tels quels, avec leur provenance, placés près du bouton plutôt que dans une page que personne n’ouvre. Comment demander des avis, et où ils comptent le plus, est détaillé dans l’article Avis Google ou Booking : lequel encourager ?
L’erreur fréquente. Un avis sans provenance ni date, ou un avis fabriqué : il n’apporte aucune preuve et détruit la confiance qu’il devait créer. Mieux vaut peu d’avis vrais qu’un mur de formules.
Sur un site publié. Sur Augustins 1261, à Avignon, l’accueil place, sous la photo d’ouverture, une citation d’avis suivie de la mention de sa provenance : « Avis récupérés depuis les plateformes ».
5. Le tarif et les conditions : tout dire avant la dernière étape
Son rôle. Éviter la mauvaise surprise au moment de payer. La page de réservation d’un hôtel est l’endroit où l’on perd le plus facilement un visiteur déjà convaincu.
La bonne pratique. Annoncer tôt ce qui s’ajoute au tarif de base (frais de ménage, taxe de séjour, petit-déjeuner, options), les conditions d’annulation et les moyens de paiement, puis montrer le total avant le paiement. Deux sources vont dans ce sens. NN/g classe la transparence sur ce qui concerne le client parmi les facteurs de confiance (voir plus haut). Et dans son étude sur les paniers abandonnés, Baymard Institute classe en tête des motifs qu’un site peut corriger les frais supplémentaires trop élevés (40 % des répondants, hors personnes qui disent seulement regarder), et 12 % des répondants disent ne pas avoir pu voir ou calculer le coût total à l’avance. Cette enquête porte sur des acheteurs en ligne américains, pour le commerce en général et non pour l’hôtellerie : elle éclaire un mécanisme, pas un taux d’abandon pour votre site.
L’erreur fréquente. Des frais révélés à la dernière étape, des conditions d’annulation cachées dans un document à télécharger, un tarif affiché pour une configuration puis recalculé.
Sur un site publié. Sur la page de L’essentiel, Chez MV signale, juste après la description, que des frais de ménage s’ajoutent à la réservation, bien avant tout paiement. Le panneau de réservation invite ensuite à choisir ses dates, puis à « Voir le tarif ».
Ce qui se passe après le clic, de la sélection au paiement, relève du tunnel de réservation : voir Tunnel de réservation : optimisation et réduction de l’abandon panier.
6. Le mobile : un bouton de réservation toujours à portée de pouce
Son rôle. Sur un téléphone, l’écran est petit : le visiteur doit pouvoir lancer sa réservation sans remonter en haut de la page ni viser un lien minuscule.
La bonne pratique. Deux solutions fonctionnent. Soit la barre de dates reste intégrée à la page, sur deux étages (dates et voyageurs, puis bouton pleine largeur). Soit un bouton ou une barre fixe en bas de l’écran suit le visiteur. Dans ce second cas, trois garde-fous :
- Rester compacte. Un élément fixe prend de la place : NN/g conseille, à propos des en-têtes fixes, de le garder petit, et précise que c’est encore plus important sur mobile.
- Ne pas masquer ce qui prend le focus. Le critère 2.4.11 des règles WCAG 2.2 (niveau AA) demande qu’un élément qui reçoit le focus du clavier ne soit pas entièrement caché par un contenu fixe comme une barre.
- Ne pas faire sauter la page. Les Core Web Vitals de Google fixent des repères mesurés au 75e centile : affichage du plus grand élément en 2,5 secondes au plus (LCP), réaction aux gestes en 200 millisecondes au plus (INP), décalage visuel de 0,1 au plus (CLS). Une grosse photo d’accueil ou une barre qui apparaît en retard et déplace le contenu les dégradent.
L’erreur fréquente. Une barre fixe haute qui laisse peu de place au contenu, un bandeau de cookies, une bulle de discussion et une barre de réservation qui se chevauchent, des zones tactiles trop petites.
Sur des sites publiés. Sur la première capture, Chez MV garde la barre dans le premier écran : dates et voyageurs sur une ligne, puis « Rechercher » en pleine largeur. Sur la seconde, Sous Les Platanes, à Velaux, garde un bouton « Réservation » dans l’en-tête. Un petit encart de tarif s’affiche à l’ouverture de la page ; une fois fermé, il laisse place à une barre « Meilleur tarif garanti » (formule du site) collée au bas de l’écran, qui reste visible pendant que le visiteur fait défiler la page.
Tester son site d’hôtel quand il a peu de visiteurs
Pour vérifier qu’un changement de design aide vraiment, le réflexe est le test A/B : deux versions d’une page, chacune montrée à la moitié des visiteurs, et l’on compare les réservations. Le principe est bon, mais il suppose assez de visites et de réservations dans chaque version pour distinguer une vraie différence du hasard. Le nombre nécessaire dépend du taux de départ et de la plus petite différence que l’on veut détecter : c’est ce que demande le calculateur d’Evan Miller. Google le dit aussi dans ses recommandations sur les tests de site : la durée d’un test fiable dépend des taux de conversion et du trafic du site.
Sur un site d’hébergement qui reçoit peu de réservations par semaine, un test A/B prendrait donc longtemps, pendant lesquels la saison, les tarifs et les promotions changeraient. Autre piège : regarder les résultats en cours de route et s’arrêter dès qu’une version semble gagner. Evan Miller explique que ce « coup d’œil » fausse le verdict et fait voir des différences là où il n’y en a pas : la taille de l’échantillon doit être fixée à l’avance.
Cinq méthodes plus adaptées à un petit site
- Le test à cinq personnes. Pour repérer les problèmes d’utilisation, NN/g recommande de tester avec cinq personnes au plus, puis de recommencer après correction, plutôt que de monter un grand test. Les mesures chiffrées demandent bien plus de monde : au moins vingt personnes selon NN/g (How Many Test Users in a Usability Study?). Donnez une tâche (« Réservez deux nuits en juin pour deux adultes »), regardez sans aider, notez où la personne hésite.
- Le parcours fait soi-même. Réservez comme un client, sur téléphone puis sur ordinateur, et notez chaque endroit où vous hésitez ou où vous devez chercher.
- Le comparatif avant et après, avec prudence. Changez une chose à la fois, notez la date, et comparez des périodes comparables (même saison, mêmes tarifs, pas de campagne en cours). C’est un indice, pas une preuve.
- Les chiffres que vous avez déjà. Les rapports du moteur de réservation, quand il en fournit, et le décompte des appels et des demandes reçues, relevés au même rythme chaque mois.
- Les repères de vitesse. Les seuils de web.dev (LCP, INP, CLS, voir plus haut) se mesurent avec des outils gratuits : ils disent si la page se charge et réagit assez vite sur un téléphone.
Si vous menez malgré tout un test A/B, Google demande de ne pas montrer au robot d’autres pages qu’aux visiteurs, d’indiquer la page d’origine par un lien canonique sur les variantes, d’utiliser une redirection temporaire (302) plutôt que permanente, et de retirer les éléments du test dès qu’il est terminé.
Par où commencer sur votre site
Passez les six éléments en revue sur votre propre site, sur téléphone d’abord, dans l’ordre du tableau. Corrigez ce qui bloque le plus, faites tester par cinq personnes, puis recommencez. Pour un site neuf ou une refonte, ces points se décident dès la maquette. Les réalisations du portfolio en montrent des exemples complets ; la page création de site vitrine présente un site de présentation, et la page création de site avec réservation en ligne un site relié à un moteur de réservation. Les réservations prises avec Booky, le moteur de réservation de Hotel Web Design, sont à 0 % de commission.
Pour les pages créées pour une campagne précise, voir la conception de pages d’atterrissage à fort taux de conversion. Pour comprendre comment un site mal conçu fait gagner une plateforme à sa place, voir les erreurs de design qui favorisent Booking au lieu de votre site.
Sources consultées
- Nielsen Norman Group : Scrolling and Attention ; Date-Input Form Fields: UX Design Guidelines ; Beyond Blue Links: Making Clickable Elements Recognizable ; Touch Targets on Touchscreens ; Photos as Web Content ; Trustworthiness in Web Design: 4 Credibility Factors ; Sticky Headers: 5 Ways to Make Them Better ; Why You Only Need to Test with 5 Users ; How Many Test Users in a Usability Study? (en anglais).
- Baymard Institute : Cart Abandonment Rate Statistics (en anglais).
- W3C : WCAG 2.2, critère 2.5.8 Taille de la cible (minimum) ; WCAG 2.2, critère 2.4.11 Focus non masqué (minimum) (en anglais).
- web.dev : Web Vitals (en anglais).
- Google Search Central : Website testing and Google Search (en anglais).
- Evan Miller : How Not To Run an A/B Test ; calculateur de taille d’échantillon (en anglais).
- CNIL : Cookies et traceurs : solutions pour les outils de mesure d’audience.
Questions fréquentes sur le site internet orienté conversion
Qu’est-ce qu’un site internet orienté conversion ?
C’est un site dont les pages, les boutons et les textes sont choisis pour qu’un visiteur prêt à réserver puisse le faire sans détour : barre de dates dès le premier écran, bouton d’action clair, page hébergement lisible, avis visibles, tarif et conditions annoncés avant la dernière étape, mobile soigné. Ce n’est pas un site qui presse le visiteur ou le noie sous les fenêtres surgissantes.
Quel taux de conversion viser pour un site d’hôtel ?
Aucun chiffre ne vaut pour tous les sites : le taux dépend du trafic, de la saison, des tarifs et de la façon de le calculer. Le plus utile est de suivre votre propre taux, mois après mois, et de comprendre où les visiteurs s’arrêtent. L’article Pourquoi votre site ne convertit pas malgré un bon taux de fréquentation détaille cette lecture.
Faut-il une barre de réservation sur toutes les pages ?
Sur l’accueil et sur les pages hébergement, oui : c’est là que le visiteur décide, et il doit pouvoir lancer la recherche sans chercher un menu. Sur les autres pages, un bouton de réservation dans l’en-tête suffit en général. C’est une recommandation de conception plutôt qu’une règle : vérifiez-la avec un test à cinq personnes.
Une barre de réservation fixe sur mobile est-elle une bonne idée ?
Elle peut l’être si elle reste compacte, si elle ne cache pas entièrement l’élément que le clavier vient de sélectionner (critère 2.4.11 des règles d’accessibilité WCAG 2.2) et si elle ne fait pas sauter la page au chargement. NN/g conseille de garder petits les en-têtes fixes, surtout sur mobile. L’autre option est de garder la barre intégrée au premier écran, comme sur le site Chez MV.
Comment savoir si mon site convertit mal sans faire de test A/B ?
Faites-le tester par cinq personnes sur un vrai scénario (par exemple réserver deux nuits en juin), sur téléphone, sans les aider, et notez où elles hésitent : Nielsen Norman Group recommande de petits tests répétés plutôt qu’un grand test. Réservez vous-même, comparez des périodes comparables avant et après un changement, et relevez chaque mois les recherches, les réservations, les appels et les demandes. Un test A/B demande beaucoup de visites pour devenir fiable.
Un meilleur design suffit-il à faire augmenter les réservations ?
Pas à lui seul, et aucun chiffre ne peut être promis. Le design retire des obstacles entre le visiteur et la réservation ; il ne remplace ni une offre claire, ni des tarifs cohérents, ni des avis, ni une bonne visibilité sur Google. Chaque site se mesure avec ses propres données.
Où voir ces principes sur des sites réels ?
Cinq réalisations du portfolio illustrent l’article : Chez MV, l’Aire Naturelle La Folie, la Villa Bellerose, Sous Les Platanes et Augustins 1261.
