5 conseils faciles à mettre en œuvre pour concevoir un popup convaincant (avec 24 exemples)

Les popups et autres messages sur site apparaissent généralement sur « l'espace de vente au détail » le plus premium dont vous disposez pour communiquer avec vos clients : votre site Web. Ils apparaissent aux personnes qui s'intéressent le plus à vos produits. C'est pourquoi ils ont cliqué, n'est-ce pas ? Et cela signifie qu'ils sont les plus ouverts à toutes les offres intéressantes de votre part.

Pourtant, de nombreux spécialistes du marketing présentent des popups incroyablement basiques, sans imagination et même carrément laids.

Pourquoi?

Parce que les popups sont puissants et qu'ils obtiennent des résultats… même si vous ne faites pas beaucoup d'efforts pour les concevoir. Les spécialistes du marketing habitués à des taux de clics inférieurs à 1 % sont souvent satisfaits d'un taux de conversion de 3 à 5 % pour leurs popups. Cela semble "assez bon".

En réalité, ces spécialistes du marketing sont assis sur une mine d'or - ils ne l'ont tout simplement pas encore réalisé. Avec quelques ajustements simples, ils pourraient doubler ou tripler les taux de conversion de leurs popups. Avec un peu plus de travail (comme personnaliser le message pour les segments clés), ils pourraient créer des popups avec des taux de conversion de 30 à 50 %.

Quelle différence cela ferait-il pour leurs entreprises ?

La conception est super puissante avec les popups, et la création d'une belle popup bien conçue peut être votre activité de retour sur investissement la plus élevée en tant que spécialiste du marketing. Investissez seulement quelques minutes de votre temps maintenant, et vous pourriez avoir un actif qui vous rapportera de l'argent pour les mois ou les années à venir !

Plutôt que de passer des heures et des heures à micro-optimiser les publicités Facebook pour une augmentation de 5 % du CTR, je recommande de passer une fraction de ce temps à optimiser vos messages sur site.

Voyons comment vous pouvez tirer le meilleur parti de la conception de vos popups !

Tout d'abord : pourquoi la conception d'un popup est-elle si importante ? N'est-ce pas juste un simple message, où le contenu l'emporte sur le design ?

Bien que le message et la proposition de valeur de votre popup soient très importants, un bon design peut vraiment augmenter l'efficacité de n'importe quel message. Les popups sortent généralement de nulle part, et ils n'ont que quelques secondes pour impressionner le visiteur. Et dans notre monde exigeant d'attention, impressionner un visiteur de site Web n'est pas une tâche facile.

Avoir une belle fenêtre contextuelle unique comme celle ci-dessous pourrait obtenir des taux de conversion allant jusqu'à 50 % ! Pendant ce temps, présenter la même offre (10 % de réduction régulière) d'une manière ennuyeuse et uniquement textuelle serait chanceux d'atteindre un taux de conversion de 10 %. C'est une différence de 400 % !

Même les grandes marques se trompent parfois.

Regardez simplement cette fenêtre contextuelle de Mailchimp. Il s'agit très probablement d'une conversion inférieure à 2 %, ce qui signifie que 98 % de leurs visiteurs ont été perturbés (et donc ennuyés) inutilement.

Maintenant que nous savons pourquoi la conception de popups est importante et que nous avons vu un exemple de mauvaise conception de popups que vous ne voulez pas copier, passons aux bonnes choses : comment concevoir des popups convaincantes et quelques exemples stellaires d'inspiration.

Contrairement à certains mythes du marketing en ligne, aucune combinaison de couleurs n'est supérieure à toutes les autres.

Il y a cependant deux facteurs importants lors du choix des couleurs :

• Vous devriez être capable de créer un contraste (et donc de vous concentrer) sur vos éléments les plus importants
• Vos choix de couleurs doivent correspondre à votre image de marque et créer une expérience cohérente et fluide.

Nous discuterons de ces deux conseils plus en détail dans les sections à venir.

Mais en règle générale, vous pouvez choisir un fond blanc et utiliser la couleur principale de votre marque comme couleur de titre et de bouton CTA. Il s'agit d'une solution très classique et à faible risque.

Découvrez cet exemple d'Enro :

Si vous préférez utiliser les couleurs de votre marque comme arrière-plan, Mented Cosmetics en est un bel exemple. Cela correspond non seulement aux couleurs de leur marque, mais souligne également davantage les valeurs de leur entreprise :

Vous pouvez également utiliser des palettes de couleurs inversées avec des arrière-plans sombres. Dans ces cas, les polices doivent principalement être blanches ou gris clair. L'utilisation de couleurs plus saturées nuirait à la lisibilité de vos messages.

"Moins c'est plus" - c'est un dicton qui n'est que trop vrai quand il s'agit de popups.

Étant donné que vous disposez d'un temps très limité pour attirer l'attention et susciter l'intérêt, votre message et votre conception doivent être extrêmement simples.

Essayez d'être impitoyable avec chaque mot et élément de votre popup, et assurez-vous que chacun est absolument nécessaire.

Lorsque vous pensez que c'est assez simple, essayez d'aller encore plus simplement jusqu'à ce qu'il ne reste plus qu'une proposition de valeur principale et un CTA.

Vous vous demandez peut-être : cela signifie-t-il que nous devrions nous limiter aux fenêtres contextuelles en texte noir et blanc comme celle ci-dessous ?

La réponse est un NON retentissant !

La plupart des gens ne liront que quelques mots de votre contenu contextuel avant de décider de continuer à lire ou simplement de fermer la fenêtre contextuelle. Cela signifie que la conception de votre message (couleurs, images, esthétique, etc.) aura au moins le même impact sur l'efficacité de votre message que votre titre.

Bien sûr, si l'essence de votre message est axée sur des produits spécifiques, alors (comme sur une page de destination de catégorie), vous devez garder le reste de votre message aussi simple que possible pour que l'accent reste sur les produits.

Découvrez comment Burberry le fait ci-dessous : ils utilisent un message simple et épuré avec un contraste parfait et se concentrent sur trois produits récemment consultés.

Vos messages sur site n'apparaissent pas dans le vide, mais dans le cadre de votre site Web, même s'ils apparaissent en superposition. Il est donc important que vos popups se fondent parfaitement dans le thème de votre marque.

Cela signifie que vous devez choisir des éléments (polices, images, etc.) similaires à ceux utilisés sur votre site Web.

ClickUp est un excellent exemple de comment créer des popups simples mais efficaces, qui correspondent parfaitement au guide de style de la marque :

Vous pouvez facilement garder vos popups sur la marque en utilisant les polices de votre marque et votre logo, comme le fait Ramp :

Même si vous êtes dans le monde B2C où vous faites la promotion d'autres marques, vous pouvez extraire des éléments des deux marques, comme le fait Sephora avec cette fenêtre contextuelle liée à Gucci :

Il est important que vos popups se fondent avec le thème de votre marque, oui. Cependant, il est également crucial qu'ils se démarquent et attirent l'attention du spectateur.

Si vous avez beaucoup de contenu (par exemple une liste à puces des éléments inclus dans votre offre), assurez-vous que votre proposition de valeur est claire dans l'en-tête.

Assurez-vous également que la couleur CTA se démarque du reste de la fenêtre contextuelle et que le bouton est grand et lisible. Le titre et le CTA sont généralement les deux éléments les plus importants de vos popups, alors assurez-vous qu'ils ont suffisamment de contraste.

Par exemple, vous pouvez choisir une couleur vive et contrastée pour votre bouton CTA. Cela le rendra beaucoup plus accrocheur et vos visiteurs seront plus susceptibles de cliquer dessus.

Si votre fenêtre contextuelle est principalement noire, vous pouvez envisager d'utiliser l'orange ou le rose vif pour votre bouton d'appel à l'action.

L'utilisation de différentes tailles de police est le moyen le plus simple d'attirer l'attention de votre public sur l'essence même de votre popup. Même si vous avez plusieurs types de textes sur la même fenêtre contextuelle, vous pouvez utiliser des tailles de police, des couleurs et d'autres techniques d'augmentation du contraste pour mettre l'accent sur la valeur principale de votre message, comme le fait Komily :

Si vous avez un site Web sombre, vous devez souvent introduire un peu de contraste en jouant avec la couleur de votre lightbox (vous savez, cette zone grise et semi-transparente autour de vos popups).

Par exemple, si votre popup a une couleur sombre, vous pouvez utiliser une superposition plus claire pendant son affichage.

Ou vous pouvez utiliser une version plein écran de votre popup, couvrant 100 % de l'écran, ce qui garantit que votre popup sera visible, comme dans l'exemple ci-dessous :

Si vous avez plusieurs boutons, vous pouvez utiliser différentes couleurs de bouton pour mettre en valeur le CTA principal, indiquant aux utilisateurs de manière subtile quelle option est un meilleur choix pour eux :

Une autre stratégie consiste à insérer des éléments visuels comme des flèches qui pointent vers le bouton d'appel à l'action. Vous pouvez utiliser des objets directionnels lumineux et dessinés à la main pour souligner votre appel à l'action, comme dans la fenêtre contextuelle ci-dessous :

Une autre façon de mettre en valeur votre offre grâce à la conception de popups consiste à utiliser des formes de modèles inhabituelles. Ceux-ci brisent le modèle des popups rectangulaires génériques que les gens voient partout sur le Web, et cela suscite l'intérêt simplement parce qu'ils sont uniques.

Attention à ne pas mettre l'accent sur trop d'éléments. Si vous avez une fenêtre contextuelle d'enquête comme celle ci-dessous, assurez-vous d'utiliser un style de bouton secondaire moins agressif pour vos boutons :

Comme le dit l'adage, "une image vaut mille mots". C'est certainement vrai pour les popups !

En fait, le cerveau humain traite les images 60 000 fois plus vite que le texte, et 90 % des informations transmises au cerveau sont visuelles.

C'est pourquoi de superbes visuels peuvent grandement améliorer l'efficacité de votre messagerie sur site. Le but est de choisir les bons visuels pour amplifier le message écrit, comme le fait cette popup :

Vous devez trouver des images de haute qualité pour votre popup. Il est préférable d'utiliser de vraies photos de vos produits plutôt que des images d'archives, comme le fait BlendJet :

La meilleure approche consiste à parcourir les images de votre produit/marque et à choisir une image pertinente qui correspond à votre message, comme cette fenêtre contextuelle The Oodie :

Si vous organisez des ventes saisonnières, il est recommandé de mettre à jour vos messages avec les saisons. Être pertinent et opportun donne l'impression que ces offres sont limitées dans le temps, ce qui augmente la peur de passer à côté (et donc, les conversions) :

Même si vous n'avez rien de spécifique à proposer, le simple fait de mettre à jour vos messages pour qu'ils correspondent à la saison en cours pourrait encore améliorer considérablement les taux de conversion, tout comme ce message :

Si vos produits ont l'air amusants ou utiles sur les photos, les gens seront plus susceptibles de les acheter et de s'inscrire à vos listes d'e-mails ou de SMS en échange de remises.

Si vous essayez d'encourager les visiteurs à demander un cadeau gratuit, vous pouvez utiliser des mots et des images qui relient votre message au cœur de votre public, comme le fait Castlery :

J'espère que vous avez trouvé ma liste de bonnes pratiques et d'exemples de conception de popup utiles !

L'importance d'un bon design de popup est souvent négligée. Mais avec un peu de chance, maintenant que vous avez vu l'impact qu'un design intelligent peut avoir, vous ne reviendrez plus jamais aux popups ennuyeux et ho-hum ! Investir du temps dans la conception de superbes popups sur la marque aura un impact ÉNORME sur les taux de conversion et enverra votre retour sur investissement très haut.

Nouveau sur les pop-up ? Commencez avec l'un de nos modèles prêts à l'emploi ici !