Principes de base de la conception de formulaires pour mobile

Les clients utilisent de plus en plus leurs appareils mobiles pour découvrir de nouvelles boutiques en ligne, parcourir des produits et effectuer des achats. Rien qu’aux États-Unis, plus de 35 % des achats en ligne ont été effectués à l’aide d’un appareil mobile, et ce chiffre continue de croître chaque année. 

Pour garantir la conversion de ces clients en abonnés, il est essentiel que vos formulaires d’inscription soient aussi attractifs sur mobile que sur ordinateur. 

Si vous avez besoin de plus de 3 champs, par exemple pour recueillir le consentement pour l’envoi d’e-mails et de SMS en même temps, tournez-vous vers un formulaire à plusieurs étapes. 

Un formulaire à plusieurs étapes vous permet de recueillir davantage de renseignements sans submerger les abonnés potentiels. De plus, le fait d’avoir une étape distincte pour les SMS constitue une bonne pratique en matière de conformité lorsque vous recueillez plusieurs types de consentement dans 1 formulaire. 

Vous pouvez également récupérer davantage de données sur vos abonnés en les reciblant à un stade ultérieur de leur parcours client. Vous pouvez demander la date de naissance des abonnés actuels en leur présentant un autre formulaire au bout de 30 jours, ou vous pouvez le faire dans le cadre de votre série de bienvenue.

Même si tous les champs d’un formulaire sont obligatoires, il est toujours étrange de demander la date de naissance d’une personne avant son nom. 

En règle générale, hiérarchisez les renseignements demandés en partant des moins personnels vers les plus personnels. Par exemple : 

1. Nom
2. E-mail ou numéro de téléphone
3. Date de naissance

Une colonne unique signifie que chaque entrée, champ ou bouton occupe une ligne entière dans le formulaire. Si les formats à plusieurs colonnes conviennent parfaitement aux ordinateurs, ils risquent d’encombrer ou de surcharger les formulaires sur les mobiles. Les formulaires à colonne unique sont également plus faciles à parcourir sur les mobiles.

Formulaire à colonne unique	Formulaire à plusieurs colonnes

Le bouton de CTA doit être le dernier élément que voient les utilisateurs au terme de leur parcours. Évitez qu’ils aient à faire défiler la page vers le haut pour remplir le formulaire ou qu’ils aient à chercher le bouton. 

En général, le bouton de CTA est placé au centre ou sur le côté gauche. 

Le bouton de fermeture doit se trouver dans le coin supérieur droit parce que c’est là que les utilisateurs s’attendent à le voir. 

Si vous le placez ailleurs, par exemple en haut à gauche ou dans la partie inférieure, vos utilisateurs risquent de passer du temps à chercher comment fermer le formulaire et d’être contrariés. Ils risquent alors de repartir en ayant une mauvaise image de votre marque, ce qui les rendra moins enclins à visiter votre site à l’avenir ou à devenir des clients.

Placez, directement au-dessus de chaque champ de votre formulaire, un libellé décrivant clairement les renseignements à fournir. 

Placez également les libellés à proximité des champs qu’ils décrivent, de manière à les associer explicitement.

Chaque libellé ne doit occuper qu’une seule ligne lorsqu’il est visualisé sur un appareil mobile, d’où l’importance de la concision.

Dans tous les champs où les utilisateurs doivent saisir du texte ou des chiffres, ajoutez un texte de remplissage pour leur montrer à quoi doit ressembler leur saisie (un exemple d’adresse e-mail, de nom, de format de date, etc.)

Cela permet de réduire le nombre d’erreurs qu’une personne peut commettre. L’utilisation des libellés et du texte de remplissage permet aux utilisateurs de naviguer facilement au sein de votre formulaire. 

Astuce de pro : les boutons doivent également comporter des libellés. Un texte de bouton plus descriptif peut aussi aider l’utilisateur. 

Par exemple, au lieu d’utiliser un simple appel à l’action (CTA) « Soumettre », le fait de préciser « S’inscrire à la newsletter » ou « S’inscrire aux SMS » donne une idée plus claire de ce que fait le bouton. Cela représente en outre un gain d’espace précieux dans le plus petit formulaire. 

En indiquant à vos clients les champs qu’ils doivent obligatoirement remplir et ceux qui sont optionnels, vous simplifiez leur expérience utilisateur. Vous pouvez rendre certains éléments du formulaire obligatoires et d’autres facultatifs. 

Incluez un message de réussite après l’envoi du formulaire pour que l’utilisateur sache que l’envoi a réussi. 

Une taille de police de 16 pixels ou plus garantit la lisibilité du texte. Cela évite aux utilisateurs de zoomer pour lire.

16 pixels est la taille de police minimale recommandée pour n’importe quel texte dans votre formulaire mobile, y compris les libellés, le texte de remplissage et le texte des boutons. 

Laissez suffisamment d’espace entre chaque action de votre formulaire pour que les utilisateurs n’aient aucun mal à cliquer sur le champ voulu. Dans le cas contraire, ils pourraient préférer abandonner plutôt que de réessayer. 

Lorsque vous concevez votre formulaire, essayez de faire en sorte qu’il soit le plus difficile possible de commettre une erreur pour les utilisateurs. Testez l’expérience utilisateur sur différents types d’appareils. 

Toutes les « cibles tactiles », telles que les champs de saisie ou les boutons, doivent être grandes et faciles d’accès. 

Le doigt moyen d’un adulte mesure 11 mm, soit environ 41,6 pixels. Pour en tenir compte, la meilleure pratique consiste à utiliser des cibles tactiles d’au moins 48 pixels. 

Utilisez un teaser de formulaire pour que les visiteurs sur mobiles puissent ouvrir et fermer le formulaire à leur guise pendant leur navigation, et pour que le formulaire ne masque pas le contenu de votre site.
Notez que Google pénalise les sites comportant des interstitiels intrusifs. Les teasers permettent d’éviter cette sanction, mais vous devez également utiliser un long délai pour les formulaires. 

Le contraste des couleurs est la différence de luminosité entre le texte ou les objets au premier plan et en arrière-plan. Un bon contraste de couleurs améliore la lisibilité de votre formulaire et constitue un élément clé de l’accessibilité. Utilisez un vérificateur de contraste des couleurs pour vérifier le contraste de vos couleurs.

Le contraste le plus faible est de 1:1 et il est impossible à lire (imaginez un texte blanc sur un fond blanc). Le contraste le plus élevé disponible est de 21:1, soit un texte noir sur un arrière-plan blanc. En d’autres termes, plus le rapport est grand, meilleur est le contraste. 

Selon les directives pour l’accessibilité du contenu web (WCAG), le contraste minimal des couleurs est de 4,5:1 pour le texte de petite taille, les images et le texte dans les images, et de 3:1 pour le texte de grande taille ou les éléments importants. 

Dans l’idéal, le contraste devrait être encore plus élevé. Selon les directives WCAG, le minimum optimal serait le suivant :

• 7:1 pour le texte de petite taille, les images ou les images de texte
• 4,5:1 pour le texte de grande taille, les éléments visuels clés, etc. 

Il est important que tout le monde puisse apprécier le contenu sur lequel vous avez concentré tous vos efforts. L’utilisation de certaines combinaisons de couleurs peut rendre le formulaire difficile, voire impossible à lire pour certains groupes de personnes. 

Pour ce qui est des couleurs à éviter, n’oubliez pas qu’il existe plusieurs types de daltonisme (le rouge et le vert ne sont pas les seules couleurs concernées).