Pop-up et pop-in, tout ce que vous devez savoir !

• Orienter la navigation des internautes
• Mettre des contenus importants en avant (rédactionnel, vidéos, promotion, etc.)
• Générer des leads
• Qualifier des contacts connus
• Inviter les internautes à se connecter à un service en ligne
• Inciter au partage sur les réseaux sociaux

Bon nombre d’objectifs (souvent marketing) peuvent nécessiter l’utilisation d’overlays. Que vous soyez professionnel du marketing ou simple utilisateur, vous et moi avons déjà été confrontés à des overlays en tout genre (plus souvent appelés pop-up ou pop-in). Des outils marketing qui suscitent souvent l’agacement des internautes, mais qui restent très utilisés par les professionnels du marketing puisqu’ils peuvent s’avérer redoutables face à des audiences toujours plus volatiles.

Dans la famille des overlays

1/ Pop-up

Qu’est-ce que c’est ?

Une pop-up est une nouvelle fenêtre ouverte par votre navigateur. Les pop-ups sont synonymes d’invasion et d’expérience utilisateur déplorable. À juste titre puisqu’elles bloquent les utilisateurs dans leur navigation jusqu’à ce qu’elles soient fermées. Il est beaucoup plus rare qu’avant d’être interrompu par une pop-up, car elles ne respectent pas les standards d’expériences utilisateur érigées par Google. D’ailleurs, les navigateurs les plus connus (et implantés) sur le marché comme Google Chrome ou encore Firefox empêchent nativement l’affichage intempestif de pop-up.

Généralement, les pop-ups servent à diffuser des publicités (technique très intrusive pour les internautes). Cela provoque souvent un sentiment d’agacement chez les internautes et c’est peu dire quand on voit (comme ci-dessous) ce que les internautes demandent régulièrement à Google.

À en croire les questions des internautes posées à Google, les pop-ups peuvent devenir très encombrantes surtout quand elles ne se ferment pas. Pour information, j’ai recherché le terme « pop-up » dans le célèbre moteur de recherche et voici les premiers résultats associés à ma requête qui sont apparus.

Mais une pop-up n’est pas forcément le fruit de publicités malveillantes, il est possible d’en rencontrer une lorsque vous interagissez avec un site web et quittez la page web brusquement avant d’avoir enregistré ou publié votre travail comme dans l’exemple ci-dessous.

Dans cet exemple, j’ai créé un brouillon d’emailing. Après avoir saisi du texte dans l’éditeur, j’essaie de quitter l’onglet. C’est alors qu’une pop-up apparaît pour m’indiquer qu’en quittant la page web le contenu créé risque d’être perdu puisque je n’ai pas fait de sauvegarde. En règle générale, les pop-ups ont très mauvaise réputation, mais ici on est content de la voir apparaître pour nous rappeler de sauvegarder.

D’un point de vue SEO (référencement naturel), les pop-ups sont à proscrire puisque depuis 2017 Google pénalise les sites web affichant des pop-ups.

2/ Pop-in

Qu’est-ce que c’est ?

Si pop-up et pop-in sont souvent confondues, elles sont radicalement différentes puisque les pop-ins sont déclenchées grâce au code présent sur une page web, c’est-à-dire que ce n’est pas une fenêtre qui ouvre une nouvelle fenêtre de navigation. Contrairement à la pop-up, la pop-in laisse la possibilité d’interagir avec le contenu de la page (sur laquelle elle est déclenchée). Une pop-in est donc beaucoup moins intrusive (selon les formats utilisés) qu’une pop-up à condition tout de même de respecter certaines règles qui relèvent du bon sens pour ne pas nuire à l’expérience utilisateur et par la même occasion à vos efforts SEO.

Il existe plusieurs formats de pop-ins :

• Scroll Box (fenêtre déroulante)
• Pop-in classique
• Welcome Mat (fenêtre pleine largeur)
• Smart bar (bannière déroulante)
• Inline (bannière dans le contenu)
• Click Trigger Pop-in (fenêtre déclenchée par un clic)

Les principaux formats d’affichage de pop-in

1/ Scroll box (ou fenêtre déroulante)

C’est sans doute le format de pop-in que nous rencontrons le plus couramment sur le web.

Il s’agit d’une fenêtre qui apparaît généralement de bas en haut à gauche (elles peuvent également commencer du haut vers le bas, mais c’est plus rare), à droite ou encore au milieu de l’écran des internautes.

Les fenêtres déroulantes sont souvent utilisées pour vous inciter à vous abonner à une newsletter, mais aussi pour recueillir le consentement pour les différents cookies de tracking utilisés par un site lors de la première visite d’un internaute.

Pour cet exemple, j’ai créé une pop-in qu’il est possible de retrouver sur de nombreux sites en ligne. Ici, la scroll box glisse de bas en haut pour un affichage sur le côté droit. La scroll box pourrait aussi être située à gauche ou au centre de la fenêtre.

2/ Pop-in classique

La pop-in dite classique ressemble en tout point à sa sœur qui n’est autre que la fenêtre déroulante (Scroll Box). Une différence principale distingue la pop-in classique de la fenêtre déroulante. Celle-ci n’apparaît pas à la suite d’un déplacement de bas en haut (et inversement), mais instantanément au centre de la page et non en bas (sur la droite, la gauche, ou au centre) de la page.

Dans le cadre du règlement européen sur la protection des données, elle est de plus en plus utilisée et affichée instantanément après le chargement d’une page (si le visiteur est inconnu) pour les inciter les utilisateurs à accepter les cookies d’un site web.

Dès la première connexion sur le site Emarketing.fr, une pop-in centrée au milieu de la page apparaît pour vous demander votre consentement comme le prévoit le RGPD. On peut voir que le contenu derrière la pop-in est toujours visible, mais obstrué par un overlay noir transparent permettant ainsi d’orienter les yeux des internautes sur la pop-in.

Dans cet autre exemple, la pop-in invite le lecteur à saisir son adresse email pour s’abonner à la newsletter de codeur.com

3/ Welcome mat

C’est un format que je trouve particulièrement irritant et qui me pousse dans la majorité des cas à écourter mon séjour sur un site web, il a néanmoins le mérite d’exister.

Un welcome mat prend beaucoup de place, de fait, il s’insère sur l’intégralité d’une page web. Il assure une visibilité maximum aux messages marketing (abonnement à une newsletter, mise en avant d’événements ou d’offres promotionnelles, acceptation des cookies, etc.). Attention toutefois à éviter de les déclencher sur mobile au risque d’être pénalisé par Google qui n’aime pas quand l’expérience utilisateur est entravée par du bruit.

Un autre exemple qui montre comment Sarbacane utilise une pop-in welcome mat pour demander le consentement pour l’utilisation des cookies de tracking présent sur le site web

Je ne suis pas un adepte des welcome mats pour les raisons que j’évoquais en amont, mais pour les besoins de l’article j’en ai créé une. Elle a pour objectif d’augmenter le nombre d’abonnements à la newsletter Mediego.

4/ Smart bar (idéal sur mobile)

La smart bar est comme son nom l’indique une… barre (ou un bandeau) qui est affichée aux dessus du menu de navigation principale sur un site web.

Contrairement aux formats évoqués en amont, les internautes sont moins habitués à rencontrer de smart bar. Ce format particulier de pop-in est celui qu’on pourrait qualifier de plus discret. Il s’intègre parfaitement à un site web sur ordinateur comme sur mobile et c’est là toute la force des smart bars puisqu’elles ne sont pas intrusives aux yeux des internautes.

Si habituellement j’ai tendance à déconseiller l’utilisation des pop-ins sur mobile, je dirais que dans une moindre mesure ce format est le seul à être vraiment adapté aux mobiles puisqu’il n’obstrue pas la navigation sur le site web.

Voici trois exemples de pop-ins smart bar. Comme je le disais au-dessus, dans la majorité des cas, elles sont présentes au-dessus du menu de navigation, c’est ce que cet exemple confirme. Nous pouvons voir que beaucoup de sites les utilisent pour inciter les internautes à télécharger ou ouvrir l’application quand un utilisateur navigue sur le site depuis un mobile (en l’occurence YouTube et Le Monde dans l’exemple). Au milieu, Elegant Themes rendu célèbre pour leur builder WordPress utilise une smart bar pour inciter les internautes à consulter les fonctionnalités de leur thème et builder disponibles pour WordPress.

5/ Inline

Les pop-ins inline plutôt que d’ouvrir un semblant de nouvel onglet au sein d’une page sont directement intégrées aux contenus et se déclenchent uniquement si les conditions sont réunies. Comme c’est le cas pour la smart bar, les pop-ins inline passent (presque) inaperçues dans la navigation des internautes puisqu’ils ont l’impression que le contenu est ainsi constitué et ne voient pas apparaître une pop-in d’un coup sans raison apparente.

Le format inline permet aussi d’afficher un message à l’écran sur plus d’espace qu’une smart bar et ainsi donner plus de poids aux messages et contenus à promouvoir aux internautes.

6/ Click trigger pop-in

La click trigger pop-in est un format particulier de pop-in que je n’ai pas beaucoup rencontré dans ma carrière d’internaute, mais qui pour autant a toute sa place dans l’article puisqu’il a tous les avantages des pop-ins classiques et scroll box à la différence près que ce format est déclenché uniquement après avoir cliqué sur un lien.

On peut donc imaginer mettre des liens dans le menu de navigation principale ou dans des articles pour une inscription à une newsletter et ce n’est qu’une fois après avoir cliqué sur le lien que la pop-in est affichée à l’écran.

Plezi, une solution française d’automation marketing utilise une click trigger pop-in qui est affichée quand l’internaute clique sur le bouton « Newsletter » présent dans le menu

Quels sont les principaux déclencheurs permettant l’affichage (ou non) des pop-ins ?

Le format que vous retiendrez pour atteindre vos objectifs marketing grâce aux pop-ins n’est pas l’unique point à travailler pour commencer à convertir ou mettre en avant des offres, messages, etc.

Il est aussi primordial de vous pencher sur les conditions de déclenchement des pop-ins pour atteindre vos objectifs tout en préservant l’expérience utilisateur. À titre d’exemple, je ne vous conseille pas de déclencher une pop-in pour inciter les internautes à s’abonner à votre newsletter (de quelque format qu’elle soit) après 5 secondes passées sur le site. C’est encore plus vrai si c’est sa première visite sur le site web, car il n’aura ni eu le temps de vous identifier ni eu le temps de juger de la qualité de votre contenu donc pourquoi devrait-il s’abonner à votre newsletter ?

Refermons la parenthèse et voyons maintenant quels peuvent être les éléments déclencheurs d’une pop-in :

• Temps passé : qu’il s’agisse du temps passé sur une page ou sur une session, il est très intéressant de se baser sur le temps (qui par ailleurs est un excellent indicateur d’engagement) pour déclencher l’affichage d’une pop-in

• Nombre de pages vues : déclencher une pop-in après qu’un internaute a vu par exemple au moins 3 pages permet de vous assurer qu’il vous connaisse avant de promouvoir un message par l’intermédiaire d’une pop-in

• Pourcentage de scroll : cibler les internautes ayant vu au moins 80 % a du sens. À l’inverse, cibler les internautes n’ayant même pas activé la mollette pour descendre dans votre contenu n’est pas vraiment pertinent.

• Intention de quitter le site : si l’internaute est venu sur votre site pour trouver la réponse à une question et qu’il est sur le point de repartir, c’est le moment pour afficher une pop-in et promouvoir un message marketing

• Source de trafic : vous avez tout mis en œuvre, mais rien n’y fait. Vous vous êtes vite aperçu que ce sont les internautes venant sur votre site depuis Facebook qui s’abonnent à votre newsletter. Dans ce cas, ne ciblez que ces internautes et laissez les autres naviguer sans encombrement.

• Données démographiques : vous voulez alerter les personnes sur un événement qui se passe dans une région spécifique, utilisez ce critère pour cibler uniquement les utilisateurs concernés

• Visiteurs connus : vous souhaitez faire une offre promotionnelle aux visiteurs déjà présents dans votre base de données ? Cette condition de déclenchement devrait vous intéresser.

• Visiteurs désinscrits ou inactifs : tout professionnel du marketing est confronté aux désinscriptions et aux utilisateurs inactifs, c’est pourquoi cibler ces personnes qui semblent s’éloigner de votre entreprise au fur et à mesure du temps n’est pas acceptable. Vous pouvez utiliser des segments pour réactiver vos audiences d’utilisateurs inactifs ou désinscrits de vos communications par email.

Pour résumer

Avant de mettre en place une pop-in sur votre site, vous devrez réfléchir à l’objectif auquel elle devra répondre. Après avoir défini l’objectif principal, il faudra trouver le bon équilibre entre le déclenchement et le format de la pop-in pour interférer le moins possible dans l’expérience utilisateur et par la même occasion, être le moins agressif possible aux yeux des internautes tout en étant suffisamment pertinent pour atteindre l’objectif défini.

La pression marketing est un sujet à considérer pour fidéliser les audiences. Avec notre outil de segmentation marketing, vous pouvez déclencher des pop-ins sur des segments d’audiences particuliers et précis et ainsi déclencher des pop-ins pertinentes pour chacune des audiences. Le tout en réduisant l’impact sur l’expérience utilisateur des internautes.