Comment optimiser les formulaires pop-up et volants pour mobile

Objectif de cet article

Découvrez comment concevoir vos formulaires d’inscription mobiles en suivant les meilleures pratiques de Klaviyo afin de vous assurer que vos formulaires pop-up et volants sont optimisés pour les visiteurs sur mobile.

Les acheteurs en ligne utilisent de plus en plus leurs appareils mobiles pour découvrir de nouvelles boutiques, parcourir des produits et effectuer des achats. Il est donc plus important que jamais de vous assurer que votre site web est aussi beau sur mobile que sur ordinateur, y compris vos formulaires d’inscription.

Avant de commencer

Dans Klaviyo, vous pouvez créer des formulaires qui s’affichent sur tous les appareils (c’est-à-dire qu’ils sont visibles sur les ordinateurs de bureau et les appareils mobiles), ou vous pouvez créer des formulaires réservés aux appareils mobiles qui s’affichent uniquement sur les appareils mobiles.

Si votre formulaire est configuré pour s’afficher sur tous les appareils, Klaviyo optimise automatiquement certains éléments, comme les tailles de police et les images, afin d’améliorer son apparence pour les clients sur les appareils mobiles ; toutefois, ce guide présente d’autres bonnes pratiques à garder à l’esprit. Utilisez le sélecteur de mode d’affichage dans le coin supérieur droit de l’éditeur de formulaires pour passer des vues ordinateur et mobile lorsque vous créez votre formulaire. L’icône ordinateur affichera à quoi ressemble le formulaire pour les acheteurs sur ordinateur, tandis que l’icône mobile affiche ce que voient les acheteurs sur mobile.

Ce guide couvre les bonnes pratiques pour créer des formulaires popup et volants qui s’affichent sur les appareils mobiles. Ils sont utiles, que votre formulaire s’affiche sur tous les appareils ou uniquement sur mobile. Pour une présentation plus approfondie des formulaires d’inscription spécifiquement sur les appareils mobiles, consultez les bases : conception de formulaires mobiles.

Bonnes pratiques générales relatives aux formulaires

Bon nombre des bonnes pratiques pour les formulaires sur ordinateur s’appliquent aussi aux appareils mobiles :

• Allez à l’essentiel : envisagez un formulaire en plusieurs étapes si vous avez beaucoup de champs.
  • Si votre formulaire recueille le consentement par SMS, recueillez l’e-mail à la première étape, puis le SMS à la deuxième étape avec Smart Opt-in, afin que les visiteurs sur les appareils mobiles puissent s’abonner de la manière la plus simple.
• Assurez-vous qu’il est facile à fermer, afin que les visiteurs ne se frustrent pas et ne quittent pas votre site.
  • L’utilisation d’un teaser de formulaire permet aux acheteurs de fermer et de rouvrir le formulaire selon leurs besoins.
• Si votre formulaire est configuré pour s’afficher sur tous les appareils (c’est-à-dire que les acheteurs sur ordinateur et sur mobile le verront) et qu’il inclut une image latérale, laissez l’image latérale s’afficher sur Mobile uniquement.
  

• Utilisez des libellés concis pour chacun de vos champs de saisie (p. ex., adresse e-mail, numéro de téléphone, etc.) qui tiennent sur une seule ligne, afin que les acheteurs puissent facilement voir quelles informations vous leur demandez.

SEO et formulaires mobiles

Il est important de prendre en compte les bonnes pratiques de SEO mobile, en particulier lors de la création de formulaires sur votre page d’accueil ou d’autres landing pages. Les formulaires qui apparaissent sur des landing pages courantes issues de la recherche organique ne doivent pas masquer le contenu de votre site ni perturber l’expérience d’un visiteur ; sinon, la page peut être pénalisée par les algorithmes de recherche. En savoir plus sur les interstitiels intrusifs et le SEO.

Pour éviter cela :

• Dans l’onglet Ciblage et comportements, définissez le timing de votre formulaire sur Basé sur des règles, puis définissez un délai plus long (par exemple, lorsqu’un visiteur quitte la page).
• Ajoutez un teaser qui s’affiche Avant l’affichage du formulaire.

Optimisation des popups

Un formulaire pop-up s’affiche au milieu de l’écran d’un acheteur, couvrant souvent une grande partie de la page et entravant sa capacité à interagir avec les autres éléments de la page tant que le formulaire est ouvert. Cela rend les pop-ups plus perturbants, mais aussi plus performants en termes de conversion.

Pour optimiser le fonctionnement des popups sur les appareils mobiles :

1. Désactivez la fermeture du formulaire lorsqu’un acheteur mobile clique en dehors de la zone du formulaire afin de réduire les fermetures accidentelles du formulaire.
   • Accédez à Ciblage et comportement.
   • Descendez jusqu’à Appareils.
   • Sous Cliquez en dehors du formulaire pour fermer, désactivez le bouton Mobile.
     

2. Assurez-vous que l’icône de fermeture de votre formulaire (le bouton X) est suffisamment grande, même sur un petit écran comme celui d’un appareil mobile.
   • Cliquez sur l’icône de fermeture dans l’aperçu du formulaire pour ajuster sa taille.
   • Testez l’apparence du formulaire sur votre propre appareil mobile afin de vous assurer qu’il est facile à trouver et à cliquer.
     Par exemple, l’icône de fermeture dans le formulaire à gauche peut être difficile à cliquer sur un appareil mobile. Cependant, l’icône de fermeture dans le formulaire à droite est plus grande et facile à trouver.
     

3. Distinguez visuellement votre pop-up du reste de votre site à l’aide d’une couleur de superposition, d’une ombre portée ou des deux.
   • Accédez à l’onglet Styles.
   • Dans la section Arrière-plan du formulaire, définissez la couleur de superposition pour utiliser une superposition semi-opaque afin de mettre votre formulaire en évidence et d’assombrir le contenu de votre site pendant que le formulaire est ouvert.
   • Configurez une ombre portée pour ajouter un léger ombrage autour de votre formulaire afin de le distinguer du contenu environnant.
4. Ajustez les marges de votre formulaire pour qu’il ressemble davantage à un formulaire pop-up sur les appareils mobiles et ne s’étende pas d’un bord à l’autre.
   
   1. Dans l’onglet Styles, faites défiler jusqu’aux styles de formulaire.
   2. Augmentez la marge gauche/droite en fonction de l’apparence dans l’aperçu.

Optimiser les flyouts

Lorsqu’un volant apparaît, les visiteurs sur mobile peuvent toujours interagir avec votre site derrière le formulaire, sauf si l’option Superposition mobile est activée. Ils peuvent choisir de fermer le formulaire, de le remplir ou de le laisser ouvert pendant qu’ils continuent à naviguer. En général, cela rend les volants moins intrusifs que les popups.

Pour optimiser votre formulaire volant pour un appareil mobile :

1. Configurez votre formulaire pour qu’il s’affiche en glissant depuis le haut ou le bas de l’écran.
   • Accédez à la section Styles.
   • Sélectionnez Position du volant mobile, puis choisissez Ancrer en bas ou Ancrer en haut.
     Lorsque ce paramètre est sélectionné, votre formulaire apparaîtra depuis le haut ou le bas de l’écran et couvrira une partie de l’écran d’un bord à l’autre.
     

2. Séparez visuellement votre formulaire volant du reste de votre site à l’aide d’une superposition mobile, d’une ombre portée, ou des deux.
   • Accédez à l’onglet Styles.
   • Faites défiler la page jusqu’aux paramètres Arrière-plan du formulaire.
   • Activez Superposition mobile afin que les acheteurs sur mobile ne puissent pas cliquer sur d’autres éléments de votre site tant qu’ils n’ont pas rempli le formulaire ou l’ont fermé. Notez que la superposition mobile n’apparaîtra pas lorsque le formulaire volant est consulté sur un ordinateur.
   • Activez Ombre portée pour ajouter un léger ombrage autour de votre formulaire afin de le distinguer du contenu environnant. Notez que les paramètres Ombre portée affectent à la fois les versions mobile et ordinateur de votre formulaire.
     

Prochaines étapes

Une fois vos formulaires optimisés pour les appareils mobiles, essayez l’A/B testing de vos designs de formulaire pour mieux comprendre les préférences des visiteurs de votre site.

Ressources supplémentaires

• Démarrer avec les formulaires d’inscription
• Comprendre les paramètres de rejet de formulaire
• Principes de base de la conception de formulaires pour mobile
• Comment utiliser des formulaires pop-up pour recueillir le consentement pour l’envoi de SMS