Divulgation progressive sur le formulaire de carte de crédit
Je joue avec l'idée de masquer complètement le bouton d'envoi sur un formulaire de carte de crédit jusqu'à ce que l'utilisateur entre des informations de carte valides (numéro de contrôle, date d'expiration, code de sécurité). Dès que des données invalides sont saisies, l'utilisateur est confronté à des erreurs contextuelles, et dès que toutes les données valides sont saisies, le bouton "payer" apparaît. Avez-vous des réflexions sur l'efficacité de masquer complètement le bouton ou simplement de le désactiver?
Dans la plupart des cas, ce n'est pas une bonne idée. Cela revient aux objectifs UX:
L'objectif principal d'un formulaire de carte de crédit est généralement d'amener l'utilisateur à effectuer un achat .
La correction et la validation des erreurs ne sont utiles que si elles vous aident à atteindre cet objectif.
Les boutons Buy it now, Purchase it Ou Complete purchase Sont généralement d'excellentes occasions d'afficher clairement appel à l'action au client. Le fait de masquer ce bouton vous prive de la possibilité d'inviter le client à effectuer un achat.
L'appel à l'action est généralement beaucoup plus important que la validation des erreurs, c'est pourquoi presque tous les paniers d'achat fournissent un bouton d'achat en gras qui apparaît à l'écran juste à côté du formulaire de paiement et ne disparaît jamais.
Si l'utilisateur tape mal un détail de paiement, le formulaire invite l'utilisateur à corriger le détail, mais le bouton ne s'estompe pas ou ne renonce pas ... c'est un bouton clair et clair qui est conçu pour fixer votre œil et votre attention sur l'objectif de le processus:
Masquer le bouton d'envoi ne fait pas partie de divulgation progressive . Le seul cas où un bouton d'envoi n'est pas disponible à l'avance se situe probablement dans une divulgation par étapes où un certain nombre d'étapes interdépendantes sont affichées dans un assistant ou un modèle similaire et soumission ayant lieu dans le cadre de la dernière tâche du processus: voir ci-dessous pour la distinction entre progressif et échelonné.
Avec la distinction ci-dessus à l'esprit, les formulaires de carte de crédit sont assez simples et n'ont pas besoin d'être décomposés en un processus en plusieurs étapes. Ainsi, le bouton "Soumettre" doit être disponible et visible pour que l'utilisateur s'engage à agir.
Si vous souhaitez améliorer le processus, vous pouvez vous concentrer sur l'amélioration de la mise en page et l'optimisation du formulaire pour une meilleure mise en forme, auquel cas, vous pourriez trouver la pièce suivante utile:
Formatez les champs 'Date d'expiration' exactement comme la carte de crédit (40% mal compris)
Il y a des attentes en jeu - les utilisateurs ont une idée du formulaire et voudraient y voir le bouton, sinon le composant entier semblerait incomplet/cassé.
Le bouton désactivé implique visuellement que l'utilisateur doit remplir le formulaire (correctement) avant de pouvoir le soumettre. En masquant le bouton, vous laissez entendre qu'il n'y a pas une telle condition. Comme les utilisateurs le savent par expérience, la condition est obligatoire, ils pourraient suspecter que votre formulaire est bogué. Il y aura inévitablement un pourcentage d'utilisateurs qui ont pensé qu'il y avait quelque chose de mal avec le formulaire et qui ont abandonné le processus au lieu d'être terminé.