Concevoir des e-mails réactifs : Optimiser vos formulaires de souscription
Par Campaign Monitor
Bonne nouvelle : à l’heure actuelle les formulaires sont relativement faciles à remplir sur les terminaux mobiles type iPhone ou Android, mais les designers et développeurs peuvent faire quelques petits trucs pour les rendre aussi faciles à utiliser que possible. Optimiser vos formulaires les rendra plus rapide et plus facile à remplir sur un terminal mobile, vous aurez donc un meilleur taux de transformation et plus d’abonnés.
Voici quelques indicateurs et un exemple simple que vous pouvez utiliser comme point de départ pour vos propres formulaires d’abonnement.
- Aligner les labels au-dessus des champs. Sur mobile, les labels disparaissent fréquemment de l’écran quand un champ est sélectionné. Au niveau de zoom initial, un label aligné à gauche tel que « entrez votre adresse e-mail : » est visible, mais dès que vous commencez à saisir du texte, l’appareil zoome sur le champs et le label se retrouve masqué au loin. Pour éviter cela, il faut aligner le label au-dessus du champ concerné, ou le reprendre comme valeur par défaut du champ. Cette deuxième solution économise l’espace vertical mais a pour inconvénient que l’information disparaît à la prise de focus du champ, qui peut avoir été caché jusque-là par « l’assistant formulaire » du téléphone ou par le clavier.
- Utiliser
input type=”e-mail”. Si vous utilisez un input de type e-mail, un clavier spécialement adapté sera affiché sur les terminaux iOS, sur lequel il est plus aisé de saisir des caractères tels que l’@. - Réduisez la largeur de vos formulaires (à défaut du site en entier) : utiliser les requêtes de média pour ajouter des CSS ciblant spécifiquement les mobiles permet de grandement réduire l’encombrement à l’écran, ce qui améliore l’utilisabilité des formulaires. Et puis, rien n’est plus pénible qu’un champ de texte qui ne tient pas entièrement à l’écran. Personnellement, je préfère utiliser des gabarits fluides pour terminaux mobiles, tout simplement parce qu’il est impossible de prévoir les dimensions ou l’orientation de l’écran. Il suffit de définir la largeur des champs texte à une valeur comme 80% pour rendre les formulaires de souscription bien plus agréable à consulter et à remplir.
- Attention aux champs multi-options. Dans un gabarit étroit, forcer le contenu à s’afficher en colonne est bien plus prudent – en particulier les cases à cocher. Quand différentes options se retrouvent sur plusieurs lignes, les choses deviennent rapidement assez compliquées. Il vaut souvent mieux utiliser un bonne vieille liste déroulante que des boutons radio, qui a également l’avantage de limiter le défilement nécessaire pour naviguer dans le formulaire.
- Prenez position sur la taille. Au final, pas mal de ces astuces ne sont pas spécifiques aux formulaires – elles concernent plus le webdesign en général. Y compris l’idée de fixer les dimensions d’affichage sur terminal mobile en utilisant la balise « meta viewport », tout particulièrement quand vous développez des formulaires autonomes. Cette balise permet d’éviter que l’utilisateur ne zoome accidentellement et perde de vue la plupart du formulaire. Voici la syntaxe classique de la balise meta viewport, à placer dans le
<head>d’une page HTML :<meta name = "viewport" content = "width = device-width, user-scalable = no" />Pour les variantes, lisez la documentation du meta tag viewport d’Apple.
Pour vous montrer comment optimiser vos formulaires, nous avons créé un gabarit CSS simple dans lequel vous pouvez insérer le formulaire de souscription sous sa forme la plus basique. Vous pouvez voir ce que ça donne dans votre navigateur ou votre terminal mobile en suivant ce lien : http://goo.gl/7xDuu.
Vous pouvez reprendre la CSS, jouer avec les requêtes de média et l’utiliser soit comme formulaire autonome, soit sur vos propres pages.
Créer des e-mails texte adaptés au mobile
Ne souhaitant pas limiter nos conseils au design des e-mails HTML, nous avons voulu ajouter quelques trucs pour optimiser les campagnes d’e-mails en texte brut. Concernant le formatage, il y a deux écoles : ceux qui reviennent à la ligne tous les 60-65 caractères, et les autres. Les deux ont leurs avantages et inconvénients, tout dépend du client e-mail sur lequel vous regardez le message.
La technique des 60-65 caractères fonctionne bien pour les clients de messagerie de bureau et les webmails parce que les paragraphes peuvent être affichés dans des fenêtres ou des panneaux de prévisualisation qui n’imposent pas de largeur maximum. Une ligne de plus de 60 caractères environ perd en lisibilité car l’œil se fatigue beaucoup à revenir au début de la ligne suivante et la lecture est très ralentie.
Les choses sont très différentes sur mobile cependant. Quand les retours à la ligne tous les 65 caractères se combinent avec ceux imposés par l’application elle-même, les décrochements finissent par rendre le texte plus illisible encore que s’il se présentait sur une seule ligne.
La plupart des clients mobiles affichent directement la version HTML de vos e-mails, du coup même si la version texte brut de vos messages contient des retours à la ligne, il n’est pas vraiment utile de revenir dessus car l’application produit d’elle-même un joli formatage. Si toutefois vous envoyez des campagnes en texte brut uniquement, il vaut mieux étudier les statistiques de consultation de vos e-mails avant de choisir l’une ou l’autre méthode. Si un grand nombre d’inscrits lisent leurs e-mails sur un terminal mobile, ajouter vos propres retours à la ligne serait contre-productif ; si ce n’est pas le cas, il peut être utile de consacrer un peu de temps au formatage.
« Concevoir des e-mails réactifs » est une série de huit articles :
http://www.campaignmonitor.com/guides/mobile/subscribe/