C’est là que les boutons ou appels à l’action entrent en jeu. Attrayants, colorés, pertinents et réactifs, ils sont les guides de navigation de votre utilisateur. Les gens vont sur un site pour FAIRE quelque chose. Ils vont y chercher de l’information, certes, mais toujours dans le but d’éventuellement accomplir quelque chose (prendre rendez-vous, faire un don, acheter quelque chose ou découvrir les prochaines activités). Et s’ils n’avaient pas l’intention d’acheter quelque chose, c’est le travail des boutons de les influencer vers un achat ou un appel de service à partir de votre site web.
Ce qui constitue un bon bouton :
1. Clarté
Premièrement, la forme se doit d’être clairement faite pour être cliquée : plus foncée ou pâle que le reste, bien placée et d’une forme contrastée.
Les mots choisis doivent porter vers l’action, être courts et simples. Si la personne ne peut pas s’imaginer exactement ce qui va se passer, elle ne cliquera pas sur le bouton. Pas de vocabulaire à la Bernard Pivot ici!
2. Emplacement.
Deuxièmement, les boutons de site web doivent être stratégiques. Vous voulez créer un rythme sur votre site en implantant des boutons à des endroits où vous croyez que votre auditoire voudra passer à l’action ou en savoir plus. Il ne faut pas trop en mettre, vous ne voulez pas donner de l’acné à votre site. Mais un manque de bouton peut aussi vous nuire si lorsque votre usager tente de passer à l’action, il doit retourner en haut de la page. C’est très frustrant.
Il y a des boutons d’action rapide (qui se retrouvent au début de votre page pour les personnes connaissant votre interface) et des boutons-guides (qui permettent aux gens, au fil de leur navigation, d’entrer en interaction avec les différentes parties de votre site).
Vous ne voulez pas mettre un bouton d’action rapide au milieu de votre page d’accueil. Par exemple, « Faire un don » à la moitié de la page.
3. Réactivité.
Troisièmement vous voulez donner une récompense instantanée à votre utilisateur en lui indiquant qu’il a posé une action qui a causé une réaction. Un changement de couleur, d’opacité, de grosseur ou de contour indique à la personne que son action a été remarquée et que quelque chose va se produire. Cela fait partie de l’expérience utilisateur (UX) et est primordial pour la satisfaction du client dans un contexte numérique.
ALLER PLUS LOIN :
Pourquoi est-ce important pour un entrepreneur de comprendre la pertinence des boutons? N’est-ce pas le travail de l’agence Web de les placer? Touché… mais bien souvent la rédaction Web est laissée à l’entreprise. Qui de mieux pour définir la mission et les valeurs qu’elle veut mettre de l’avant dans son site? Or, bien souvent, la rédaction met de côté la pertinence des boutons dans la lecture.
Chaque bloc de texte important devrait mener à une action (bouton) et l’écriture de ceux-ci devrait être élaborée dans ce sens. Nous avons même un guide de rédaction qui peuvent vous aider à concrétiser votre approche de rédaction web!
Les noms de boutons
ACTION D’ACHAT
Ajouter au panier / Acheter maintenant / Passer à la caisse / Continuer la transaction
Ce que les gens anticipent : accès aux informations d’achat, aux produits, accès à la facture et les informations d’envoi postal.
ACTION D’ACQUISITION :
Télécharger / Mettre à jour / Ouvrir / Imprimer
L’anticipation des gens: la boîte de téléchargement s’ouvre, permettant de voir les dossiers et de placer le document au besoin.
ACTION D’ABONNEMENT :
Essayez maintenant / Un mois gratuit / Abonnez-vous / Inscrivez-vous / S’inscrire à l’infolettre
Ce les gens anticipent : redirection vers un formulaire d’entrée d’informations personnelles. Soyez répétitif et précis tout au long des étapes d’abonnement.
LIENS RÉPONSE :
Lire plus / Plus d’infos / En savoir plus / + / Découvrir
Les usagers s’attendent à : accès à une page connexe (Qui suis-je, Mission, FAQ). Il faut qu’ils se posent une question et vous devez leur fournir la réponse. C’est un bouton pour recevoir plus d’informations. Les gens n’aiment pas lorsque ce bouton, sensé répondre à leur question, est en fait un bouton dissimulé de contact. Si c’est le cas, soyez précis quant à la destination. Exemple: Vous voulez en savoir plus? «contactez-nous!»
LIENS DIRECTIONNELS :
Poursuivre / Continuer / Suivant / Précédent
Ce que les gens anticipent : dans un formulaire par exemple, ils s’attendent à passer à l’étape logique suivante ou à confirmer les informations. Lors de la dernière page à remplir, soyez clair : Terminer / Conclure / Confirmer
LIENS DE RÉSEAUX SOCIAUX :
Partager / Aimer / Suivre / Facebook / Instagram
Ce que les gens anticipent : redirection vers le réseau social ou vers des options de partage.
LIENS CONTACT :
Contact / Écrivez-moi / Prenez rendez-vous
Les usagers anticipent : redirection vers une boîte de texte et information de contact, coordonnées, etc.
Quelques types de boutons Web
Bouton simple (CTA)
FAB (floating action button) Bouton flottant
(fréquent en mobile)
Bouton fantôme
Texte servant de bouton
Bouton interrupteur
Bouton icône
En conclusion, les boutons web sont un des aspects les plus importants de l’interface utilisateur (UI) et servent à diriger les déplacements et les interactions de l’usager. Il est parfois complexe pour les gens de cerner l’importance de ceux-ci puisque la plupart de nos interactions quotidiennes avec des boutons se font de façon subliminale. Mais savez-vous ce que ça veut dire? Ces boutons fonctionnent! Si vous n’avez pas besoin d’y penser et que vous répondez au bouton instinctivement sans ralentir votre démarche, celui-ci est clair, fonctionnel et ergonomique. C’est ce qui différencie une boutique en ligne qui roule à plein régime d’une autre où les paniers se remplissent, mais les ventes ne se complètent pas.
Avec le train de vie que l’on mène de nos jours, les gens n’ont littéralement pas 3 secondes à perdre à comprendre où aller et quoi faire.
!!Cliquez le bouton, on le sait que vous le voulez…!!
