À quoi servent les boutons sur votre site Web? - Concept C, Agence Web
preloader

À quoi servent les boutons sur votre site Web?

Pourquoi tant de boutons partout? Dans nos voitures, sur nos électroménagers, sur nos chemises, sur notre visage et maintenant même sur nos sites Web! Eh bien, si vous passez à côté d’un gros bouton rouge reluisant, n’avez-vous pas envie d’appuyer dessus? C’est instinctif, viscéral presque. C’est un langage universel qui indique qu’il y aura une réaction à la suite de l’interaction. On appelle ça un appel à l’action (call to action, CTA). Lorsque les gens vont sur votre site, ils ne discutent pas avec un employé, un produit ou avec une autre personne. Ils interagissent avec la technologie et la façon la plus claire pour le site de répondre est par des liens clairs et attrayants.

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.

bouton_site_web_cockpit

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!

button-_site_web-clarte_bouton_start
button-site-web-emplacement

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.

button-site-web-reactivite

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

button-web-site-bouton_achat

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’AQUISITION :

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.

button-web-site-bouton_telechargement
button-web-site-bouton_subscribe

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!»

button-web-site-bouton_lire_plus
button-web-site-bouton_direction

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.

button-web-site-bouton_reseaux_sociaux
button-web-site-contact

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.

bouton_cta_FR

Bouton simple (CTA)

bouton_fab

FAB (floating action button) Bouton flottant
(fréquent en mobile)

bouton_fantome_

Bouton fantôme

bouton_texte

Texte servant de bouton

bouton_on_off

Bouton interrupteur

bouton-site-web-icone

Bouton icône

En conclusion, les boutons 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 cela 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…!! 😉

Avatar de l'auteur
Élisa