5 conseils pour concevoir des formulaires adaptés aux mobiles

Les formulaires de contact sont un élément clé de nombreux sites Web. Bien qu'ils soient généralement simples dans leurs fonctionnalités, vous devez toujours vous assurer qu'ils sont faciles à utiliser si vous souhaitez collecter des prospects et rester en contact avec vos utilisateurs. Ce n'est généralement pas un problème avec le trafic de bureau, mais l'utilisation de formulaires peut devenir délicate si vous utilisez un appareil mobile.

Dans cet article, nous allons parler un peu de l'importance de concevoir des formulaires adaptés aux mobiles. Ensuite, nous vous expliquerons cinq conseils pour vous assurer que vos formulaires fonctionnent parfaitement sur les appareils mobiles.

Mettons-nous au travail!

Pourquoi il est important que vos formulaires soient adaptés aux mobiles

Les formulaires sont de toutes formes et de toutes tailles. Le plus souvent, vous aurez affaire à des formulaires de contact :

Les formulaires d'inscription (ou opt-ins) sont également remarquablement populaires puisqu'ils permettent de collecter des emails et de les cibler lors des campagnes :

Cependant, les formulaires peuvent être utilisés à toutes sortes d'autres fins. Par exemple, vous pouvez vouloir collecter des informations à l'aide d'un sondage ou d'un quiz en ligne, auquel cas vous aurez besoin de formulaires pour que les utilisateurs puissent saisir les réponses.

Pour le dire autrement, les formulaires sont très polyvalents et presque tous les sites utilisent des formulaires d'une manière ou d'une autre. Par conséquent, il est essentiel de s'assurer que vos formulaires sont faciles à utiliser (à moins que vous ne souhaitiez offrir une expérience frustrante à vos visiteurs).

L'utilisation de formulaires à partir d'un ordinateur de bureau ou d'un ordinateur portable est généralement très simple. Vous disposez d'une souris et d'un clavier complet, la sélection du champ que vous souhaitez utiliser et la saisie des données ne devraient donc pas poser de problème. Cependant, la navigation sur le Web à partir de votre smartphone ou d'un autre appareil de petite taille entraîne des complications.

Lorsque vous travaillez avec vos doigts sur un petit écran, l'interaction avec les formulaires peut parfois être pénible en raison de mauvaises décisions de conception. C'est quelque chose que vous devez éviter dans vos propres conceptions. Après tout, si les utilisateurs mobiles ne peuvent pas interagir avec vos formulaires, vous risquez de perdre des conversions, des prospects ou simplement d'ennuyer complètement les visiteurs.

Il est également essentiel de comprendre que le trafic mobile est désormais tout aussi – sinon plus – important que les sources de bureau. En fait, le trafic mobile a déjà dépassé ce dernier au cours des dernières années. Cela signifie que la conception d'un site Web adapté aux mobiles doit être votre objectif principal lors du lancement d'un nouveau projet.

5 conseils pour concevoir des formulaires adaptés aux mobiles

Heureusement, la conception de formulaires adaptés aux mobiles n'est pas aussi difficile que vous pourriez l'imaginer. Dans la plupart des cas, il suffit de garder à l'esprit certains principes fondamentaux et de tester soigneusement vos formulaires avant leur mise en ligne. Parlons de la façon de le faire !

1. Supprimez toutes les sections inutiles

Plus vos formulaires contiennent de champs, plus ils seront difficiles à utiliser sur mobile. En effet, aussi bien conçus soient-ils, l'utilisation de formulaires sur mobile est tout simplement plus compliquée. En réduisant le nombre de champs ou de sections inclus dans vos formulaires, vous pouvez maximiser vos chances que les visiteurs les remplissent.

Voici un exemple rapide de formulaire de contact avec quelques champs supplémentaires dont il pourrait se passer :

Dans la plupart des cas, tout ce dont vous avez besoin pour un excellent formulaire de contact est un nom, un e-mail et le corps du message que vous souhaitez recevoir. Tout le reste dépend du type de site Web que vous utilisez et si vous essayez de collecter des prospects.

En fin de compte, moins votre formulaire comprend de champs, plus il sera facile pour les visiteurs mobiles de les utiliser. Après tout, la sélection d'un champ à l'aide d'un écran tactile peut être difficile, même s'il est bien conçu, vous souhaitez donc minimiser le nombre de « sauts » que les utilisateurs doivent effectuer.

Votre objectif à ce stade est d'examiner les formulaires existants de votre site. Passez en revue chacune de leurs sections et déterminez si vous avez vraiment besoin de champs supplémentaires au-delà de ceux que nous avons mentionnés précédemment. S'il y a un champ superflu, il suffit de le couper.

2. Utilisez des listes déroulantes lorsque cela est possible

La plupart d'entre nous sont à l'aise pour taper sur des appareils mobiles et utiliser des écrans tactiles. Cependant, envoyer un SMS à un ami et remplir un formulaire de contact sont deux expériences très différentes. Avec ce dernier, vous risquez d'être frustré si vous devez taper beaucoup d'informations.

L'un des moyens de faciliter la vie de votre visiteur mobile est de simplifier les choix qu'il doit faire concernant les éléments de votre site. Pour vous donner une idée de ce dont nous parlons, construisons sur notre exemple de réservation de restaurant précédent :

Pour faire une réservation, vous devrez probablement laisser un nom, un e-mail, un téléphone et indiquer une heure, ainsi que le nombre de personnes présentes. Il existe deux manières de créer un champ de formulaire pour valider une heure de réservation :

1. Configurez un champ qui accepte uniquement les entrées numériques.
2. Concevez une liste déroulante comprenant toutes les heures disponibles pour une réservation.

Comme vous pouvez l'imaginer, ce dernier est plus convivial pour les utilisateurs mobiles. Avec cette approche, ils n'auront pas besoin de taper des chiffres et ils peuvent simplement choisir ce qui leur convient le mieux parmi les options que vous incluez.

L'idée pour vous de jeter un œil à vos formulaires et de voir s'ils incluent des champs que vous pourriez remplacer par des menus déroulants. Ce ne sera pas toujours le cas car vous ne pouvez pas utiliser les menus déroulants pour collecter des noms ou des e-mails, mais il existe d'autres options où ils pourraient fonctionner.

Quel que soit leur cas d'utilisation, vous voulez vous assurer que vos menus déroulants incluent des options faciles à sélectionner à partir d'appareils mobiles. En d'autres termes, faites en sorte que le menu soit suffisamment grand pour que quelqu'un n'ait pas à fouiller pour choisir la bonne option.

3. Assurez-vous que vos boutons de soumission sont faciles à toucher

Cette astuce est assez simple, mais mérite toujours d'être mentionnée. Chaque formulaire que vous concevez devra inclure un moyen pour les utilisateurs de confirmer qu'ils souhaitent soumettre les données qu'ils ont saisies. Dans la plupart des cas, cela signifie créer un bouton de soumission :

Lorsque vous utilisez un ordinateur ordinaire, cliquer sur un bouton de soumission est la chose la plus naturelle au monde. Cependant, nous avons rencontré quelques formulaires sur mobile où appuyer sur un bouton est beaucoup plus difficile qu'il ne devrait l'être.

Si vos visiteurs ne peuvent pas soumettre les informations qu'ils ont saisies dans vos formulaires, tous vos efforts seront vains. De plus, rien ne semble aussi peu professionnel qu'un bouton Soumettre qui ne fonctionne pas comme prévu.

Pour concevoir de meilleurs boutons de soumission pour mobile, voici trois conseils rapides que vous devez garder à l'esprit :

1. Assurez-vous qu'ils sont assez grands pour être pressés facilement lorsque vous utilisez un appareil mobile.
2. Ne placez pas vos boutons trop près d'autres éléments, afin que les utilisateurs ne touchent pas le mauvais.
3. Mettez en valeur vos boutons d'une manière ou d'une autre, par exemple en utilisant des couleurs contrastées ou une typographie créative.

En plus de tout cela, vous voudrez également tester vos boutons de manière approfondie avant la mise en ligne de votre site Web. Nous verrons plus en détail comment procéder dans une minute. Pour l'instant, parlons performances.

4. Assurez-vous que vos formulaires se chargent rapidement

Nous parlons beaucoup des performances des sites Web dans plusieurs de nos articles, et ce n'est pas parce que nous avons besoin de vitesse. Le fait est que la plupart des gens n'aiment pas les sites Web lents, ce qui est tout à fait logique.

Avec des vitesses Internet de plus en plus rapides, attendre trop longtemps le chargement d'un site Web peut être une corvée. De plus, les vitesses de l'Internet mobile ont tendance à varier beaucoup plus que les connexions domestiques classiques. Cela signifie que votre site Web devra être hautement optimisé pour les appareils mobiles si vous voulez satisfaire ces utilisateurs, car tous n'auront pas un accès Internet approprié (c'est-à-dire rapide).

Cette astuce particulière peut s'appliquer à l'ensemble de votre site Web en général, mais elle est également importante pour les pages mobiles affichant vos formulaires. Si ces parties de votre site prennent trop de temps à charger, vous perdrez des prospects et des opportunités d'établir le contact avec vos visiteurs. En règle générale, un site Web ne devrait pas prendre plus de deux secondes à charger. Une fois que vous avez dépassé cette ligne, les taux de rebond ont tendance à augmenter considérablement, ce qui est une terrible nouvelle pour vous.

Compte tenu de la nature de la navigation sur mobile, réduire autant que possible ce temps est une aubaine. Dans cet esprit, il existe de nombreuses façons d'améliorer les performances globales de votre site. Par exemple, vous pouvez passer à un meilleur plan d'hébergement, utiliser un thème réactif optimisé pour la vitesse et compresser vos images. Bien sûr, ceux-ci aideront tous les utilisateurs, mais seront particulièrement avantageux pour ceux qui utilisent des appareils plus petits.

5. Testez vos formulaires avant de les publier

Étant donné que les formulaires sont un élément clé de la plupart des sites Web, il va de soi que vous devriez tester le vôtre de manière approfondie avant de les publier. Avec WordPress, ce processus est assez simple. Vous pouvez continuer et concevoir des pages spécifiques pour afficher vos formulaires, et ne pas les publier avant de les avoir entièrement testés.

Bien sûr, le plugin ou le thème que vous souhaitez utiliser dépend de vous (tant qu'il peut aider à développer des sites mobiles). Cependant, en ce qui concerne la phase de test, nous vous recommandons de garder les choses simples et d'utiliser quelque chose comme les outils de développement Chrome pour faire le travail.

Passons en revue un exemple rapide. Si vous utilisez Chrome, allez-y et prévisualisez la page qui inclut le formulaire que vous souhaitez tester. Ensuite, faites un clic droit n'importe où sur cette page et choisissez l'option Inspecter . Chrome vous montrera un ensemble d'outils que vous pouvez utiliser pour réviser et modifier le code source de la page à droite et à gauche, vous pouvez voir un aperçu de son apparence à partir d'un appareil mobile :

En haut de l'écran, il y a un menu que vous pouvez utiliser pour basculer entre différentes résolutions. Chrome inclut des paramètres pour plusieurs appareils mobiles courants, mais vous pouvez également saisir une résolution personnalisée.

À ce stade, vous devriez vérifier à quoi ressemble votre formulaire de contact et se comporte sur plusieurs appareils. Prenez l'exemple ci-dessous : le formulaire fonctionne parfaitement, mais vous pouvez voir qu'il n'évolue pas aussi bien qu'il le devrait. Portez une attention particulière au texte et aux icônes en particulier, qui sont trop près du bord de l'écran :

Une façon d'éviter ce problème est de garder vos formulaires simples, comme nous l'avons souligné lors du premier conseil. Dans l'exemple ci-dessous, le formulaire utilise plusieurs listes déroulantes et ne nécessite que trois champs. Cela le rend facile à utiliser et, plus important encore, le formulaire est si simple qu'il devrait parfaitement s'adapter à tous les appareils :

Si vous rencontrez des problèmes avec l'un de vos formulaires, vous devez évidemment les résoudre immédiatement. Sinon, vous risquez de vous aliéner votre audience mobile, ce que nous essayons d'éviter en premier lieu !

Conclusion

S'assurer que votre site Web est adapté aux mobiles est primordial pour maintenir le trafic et ne pas frustrer vos visiteurs. Plus précisément, vos formulaires doivent être faciles à utiliser sur les appareils mobiles si vous ne voulez pas manquer la réception de messages ou la collecte de prospects précieux.

Lorsqu'il s'agit de concevoir des formulaires adaptés aux mobiles, voici cinq conseils rapides pour vous simplifier la vie :

1. Supprimez toutes les sections inutiles.
2. Utilisez des listes déroulantes lorsque cela est possible.
3. Assurez-vous que vos boutons de soumission sont faciles à appuyer.
4. Assurez-vous que vos formulaires se chargent rapidement.
5. Testez vos formulaires avant de les publier.

Vous avez des questions sur la création de formulaires adaptés aux mobiles avec Divi ? Demandez dans la section commentaires ci-dessous!

Image miniature de l'article par Irina Adamovich / shutterstock.com.