Combien de CTA sont trop nombreux?

C’est tellement difficile de nos jours de faire en sorte que votre application se démarque de la foule d’autres applications qui se démènent pour faire la même chose. Ils font les mêmes promesses, vantent les mêmes fonctionnalités et pourraient même concevoir leur site Web pour ressembler au vôtre.

Après avoir testé de nombreuses applications SaaS et mobiles au fil des ans, je peux vous dire qu'il y a une chose que beaucoup de designers se trompent en ce qui concerne le site Web:

La quantité d'appels à l'action.

La CTA est un élément essentiel de tout ce que vous créez, que ce soit l'application elle-même ou le site Web qui le vend. Et bien que la qualité du dessin CTA soit mise au premier plan (par exemple, les couleurs qui convertissent, la taille pour la visibilité, le placement pour le clic), qu’en est-il de la quantité ?

Si vous voulez que les gens téléchargent ou achètent votre application, vous devez supprimer tous les obstacles à l'entrée. Et l'un des premiers obstacles à examiner est l'appel à l'action.

Le problème des appels à l'action trop nombreux

L'objectif principal de votre site Web est d'inciter les utilisateurs à se convertir en utilisateurs d'applications. Cela ne signifie pas que vous ne pouvez pas avoir d'objectifs secondaires, comme inscrire des personnes à la newsletter, les renseigner sur votre produit, etc.

Mais si vous pouvez les convaincre de passer à l'action et de se convertir immédiatement, pourquoi se donner la peine de présenter

Cela dit, je comprends qu'il n'est pas toujours facile de concevoir votre site Web avec un seul bouton d'appel à l'action, comme Spotify l'a fait:

Spotify ne dispose que d’un panneau et d’un bouton d’appel à l’action intitulé «Get Spotify Free" sur son site Web.

Vous devez occuper une place très confortable sur votre marché pour sur un site Web comme celui-ci et sachez que les utilisateurs vont cliquer sur «Get Spotify Free» sans rien demander de plus. Cependant, cela n'excuse pas de faire de mauvais choix quant à la manière dont vous présentez les autres CTA sur la page d'accueil.

Examinons quelques-unes des infractions CTA courantes et ce que vous pouvez faire pour les réparer:

-All

Comme je l'ai déjà mentionné, il peut être difficile d'accéder à une application sur le marché déjà surpeuplée ou dominée par un leader clair. C'est pourquoi vous pourriez être tenté de convaincre les visiteurs de convertir tout ce qu'ils ont à convertir.

Laissez-moi vous montrer un exemple.

Voici le haut de la page d'accueil de Bitly :

Le haut de la page d'accueil Bitly comporte trois boutons d'appel à l'action similaires: "Obtenir un devis", "Démarrer gratuitement" et “Raccourcir”.

Bien qu'il y ait trop de CTA en concurrence pour attirer l'attention au-dessus du pli, le reste de la page d'accueil permet de mieux cibler le sujet.

Voici ce que les visiteurs voient si ils défilent une fois:

Un défilement de la page Bitly révèle des informations sur le produit, ainsi qu'un bouton "Démarrer".

Le troisième et dernier défilement révèle ces informations:

Le troisième et dernier défilement de la page Bitly affiche à nouveau un bouton CTA «Get Started for Free». (1965)

So, al Bien qu'il y ait un peu de conflit en haut de la page, le reste semble dire aux visiteurs: «Allez-y et essayez-nous gratuitement».

Dans l'ensemble, ce n'est pas une mauvaise façon de gérer la page d'accueil, bien qu'il puisse supporter un resserrement au-dessus du pli. Cela dit, il semble que le concurrent Rebrandly ait décidé de copier son site Web après le passage de… quelque chose comme Bitly. Rebrandly inclut quatre appels à l’action concurrents sur sa page d’accueil: «Obtenir un devis», «Inscrivez-vous gratuitement», «Parlez aux ventes» et «Raccourcissez».

Si vous ne tenez pas compte du style des dessins utilisés par rapport à la vidéo), cette page d'accueil est étrangement similaire. Le seul problème est qu’il est allé un peu trop loin avec ses appels à l’action. Il existe désormais deux CTA bleus pour «Inscrivez-vous gratuitement» et «Shorten» et deux CTA blancs pour «Obtenir un devis» et «Parler aux ventes».

Vous pourriez affirmer que les CTA bleus sont ceux qui appellent principalement l'attention. . Voyons cependant comment le reste de la page le gère.

Invite rebrandly les visiteurs à "Découvrir toutes les fonctionnalités" juste en dessous du rabat de la page d'accueil.

Les visiteurs de la première section voir ci-dessous est un point fort des fonctionnalités. C’est au même endroit que la section des avantages du site Web de Bitly. Mais remarquez comment les appels à l'action diffèrent. Avec Bitly, l’appel principal était «Get Started», alors qu’il leur était demandé ici d’approfondir leurs connaissances sur les fonctionnalités.

Le reste de la page d’accueil continue d’ajouter de nouvelles distractions au parcours des visiteurs:

Rebrandly montre les logos des clients, les critiques en ligne et les statistiques des utilisateurs sur sa page d'accueil avec un lien externe pour afficher des études de cas.

Plutôt que de le laisser comme suit: nos clients – dont beaucoup vous savez – sont avec nous! ”, cette section demande aux visiteurs de consulter leurs études de cas.

Encore et encore, jusqu'au bas de la page où les visiteurs sont à nouveau présentés au primaire appel à l'action:

Rebrandly devient créatif avec son CTA principal, cette fois-ci en l'appelant «Démarrer le rebranding maintenant» et en montrant un lien différent.

Cela pose quelques problèmes. D'une part, «Démarrer le changement de marque maintenant» n'a jamais été utilisé auparavant. C’est parce que le haut de la page visait essentiellement à donner aux visiteurs un moyen d’essayer l’outil gratuitement. Cela les conduit en fait vers la page de tarification pour acheter l'application.

Les visiteurs ont donc quatre options différentes pour commencer:

• demander un devis.
• Adressez-vous à un représentant.
• Essayer gratuitement l'outil.
• Achetez-le.

Vous pouvez utiliser d'autres options, comme par exemple sur un formulaire de demande de devis ou sur la page de contact. Ce qui ne va pas, c'est de laisser autant de choix aux visiteurs quelques secondes après leur arrivée sur le site et de leur demander de décider comment entrer en contact ou faire les premiers pas.

Pour remédier à cette surcharge de CTA, Brandly devrait décider où il veut. pour canaliser le trafic et s'y engager sur la page d'accueil.

Incohérence dans la présentation

Il n'est pas seulement risqué d'utiliser trop de CTA en raison de la confusion que cela crée, mais aussi parce que cela vous donne plus de possibilités d'ajouter des incohérences.

Les visiteurs ne réalisent peut-être pas qu’ils le font, mais ils recherchent des composants systématiquement conçus pour les orienter rapidement dans la direction où ils veulent aller. Ainsi, lorsque vos boutons les appellent pour agir différemment. Cela peut être un gros problème, mais conçu de la même manière.

Voyons un exemple qui fonctionne de monday.com :

[19659005] monday.com utilise le même “Get Started” CTA en rouge sur sa page d'accueil.

Le bouton “Get Started” que vous voyez ci-dessus est identique – taille, couleur et libellé identiques – qui apparaît lorsque les visiteurs se frayent un chemin vers la page d'accueil. La seule autre fois où ils rencontrent un élément cliquable, c’est sous la forme d’un lien hypertexte. Dans cet exemple, le lien est "Voir toutes les fonctionnalités":

monday.com inclut également des liens cliquables invitant les visiteurs à en savoir plus sur leur produit. , mais l’objectif principal est toujours de «démarrer».

Ce choix de conception permet beaucoup plus facilement aux visiteurs de rester concentrés sur leur objectif principal et de ne pas se laisser distraire par les autres CTA. Les liens sont là, mais ils ne sont pas aussi importants.

L’incohérence peut surgir de deux manières et causer des ravages chez les CTA. Le premier est si vous concevez tous les boutons de la même couleur. La seconde est si vous changez la couleur d'un bouton déjà établi. MoEngage commet les deux erreurs suivantes:

MoEngage utilise sa marque verte pour colorer tous ses boutons CTA, y compris les options «Demander une démonstration» et «Commencer». 19659005] La couleur verte de MoEngage est ce qu'ils utilisent pour colorer chaque bouton CTA, qui comprend les boutons «Demander la démo» et «Commencer» vus ici et 12 boutons «En savoir plus» ci-dessous.

MoEngage inclut 12 boutons "En savoir plus" différents sur sa page d'accueil afin d'informer les visiteurs de ses produits et fonctionnalités.

Le seul moment où la couleur change est le moment principal. Le CTA réapparaît et devient un bouton fantôme (blanc avec texte en couleur):

MoEngage affiche une seconde fois son CTA principal sur la page d'accueil. Cette fois, “Get Started” est méconnaissable en blanc.

Il existe plusieurs raisons pour lesquelles il est difficile de concevoir des CTA de cette façon:

Tout d’abord, les visiteurs n’obtiennent pas de pause. Ces types d'indices visuels leur permettent de savoir quand ils peuvent s'arrêter et passer à l'action. Mais lorsque tous les signaux visuels les supplient d'arrêter, vous ajoutez simplement plus de temps et de frustration au processus.

Deuxièmement, la réintroduction de la CTA principale est attendue une fois qu'un visiteur défile devant lui. Mais lorsque la réalité de sa réintroduction s'écarte de cette attente (il s'agit maintenant d'un bouton blanc avec du texte vert, par exemple), ils risquent de le manquer.

Redundant Requests

Il existe généralement un rythme dans la page d'accueil, peu importe sa longueur ou sa longueur. La bannière des héros appelle les visiteurs à effectuer l'action principale (généralement, inscription, démonstration ou essai gratuit). Ensuite, il est question d’avantages ou de fonctionnalités, avec peut-être des preuves sociales. Enfin, le premier appel à l’action est introduit une fois de plus.

Alors que les sections entre les CTA primaires peuvent être utiles pour vendre des visiteurs sur votre application, cela ne signifie pas que vous devez les distraire de la conversion en leur demandant continuellement d'en apprendre davantage.

Utilisons la page d'accueil Toggl par exemple:

Le design de Toggl au dessus du pli est superbe, avec un bouton rouge «Inscription».

Il s'agit d'une bannière de héros magnifiquement conçue. Faites défiler l'écran vers le bas pour trouver section après section où il est demandé régulièrement aux visiteurs d'explorer «Toutes les fonctionnalités».

La page d'accueil de Toggl utilise à plusieurs reprises le CTA «Toutes les fonctionnalités». inviter les utilisateurs à en savoir plus sur le produit

Vous pouvez également diviser vos avantages ou fonctionnalités de cette manière sur la page d'accueil. Ce n’est pas le problème. Le problème est qu'il y a trop de boutons demandant aux visiteurs d'arrêter, de décider s'ils veulent cliquer, puis de passer à autre chose. Et même s'ils décident de ne pas explorer «Toutes les fonctionnalités», les trois sections suivantes demandent s'ils sont sûrs qu'ils ne veulent pas en savoir plus.

Portons maintenant notre attention sur Yummly maintenant:

Yummly regroupe toutes les fonctionnalités de son application dans un seul panneau sur la page d'accueil. Aucune section CTA n’est présente dans cette section.

Il s’agit de la partie de la page d’accueil qui présente les fonctionnalités de Yummly. C’est tout simplement terminé et toutes les informations sont soigneusement consolidées. Notez qu’il n’ya pas de CTA non plus. Cela permet au site Web d’éduquer les visiteurs sur le produit sans les envoyer dans un trou de lapin.

Encore une fois, plus vous ajoutez de CTA à la page, plus il faudra de temps pour que les visiteurs se convertissent. Ainsi, en plus de rechercher des CTA inutiles à supprimer, vous pouvez également envisager de resserrer la conception.

Résumé (1965) – Si vos CTAs sont gênants, déroutants ou ne prennent que trop de temps, les visiteurs ne seront pas heureux que quelque chose d'aussi simple qu'un bouton les empêche d'avoir la solution dont ils ont besoin.

De nombreux obstacles pourraient empêcher les visiteurs de devenir les utilisateurs de votre application. . Alors, pourquoi leur donner une autre raison avec trop de CTA?

---