Le 15 octobre est la Journée Nationale de l’Abandon de Formulaires ! (d’accord, on a totalement inventé ça, mais si vous avez déjà quitté furieusement un formulaire de 47 champs, vous savez que ça devrait exister). Nous y avons tous été. Vous ouvrez un formulaire, voyez un mur de champs de texte, et pensez immédiatement “non, pas aujourd’hui.”
Mais voici le truc : les utilisateurs n’abandonnent pas les formulaires parce qu’ils sont paresseux. Ils les abandonnent parce que notre cerveau nous protège littéralement de la surcharge cognitive. Aujourd’hui, nous plongeons dans la véritable science derrière pourquoi certains formulaires semblent faciles et d’autres ressemblent à remplir des papiers fiscaux tout en faisant du monocycle.
Dans cet article, nous explorons pourquoi les utilisateurs abandonnent les formulaires et comment y remédier avec la théorie de la charge cognitive, la hiérarchie visuelle et la conception mobile d’abord. Vous apprendrez des moyens pratiques pour réduire l’abandon de formulaires et créer des formulaires que les gens veulent vraiment compléter. (Oui, c’est possible. Non, nous ne sommes pas délirants.)
Théorie de la charge cognitive : La RAM de votre cerveau est pleine
Qu’est-ce que la charge cognitive, au fait ?
En 1988, John Sweller a découvert quelque chose d’assez important : votre cerveau fonctionne comme un ordinateur. Il a une capacité de traitement limitée, et lorsque vous le surchargez, tout s’arrête. Nous avons tous vécu cela. Essayer de suivre les directions GPS tout en ayant une conversation téléphonique tout en se rappelant d’acheter du lait. Votre cerveau… s’arrête.
Sweller a identifié trois types de charge cognitive :
- Charge intrinsèque : Le véritable travail mental de comprendre ce que vous devez faire
- Charge extrinsèque : Travail cérébral supplémentaire causé par un mauvais design (coucou, formulaires de 2003)
- Charge germane : Traitement de nouvelles informations et connexion avec ce que vous savez déjà
Faire fonctionner cela dans de vrais formulaires
Réduire la charge extrinsèque (les gains faciles) :
-
Une question à la fois
- Ancienne école : Déposer 50 champs sur une page et prier
- Approche moderne : Diviser en morceaux digestes, un sujet par étape
- Résultats réels : La fonctionnalité formulaire conversationnel de PlatoForms montre que cela augmente les taux de complétion de 23%
-
Soyez utile, pas cryptique
Terrible : Entrez des données
Vraiment utile : Entrez votre numéro de téléphone (nous vous enverrons un code de vérification par SMS) -
Réduisez la saisie excessive
- Utilisez Pré-remplissage pour récupérer des détails comme le nom et l’email lorsqu’ils sont déjà connectés
- Ajoutez des listes déroulantes au lieu de forcer les gens à tout taper
- Appliquez la logique conditionnelle pour que les utilisateurs ne voient que les questions qui les concernent
Gérer la difficulté inhérente :
- Divisez les tâches effrayantes en moments “oh, c’est tout ?”
- Montrez des barres de progression (les utilisateurs aiment savoir qu’ils ont presque terminé)
- Remplacez le jargon par des mots humains
Hiérarchie Visuelle : Où vont les yeux en premier
Comment les humains regardent réellement les écrans
Alerte spoiler : nous ne lisons pas les formulaires comme des livres. Les études de suivi oculaire montrent que nous suivons des schémas prévisibles, et les concepteurs intelligents utilisent cela à leur avantage.
Modèle en Z pour le bureau (le plus courant) :
- Coin supérieur gauche (votre titre principal se trouve ici)
- Coin supérieur droit (indicateurs de progression, infos secondaires)
- Coin inférieur gauche (où commence le vrai contenu)
- Coin inférieur droit (l’endroit heureux de votre bouton “Soumettre”)
Modèle en F pour les formulaires plus longs :
- Balayage horizontal rapide en haut
- Balayage vertical sur le côté gauche
- Peut-être un autre balayage horizontal si quelque chose attire leur attention
Mettre cela en pratique
Rendre l’importance évidente avec le poids visuel :
Gros Titre Gras (24px, gras, foncé)
Sous-titre (18px, moyen, gris)
Étiquette de Champ (14px, gras, noir)
Texte d’Aide (12px, régulier, gris clair)
Des couleurs qui signifient vraiment quelque chose :
- Rouge : “Oups, corrigez cela” ou “Ce champ est requis” (n’en abusez pas, c’est stressant)
- Vert : “Vous avez bien fait !” ou “Tout est bon ici”
- Bleu : “Faites-nous confiance” et “Cliquez sur ce bouton”
- Gris : “Ceci est utile mais pas critique”
L’espace blanc n’est pas un espace vide :
- 16px minimum entre les champs (vos yeux ont besoin de pauses)
- 32px entre les différentes sections (espace mental de respiration)
- 24px de marges de page (ne bourrez pas les choses jusqu’aux bords)
Ce n’est pas être gaspilleur, c’est être gentil avec les cerveaux humains.
Ordre des champs : La psychologie de “Juste une chose de plus”
Commencez facile, devenez progressivement plus audacieux
Pensez à la complétion de formulaire comme à faire danser quelqu’un à un mariage. Vous ne commencez pas par le robot. Vous les mettez à l’aise avec quelques balancements, puis vous passez aux choses sérieuses.
La progression qui fonctionne :
- Victoires faciles (nom, email. des choses qu’ils connaissent par cœur)
- Choix simples (boutons radio, listes déroulantes)
- Choses qui nécessitent de la réflexion (zones de texte, questions complexes)
- Les demandes lourdes (revenu, sécurité sociale, premier-né)
Regroupez les éléments connexes :
- Informations personnelles de base
- Comment les joindre
- Ce qu’ils veulent/préfèrent
- “Êtes-vous sûr ?” éléments de confirmation
Les chiffres ne mentent pas
L’Institut Baymard a étudié 69 flux de paiement e-commerce (parce que quelqu’un devait apparemment le faire). Les résultats :
- Commencez par les choses difficiles : 68,7% de taux d’abandon (aïe)
- Regroupement logique : 23,1% de taux d’abandon (beaucoup mieux)
- Gardez les questions sensibles pour la fin : 41% de complétion plus élevée par rapport à les poser dès le début
Histoire de succès réelle :
Le formulaire de mise en ligne de propriété d’Airbnb est essentiellement un cours magistral :
- “Quel type de lieu ?” (choix multiple facile)
- “Où est-ce ?” (champ d’adresse avec saisie semi-automatique intelligente)
- “Combien voulez-vous facturer ?” (la question d’argent effrayante vient en dernier)
Résultat : 76% de taux de complétion. Pour contexte, la plupart des formulaires tournent autour de 23%.
En savoir plus : 3 Raisons de l’Abandon de Formulaires et 6 Étapes pour Ramener les Utilisateurs
Mobile vs bureau : Mondes différents, règles différentes
Le contexte mental compte
Utilisateurs de bureau :
- Assis, concentrés, état d’esprit “je fais du travail sur ordinateur”
- Peuvent voir beaucoup d’informations à la fois
- La saisie est facile et rapide
Utilisateurs mobiles :
- Debout dans une file d’attente, en marchant, état d’esprit “j’ai 30 secondes”
- Vision en tunnel. ne voyant qu’une chose à la fois
- Chaque appui demande un effort, la saisie est agaçante
Concevez pour la réalité de la situation
Dimensionnez les choses pour de vrais doigts humains :
Bureau : des champs de 36-40px de hauteur fonctionnent bien
Mobile : 44px minimum (recherche d’Apple, pas une opinion)
Optimisez pour les pouces paresseux :
- Plus de tapotements, moins de saisie
- Utilisez les superpouvoirs du téléphone (appareil photo pour les documents, GPS pour la localisation)
- Types de clavier intelligents (chiffres pour les champs de téléphone, symbole @ pour l’email)
Les changements d’architecture de l’information :
Bureau : Peut gérer plusieurs colonnes d’informations
Mobile : Ligne unique, une chose à la fois
Vérification de la réalité de la conception réactive
Il ne s’agit pas de rendre la version bureau plus petite. Vous devez repenser complètement ce qui est le plus important :
Mise en page bureau :
[Titre Principal Progression : 3/7 Besoin d’aide ?]
[Étiquette de Question] [Champ de Saisie] [Texte d’aide utile]
Mise en page mobile :
[Titre Principal]
[Progression : 3/7]
[Étiquette de Question]
[Champ de Saisie]
[Texte d’aide]
[Besoin d’aide ?]
Trois choses que vous pouvez corriger aujourd’hui
Correction #1 : Le test de surcharge cognitive
Avant de lancer votre formulaire dans le monde, demandez-vous :
- Quelqu’un peut-il comprendre ce que cette page veut en 3 secondes ?
- Serais-je ennuyé si je devais remplir cela sur mon téléphone en étant debout ?
- Mes messages d’erreur aident-ils vraiment les gens à résoudre les problèmes ?
- Ai-je ajouté des “éléments de design” qui ne font que compliquer les choses ?
Correction #2 : La vérification de la réalité en 5 secondes
Prenez littéralement n’importe qui (votre collègue, votre voisin, votre mère) et montrez-lui votre formulaire pendant exactement 5 secondes. Puis demandez :
- Que cherche à accomplir ce formulaire ?
- Que devriez-vous faire en premier ?
- Combien de temps pensez-vous que cela prendrait ?
Si vous obtenez des réponses très différentes, votre design embrouille les gens.
Correction #3 : Concevez mobile d’abord (même pour le bureau)
Commencez par la version mobile, même si la plupart des utilisateurs la verront sur bureau :
- Vous oblige à être impitoyable sur ce qui est vraiment important
- Rend le flux d’interaction à toute épreuve
- Garantit que cela fonctionne partout
De plus, concevoir mobile d’abord aboutit généralement à des expériences de bureau plus propres aussi.
La vraie discussion
La conception de formulaires ne consiste pas à rendre les choses jolies (bien que cela ne fasse pas de mal). Il s’agit de respecter le fait que les gens sont occupés, distraits, et ont environ 47 autres choses qu’ils préfèreraient faire.
Voici la règle d’or : Chaque champ est une demande pour que quelqu’un arrête sa journée et vous accorde son attention. Assurez-vous de le mériter.
La prochaine fois que vous construisez un formulaire, essayez cette expérience de pensée : imaginez le remplir pendant que votre café refroidit, que votre téléphone bourdonne de notifications, et que vous devez vraiment aller à votre prochaine réunion. Le finiriez-vous vraiment ?
Si la réponse est non, vous savez quoi faire. commencez gratuitement et voyez à quel point vos formulaires peuvent être plus faciles.
Réponses rapides aux grands problèmes de formulaires
Conseils pratiques sur la charge cognitive, la conception mobile d’abord, et la réduction de l’abandon de formulaires.
Q1 : Pourquoi les utilisateurs abandonnent-ils les formulaires ?
Les utilisateurs abandonnent souvent les formulaires en raison de la surcharge cognitive, d’instructions peu claires, ou de trop nombreux champs qui semblent inutiles.
Q2 : Comment puis-je réduire les taux d’abandon de formulaires ?
Simplifiez vos formulaires avec moins de champs, utilisez le pré-remplissage ou l’autocomplétion lorsque c’est possible, et montrez des indicateurs de progression pour que les utilisateurs sachent combien il reste.
Q3 : Qu’est-ce que la charge cognitive dans la conception de formulaires ?
La charge cognitive fait référence à l’effort mental nécessaire pour traiter l’information. Dans la conception de formulaires, réduire les distractions supplémentaires facilite l’accomplissement des tâches par les utilisateurs.
Q4 : Dois-je concevoir des formulaires pour mobile ou bureau en premier ?
Concevez mobile d’abord. Les écrans mobiles vous obligent à prioriser ce qui est important, et le résultat crée généralement une expérience plus propre sur bureau également.
Q5 : Quelle est la meilleure façon d’améliorer rapidement les taux de complétion ?
Commencez par de petites victoires : pré-remplissez les informations des utilisateurs, regroupez les questions connexes, et déplacez les champs sensibles ou complexes à la fin du formulaire.
