Optimiser vos formulaires pour les appareils mobiles

optimiser vos formulaire mobile - Optimiser vos formulaires pour les appareils mobilesOptimiser vos formulaire sur le mobile
vues

En 2018, 93% des Français possède un mobile, 71% un smartphone, 81% un ordinateur, 41% une tablette. C’est donc 48% du trafic web qui provient du mobile.

Ces chiffres prouvent que les sites mobiles doivent être la priorité pour les entreprises, car si dans le passé, nos téléphones n’étaient qu’un simple outil de communication, aujourd’hui nous comptons sur leur capacité quand nous travaillons.

Source 1  Source 2

Optimiser vos formulaires pour les sites mobiles et applications

Facilité, les achats des consommateurs sont un atout considérable surtout dans un univers mobile. Il ne faut pas négliger l’importance des appareils mobiles aux autres canaux pour atteindre de nouveaux clients.

Le formulaire a un rôle très important dans l’achat en ligne, il est également devenu un élément de base pour les sites mobiles. Ils sont généralement situés dans le checkout*, généralement le site nous demande des informations relatives à la livraison, l’adresse, le numéro de téléphone et les informations de paiement.

Si cette partie de votre e-commerce mobile n’est pas optimisée, vous avez de grandes chances d’avoir un taux d’abandon élevé. De nombreux utilisateurs ne remplissent pas les formulaires sur mobile.

Découvrez donc 5 points à améliorer pour augmenter les performances de vos transactions mobiles et ainsi rendre votre expérience utilisateur satisfaisante aux yeux de vos utilisateurs.

1 – Allez droit au but !

L’utilisateur sur mobile n’est pas patient, surtout lorsqu’il s’agit de remplir lignes inutiles lors d’un achat en ligne.

Il y a une différence notable entre répondre à un formulaire complet (nom, prénom, adresse, e-mail, téléphone, code postal…) et un simple formulaire (nom, e-mail, adresse, téléphone).

Ne perdez pas vos clients pour des questions inutiles, vous augmenterez les chances de perdre vos utilisateurs.

Un formulaire de commande simple et complète permettra à vos clients d’acheter plus facilement sur mobile.

2 – Structuration des champs

Étant UX Designer ou web designer, vous devez savoir que les smartphones ont une vue limitée, il est donc important de concevoir un formulaire capable de maximiser les contraintes.

La structuration de formulaire est un point important, tant dans la forme que dans le fond. Si vous utilisez un formulaire aligné horizontalement, la moities des informations ne seront pas visibles pour l’utilisateur.

Vous l’avez compris, un formulaire disposé verticalement permettra plus facilement à vos clients d’afficher les informations demandées et de les saisir, votre utilisateur remplira les informations de manière linéaire, comme une liste de courses à cocher.

Pour le design, il vous faudra minimiser l’encombrement visuel de vos formulaires, l’espacement entre les boutons d’actions ainsi que les champs à saisir.

3 – L’utilisation des menus pliables et des listes déroulantes

Une contrainte de plus causée par la vue limitée des appareils mobiles est que nous devons généralement défiler l’écran pour voir la totalité du contenu présent sur la page.

Le défilement des écrans est maintenant devenu dans nos habitudes lors de l’utilisation de notre smartphone.

Avec l’utilisation, des menus et des listes déroulantes, vous réduisez le temps passé par vos utilisateurs à remplir des formulaires mobiles parfois trop longs.

Les menus pliables sont également utiles pour lier les détails de plusieurs produits que vous souhaitez mettre dans une seule page.

4 – Afficher seulement les champs nécessaires pour optimiser vos formulaires

Atterrir sur un formulaire mobile trop long augmente les chances d’abandon. Allez droit au but !

Ne demandez à votre utilisateur que les informations nécessaires à la création d’un compte (adresse e-mail, mot de passe, nom, prénom).

Vous aurez tout le temps de demander à votre utilisateur de compléter son profil, lorsqu’il souhaite acheter un article sur votre site, demander lui son adresse, son numéro de téléphone.

Bien que cela ait un objectif valable sur une version de bureau, en revanche, demander une tonne d’informations lorsque nous sommes sur mobile n’est pas aussi efficace.

5 – Mettre en avant le bouton de votre formulaire

Le bouton “Soumettre” constitue la dernière étape du processus d’achat ou d’une création de compte. Il s’agit du bouton le plus important de votre formulaire. Vous devez le faire ressortir afin que vos clients restent engagés jusqu’à la fin.

Pour que votre bouton soit attrayant, donner lui une couleur vive, augmenter sa largeur. N’utilisez pas de wording comme “Envoyer”, utilisez plutôt des appels à l’action plus énergétique comme “Enregistrer maintenant” ou “Envoyer une demande”.

Pour revenir aux couleurs, évitez les couleurs trop claires, vous pouvez utiliser un changement de couleur subtile pour que vos clients sachent qu’ils ont terminé.

3 exemples de formulaire mobile

preview 4 - Optimiser vos formulaires pour les appareils mobiles
Source
budget app - Optimiser vos formulaires pour les appareils mobiles
Source
comp 145451 - Optimiser vos formulaires pour les appareils mobiles
Source

*Checkout : Il représente la partie “passage au panier” dans un site marchand. Il comprend les articles sélectionnés jusqu’à la page de confirmation de commande. Cette page comprend aussi la saisie des informations relatives de la livraison, du compte utilisateur ainsi que tu paiement.

Valentino
AuteurValentino
Fondateur du blog de l'UX Designer, j'ai souhaité vous partager ma passion au sein d'articles, de conseils et d'astuces sur mon métier. Je suis aussi Freelance comme UX / UI Designer sur Lille, je m'occupe de projet e-commerce et logiciel.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.