web forms

Formulaires dans les Systèmes de Commerce Électronique – Comment les Concevoir pour ne pas Décourager les Utilisateurs d'Acheter

Lors de la conception d'une boutique en ligne, une attention particulière doit être portée à l'apparence et au fonctionnement des formulaires. La plupart des gens n'aiment pas les remplir, et cela représente généralement une expérience fastidieuse. Les boutiques en ligne regorgent de formulaires. S'inscrire pour un compte et passer une commande nécessitent de remplir un grand nombre de champs. Cela peut donner mal à la tête. C'est un problème important pour l'industrie du commerce électronique, car chaque formulaire abandonné peut signifier un client perdu. Une boutique en ligne professionnelle basée sur Drupal Commerce doit se caractériser par de bonnes solutions UX, et des formulaires bien préparés en sont un élément important. 

Limitez le nombre de champs

Tous les formulaires doivent être aussi simples que possible, et le nombre de champs – réduit au minimum. Vous ne devriez demander à l'utilisateur que le strict nécessaire. Dans un formulaire, il n'y a pas de place pour les champs qui ne seront pas utilisés à des fins de traitement de commande. Chaque fenêtre supplémentaire où l'utilisateur doit entrer plus d'informations l'éloigne de la finalisation de la commande. Les formulaires surdimensionnés dissuadent les utilisateurs. Le nombre de champs se traduit directement par le nombre d'utilisateurs qui passeront le formulaire dans son intégralité.

quantité de champs

Disposition des champs dans un formulaire

Si vous avez déjà limité le nombre de champs à remplir, il est temps de se concentrer sur leur disposition. Ici aussi, vous devriez considérer ce qui est plus pratique pour l'utilisateur. Afin de rendre le processus de remplissage du formulaire plus agréable, les champs doivent être disposés en une seule colonne : l'un après l'autre. Si le formulaire comporte de nombreux champs, il est tentant de les disposer en deux colonnes ou plus. À maintes reprises, en collaboration avec des clients, dans le cadre de nos services Drupal Commerce, nous avons attiré l'attention sur cela, car une telle disposition rend difficile la lecture du contenu de la page d'un seul coup d'œil. Si les champs sont disposés verticalement, l'utilisateur peut les remplir de haut en bas, sans regarder de côté. Grâce à cela, vous obtenez l'impression de suivre un chemin droit – de haut en bas. L'utilisateur ne laisse aucun champ vide, comme c'est parfois le cas avec les formulaires à plusieurs colonnes. Vous devriez suivre la règle suivante : plus le formulaire est long, plus il est logique de disposer les champs verticalement.

alignement

Libellés des champs dans un formulaire

Chaque champ d'un formulaire doit avoir un libellé. Le libellé est la description du champ qui indique ce que l'utilisateur doit entrer. Idéalement, le libellé devrait se trouver au-dessus du champ. Il est également important que l'utilisateur n'ait aucun problème à comprendre ce qu'il doit entrer. Si certains champs de votre formulaire peuvent causer des difficultés, il est bon d'ajouter un indice ou de présenter un exemple de remplissage. Montrez à quoi devrait ressembler le numéro d'identification fiscale saisi, montrez un exemple de date ou informez de la longueur minimale du mot de passe et des caractères qu'il doit contenir.

libellés

Regroupement des champs

Les champs au sein d'un formulaire doivent être regroupés. Un groupe de champs couvre le même sujet. Par exemple, tous les détails de contact doivent être regroupés, afin que l'utilisateur puisse fournir toutes les informations concernant la livraison en un seul endroit. L'ordre des groupes doit être logique. Vous devriez suivre le principe "de haut en bas", afin d'obtenir une structure sensée. Les champs importants en haut – les moins importants en dessous.

regroupement

Validation 

Même dans un formulaire parfaitement conçu, l'utilisateur peut commettre une erreur. C'est pourquoi un système de validation efficace doit être ajouté au formulaire. Le système de validation affiche un message lorsque l'utilisateur fait une erreur ou oublie un champ requis. La validation doit fonctionner de manière à frustrer le moins possible l'utilisateur. Les messages doivent être formulés de manière non ambiguë et lisible. Leur contenu doit indiquer clairement comment résoudre le problème survenu. Une bonne validation vous permet de localiser immédiatement l'obstacle survenu dans le formulaire. 

L'utilisateur ne devrait pas faire défiler la page vers le haut et le bas pour chercher l'erreur. La solution la plus efficace est la validation en temps réel. L'utilisateur peut immédiatement voir s'il a correctement rempli le champ. S'il s'est trompé, le système signale immédiatement l'erreur et l'utilisateur peut corriger immédiatement la faute.

La pire solution qui apparaît parfois dans certains formulaires est la suppression du contenu de tous les champs et la nécessité de les remplir à nouveau. Une telle solution est un désastre absolu. L'utilisateur sera très en colère lorsqu'il devra tout entrer à nouveau. Vous devriez éviter cela à tout prix. Ne permettez pas que le formulaire soit supprimé lorsqu'une erreur survient !

validation

Simplifiez et aidez l'utilisateur autant que possible

Dans le cadre de nombreux travaux dans le domaine des services de développement Drupal, nous avons constaté à maintes reprises que, lors de la création d'un formulaire, vous devriez vous concentrer sur le remplissage nécessitant le moins d'effort et de temps possible. Ne forcez pas l'utilisateur à entrer des informations qu'il a déjà fournies. Par exemple : si le client a fourni son e-mail et son adresse lors du processus d'enregistrement, vous pouvez l'entrée par défaut dans le formulaire de livraison. S'il est nécessaire de le modifier, il peut cliquer sur l'option "voulez-vous apporter une modification ?" qui permet de faire des ajustements. 

Une attention particulière doit être portée aux appareils mobiles

Lors de la conception de formulaires, vous devriez considérer sérieusement les appareils mobiles et adapter les formulaires à ceux-ci. Lors de l'utilisation d'un smartphone, il y a des limitations et des difficultés concernant leur remplissage. L'écran est petit, l'utilisateur utilise un doigt. Cela signifie que les champs doivent être grands et faciles à cliquer. Il en va de même pour les boutons du formulaire. En raison des utilisateurs de smartphones, vous devriez également vous efforcer de raccourcir les formulaires.

Analyse des formulaires

Lorsque vous possédez une boutique en ligne, vous devriez analyser systématiquement le trafic du site Web. Vous devriez accorder une attention particulière aux formulaires. Des outils d'analyse tels que Google Analytics ou Hotjar vous permettront d'observer comment fonctionnent vos formulaires et peut-être d'identifier les éléments nécessitant des améliorations. Grâce à cela, vous saurez combien de pour cent d'utilisateurs abandonnent le formulaire et quels éléments posent des difficultés aux clients.

Il est bon d'expérimenter avec les formulaires. Même un petit changement peut faire une grande différence pour votre taux de conversion. Supprimer un champ, corriger des descriptions, renoncer à exiger la fourniture d'un numéro de téléphone peut permettre à la boutique en ligne de gagner davantage. 

Résumé

Les formulaires sont un enjeu auquel chaque propriétaire de boutique en ligne est confronté. En utilisant les meilleures pratiques UX, des formulaires correctement conçus améliorent l'expérience utilisateur. Il est bon d'observer leur fonctionnement et d'introduire des modifications pour améliorer le taux de conversion. Il y a toujours quelque chose qui peut améliorer la performance du formulaire sur votre site Web.

Drupal-Commerce-Services-Banner-Blog-Droptica