Boutons et CTA

Maintenant que vous avez vu les grands principes de l'édition de contenu, voici quelques subtilités qui vous permettront de personnaliser l'expérience utilisateur de votre plateforme digitale, et de lui assurer un rendu encore plus professionnel.

Calls to action

On utilise cette expression pour identifier les endroits / les moments où l'on souhaite faire agir la personne sur votre site. Cela va du lien "en apprendre plus sur" au fait de lancer un player, en passant évidemment par le bouton "acheter".

Attention toutefois, réduire le Call to action à un "bouton", c'est passer à côté de tout ce qu'une "sollicitation à agir" peut avoir de créatif !

Dans les blocs de contenus, nous avons appliqué automatiquement cette approche à 3 rendus possibles de "labels" (= textes), que l'on peut transformer en "call to action" (= lien).

Concrètement :

  1. Dans l'éditeur de contenu d'un bloc, écrivez le label (= le mot ou l’ensemble de mots qui seront cliquables) à transformer en call to action
  2. Sélectionnez le texte et cliquez sur l'icône "insérer/modifier un lien"
  3. Dans la petite fenêtre qui apparaît, vous pouvez directement copier l'URL de la page vers laquelle pointera le lien et cliquer sur le bouton flèche bleu, 'Appliquer'. Ceci crée un lien "standard", sans design spécifique. Vous pouvez également saisir les premiers caractères d’un mot et l’outil cherche tout seul la liste des contenus contenant ces lettres. Il vous suffit alors de sélectionner la bonne destination dans la liste proposée avant de valider le lien.
  4. Pour varier les styles de bouton, cliquez sur la petite roue crantée à droite du bouton bleu. Ceci ouvre une fenêtre pop-up où vous pouvez choisir le style de bouton souhaité ('none,' 'primary' ou 'secondary').
  5. Dans cette fenêtre, vous pouvez également sélectionner l'une des pages de votre site dans la liste, pour que le lien pointe vers elle.
  6. Cliquez sur 'Ajouter un lien' pour terminer la manipulation.

Un bouton primaire, un secondaire, ... késako ?

Trois niveaux de boutons ne signifie pas seulement 3 esthétiques différentes, mais aussi et surtout 3 niveaux d'importance dans les actions sollicitées. En faire bon usage joue sur la bonne lisibilité / accessibilité de votre site.

Le rendu visuel des différents boutons est lié à la charte graphique propre à votre site, ce qui signifie que cela peut très fort varier d'un site à l'autre - tout en gardant la logique d'importance hiérarchique des actions.

Comme son son l'indique, le bouton "primaire' ('primary' en anglais) est le plus important. Il est visuellement plus fort et implique une action prioritaire (passer commande tout de suite par exemple).

Le bouton "secondaire" ('secondary' en anglais) est celui qui implique une action de moindre importance (consulter de la documentation avant de passer commande par exemple).

Enfin, le bouton "none" ne signifie pas l'absence de bouton, seulement l'absence de design spécifique. C'est un lien standard, un mot ou un groupe de mots soulignés. Ce type de lien ne requiert pas nécessairement une action, il est là "au cas où" vos visiteurs veulent plus de détails sur tel ou tel point.

🔥
Les styles de boutons ne se superposent pas aux niveaux de titre ! Un titre n’est pas censé être un lien. Exemple : vous écrivez quelques mots, les mettez en “Titre 2”. Puis vous décivez de mettre un lien dans ce titre : il apparaîtra comme un texte standard, souligné (le style “Titre 2” est effacé). → Lien, bouton et titre sont des rôles différents, qui appellent à des fonctionnalités différentes. Elles ne sont pas superposables.