“En savoir plus.” Sur quoi ? “Cliquez ici.” Pour faire quoi ? “Envoyer.” Envoyer quoi, à qui ?
Ces formules sont partout sur les sites vitrine. Elles sont rédigées en dernier, presque par réflexe, une fois que le vrai contenu est en place. Pourtant, le texte d’un bouton ou d’un lien est souvent la dernière chose qu’un visiteur lit avant de décider s’il agit ou non.
Le texte du bouton doit fonctionner hors contexte
Un visiteur qui lit votre page la parcourt en diagonale. Il scanne les titres, les paragraphes courts, les boutons. Il ne lit pas nécessairement tout ce qui précède votre appel à l’action avant de décider de cliquer.
Un utilisateur qui navigue au clavier ou avec un lecteur d’écran, lui, entend les liens et boutons lus dans l’ordre ou listés séparément. Quand un lecteur d’écran annonce “En savoir plus, En savoir plus, En savoir plus” sur une page qui en contient trois, il ne dit rien d’utile. L’utilisateur ne sait pas sur quoi il va atterrir.
La règle est simple : le texte d’un bouton ou d’un lien doit être compréhensible sans lire ce qui l’entoure.
“Demander un devis” est clair. “Voir les réalisations” est clair. “Contacter Stéphanie Delon” est clair. “Télécharger le catalogue (PDF)” est clair. “En savoir plus” ne l’est pas.
Ce n’est pas une contrainte d’accessibilité supplémentaire : c’est une bonne pratique de conception qui bénéficie à tout le monde. Un texte de bouton précis rassure le visiteur sur ce qui va se passer après le clic. Il réduit l’hésitation.
L’emplacement suit la logique de lecture
Un bouton de contact placé en haut de page avant que vous ayez expliqué ce que vous faites demande au visiteur d’agir sans raison. Un bouton placé après une présentation claire de vos services, au moment où le visiteur a les informations pour décider, a plus de sens.
La question à se poser pour chaque bouton : est-ce que le visiteur a, à ce stade de la page, suffisamment d’informations pour vouloir cliquer ?
Un artisan qui présente ses réalisations sur une page dédiée a intérêt à placer son bouton de contact après les photos et les témoignages, pas avant. Une association qui cherche des bénévoles gagne à expliquer concrètement ce que ça implique avant de proposer le formulaire d’inscription.
Il n’y a pas d’emplacement universel. Il y a l’emplacement qui correspond au moment où votre visiteur est prêt à agir.
Le contraste et la taille ne sont pas optionnels
Un bouton de contact orange clair sur fond blanc peut sembler visible sur votre écran dans de bonnes conditions d’éclairage. Il devient illisible en plein soleil sur mobile, pour un utilisateur malvoyant, ou simplement pour quelqu’un dont l’écran est réglé à faible luminosité.
Le WCAG demande un ratio de contraste minimum de 4,5:1 pour le texte normal. Ce n’est pas un standard réservé aux sites institutionnels : c’est le seuil en dessous duquel une partie de vos visiteurs ne peut pas lire confortablement.
La taille de la zone cliquable compte autant que le contraste. Un lien texte avec peu de padding autour est difficile à activer au pouce sur mobile. La recommandation WCAG est une cible d’au moins 44 pixels de hauteur et de largeur. Un bouton trop petit frustre les utilisateurs sur mobile, et exclut ceux qui ont des difficultés motrices.
L’état focus doit être visible
Quand un utilisateur navigue au clavier, il se déplace d’un élément interactif à l’autre avec la touche Tab. L’élément actif reçoit le “focus”. Par défaut, les navigateurs affichent un contour autour de l’élément focalisé.
Beaucoup de sites suppriment ce contour parce qu’il “fait moche” visuellement. Le résultat : un utilisateur au clavier ne sait plus où il se trouve sur la page. Il ne peut pas utiliser le site correctement.
Supprimer l’état focus sans le remplacer par un style visible est une erreur de conception fréquente. Le contour peut être stylisé pour s’intégrer à votre charte graphique : couleur, épaisseur, forme. Ce qui compte, c’est qu’il soit visible et suffisamment contrasté par rapport au fond.
Un seul appel à l’action principal par page
Multiplier les boutons sur une même page dilue l’attention. Quand tout est mis en avant, rien ne l’est.
Une page de services avec cinq boutons différents (“Demander un devis”, “Voir les réalisations”, “Lire les témoignages”, “Télécharger la plaquette”, “S’inscrire à la newsletter”) demande au visiteur de choisir sans l’aider à choisir. Il fait souvent ce que font les visiteurs face à trop d’options : rien.
Chaque page a une action principale. Les autres actions sont secondaires et peuvent être présentes, mais visuellement moins saillantes. Un bouton primaire plein, des liens texte pour le reste. La hiérarchie visuelle guide la décision sans forcer.
Les boutons et liens d’un site vitrine sont rarement ce sur quoi on passe du temps lors de la conception. Pourtant, ils concentrent des enjeux de clarté, d’accessibilité et de conversion que le reste du contenu ne peut pas compenser.
Un visiteur qui comprend exactement ce qui se passe quand il clique est un visiteur qui clique.
Si vous voulez revoir la conception des éléments interactifs de votre site, contactez-moi.