Un pop-up Shopify sur mobile doit fonctionner sur un petit écran, avec la barre d’outils mobile qui bouge et le clavier virtuel. L’offre doit être assez courte pour être comprise, les champs faciles à remplir et le bouton de fermeture facile à trouver. Testez tout le parcours, de l’arrivée à la fermeture, et pas seulement une capture d’écran bien équilibrée dans l’éditeur.
Faites une promesse courte et complète
Donnez un seul objectif au titre et placez à proximité les conditions essentielles de l’offre. Ne demandez que les renseignements nécessaires à l’inscription. Si vous recueillez une préférence facultative, expliquez son utilité et évitez de transformer un petit pop-up en questionnaire.
Utilisez les outils de formulaire Sendvio pour garder une typographie et un espacement cohérents avec la boutique. Laissez le texte revenir naturellement à la ligne au lieu de réduire tous les libellés pour imposer une mise en page conçue pour ordinateur à un petit écran. Une version plus longue dans une autre langue peut exiger un formulaire plus haut ou plus simple.
Gardez le contenu utile, sans chercher à reproduire l’écran d’ordinateur
Sur téléphone, privilégiez la promesse, les conditions essentielles, le champ, le bouton d’envoi et une option de fermeture visible. Vous pouvez réduire ou supprimer une grande image décorative si elle repousse le formulaire sous la zone affichable. Le client ne devrait pas devoir faire défiler l’illustration de la marque pour comprendre quelles informations sont demandées.
Laissez le conteneur grandir ou défiler de façon adaptée au lieu d’imposer une hauteur fixe à un texte variable. Un titre traduit, un message d’erreur ou un texte système agrandi modifie l’espace requis. Si le design ne fonctionne que lorsque chaque phrase est dans sa forme la plus courte, il n’est pas prêt pour les vrais clients.
Conservez la même hiérarchie après simplification. Supprimer une image superflue n’est pas la même chose que supprimer une condition importante de l’offre. Un formulaire plus court doit toujours expliquer l’abonnement et sa valeur. Ne résolvez pas l’encombrement en réduisant le texte de consentement au point de le rendre difficile à lire, même s’il reste techniquement présent.
Laissez le visiteur garder le contrôle
Rendez le bouton de fermeture visible et assez grand pour être touché confortablement. Vérifiez que le formulaire fonctionne au clavier et que le focus ne disparaît pas derrière le voile. Un message d’erreur doit indiquer le problème près du champ concerné sans effacer les informations déjà saisies.
Réfléchissez au moment d’apparition du pop-up. Interrompre un acheteur avant qu’il ait pu comprendre la page peut susciter plus d’agacement que d’intérêt. Choisissez un moment adapté à l’offre et testez le parcours d’un nouveau visiteur, d’un abonné qui revient et d’une personne déjà en train de magasiner.
Parcourez le formulaire pendant que le clavier est ouvert
Placez le curseur dans un champ sur un véritable téléphone ou dans un test représentatif. Lorsque le clavier apparaît, vérifiez que le champ, le message d’erreur, le bouton d’envoi et le bouton de fermeture restent accessibles. Passez d’un champ à l’autre et essayez une saisie longue. La zone visible du navigateur peut changer pendant ces actions ; une capture prise avant la saisie ne suffit pas.
Pour un formulaire modal, le focus du clavier doit entrer dans la boîte de dialogue, y rester pendant son ouverture et revenir à un emplacement logique après sa fermeture. Lorsque cette fonction est prise en charge, la touche Échap doit permettre la fermeture attendue. Testez également avec une technologie d’assistance adaptée à votre audience ; l’alignement visuel ne garantit pas que les libellés et erreurs des champs sont annoncés clairement.
Testez le plus petit écran et les états réalistes
Ouvrez le formulaire sur un petit téléphone, placez le curseur dans chaque champ et envoyez des données valides puis invalides. Faites pivoter l’appareil, agrandissez le texte et vérifiez le message de réussite. Assurez-vous que la fermeture ramène à une page encore utilisable.
Mesurez les abonnements valides et l’engagement ultérieur en plus du taux de conversion du formulaire. Un design qui recueille des adresses parce qu’il est difficile de quitter la boutique n’est pas une amélioration. Le formulaire doit proposer une occasion claire de s’inscrire tout en préservant l’expérience d’achat.
Ajoutez à la conception le comportement lors d’une nouvelle apparition. Une personne qui ferme le formulaire ne devrait pas retrouver la même interruption à chaque changement de page immédiat. Utilisez les commandes d’affichage disponibles et testez le parcours d’un visiteur qui revient comme celui d’un nouveau visiteur. Un abonné existant ne devrait plus voir une incitation d’acquisition qui ne correspond pas à sa situation.
Si les résultats déçoivent, distinguez la visibilité de l’utilité. Un formulaire peut recueillir peu d’adresses parce que l’offre est faible, que le moment est intrusif ou qu’une étape technique échoue. Examinez ces causes avant de le faire apparaître plus agressivement. La meilleure amélioration permet de comprendre, remplir ou fermer facilement le formulaire tout en continuant à magasiner.