Conception pop-up : attrapez-le pendant qu'il fait chaud

L'utilisation de formulaires d'abonnement par courrier électronique est l'un des moyens les plus efficaces d'obtenir plus d'abonnés. Dans cet article, nous nous concentrerons sur les formulaires d'abonnement par e-mail contextuels ; en particulier, nous vous expliquerons comment améliorer votre conception de pop-up et montrerons d'excellents exemples de pop-up pour votre inspiration.

Le rôle des formulaires pop-up dans le marketing par e-mail

Les pop-ups sont les formulaires qui apparaissent au premier plan du contenu du site Web et encouragent les utilisateurs à s'inscrire pour recevoir des e-mails. Ils se composent généralement d'un titre, d'une courte description, d'un champ pour renseigner votre adresse e-mail, votre nom et d'autres détails, ainsi qu'un bouton CTA.

Très souvent, les pop-ups offrent un aimant principal tel qu'une remise, un ebook gratuit, un enregistrement de webinaire, un billet d'événement et d'autres cadeaux. Par exemple, dans l'une de leurs fenêtres contextuelles, Kate Spade offre une remise de 15 % à tous les nouveaux abonnés aux e-mails.

Mais comment les pop-ups peuvent-elles apporter des pistes si beaucoup d'entre nous les considèrent ennuyeuses ? Il y a une explication scientifique simple à cela.

Martin Lindstrom, écrivain et expert en publicité et en image de marque, a partagé quelques résultats intéressants d'une vaste étude de neuromarketing de 3 ans dans son livre « Buyology : Truth and Lies About Why We Buy ». Pour résumer, il a prouvé que 90 % du comportement d'achat des gens est inconscient et que de nombreuses actions des utilisateurs entrent en conflit avec ce en quoi ils prétendent croire. Ainsi, malgré les opinions controversées sur les pop-ups, elles fonctionnent toujours : nous pouvons prétendre être ennuyé par les pop-ups, mais nous y réagissons toujours et continuons à nous inscrire.

Voyons maintenant les pop-ups en action. Sumo a analysé près de deux milliards de pop-ups en deux ans et a découvert quels éléments en font un contributeur précieux aux résultats globaux du marketing par e-mail.

Dans cette expérience, le taux de conversion moyen des pop-ups était de 3,09 %. Les 10 % des pop-ups les plus performants avaient un taux de conversion moyen de 9,28 %, certains atteignant jusqu'à 50,2 %.

Sumo a remarqué les tendances suivantes dans les taux de conversion des pop-up :

1. Les pop-ups placés dans un contexte approprié ont atteint plus de 40% de taux de conversion. Par contexte approprié, nous entendons que le sujet d'un pop-up correspond au sujet d'une page de site Web sur laquelle il apparaît.
2. Le timing des pop-ups, qui dépend entièrement du contexte, a rapporté 38,4% de taux de conversion grâce à un délai de 15 secondes sur une page d'ebook. Des outils tels que Google Analytics aident à résoudre le mystère qui se cache derrière le moment le plus approprié dans chaque cas individuel.
3. En tenant compte du contexte et du timing, en créant un CTA qui correspondait au contexte, en essayant d'être clair et en apportant de la valeur, Sumo a réussi à atteindre un taux de conversion de 60%.

Comme vous pouvez le voir, si vous approfondissez chaque aspect individuel d'un formulaire contextuel et testez les détails un par un, vous pouvez considérablement améliorer les conversions.

Trucs et astuces de conception de pop-up

Le design est un aspect à ne pas négliger lorsqu'il s'agit de générer des conversions et d'attirer plus de prospects. Selon le livre « Buyology » mentionné ci-dessus, les consommateurs passent généralement 2 secondes au maximum pour prendre une décision d'achat. La première chose que les gens voient, ce sont les éléments de conception et les couleurs, et ce n'est qu'alors qu'ils commencent à lire le contenu. Ainsi, vous n'avez littéralement que quelques secondes pour attirer l'attention, expliquer votre point de vue et encourager un utilisateur à laisser son adresse e-mail dans votre formulaire.

Allons de l'avant et examinons les détails de quelques beaux exemples de fenêtres contextuelles pour découvrir les stratégies de conception de fenêtres contextuelles que vous pouvez utiliser pour vos propres formulaires d'abonnement.

Faites vos pop-ups en conformité avec les directives de l'entreprise

Tout d'abord, tous vos éléments de conception utilisés dans n'importe quel type de média - qu'il s'agisse d'un site Web, d'un e-mail ou d'un réseau social - doivent correspondre aux directives de l'entreprise de votre entreprise, car ces éléments forment une impression de vous en tant que marque. C'est pourquoi il est important de s'en tenir aux couleurs, polices, formes et autres éléments de conception de votre entreprise.

Jetez un œil à la page Whole Whale À propos de nous. Vous pouvez voir que la palette de couleurs est composée de nuances de blanc et de gris complétées par des nuances de bleu clair et foncé. Il y a beaucoup d'espace négatif, une police sans empattement étant utilisée sur le site Web.

Regardez maintenant leur conception contextuelle, qui correspond parfaitement à la conception de leur site Web, car les mêmes couleurs et polices sont appliquées dans le formulaire. De plus, une photo émotionnelle est utilisée pour attirer davantage l'attention sur le pop-up. La partie gauche du texte et la partie droite de l'image sont entièrement symétriques.

Whole Whale propose trois produits différents utiles aux organisations à but non lucratif, dont Lighthouse, conçu pour augmenter l'efficacité des pages de dons. Remarquez comment la conception contextuelle de ce produit correspond également à leurs directives de conception d'entreprise, ce qui a un impact global plus fort.

Votre conception contextuelle n'a pas besoin d'être aussi neutre que celle utilisée par Whole Whale. N'hésitez pas à lui ajouter un peu plus de caractère, surtout si vous avez un blog personnel ou un site internet.

Par exemple, le site Web Wait But Why est très différent de celui de Whole Whale. C'est amusant et lumineux et a beaucoup d'illustrations ressemblant à des croquis.

Leur pop-up ne fait pas exception - c'est aussi amusant et personnel. En plaisantant sur la nature agaçante des pop-ups, la société encourage uniquement les utilisateurs à s'inscrire.

Mettre en pratique les théories de la perception visuelle

Il existe plusieurs théories établies de la perception visuelle qui ont été utilisées dans la conception pendant des siècles jusqu'à nos jours. Nous parlerons de la règle du nombre d'or et de la théorie de la Gestalt, deux des théories de conception les plus importantes.

La règle du nombre d'or

Le nombre d'or est un rapport d'environ 1:1,61 que l'on trouve dans la nature et qui est utilisé pour créer des images visuellement équilibrées, mettant en évidence certaines parties d'une image.

Comment pouvez-vous l'utiliser en pratique? Par exemple, ces proportions peuvent vous aider à diviser une image en sections équilibrées, à mettre l'accent sur les éléments les plus significatifs de votre conception ou simplement à recadrer des images de la manière la plus attrayante visuellement.

L'image ci-dessous a été recadrée en utilisant le principe du nombre d'or. Remarquez comment la partie la plus importante de l'image, un téléphone portable, est placée au centre de la spirale, là où l'œil humain est naturellement attiré.

Lorsque vous travaillez sur du pop-up design, vous pouvez placer des boutons CTA au centre de la spirale, l'image étant située au début de la spirale, qui occupe sa plus grande partie. Voici à quoi pourrait ressembler une mise en page de base de votre pop-up dans ce cas :

Théorie de la Gestalt

Gestalt signifie « tout unifié » et constitue l'essence de toute la théorie, qui explique comment les humains perçoivent les objets en fonction de leur placement dans un espace bidimensionnel.

Il y a 6 principes communs de Gestalt :

1. Similitude . Des objets similaires sont perçus comme un motif ou un groupe.
2. Suite . Les objets placés sur un même chemin sont perçus comme un groupe, et l'œil humain est guidé par ces lignes visuelles.
3. Fermeture . Si un objet manque dans certaines parties, nous le percevons toujours dans son ensemble. Il suffit de penser au logo WWF avec un panda et vous comprendrez ce principe.
4. Proximité . Les objets placés à proximité les uns des autres sont perçus comme un groupe.
5. Figure/fond . Les gens séparent les éléments de l'arrière-plan, de sorte que le plus grand d'entre eux sera perçu comme le sol, tandis que le plus petit sera perçu comme un objet ou une figure. Ce principe est souvent utilisé dans les œuvres d'Escher.
6. Symétrie et ordre . Les gens se sentent plus en sécurité et plus calmes lorsqu'ils voient des motifs symétriques.

Vous n'êtes pas obligé d'apprendre tous ces principes par cœur. Cependant, certaines connaissances de base vous aideront à comprendre pourquoi les conceptions asymétriques peuvent sembler plus dynamiques et les conceptions symétriques plus stables et plus sûres, ainsi que pourquoi l'attention de l'utilisateur sera attirée sur les objets les plus grands ou les plus brillants qui se démarquent des autres.

Par exemple, regardons l'exemple de conception pop-up de SheSimplyShops. La société propose aux utilisateurs de faire tourner la roue pour avoir une chance de gagner un rabais. Le pop-up apparaît sur le côté gauche de l'écran et est asymétrique : la partie gauche semble « plus lourde » que la droite. La molette occupe toute la partie gauche du pop-up, tandis que le texte et le bouton CTA sont placés à droite entourés d'un espace négatif. Tout cela crée une ambiance dynamique et énergique autour du pop-up.

En revanche, la forme pop-up de Leia est entièrement symétrique et semble donc beaucoup plus calme que l'exemple précédent. Tous les éléments sont centrés, menant visuellement à un seul point - le bouton CTA.

Attention à la lisibilité

Si vous voulez que vos pop-ups transmettent le bon message, elles doivent être faciles à comprendre. Et en ce qui concerne la lisibilité, votre capacité à travailler avec le texte et la typographie est cruciale.

Établissez une hiérarchie visuelle, où les éléments tels que les titres, les descriptions et les boutons sont séparés visuellement - en utilisant des polices complémentaires, des tailles et des poids différents, ainsi que des espacements. L'interligne, un espace entre les lignes, et le crénage, un espace entre les lettres, devraient guider le lecteur à travers votre formulaire. Les informations les plus importantes doivent toujours être les plus importantes.

Pour créer un plus grand contraste, vous pouvez mélanger différents poids d'une même police ainsi que des empattements et sans empattements. Cependant, essayez de ne pas utiliser plus de deux polices, afin que le formulaire n'ait pas l'air désordonné.

Un formulaire contextuel sur le blog de Tim Ferris est un excellent exemple de bonne typographie. Vous pouvez clairement voir la différence entre le logotype, le titre, le sous-titre, le nom de l'auteur et deux boutons, le plus important d'entre eux étant le CTA souhaité.

Le titre attire le plus l'attention grâce au contraste entre le fond et le texte. Après cela, votre œil se déplace directement sur le bouton CTA. Ensuite, vous remontez pour lire les détails - le sous-titre et le nom de l'auteur.

Les déclencheurs sociaux, à leur tour, offrent une forme pop-up plus légère basée sur une typographie audacieuse. Tout d'abord, vous voyez le titre intrigant sous la forme d'une question, vos yeux se déplaçant immédiatement vers le bouton CTA puissant. La description est séparée visuellement par un intercalaire et est écrite dans une police de taille plus petite.

Soyez conscient de vos choix de couleurs

Une couleur est un outil puissant qui peut être utilisé pour changer complètement l'ambiance de vos formulaires pop-up. Les tons pastel apporteront une ambiance plus romantique et légère, tandis que des couleurs vives et éclatantes pourraient rendre votre pop-up plus extravagante.

Pour choisir les couleurs qui se combinent bien, utilisez des outils comme Adobe Color. C'est gratuit et vous permet de créer des palettes de couleurs uniques à partir de zéro, de les extraire d'images ou simplement d'explorer les couleurs et les tendances pour trouver l'inspiration.

Un exemple de pop-up de Tommy Hilfiger présente un grand contraste entre le rouge, le bleu et le blanc. Le titre est écrit en majuscules grasses, sa partie la plus importante étant surlignée en rouge. Tout de suite, votre attention est attirée du titre vers le bouton d'inscription.

Si vous trouvez les choix de conception minimalistes plus attrayants, vous pouvez utiliser une seule couleur primaire pour l'arrière-plan et une couleur secondaire pour le texte et d'autres éléments.

Par exemple, les studios Horizn n'ont pas peur d'introduire une forme totalement noire car ils utilisent du texte et des boutons blancs pour contraster le fond monochrome. Un tel contraste ainsi que l'arrière-plan fané d'un site Web rendent cette forme bien visible.

Elvie&Leo, vice versa, utilisent un formulaire totalement blanc avec du texte noir. C'est simple mais chic grâce au choix intelligent d'une police serif pour le message principal et le bouton noir, qui contraste avec le reste du formulaire.

Le site Web My Deal offre une autre option minimaliste avec une touche de couleur. Un avion en papier rouge est dirigé vers la droite - c'est là qu'un bouton d'inscription rouge se trouve. Remarquez comment la typographie est utilisée pour mettre en évidence le message principal du formulaire.

Expérimenter les formes et l'interactivité

Ajoutez un peu plus de fun à vos pop-ups pour augmenter l'engagement. Par exemple, Jackpot Candles vous propose de participer à une loterie spin-to-win.

Lorsque vous faites tourner la roue, vous pouvez gagner l'un des quatre prix. Voici à quoi ressemble la fenêtre contextuelle lorsqu'elle est activée :

Jouer avec les formes vous permet d'attirer plus d'attention sur la fenêtre contextuelle. Email Monday, par exemple, a eu recours à la forme inhabituelle du formulaire d'abonnement - un cercle. En le combinant avec un cercle plus petit, qui montre la photo du fondateur du site Web, la marque peut avoir toutes les chances d'obtenir plus de prospects.

À ton tour

Pour rendre vos formulaires d'abonnement accrocheurs, rappelez-vous ces principes simples de conception de fenêtres contextuelles :

• assurez-vous que vos formulaires contextuels sont conçus dans le style d'entreprise de votre entreprise ;
• n'oubliez pas le nombre d'or et les théories de la Gestalt lorsque vous placez des éléments de conception et travaillez avec la typographie de votre formulaire ;
• assurez-vous que le texte de vos pop-ups est facile à lire ;
• utilisez judicieusement les couleurs pour mettre l'accent sur les parties les plus importantes d'une fenêtre contextuelle ;
• ajoutez de l'interactivité et jouez avec différentes formes pour rendre vos pop-ups amusants et extraordinaires pour les utilisateurs.

Prêt à créer gratuitement votre premier formulaire pop-up avec SendPulse ?