Dans le passé, les sites Web avaient beaucoup d’éléments inutiles, à savoir des pages pleines de schémas de couleurs flashy et laides, trop de textes coincés dans de petits espaces, et des pop-ups qui apparaissent et agacent les visiteurs.

Mais les concepteurs n’en savaient pas plus à l’époque ou, plutôt, ils travaillaient simplement avec les seules tendances de conception et les meilleures pratiques qu’ils connaissaient.

Les temps ont beaucoup changé depuis.

Les développeurs Web et les concepteurs ne sont plus limités par la technologie ou la technique, ce qui signifie qu’il n’y a plus d’excuses pour une mauvaise conception. Cela concerne chaque élément trouvé sur un site WordPress, de l’image d’en-tête de la page d’accueil aux formulaires de contact, ainsi que de la typographie aux pop-ups. Tout compte maintenant lors de la conception pour l’expérience utilisateur.

Aujourd’hui, je veux me concentrer sur ce qui rend un popup efficace, quelque chose que je considère comme un élément essentiel dans le processus de conversion. Plus précisément, je voudrais examiner l’anatomie d’un pop-up WordPress efficace et comment cet élément passionnant peut faire grimper votre taux de conversion.

L’argument pour l’utilisation de pop-ups sur WordPress

Les pop-ups sont un élément de design intéressant. Bien qu’ils interrompent temporairement l’expérience de l’utilisateur (ce qui n’est généralement pas très apprécié), ceux qui sont bien faits, offrent quelque chose d’aussi attrayant ou excitant que les visiteurs ne se soucient pas de perdre une minute pour y prêter attention.

Bien sûr, dans ce cas, nous parlons de pop-ups générant des conversions qui servent à collecter des abonnés à la newsletter ou à pousser les visiteurs à faire des achats. Cependant, les fenêtres contextuelles peuvent être utilisées à diverses fins. Par exemple, vous pouvez partager vos cookies ou votre politique de confidentialité, recommander des éléments connexes après que les visiteurs ajoutent quelque chose au panier, ou même leur demander de répondre à un sondage rapide.

Pop-up Anatomy - Pop-up de recommandations de cible

Pour la plupart, si vous utilisez une fenêtre contextuelle, vous souhaitez probablement que les visiteurs agissent. Après tout, pourquoi interrompre leur expérience si la perturbation n’est pas une utilisation utile de leur temps ? Selon une étude sur près de deux milliards de pop-ups, ils ont trouvé que le taux de conversion moyen pour ces types de pop-ups était de 3,09%.

Cela soulève maintenant la question suivante : les fenêtres contextuelles sont-elles toujours pertinentes et efficaces ? Si le marché est tellement sur-saturé avec des pop-ups de sortie, des barres de hello, des superpositions pleine page et plus, est-ce un outil de génération de conversion qui vaut la peine d’être utilisé sur votre site WordPress ?

Bien sûr !!!

Les pop-ups prennent en compte de nombreuses bonnes pratiques de conception de sites Web. Par exemple:

  • Les pop-ups suppriment l’encombrement inutile des pages de votre site.
  • Ils sont généralement composés de visuels nets et de texte minimal.
  • Les appels à l’action sont bien conçus et simplement proposé en termes de formulation.
  • Il y a une petite courbe d’apprentissage pour vos visiteurs car la plupart des gens connaissent bien les pop-ups et savent comment interagir avec elles.
  • Les pop-ups offrent une opportunité amusante d’infuser votre site avec des animations , des vidéos ou des preuves sociales.
  • Vous pouvez facilement les créer avec des plugins WordPress de haute qualité comme Hustle ou OptinMonster.

Anatomie pop-up - preuve sociale HubSpot

En général, un pop-up bien conçu est idéal pour attirer l’attention des visiteurs au moment où vous en avez le plus besoin. Vous pouvez les utiliser pour envoyer des notifications ou des demandes en temps opportun. Vous pouvez également utiliser les données des visiteurs pour les inciter à faire un achat.

L’anatomie d’un pop-up efficace sur WordPress

De toute évidence, le succès des pop-ups de votre site WordPress dépend de ceux qui sont parfaitement conçus et ont des offres si convaincantes que les visiteurs ne peuvent pas s'empêcher d’interagir. Examinons donc à quoi ressemble une formule gagnante pour un pop-up efficace.

1. Style

Les différents types de pop-ups ont tendance à être plus efficaces pour convertir les visiteurs en abonnés:

  • Les pop-ups d’abonnement par e-mail ont un taux de conversion de 2,9%.
  • Les pop-ups de bienvenue (ceux qui occupent la pleine page lors de l’entrée) convertissent à 2,6%.
  • Les pop-ups déclenchés par défilement convertissent 1,9%.
  • Les pop-ups Smart ou Hello affichent une conversion de 0,5%.

Cela ne signifie pas que vous devez toujours utiliser un pop-up d’abonnement par e-mail traditionnel. Voici un exemple sur le site de Neil Patel.

Anatomie pop-up - Barre de Neil Patel Bonjour

Celui-ci est bien fait, parce qu’il est simplement conçu, non intrusif, et utilise une animation amusante pour attirer l’attention au cas où son empreinte minimale passe inaperçue. Gardez à l’esprit que le choix d’un style ne consiste pas à utiliser celui qui est le plus populaire ou le plus connu pour des taux de conversion plus élevés. Il s’agit de trouver un style qui fonctionne pour votre site, vos visiteurs, et qui est conçu pour compléter l’expérience entre les deux.

2. Couleur

La couleur, bien sûr, jouera toujours un rôle majeur dans la conception de sites Web. En comprenant la psychologie derrière les couleurs que vous avez choisies, vous pouvez créer des pop-ups plus efficaces qui convertissent. Bien sûr, vous ne pouvez pas non plus oublier la palette de couleurs établie pour votre marque, il s’agit donc de trouver un équilibre entre la conception d’une fenêtre pop-up qui a l’air bien sur le site, mais qui oblige aussi les visiteurs à agir.

3. Composition

Il est important de prendre du recul et de voir le pop-up dans son ensemble. Bien que la conception de chaque pièce en mouvement dans le pop-up importe, de même que la composition globale de celui-ci.

Votre fenêtre pop-up devrait:

  • être simple et facile à suivre.
  • Conçu avec des lignes épurées et être bien équilibré.
  • Inclure des images pertinentes et à haute résolution; idéalement, une seule image qui résume l’objet de l’offre.
  • Semblent être une extension de votre site et ne sont évidemment pas fabriqués à partir d’une fenêtre contextuelle avec des options de personnalisation limitées.
  • Utilisez une typographie large et facile à lire.

4. Texte

Ensuite, nous avons le message du pop-up. Bien que vous ne soyez pas en train d’élaborer le langage qui va dans ces choses, vous devriez toujours être conscient d’un certain nombre de pratiques lorsqu’il s’agit de remplir des fenêtres pop-up avec du texte.

Gardez à l’esprit les éléments suivants:

  • Toujours inclure un titre, un message court (une phrase fera l’affaire), et une incitation à l’action.
  • Utilisez un langage fort qui fait appel aux émotions des visiteurs.
  • Soyez bref. Si vous ne pouvez pas l’écrire en moins de 30 mots, ce message n’appartient pas à une fenêtre contextuelle.
  • Utilisez le même ton et la même personnalité que vous utilisez sur votre site.
  • Offrez quelque chose de précieux que vos visiteurs ne trouverons pas ailleurs sur le site.
  • Utilisez l’urgence si possible. Si vous ne pouvez pas le faire avec des mots, faites le par la couleur.

Anatomie pop-up - Superposition d'écran Wishpond

5. CTA

Il y a une tendance étrange de plus en plus ces jours-ci où les sites Web proposent aux visiteurs deux options d’appel à l’action. Je comprends pourquoi cette tendance est en croissance, mais je l’ai vu mal appliqué sur autant de sites Web que j’espère que la tendance finira par s’éteindre.

Vous avez probablement vu cette mauvaise application vous-même:

  1. L’option positive : Celui-ci dit, « Oh, merci, merci! Je sais que cette offre est sur le point de changer ma vie pour le mieux! « 
  2. L’option négative : Celui-ci dit: «J’aime faire de mauvais choix de vie et j’apprécie que vous me frottiez le visage. Permettez-moi de cliquer sur cette option auto-dépréciation seulement pour recevoir une autre fenêtre qui me demande à nouveau si je veux prendre cette décision terrible. « 

Cela ne veut pas dire que toutes les fenêtres pop-up avec deux options CTA sont mal conçues ou ont pour but de faire honte au visiteur. Tim Ferris a un bon exemple d’un CTA à double option bien fait:

Anatomie pop-up - Tim Ferris Positif Négatif

Dans l’ensemble, cependant, je dirais que si vous essayez d’être sarcastique ou intimidez vos visiteurs dans sa décision, sortez de votre site et mettez-le sur Twitter. Votre site Web n’est pas un endroit pour cela et Twitter, nous l’espérons, l’engloutira complètement.

En dehors de cette bête noire, je suggère également de garder l’incitation à l’action simple. Utilisez un langage simple qui indique clairement ce que les visiteurs obtiendront en échange de la saisie de leur courriel ou en cliquant sur le bouton. Aussi, simplifiez le travail au minimum: pas plus de deux champs à remplir (c.-à-d. Email et peut-être un nom) et un bouton à cliquer.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra de bien concevoir vos boutons d’appel à l’action.