Pop ups : Un outil intéressant pour votre site, à condition de respecter vos visiteurs

Pop ups : article détaillé

Intrusif, inesthétique, gênant pour la navigation et la lecture du contenu… Le pop up est un élément d’interface souvent décrié. Mais bien utilisé, il peut être un véritable atout pour votre site internet, et offrir des taux de conversion étonnants. Voici quelques pistes de réflexion à ce sujet.

Tout d’abord entendons-nous bien sur ce que nous appellerons « pop up » au sein de cet article. A l’origine, le terme pop up désignait une nouvelle fenêtre de navigateur, qui s’ouvrait automatiquement en superposition de la fenêtre actuelle. Ce comportement, très intrusif, allait parfois jusqu’à planter le navigateur à force d’ouvrir fenêtre sur fenêtre, et était une véritable horreur ergonomique. Souvent associés à de la publicité non sollicitée, les navigateurs ont rapidement (et heureusement) intégré des bloqueurs de pop up destinés à empêcher purement et simplement leur ouverture.

Vous aurez compris que ce n’est pas de ce type de pop ups dont nous allons parler ici. Les pop ups actuelles, qu’on peut aussi appeler modales, dialog, overlay ou layers (petites variantes en termes d’interface utilisateur) ne sont pas de réelles nouvelles fenêtres de navigateur. Il s’agit de simples éléments d’interface d’un site, dont le visuel se rapprocherait plus ou moins de celui d’une petite fenêtre. Ces pop ups peuvent avoir des rôles et comportements différents en fonction de leur utilisation : Fenêtre de connexion, inscription à une newsletter, messages de confirmation, etc. Leur apparition peut être automatique, ou bien déclenchée par une action utilisateur (par exemple, un clic sur un bouton, ou une validation de formulaire). Enfin, il faut bien comprendre que leur visuel, leur design, est complètement libre et laissé à la charge du designer du site. Idem pour leur contenu qui peut intégrer du texte, des images, des éléments de formulaire, une vidéo, etc. Dans cet article, nous allons nous focaliser sur une utilisation bien spécifique des pop ups : Déclencher une action utilisateur comme un abonnement à une newsletter, une demande de contact, une visite sur une nouvelle page, etc.

1 – La pop up doit être une véritable valeur ajoutée

Pour qu’une pop-up soit efficace, il faut qu’elle soit intéressante. Cela paraît peut-être évident, mais cet objectif doit être à la base de toutes les réflexions suivantes. Les visiteurs du site internet doivent percevoir la pop up comme un contenu spécifique, comme une opportunité d’aller plus loin, ou encore comme un conseil ou une information privilégiée. Il faut donc éviter au maximum qu’elle soit perçue comme une publicité ou comme un obstacle pour accéder au contenu.

2 – Le contexte est un facteur important

Pour qu’une pop up soit intéressante, il faut qu’elle apparaisse de manière pertinente. Si la pop up sort au mauvais endroit, ou au mauvais moment (ou les deux à la fois), les risques sont grands pour qu’elle soit immédiatement refermée. Ceci alors même que son contenu aurait pu intéresser le visiteur, dans un autre contexte. Il faut donc réfléchir aux contextes les plus propices. Cette réflexion doit s’inscrire dans la conception générale de l’expérience utilisateur (UX) du site. Chaque site étant unique, les contextes peuvent varier très largement, mais en simplifiant légèrement on peut dire que deux grands paramètres sont à prendre en compte : Le « temps » et le « lieu ».

Commençons par le temps : Pour que la pop up soit perçue comme pertinente, il faut qu’elle apparaisse au visiteur quand celui-ci va y trouver un intérêt. Si vous proposez une inscription à une newsletter dans une pop up qui surgit dès l’affichage de la première page visitée, son taux de conversion risque de ne pas être au rendez-vous : Qui s’inscrit à une newsletter sans avoir eu le temps de lire le moindre mot du site ? Par contre, si on retarde son apparition de 20 secondes (par exemple), ou qu’on attend que le visiteur ait consulté 3 pages, la pop up proposant la newsletter pourra intéresser un visiteur ayant lu quelques contenus. De même, il peut être judicieux de déclencher l’ouverture de la pop up lors d’un événement utilisateur : scroll, clic sur un bouton « j’aime », soumission d’un commentaire ou d’un formulaire, etc.

Le second facteur, le « lieu », semble plus évident. En fonction de la structure du site et du contenu de la pop up, certaines pages seront plus propices que d’autres pour engager le visiteur. Déclencher uniquement sur la page d’accueil par exemple est souvent une mauvaise idée. Enfin, évitez de harceler votre visiteur en lui proposant sans cesse une pop up qu’il refuse à chaque visite. Utilisez les cookies pour laisser vos lecteurs tranquilles pendant plusieurs jours avant de leur proposer à nouveau la pop up. Si les visiteurs sont enregistrés sur le site, vous pouvez facilement sauvegarder leurs préférences pour ne pas les importuner.

3 – Un contenu simple et personnalisé

Les pop ups les plus simples sont parfois les plus efficaces. Quelques champs de formulaire, un bouton d’appel à action et un petit texte explicatif peuvent suffire à produire des taux de conversion intéressants, à condition d’être placés dans le bon contexte. De manière générale, plus l’action demandée au visiteur est simple et évidente, plus on pourra simplifier le contenu. Pour augmenter l’efficacité du pop up, le contenu texte doit être si possible personnalisé. Là encore, c’est une question de contexte : Si votre visiteur a lu des pages concernant certaines thématiques spécifiques, il peut être intéressant d’axer le rédactionnel autour de ce sujet. Mais ceci n’est qu’un exemple parmi de nombreuses possibilités.

4 – Un design cohérent et ergonomique

Pour des raisons de cohérence, la pop up doit s’intégrer correctement dans le design graphique du site. Cependant, il faut veiller à ce qu’elle se détache assez nettement du contenu à l’arrière plan, afin de faciliter sa lecture et sa compréhension. Les boutons qu’elle contient doivent être facilement identifiables en tant que tels, en jouant sur les contrastes (tailles, couleurs, typographie) et les habitudes de navigation. Un point très important : Faciliter la fermeture de la pop up avec des éléments d’interface utilisables facilement et rapidement compréhensibles.

5 – Éviter les pénalités SEO

Depuis début 2017, Google a annoncé que les sites abusant des pop ups, intersticiels, publicités et autres éléments de ce type pourraient être pénalisés dans les résultats de recherche. Cette évolution va dans le sens d’une amélioration globale de l’expérience utilisateur sur le web, et c’est plutôt une bonne nouvelle. Mais alors, comment utiliser une pop up sans être pénalisé ? Google donne plusieurs conseils sur son blog officiel (lien en bas de page), tout en restant relativement flou. Globalement quelques règles de base sont généralement recommandées :

  • La pop up doit pouvoir être refermée facilement, notamment sur mobile
  • Elle ne doit pas apparaître directement à l’ouverture de la page
  • Elle ne doit pas couvrir une trop grande surface de l’écran sur mobile (L’idée étant que le contenu à l’arrière plan puisse être lu sans refermer la pop up)

6 – N’oublions pas l’accessibilité

Les pop ups, comme tout élément d’interface, doivent être accessibles à tous les utilisateurs. Cela implique de penser aux points suivants :

  • Quand la pop up s’ouvre, le focus doit se placer dans le premier champ du formulaire, et on doit pouvoir utiliser entièrement la pop up au clavier (formulaire, validation, fermeture de la fenêtre).
  • La pop up doit rester utilisable et lisible même si le site a été largement zoomé.
  • Penser à utiliser la syntaxe ARIA

Pour aller plus loin

L'auteur : Clément Romier

Graphiste multimédia de formation, je fonde Les Pixels Associés en 2012. Ce blog est un espace d'analyse et de réflexion, mais vous y trouverez aussi les actualités de l'entreprise. Bonne lecture !