12 meilleures pratiques de conception de popup que vous devez connaître (pour mobile et ordinateur de bureau)

Malgré la croyance populaire, les gens sont aujourd'hui plus qu'heureux de s'engager avec des popups.

Certes, si vous créez de bons popups.

Et faites-nous confiance, nous avons pu constater à quel point ils sont efficaces pour stimuler les conversions et développer votre liste d'abonnés.

Mais les marques doivent savoir ce qui sépare un popup élégant et accrocheur de quelque chose qui va ennuyer les visiteurs et les détourner. C'est là que nous pouvons vous aider.

Dans ce guide, vous apprendrez :

• Les facteurs de ce qui fait un "bon" popup de bureau ou mobile (avec treize exemples)
• Trois erreurs majeures qui peuvent nuire aux performances d'un popup par ailleurs prometteur
• Cinq exemples de conception de popup bonus pour développer votre liste de diffusion

Sur ce, plongeons !

Vous souhaitez créer des popups efficaces qui résonnent auprès de vos visiteurs ? Téléchargez notre liste de contrôle de messagerie contextuelle et multipliez par 3 votre taux de conversion contextuelle !

Si votre objectif est d' obtenir plus d'abonnés directement à partir de votre site Web, une fenêtre contextuelle d'e-mail peut faire l'affaire.

Voici quelques principes pour augmenter les taux de conversion de vos popups sur desktop. (De plus, ils fonctionnent également avec les visiteurs mobiles.)

1. Attirez l'attention de vos visiteurs avec des combinaisons de couleurs éclatantes

Un jeu de couleurs captivant est le moyen le plus simple de rendre vos popups incontournables.

Quelque chose de lumineux ou de décalé peut arrêter les visiteurs dans leur élan. Par exemple, cette conception de popup plein écran de Visme.co est lumineuse, audacieuse et fait ressortir leur message.

Les couleurs de votre popup n'ont pas nécessairement besoin d'être vives ou même "fortes". Un simple contraste entre la lumière et l'obscurité peut aider vos fenêtres contextuelles à apparaître .

Par exemple, cette palette de couleurs blanche et noire de Thredup.com est simple mais élégante et frappante.

2. Attirez les visiteurs en mettant en gras vos phrases d'avantages clés

Avouons-le : la durée d'attention des acheteurs est de plus en plus courte.

Il est donc préférable que vos messages marketing soient immédiatement compréhensibles.

Faites le point sur :

• Gardez vos popups brefs : pensez "moins c'est plus" et évitez les murs de texte.
• Rédigez des titres percutants avec des phrases percutantes comme « gratuit », « maintenant » ou « économisez » pour mettre immédiatement en évidence les avantages de votre offre.
• Séparez votre texte contextuel en sections claires (pensez : titre → corps du texte → bouton d'appel à l'action (CTA)) pour guider vos lecteurs vers l'adhésion.

Vous trouverez ci-dessous un exemple impressionnant d'une offre de Trade Coffee qui suit les meilleures pratiques de conception de popup indiquées ci-dessus.

3. Présentez vos popups comme une offre personnalisée (indice : pas une publicité)

Idéalement, vos popups ne devraient pas ressembler à des publicités.

Nous comprenons : de nombreux consommateurs ne sont pas exactement ravis des popups. Des années et des années de publicités ennuyeuses ont laissé des popups avec une mauvaise réputation.

L'astuce pour apaiser les tensions et instaurer la confiance avec les visiteurs de votre site Web ? Présentez simplement vos popups comme quelque chose qui est là pour aider les clients, pas pour leur vendre.

Considérez les offres qui demandent à vos visiteurs leur contribution et leur désir.

Les popups basés sur les préférences sont parfaits pour augmenter les conversions. Étant donné que 57% des consommateurs sont heureux de partager des informations personnelles en échange d'offres personnalisées.

Par exemple, cette fenêtre contextuelle d'inscription par e-mail de Vuori permet aux opt-ins de recevoir des e-mails personnalisés en fonction des préférences personnelles d'identification de genre d'un individu.

Ce type de message donne non seulement à l'abonné l'impression d'obtenir une offre, mais cela signifie également que vous êtes plus susceptible d'envoyer des offres pertinentes à l'avenir.

Voici un autre exemple d'Uniqlo. Notez comment le message se présente comme un coup de main ("aidez-nous à personnaliser les messages pour vous") :

Des messages personnalisés comme celui-ci agissent comme un moyen d'encourager les visiteurs à passer plus de temps sur votre site et à interagir avec votre marque. Ceci est similaire aux popups gamifiés .

Quelques secondes supplémentaires sur place peuvent sembler peu, mais elles représentent un temps précieux pour établir une connexion avec de nouveaux prospects.

4. Connectez-vous à des clients potentiels grâce à une copie conversationnelle

Bâtir la confiance est un facteur décisif pour vos popups.

C'est pourquoi il est si important de communiquer un ton amical et positif tout au long de votre copie contextuelle.

Les fenêtres contextuelles du site Web ne doivent pas être étouffantes ou commerciales par défaut. Parlez à vos clients potentiels comme un ami plutôt qu'un objectif de vente.

Cette fenêtre contextuelle de Quip est un excellent exemple de ce dont nous parlons. Convivial et accueillant sans aucun jargon ni « langage des affaires ».

5. Invitez les visiteurs à cliquer sans interrompre l'expérience utilisateur

Les popups n'ont pas besoin d'être totalement visibles pour être efficaces.

En fait, parfois, la subtilité peut grandement contribuer à la constitution de votre liste.

Ne cherchez pas plus loin que la popularité des messages secondaires et des barres collantes comme preuve.

Plutôt que de risquer d'interrompre vos visiteurs pendant qu'ils naviguent sur votre site, ces formats de popup servent de petit coup de pouce et d'invitation à consulter votre offre.

Découvrez l'exemple de Free People ci-dessous :

Les visiteurs qui optent pour ces types de popups le font sans pression, ce qui signifie qu'ils sont plus susceptibles d'être enthousiastes à propos de ce que vous proposez.

De plus, ces popups sont moins susceptibles de perturber le flux ou l'esthétique de votre site.

6. Assurez-vous que votre popup atteint les gens au bon moment

Il s'agit de l'une des meilleures pratiques popup les plus importantes en ce qui concerne ce qui se passe dans les coulisses de vos offres.

Vos popups ne doivent pas se déclencher au hasard. Nous vous recommandons d'attendre quelques secondes (au moins cinq) avant de présenter toute sorte de popups aux visiteurs.

Vous pouvez facilement modifier et personnaliser les contrôles de temps sur les fenêtres contextuelles via OptiMonk. La possibilité de modifier et de tester instantanément la synchronisation des fenêtres contextuelles peut vous aider à déterminer ce qui fonctionne le mieux pour vos visiteurs.

Les contrôles facilitent également le respect des meilleures pratiques en matière de pop-up d'intention de sortie et empêchent votre trafic potentiel de rebondir.

63 % du trafic de commerce électronique provient d'appareils mobiles. Cela signifie que vous ne pouvez littéralement pas vous permettre d'ignorer les abonnés provenant de smartphones.

Vous trouverez ci-dessous une ventilation des meilleures pratiques contextuelles pour vous aider à augmenter vos taux de conversion sur mobile.

7. Encouragez les visiteurs à agir rapidement en étant bref avec votre copie

Être économe avec vos mots est une valeur sûre pour les popups.

C'est particulièrement important lorsque vous essayez d'atteindre des visiteurs qui utilisent des écrans plus petits.

Si vous devez inclure une clause de non-responsabilité, assurez-vous qu'elle ne détourne pas l'attention du contenu de votre message. Alors ne mâchez pas vos mots.

Par exemple, cette fenêtre contextuelle d'abonnement par e-mail de Casetify va droit au but.

Découvrez la fenêtre contextuelle de Skullcandy ci-dessous. Le slogan clair et audacieux parle de lui-même et ne nécessite pas une tonne de clarifications pour les visiteurs sur la clôture pour s'inscrire.

8. Rendez vos popups aussi conviviales que possible

S'engager avec votre popup devrait être simple pour les utilisateurs mobiles.

Cela dit, vous seriez surpris de voir combien de popups mobiles sont un cauchemar à naviguer.

Trop d'endroits à exploiter. Couleurs déroutantes. Défilement inutile. La liste se rallonge de plus en plus.

Bien que les offres mobiles soient généralement minimalistes, vous devez tout de même garder à l'esprit certaines des meilleures techniques. Ceci comprend:

• Boutons définis (pour s'inscrire et se retirer, si nécessaire)
• Un titre clair et une copie lisible, idéalement adaptés à une seule page (pas de défilement requis)
• Des couleurs qui séparent les différents éléments de votre popup

Cela explique la popularité des popups mobiles en plein écran qui cochent les cases ci-dessus.

Par exemple, cette offre de Skechers est claire et facile à naviguer, que quelqu'un soit intéressé ou non.

Idem pour ce popup mobile de Pura Vida :

9. Faites vos offres sans effort et nécessitez moins de champs de formulaire

Ce n'est pas un hasard si tous les exemples de fenêtres contextuelles mobiles tout au long de cet article ne nécessitent qu'une adresse e-mail pour s'abonner.

Les champs uniques signifient moins d'efforts et moins de distractions pour les visiteurs de votre site. Cela rend finalement le processus d'adhésion rapide et indolore.

Gagner quelques précieuses secondes avec moins de champs pourrait faire la différence entre un nouvel abonné et un visiteur rebondi.

10. Choisissez un puissant CTA (call-to-action phrase) qui attire vos visiteurs

Les phrases CTA sont un élément crucial de l'optimisation de la conversion.

Plus votre CTA est convaincant, plus vous avez de chances de marquer un opt-in.

Le CTA de Nectar Sleep ("Save $399") promet des économies massives et rend leur offre plus précieuse.

Demander simplement aux visiteurs du site de « cliquer ici » est une occasion perdue de mettre en évidence les avantages.

11. Utilisez des chiffres pour mettre en évidence les économies importantes dès que possible

Vous pouvez également vous reporter à l'exemple ci-dessus. Les chiffres sont populaires à saupoudrer dans les fenêtres contextuelles pour à la fois présenter des économies et communiquer une valeur immédiate.

Il est plus facile pour notre cerveau de traiter les nombres que de lire un texte. Remarquez combien de popups mobiles s'appuient sur "10 $ DE RÉDUCTION" ou "ÉCONOMISEZ 10 %" comme élément central de leur offre ?

Voici un titre basé sur des chiffres qui encourage les gens à s'inscrire à une newsletter d'Arctic Fox. Notez également le design accrocheur :

12. Vérifiez que vos popups sont compatibles avec Google

Bien que les popups n'aient pas d'impact direct sur la réputation de votre site auprès de Google, le moteur de recherche a pris position sur le contenu « intrusif » .

Vos popups ne doivent pas gêner votre expérience utilisateur ni les empêcher d'accéder au contenu de votre site.

Cela explique pourquoi vous devez faire attention aux fenêtres contextuelles en plein écran, en ne les présentant qu'après que les visiteurs ont eu la chance de naviguer.

Imaginez que quelqu'un visite votre site pour la première fois via mobile. Vous ne voulez pas signaler votre site comme spam ou refuser immédiatement de nouveaux visiteurs, n'est-ce pas ? Cela pourrait être une mauvaise nouvelle pour votre taux de rebond.

Bonne question! Parfois, la meilleure façon de s'en tenir aux meilleures pratiques popup les plus importantes est de savoir ce qu'il ne faut pas faire.

Examinons les plus grosses erreurs qui pourraient potentiellement réduire les performances de vos popups.

1. Communiquer du contenu non pertinent ou inutile

Les popups "occupés" peuvent être discordants. Assurez-vous de limiter votre texte et évitez les messages multiples. Tenez-vous en à une ou deux phrases avec un seul thème. Il est moins susceptible de submerger les visiteurs du site.

2. Présenter une offre décevante

Demandez-vous : quelle valeur offrez-vous aux abonnés potentiels en échange de leurs adresses e-mail ? Des remises importantes, la livraison gratuite et des récompenses pour les premiers acheteurs sont souvent nécessaires pour impressionner les acheteurs et les inciter à s'abonner.

Obtenez des incitations créatives et faites un remue-méninges qui vont au-delà des mises à jour de base ou d'une remise de 5 %.

3. S'appuyer sur des conceptions de popup à l'ancienne et spammées

Chez OptiMonk, nous sommes en croisade contre les mauvaises popups.

Occupé. Spam. Salesy. Vous savez ceux dont nous parlons.

La bonne nouvelle? Créer des popups élégants et dignes d'être cliqués est possible pour n'importe quelle marque, grâce à des outils comme OptiMonk.

En ce qui concerne la conception de popups, un peu d'inspiration peut grandement contribuer à la création d'offres impressionnantes.

Voici cinq excellents exemples de conception de popup qui vous aident à développer votre liste de diffusion (et une ventilation de ce qu'ils font bien).

1. Tentée

Ce message annexe de Tentree est un brillant exemple de popup non intrusif.

Remarquez comment le bouton CTA de l'offre se démarque du reste de la palette de couleurs du site ? Alors que la subtilité du sidemessage donne l'impression qu'il fait en fait partie de la page d'accueil.

2. NOIR et gras

Cette offre est, à juste titre, audacieuse avec un titre direct qu'il est difficile de manquer.

La possibilité de choisir entre les options de boissons met également en évidence la manière d'utiliser la personnalisation et les préférences pour sceller l'accord avec les nouveaux visiteurs.

3. Bailly

Parfois, il vaut mieux garder les choses simples. Ce popup d'e-mail de Bailly prouve qu'un design de popup n'a pas besoin d'être sorcier.

Une offre simple en échange de l'e-mail de vos visiteurs est toujours un jeu équitable.

4. Prenez une maison verte

Ceci est encore un autre exemple de popup simple mais efficace qui aide à développer votre liste de diffusion.

Le langage conversationnel ("Vous voulez une offre spéciale sur votre première commande ?") et CTA ("OUI S'IL VOUS PLAÎT") montre comment les choix de copie de base peuvent convaincre les visiteurs de fournir leurs informations.

5. Cuillère magique

Idéalement, votre offre popup devrait pouvoir parler d'elle-même. Cette publicité de Magic Spoon promet quelque chose de grand avec une chance de gagner des céréales gratuites pendant un mois, en utilisant un langage clair et des mots puissants ("gratuit", "gagner") pour faire une déclaration.

Et avec cela, nous terminons notre guide!

Quand il s'agit de faire un "bon" popup, il y a des tonnes de pièces mobiles à gérer.

J'espère que notre liste vous a indiqué sur quoi vous devez vous concentrer. Ces conseils peuvent vous guider vers plus d'abonnés et de conversions, que vous optimisiez vos campagnes actuelles ou que vous partiez de zéro.

Pour en savoir plus sur la création de popups à haute conversion, consultez notre Guide ultime des popups.