Share
Aujourd'hui, nous examinerons ce qu'est la validation de formulaire et pourquoi. vous, Joe Webdesigner, devrait s'en préoccuper. Voici un teaser: c’est l’un des moyens les plus simples d’améliorer la convivialité de vos conceptions et la plupart des concepteurs de sites Web l’oublient tout le temps.! Nous présenterons également quelques exemples de conception de validation de formulaire performante.. Lisez sur les jeunes sauterelles… la connaissance nous attend.
Dans le contexte d'une relation humaine, la validation consiste à ressentir le besoin de se faire dire que l'on a raison; Dans le contexte d'un formulaire Web, la validation survient lorsque le formulaire vous indique que vous vous trompez. Pour être précis, La validation de formulaire est le processus par lequel un formulaire Web vérifie si les informations saisies sont correctes..
Par exemple:
Vous avez l'idée… la validation s'assure simplement que l'utilisateur n'a pas commis d'erreur.
Cependant, la nature humaine est de faire des erreurs et, malheureusement, votre formulaire Web n’est probablement pas exempt d’erreur humaine. C’est là que la validation joue son rôle sous une forme conviviale. Un simple rappel visuel à l'utilisateur que quelque chose n'est pas rempli correctement peut faire toute la différence entre la joie d'un formulaire rempli avec succès et la frustration intense de devoir deviner ce qui s'est mal passé..
Le principe fondamental d'une bonne validation de formulaire est le suivant: "Parlez à l'utilisateur! Dites-lui que quelque chose ne va pas!"
Intégrer la validation dans vos conceptions Web n’est pas difficile… mais la grande majorité des concepteurs n’incluent jamais de conception. Pourquoi? Parce que la validation est souvent laissée aux développeurs lors des dernières étapes d'un projet.
Cela crée un scénario où vous, Joe Webdesigner, confiez l’un des aspects les plus cruciaux de l’expérience utilisateur à un développeur qui ne sait probablement pas ou ne se soucie pas de la façon dont la validation doit être conçue. Heck, dans de nombreux cas, les développeurs ne s'embarrassent même pas de la validation de formulaire la plus corrective… ce qui peut frustrer les utilisateurs.
Ce n’est pas une excuse pour les développeurs ou quoi que ce soit (et il y a beaucoup de grands développeurs qui gèreront cela avec brio), mais supposons qu’il ne prête pas l’attention par souci d’argumentation..
Examinez le graphique suivant:
Quel est le problème avec ce formulaire? Bien sûr - le formulaire se "valide" lui-même en disant à l'utilisateur que quelque chose ne va pas… mais il lui reste à deviner ce que c'est..
Le principe fondamental d'une bonne validation de formulaire est le suivant: "Parlez à l'utilisateur! Dites-lui que quelque chose ne va pas!"
Examinons le graphique suivant:
Beaucoup mieux non? Maintenant, l’utilisateur reçoit les informations nécessaires pour résoudre le problème. Ceci est un exemple simplifié, mais notez comment l'intégration d'un système de réponse de base améliore la convivialité à pas de géant..
Maintenant que vous comprenez ce qu'est la validation, vous souhaitez, espérons-le, l'appliquer à vos formulaires Web. Il existe généralement trois erreurs que les utilisateurs peuvent rencontrer dans votre formulaire:
C'est probablement le plus gros problème que les utilisateurs rencontreront. Avez-vous déjà rempli un formulaire uniquement pour savoir si vous avez inséré un caractère illégal dans le champ Nom d'utilisateur ou si vous avez utilisé un espace dans une adresse Web? C'est là que la validation du formatage entre en jeu.
La plupart des champs d'un formulaire Web sont simplement alphanumériques. Toutefois, si vous avez un champ de courrier électronique, adresse Web, numéro de téléphone ou mot de passe, une mise en forme spécifique peut être requise. Vous pouvez probablement deviner la syntaxe de chaque champ. La validation du formatage est donc efficace si vous avez des informations spécifiques en tête..
Ces erreurs se produisent lorsqu'un utilisateur oublie / néglige de remplir un champ que vous avez spécifié "obligatoire"..
Cela se produit lorsque vous devez vérifier si une valeur est égale à une autre. Ceci est particulièrement important dans les formulaires de connexion, car vous ne voulez pas permettre aux utilisateurs de se connecter si leur mot de passe ne correspond pas au bon.
Il peut également être utilisé pour inciter les utilisateurs à retaper leur adresse électronique ou leur mot de passe lorsqu'il est essentiel qu'ils ne commettent pas d'erreur..
Bien que vous puissiez styliser votre formulaire de mille manières différentes, il existe généralement trois étapes de base pour aider votre utilisateur à résoudre le problème de validation:
La couleur est l'un des meilleurs outils à utiliser lors de la conception de la validation. Parce que cela fonctionne à un niveau instinctif, en ajoutant rouge aux messages d'erreur, ou vert aux messages de succès est incroyablement puissant.
Proximité est un autre outil important - conservez des notifications spécifiques à proximité des champs à problèmes et gardez les messages sur le formulaire entier à l'écart des champs individuels. Si vous pouvez créer des solutions "personnalisées" personnalisées qui rendent ces stratégies encore plus évidentes (par exemple, donner à la notification l'apparence d'être physiquement liée à un champ spécifique), vous ferez encore mieux.
Il est également judicieux d'indiquer à vos utilisateurs à l'avance où ils pourraient créer des erreurs. De nombreux sites Web incluent une zone de menu contenant des instructions sur la manière de remplir le formulaire. La syntaxe correcte est appliquée sur d’autres. L'une ou l'autre méthode fonctionne, tant qu'elle est là.
Comme nous le verrons dans la section "Comment fonctionne la validation" ci-dessous, vous voudrez également exécuter la "validation instantanée" quand c'est possible.
Maintenant que nous avons passé en revue la théorie de la validation de forme… voyons quelques exemples de cela en action!
Notez que la solution est toujours simple: une info-bulle, une notification encadrée ou un élément de texte brut. Tant que vous gardez les notifications proches du champ de problème, vous pouvez les concevoir, les habiller ou les styler comme vous le souhaitez. La seule chose à retenir est que vous donnez quelques conseils à l'utilisateur.
Creusons dedans:
ThemeForest affiche immédiatement un message d'erreur sous le champ. Les entrées retenues reçoivent même un "succès!" Vert. message.
Frexy utilise une approche simple mais efficace: colorez le champ erroné et ajoutez un texte de notification clair en dessous. Edit: Comme Boba l'a noté dans les commentaires, la couleur verte peut être trompeuse pour certains utilisateurs, mais vous devez équilibrer l'image de marque et la convivialité à votre goût..
Twitter ajoute un message immédiatement à droite du champ pour indiquer une erreur. Il le fait instantanément… et ils ajoutent même de la couleur au système de réponse pour souligner le message.!
La Monnaie valide non seulement les champs de formulaire immédiatement, mais donne également positif et negatif commentaires… c'est presque comme si vous aviez une conversation avec le formulaire!
FancyForm est un outil de formulaire qui montre à quel point il peut être utile de fournir des commentaires en ligne sous la forme d'icônes..
Virb ajoute un message clair lorsque vous avez mal agi. Points bonus: Virb ne vous laissera même pas taper un caractère non autorisé! Essayez juste… ils osent.
WordPress vous donnera un message de base… mais ce qui est spécial, c'est que le formulaire lui-même secoue quand vous entrez la mauvaise information.
InvoiceMachine utilise l'approche la plus simple. Au lieu d'une aide textuelle, le fond rouge est coloré pour indiquer un problème. Gardez à l'esprit qu'une info-bulle texte lorsque l'utilisateur survole le formulaire pourrait améliorer encore davantage.
WPCoder montre qu'un simple popup en Javascript peut très bien fonctionner.
Yahoo utilise une approche humoristique… plutôt que de retourner une erreur de base quand un anniversaire est incorrect, ils vous donnent un peu d'attitude.
D'un point de vue technologique, il existe deux manières différentes d'intégrer la validation dans un formulaire:
La validation côté client offre l'alternative la plus conviviale, car elle permet d'afficher les commentaires en direct et instantanément, de sorte que l'utilisateur puisse corriger immédiatement leur erreur. Cependant, un inconvénient majeur de la validation côté client est qu’elle repose généralement sur une sorte de JavaScript. Par conséquent, si l'utilisateur a désactivé JavaScript, il ne verra pas la validation en direct. Donc, assurez-vous de toujours pouvoir vous replier sur la validation côté serveur
Vous pouvez en savoir plus sur le côté technologique de la validation sur notre site réseau, Nettuts!
Les meilleures formes sont celles qui anticipent le comportement de l'utilisateur. Il est important de planifier un formulaire et de comprendre comment un utilisateur peut commettre des erreurs avant même qu'il ne soit construit. Pourquoi? Parce que si vous pouvez anticiper un problème, il est facile de concevoir une solution pour aider les utilisateurs à le dépasser. Cependant, laisser la conception de validation jusqu'à la dernière minute peut être coûteux à corriger une fois le codage terminé. Prendre plus de temps pour concevoir des stratégies et des styles pour vos formulaires vous fera gagner du temps, de l'argent et de la frustration à long terme.
Accentsconagua