Un guide du débutant pour convertir les utilisateurs mobiles

Pensez à une fois où vous étiez dans le train, assis à l'aéroport ou simplement allongé sur le canapé et que vous deviez remplir un formulaire en ligne sur votre smartphone. Avez-vous déjà prêté attention à la conception du formulaire mobile ?

Il y a de fortes chances que vous ne l'ayez pas remarqué. C'est l'objectif : offrir aux utilisateurs une expérience intuitive qui leur permet de remplir le formulaire de manière transparente et de poursuivre leur journée.

Dans ce guide, nous passerons en revue les moyens les plus efficaces d'y parvenir. Ici, vous apprendrez à concevoir des formulaires mobiles qui ne sont pas maladroits ou mal alignés, mais qui aident à stimuler les conversions et à créer une expérience utilisateur exceptionnelle.

Table des matières

Conception de formulaires mobiles ou de bureau

Aujourd'hui, les visiteurs de votre site Web ne se contentent pas de parcourir votre site, de consulter votre contenu et de remplir vos formulaires à partir de leur ordinateur de bureau. Ils effectuent également ces tâches à partir de leurs appareils mobiles.

Le mobile était responsable de près de 60 % du trafic mondial sur le site Web d'avril à juin 2022. Cela signifie qu'il est essentiel que votre formulaire soit simple à examiner, à remplir et à soumettre via un appareil mobile.

Pourquoi la conception de formulaires mobiles est-elle importante ?

La meilleure conception de formulaire mobile permet une expérience utilisateur positive, ce qui garantit un visiteur de site Web heureux qui est plus susceptible de se convertir en client et de devenir un utilisateur récurrent.

La conception, la mise en page et les fonctionnalités de vos formulaires mobiles jouent un rôle important dans l'expérience utilisateur globale de votre site Web.

Si vos formulaires ne sont pas adaptés aux mobiles, vous risquez de subir moins de conversions, une perte de trafic sur le site mobile et une augmentation du nombre de clients mécontents et frustrés. Et qui veut ça ?

Pourquoi la conception des formulaires mobiles devrait-elle différer de la conception des ordinateurs de bureau ?

"Tout fonctionne différemment sur mobile, les spécialistes du marketing doivent donc s'assurer que tous les éléments de leurs sites Web sont toujours optimisés pour le mobile", déclare Lilach Bullock, influenceuse et stratège marketing primée.

"Et cela, bien sûr, inclut les formulaires - d'autant plus que vous avez l'impression de devoir constamment remplir des formulaires lorsque vous êtes sur mobile."

Plus précisément, pensez à la différence d'affichage ou de taille d'écran entre un appareil mobile, tel qu'un iPhone d'Apple, qui varie généralement de 4,7″ à 6,7″ ; et un ordinateur portable ou de bureau Mac, dont la taille varie généralement de 13" à 24". Il est prudent de supposer qu'une forme adaptée à un écran d'iPhone ne conviendra pas parfaitement à un écran de bureau.

Si vos visiteurs mobiles ne peuvent pas facilement lire, remplir et soumettre votre formulaire, vous risquez de perdre leur clientèle. Il est donc essentiel de créer un formulaire adapté aux mobiles qui s'adapte à l'écran de n'importe quel appareil mobile pour créer une expérience utilisateur exceptionnelle afin de laisser une impression durable sur vos visiteurs et de vous aider à augmenter les conversions.

Qu'est-ce que la conception de sites Web réactifs ?

Si vous souhaitez aller plus loin dans la conception de formulaires mobiles et vous assurer que l' ensemble de votre site Web est fonctionnel sur tous les types d'appareils, vous pouvez mettre en œuvre une conception de site Web réactive.

La conception Web réactive prend en compte la taille de l'écran, la plate-forme, l'orientation et l'environnement de l'utilisateur. Il s'agit d'un moyen simple et efficace de créer une expérience utilisateur exceptionnelle, car de nombreuses personnes visitent et naviguent constamment sur différents sites Web sur différents appareils.

Il existe plusieurs façons de vous assurer que votre site a un design réactif. Par exemple, si vous êtes un utilisateur de WordPress, il existe plusieurs thèmes WordPress réactifs que vous pouvez installer et utiliser pour concevoir votre site.

De plus, si vous construisez ou avez construit votre site avec un logiciel tel que Squarespace, votre site peut automatiquement être doté d'une conception Web réactive.

Aujourd'hui, la conception Web réactive est un choix populaire pour les entreprises en raison du grand nombre de personnes visitant des sites Web via une variété d'appareils mobiles différents. Mais pour l'instant, revenons à la conception de formulaires mobiles.

Conception de formulaires mobiles : 11 directives UX

« Lors de la conception de vos formulaires mobiles », explique Bullock, « ​​il est important de garder les choses simples et de les rendre aussi rapides que possible. [Forms] sont plus difficiles à remplir sur mobile et tout semble prendre plus de temps que prévu.

En d'autres termes, le plus important est la simplicité pour l'utilisateur final. Lors de la création d'un formulaire adapté aux mobiles, vous devrez suivre certaines étapes pour offrir la meilleure expérience utilisateur possible à vos visiteurs. Passons en revue 11 de ces meilleures pratiques de conception de formulaires mobiles que vous pouvez commencer à mettre en œuvre dès aujourd'hui.

1. Réduisez le nombre de champs de formulaire.

Avez-vous déjà entendu le dicton "moins c'est plus" ? Eh bien, c'est précisément ce à quoi vous devriez penser lors de la création de votre formulaire mobile.

Entre la taille de l'écran d'un appareil mobile et la quantité de contenu que vous devez placer dans votre formulaire, il est facile de rendre accidentellement votre formulaire encombré. N'oubliez pas d'enlever les peluches inutiles. Ne conservez dans les champs du formulaire que les informations dont vous avez absolument besoin .

Pour rationaliser le processus, vous souhaiterez également étiqueter vos champs de formulaire de manière claire et succincte, et marquer les champs facultatifs comme « facultatifs » ou inclure un astérisque à côté de ceux qui sont obligatoires.

Source des images

L'objectif est de rendre le formulaire aussi simple que possible à remplir afin que les chances que les personnes remplissent le formulaire augmentent.

2. Automatisez les entrées lorsque cela est possible.

Si vous tapez accidentellement votre adresse postale et que le formulaire corrige l'orthographe pour vous, le formulaire corrige automatiquement votre réponse.

Si vous commencez à taper votre adresse de livraison et qu'une boîte apparaît avec le reste de votre adresse vous demandant si vous souhaitez "remplir automatiquement" le reste des champs du formulaire avec votre adresse enregistrée, alors votre formulaire complète automatiquement votre réponse pour vous.

En implémentant des fonctionnalités de correction et de remplissage automatiques sur vos formulaires mobiles, vous améliorerez l'expérience utilisateur en permettant aux utilisateurs de saisir rapidement, simplement et directement leurs informations.

Dans l'exemple ci-dessous, une personne peut facilement remplir automatiquement ses informations en cliquant sur la petite fenêtre contextuelle qui apparaît.

Source des images

3. Utilisez une mise en page à une seule colonne.

Lorsque vous créez un formulaire long ou en plusieurs étapes, répertoriez tout votre contenu dans une mise en page à une seule colonne.

Source des images

Les mises en page de formulaire à une seule colonne sont :

un. Plus facile à lire.

Placer tous vos champs de formulaire dans un format à une seule colonne permet à vos visiteurs de se concentrer sur un seul élément à la fois, ce qui rend votre formulaire plus facile à lire.

b. Moins intimidant.

Si vous regardez un formulaire, en particulier dans un espace restreint comme vous le feriez sur un appareil mobile, et que vous voyez une grande quantité de contenu mélangé, vous pouvez vous sentir dépassé. C'est pourquoi la séparation de votre contenu par lignes et le placement de vos champs de formulaire dans un format à une seule colonne rendent votre contenu moins intimidant.

c. Plus rapide à compléter.

Lorsque vous placez votre formulaire en plusieurs étapes dans une seule colonne, les prospects peuvent le remplir plus rapidement qu'ils ne le feraient avec un formulaire en plusieurs colonnes. En effet, le format rend le formulaire plus facile à lire et à parcourir étape par étape.

Consultez ce formulaire d'inscription sur le site Web HubSpot depuis un ordinateur de bureau ou un ordinateur portable.

Source des images

La disposition en deux colonnes est logique ici, car il y a beaucoup d'espace sur l'écran plus large pour travailler. Vérifiez maintenant le même formulaire lorsqu'il est affiché à partir d'un appareil mobile.

Source des images

Cette disposition à colonne unique permet à l'œil de circuler naturellement tout en évitant l'encombrement sur l'écran mobile compact.

4. La cohérence compte (tout comme l'apparence de la forme).

Comment fermez-vous un dossier ou un onglet ouvert sur votre ordinateur portable ?

En cliquant sur le bouton 'x' dans le coin supérieur droit.

Mais que se passe-t-il si le bouton n'apparaît pas sur une application particulière ? Comment vous sentiriez-vous lorsque vous fermeriez la fenêtre ?

Confus ou irrité, peut-être. Vous pourriez passer une minute ou deux à comprendre comment fermer l'application.

Ceci n'est qu'un exemple général mais sert bien à illustrer l'importance de la cohérence. Regardez cette vidéo pour en savoir plus.

La cohérence dans la conception des formulaires ne s'applique pas seulement au style (couleurs, typographie, logo, etc.) mais aux conventions généralement acceptées auxquelles les gens sont habitués.

Voici quelques conseils pour garantir une expérience cohérente :

• Faites correspondre l'apparence de votre formulaire à votre marque et à votre site Web.
• Assurez-vous que le style et la mise en forme de votre formulaire sont cohérents et complémentaires (rien ne doit paraître discordant ou déplacé).
• Alignez vos entrées de champ de formulaire à gauche.
• Apposez chaque étiquette au-dessus de sa zone de saisie correspondante et alignez-la à gauche.
• Utilisez un astérisque pour indiquer les questions obligatoires.

Source des images

Les premières impressions laissent une impression durable (dans la vie et dans les affaires). Cela vaut pour vos formulaires mobiles. Personne ne veut remplir un formulaire sombre, difficile à lire, encombré et peu attrayant.

Votre formulaire mobile doit être hautement fonctionnel et esthétique. Son apparence doit contribuer à sa lisibilité et à une expérience utilisateur positive. Pour ce faire, utilisez un style et une taille de police simples et faciles à lire, une palette de couleurs qui ne semble pas écrasante et des champs de formulaire minimaux.

5. Gardez à l'esprit l'expérience tactile.

Pensez à la façon dont vous tenez votre téléphone lorsque vous envoyez des SMS.

Très probablement, saisir le téléphone à deux mains tout en utilisant vos pouces pour interagir avec l'écran. Ou vous pouvez même le faire seul ou taper en utilisant votre index.

Nous interagissons avec les smartphones très différemment d'un ordinateur portable ou d'un ordinateur de bureau (indiquez le pouce textuel), et la conception des formulaires mobiles devrait refléter cela.

Voici quelques suggestions à garder à l'esprit :

• Ayez suffisamment d'espace pour garder le formulaire sans encombrement et éviter les pressions accidentelles sur les boutons.
• Assurez-vous que les boutons sont positionnés logiquement (par exemple, le bouton d'envoi près du bas du formulaire, afin que les utilisateurs n'aient pas à faire défiler vers le haut pour le trouver).
• Vérifiez que le texte (taille et style de police) est lisible sur le petit écran du mobile (personne n'a envie de pincer son écran et de zoomer pour pouvoir lire le texte).
• Assurez-vous que les champs et les boutons du formulaire sont suffisamment grands pour pouvoir être tapotés confortablement avec un doigt.
• Faites apparaître le formulaire vers la partie inférieure de l'écran (si possible) pour le rendre facilement accessible.

Source des images

6. Tirer parti des contraintes d'entrée.

Les contraintes d'entrée restreignent le type de réponse qu'une personne peut entrer dans un champ de formulaire. Cela peut inclure une limite de mots (par exemple, tout en remplissant un formulaire de demande d'emploi) ou ne pouvoir saisir que des chiffres (dans le cas d'un numéro de téléphone).

Cela se voit dans le formulaire ci-dessous, où un clavier numérique apparaît lorsqu'une personne va entrer son numéro de téléphone.

Source des images

Les contraintes d'entrée maximisent l'efficacité des formulaires en limitant les erreurs, les retards ou la confusion par inadvertance. Par exemple, si quelqu'un essayait de faire une réservation pour une table dans un restaurant et sélectionnait accidentellement une date dans le passé, la contrainte l'empêcherait de pouvoir sélectionner et confirmer cette date.

Ceci est particulièrement crucial lors de la conception pour mobile, car les écrans plus petits rendent plus difficile la saisie précise des informations. En définissant des contraintes de saisie, vous ferez gagner du temps aux utilisateurs lors du remplissage des champs de votre formulaire et vous éviterez de recevoir des réponses interminables ou invalides.

Voici un autre exemple de contrainte d'entrée.

Source des images

7. Créez des boutons d'action clairs.

Les boutons sont un aspect sous-estimé de la conception de formulaires mobiles. Pensez-y : vous obtenez une soumission ou une conversion de formulaire uniquement après avoir appuyé sur le bouton droit. Donc, vous ne pouvez vraiment pas négliger cet élément.

Cette feuille de triche de l'interface utilisateur et le blog UX Planet sont d'excellentes ressources pour concevoir des boutons efficaces. Voici un bref aperçu de certains des principes mentionnés que vous pouvez appliquer à vos formulaires mobiles.

• Trop de boutons gâchent le bouillon (tout comme les champs de formulaire, ne gardez que les boutons indispensables).
• Stylez et étiquetez vos boutons de manière cohérente (capitalisation, formatage, alignement, etc.).
• Mettez l'accent sur le bouton principal (l'action principale que vous souhaitez que l'utilisateur effectue) en le faisant ressortir par sa taille ou sa couleur.
• La droite est la droite - une règle générale pour les mobiles consiste à positionner le bouton principal sur le côté droit et le second sur la gauche (bien que cela puisse varier en fonction des besoins individuels).
• Des libellés spécifiques sont presque toujours la réponse ("Modifier cette page" plutôt que "Modifier").

Source des images

8. Fournir des scanners de cartes pour les paiements.

Vous avez essayé de saisir les détails de votre carte de crédit dans un formulaire via votre smartphone ? Taper un tas de chiffres sur un petit écran avec un petit clavier peut être un processus fastidieux.

Les applications de numérisation de cartes, telles que Microblink, sont devenues de plus en plus populaires pour cette raison précise. Lors d'un achat, vos visiteurs peuvent cliquer sur un bouton qui les amène à un écran où ils peuvent utiliser l'appareil photo de leur appareil mobile pour prendre une photo sécurisée du recto et du verso de leur carte, qu'il s'agisse de leur licence ou de leur carte de crédit.

Source des images

Avec seulement quelques images, vos prospects auront terminé avec l'une des parties les plus chronophages du processus de remplissage des formulaires mobiles - en gardant vos visiteurs efficaces, sans frustration et sans erreur.

9. Expliquez le besoin d'informations spécifiques.

En remplissant une simple inscription par e-mail ou un formulaire d'inscription, vous a-t-on déjà demandé de fournir des informations personnelles qui n'ont rien à voir avec le formulaire d'inscription lui-même ?

Il s'agit d'un phénomène courant dans tous les types de formulaires (pas seulement mobiles). Demander à quelqu'un des informations personnelles ou d'autres informations sensibles sans expliquer votre besoin peut sembler sommaire.

Lorsque vous posez une question qui n'est pas directement liée à la raison pour laquelle votre visiteur remplit le formulaire, il est essentiel de créer une boîte récapitulative (avec des informations supplémentaires) sur laquelle la personne peut cliquer pour comprendre pourquoi vous demandez cette information.

Ces indicateurs peuvent également aider à fournir des conseils supplémentaires pour remplir un champ de formulaire lorsque les instructions ne sont pas immédiatement apparentes. Dans l'image ci-dessous, une boîte récapitulative apparaît lorsqu'une personne survole l'icône.

Source des images

Ces petits détails rendront votre formulaire professionnel et réfléchi tout en réduisant les chances que l'utilisateur parte à mi-chemin.

10. Recueillir la validation et les commentaires.

L'expérience utilisateur est au cœur d'une bonne conception de formulaires mobiles. Et la validation et les commentaires jouent un rôle important dans la fourniture d'une excellente UX.

La validation permet aux utilisateurs de savoir si les informations qu'ils ont saisies sont correctes (ou non). Remarquez les coches vertes dans les champs du formulaire ci-dessous.

Source des images

En remplissant des formulaires mobiles, vos visiteurs sont obligés de faire une erreur ici ou là. Le formulaire doit signaler ces erreurs en temps réel afin que l'utilisateur puisse les corriger immédiatement.

Par exemple, si quelqu'un ajoute le code postal incorrect à côté de son adresse postale, le formulaire mobile doit afficher un message d'erreur. Cela devrait indiquer - dans un langage facile à comprendre - l'emplacement de l'erreur et comment la personne peut la rectifier (comme le montre l'image ci-dessous).

Source des images

Il est également crucial de donner aux gens des commentaires au fur et à mesure qu'ils parcourent le formulaire. Par exemple, une barre de progression sur de longs formulaires en plusieurs étapes peut rendre le processus de remplissage du formulaire plus attrayant en indiquant aux utilisateurs où ils en sont et combien de temps il leur reste pour le terminer.

Source des images

Considérez une personne remplissant le formulaire ci-dessus sans barre de progression. Ils cliqueront sur le bouton "Suivant" sans savoir quand le formulaire se terminera, et pourraient même l'abandonner juste avant la dernière étape par frustration.

Une fois que les gens ont soumis leurs formulaires, vous devez les diriger vers un autre écran ou une autre page qui dit quelque chose comme « Succès ! » ou "Merci" pour qu'ils sachent que leur soumission a fonctionné.

Voici un exemple de page de réussite sur HubSpot qui s'affiche après qu'un utilisateur s'est inscrit pour recevoir un kit Google Ads gratuit.

Source des images

11. Rendre les formulaires accessibles.

L'accessibilité est fondamentale pour la convivialité de votre formulaire. Les formulaires conçus dans un souci d'accessibilité peuvent être utilisés par un plus large éventail de personnes, y compris celles ayant des handicaps visuels, physiques, sensoriels et cognitifs.

Voici quelques recommandations spécifiques pour la création de formulaires accessibles à partir de l'initiative d'accessibilité Web du World Wide Web Consortium, WebAIM et de la liste de contrôle du projet A11Y).

• Vérifiez que le texte ne se pixelise pas ou ne devient pas flou lorsque vous zoomez sur votre formulaire (pour une meilleure visualisation).
• Étiquetez vos éléments de formulaire de manière à ce qu'ils soient clairement compris lorsqu'ils sont lus par un lecteur d'écran.
• Assurez-vous que votre formulaire est accessible en mode portrait et paysage.
• Évitez d'utiliser une limite de temps (si possible) pour donner aux gens suffisamment de temps pour répondre.
• Incluez des sous-titres ou des transcriptions pour tous les composants vidéo ou audio de votre formulaire.
• Gardez à l'esprit le contraste des couleurs. Voici un outil gratuit qui peut vous aider.
• Vérifiez que votre formulaire est entièrement utilisable avec un simple clavier.

Un excellent moyen de s'assurer que toutes les stratégies de conception de formulaires mobiles ci-dessus sont respectées consiste à explorer ce que vous ne devriez pas faire dans la conception de formulaires. La vidéo ci-dessous présente quelques exemples de ce qu'il ne faut pas faire lors de la conception de formulaires sur mobile et sur ordinateur.

Retour à toi

Ce n'est un secret pour personne que les visiteurs de votre site Web remplissent et soumettent vos formulaires Web via leurs appareils mobiles. C'est parce que c'est pratique et efficace, car la plupart des gens emportent partout avec eux un type d'appareil mobile, ce qui rend crucial que vos formulaires soient adaptés aux mobiles.

Sinon, vos formulaires seront difficiles à lire, à remplir et à soumettre, ce qui peut frustrer vos prospects ou vous faire perdre complètement leur clientèle.

En tenant compte de la conception de votre formulaire mobile et en mettant en œuvre ces directives, vous améliorerez l'expérience utilisateur de votre formulaire mobile, établirez des relations positives avec vos prospects et clients et augmenterez vos conversions.

Note de l'éditeur : Ce message a été initialement publié en décembre 2018 et a été mis à jour pour plus d'exhaustivité.