10 règles pour faire des formulaires Web conviviaux

Sep 11, 2025

Comment

Illustration of web forms on an iMac and tablet

[dix] [dix] [dix]

[dix]

Malgré l'évolution de l'interaction de l'ordinateur humain, les formes restent toujours l'un des types d'interaction les plus importants pour les utilisateurs. Les personnes qui utilisent votre candidature ou votre site Web ont un objectif particulier, et souvent, la seule chose entre l'utilisateur et leur objectif est une forme. Chaque jour, nous les utilisons pour nos activités essentielles - pour compléter les achats, s'inscrire à des réseaux sociaux, afin de fournir des commentaires sur un produit que nous avons acheté, etc. - ils font une grande partie de expérience utilisateur .

[dix]

En conséquence, il est très important que nous puissions remplir des formulaires en ligne rapidement et sans confusion. Les moins d'efforts que nous devons dépenser, plus nous sommes heureux. En tant que concepteurs et développeurs, nous devrions nous efforcer de produire des expériences de formes plus rapides, plus faciles et plus productives pour nos utilisateurs.

Dans la seconde de mes deux articles explorant comment construire de meilleures formes ( Trouvez le premier ici ), voici mes 10 conseils pour concevoir des formulaires conviviaux. Pas tout à fait ce que vous cherchez? Vous pourriez avoir besoin de nos guides vers le haut Générateur de site Web ou stockage en ligne un service.

01. Ne demandez que ce qui est nécessaire

Couper la quantité d'informations requises rend le formulaire plus facile à remplir. Vous devez toujours remettre en question pourquoi et comment les informations que vous demandez sont utilisées. Essayez de minimiser le nombre de champs autant que possible, car chaque champ que vous ajoutez à un formulaire affectera son taux de conversion. Limiter le nombre de questions et champs rend votre formulaire moins chargé, en particulier lorsque vous demandez beaucoup d'informations de vos utilisateurs.

02. Commandez logiquement les champs

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Pensez à votre forme comme une conversation; vous souhaitez grouper et commander les champs dans une commande qui a du sens pour l'utilisateur

Il est utile de penser à une forme comme étant semblable à une conversation. Comme toute conversation normale, elle devrait être représentée par une communication logique entre deux parties: une personne et votre application. Les détails doivent être demandés dans une commande logique du point de vue d'un utilisateur, pas celle de l'application ou de la base de données. Par exemple, il est inhabituel de demander l'adresse de quelqu'un avant leur nom.

[dix]

Il est également très important de regrouper des questions relatives aux blocs, de sorte que le flux d'un ensemble de questions à la suivante va mieux ressembler à une conversation. Le regroupement de champs liés aidez également les utilisateurs à donner un sens aux informations qu'ils doivent remplir.

La photo ci-dessus est des exemples de deux formulaires d'inscription. Les formes longues peuvent se sentir accablantes si vous ne regroupez pas les champs liés - comparez le formulaire à gauche à la version améliorée à droite.

Le regroupement doit être effectué visuellement et dans le code. Par exemple, vous pouvez utiliser le & lt; champs et gt; et & lt; légende & gt; éléments à associer des commandes de formes associées:

 & lt; Tratigeet & GT;
  & lt; légende & gt; informations personnelles: & lt; / légende & gt;
  & lt; div & gt;
    & lt; étiquette pour = "nom" & gt; prénom & lt; / label & gt;
    & lt; Type d'entrée = "Texte" Nom = "Nom" ID = "Nom" et GT;
  & lt; / div et gt;
  & lt; div & gt;
    & lt; étiquette pour = "Nom Last_Name" & GT; Nom et lt; / label & gt;
    & lt; entrée TYPE = "Texte" Nom = "Last_Name" ID = "Nom" & GT;
  & lt; / div et gt;
    & lt; étiquette pour = "sexe" & gt; profession & lt; / label & gt;
    & lt; Type d'entrée = "Texte" Nom = "Profession" ID = "profession" & gt;
  & lt; / div et gt;
& lt; / fianque & gt;

03. Gardez les étiquettes courtes

Les étiquettes de champ disent aux utilisateurs quels sont les champs d'entrée correspondants. Clear Label Text est l'une des principales façons de rendre UIS plus accessible. Les étiquettes disent à l'utilisateur le but du champ, mais ils n'attennent pas les textes. Par conséquent, veiller à ce qu'elles scanner facilement est une priorité - vous devez concevoir des étiquettes succinctes, courtes et descriptives (gardez-les à un mot ou à deux).

04. Ne pas dupliquer les champs

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Ne faites pas vos deux utilisateurs d'informations deux fois - vous ne les frustrerez que en gaspillant leur temps

Ce problème est particulièrement courant pour les formulaires d'inscription: Presque tout le monde a rencontré une forme qui vous oblige à taper une adresse électronique ou un mot de passe deux fois. Historiquement, cela a été conçu pour empêcher les erreurs de moulage. Cependant, la plupart des utilisateurs copient simplement le champ nécessaire à chaque fois que l'application le permettait. Et si les données du champ d'origine contiennent une erreur, elle était dupliquée.

05. Mettez en surbrillance les champs facultatifs

[dix]

Idéalement, il est préférable de ne pas avoir de champs optionnels. Conformément à la règle numéro 1, si une information n'est pas requise, il est impossible de gaspiller le temps d'un utilisateur. Mais si vous les utilisez, vous devez clairement distinguer les champs d'entrée ne peuvent pas être laissés en blanc. Habituellement, une petite marque comme un astérisque (*) ou une étiquette «en option» suffit.

06. Soyez prudent avec les valeurs par défaut

Évitez d'inclure une défaillance statique, sauf si vous croyez qu'une grande partie de vos utilisateurs (par exemple 90%) sélectionnera cette valeur - en particulier si c'est un champ requis. Pourquoi? Avec cette approche, vous êtes susceptible d'introduire des erreurs car les personnes scannent rapidement en ligne. Ne supposez pas qu'ils prendront le temps d'analyser tous les choix. Ils peuvent sauter par quelque chose qui a déjà une valeur.

La seule exception à ce point est la seule par défaut des valeurs par défaut - comme celles qui présentent le pays de l'utilisateur en fonction de leurs données de géolocalisation - qui peuvent effectuer la fin du formulaire plus rapidement et plus précis. Mais vous devez toujours les utiliser avec prudence, car les utilisateurs ont tendance à laisser des champs présélectionnés tels quels.

07. minimiser le besoin de taper

Le typing est un processus lent et sujet à l'erreur, et c'est particulièrement douloureux sur un mobile, où les utilisateurs sont confrontés aux contraintes de l'écran limitée. Et avec de plus en plus de personnes utilisant de petits écrans, tout ce qui peut être fait pour empêcher la saisie inutile améliorera l'expérience utilisateur. Le cas échéant, vous pouvez utiliser des fonctionnalités telles que SATECOMPOMPOMPETE et REFLUB pour les données, les utilisateurs doivent donc seulement saisir le montant minimum d'informations.

Remplir votre adresse Les informations sont souvent la partie la plus encombrante de tout formulaire d'inscription en ligne, grâce à plusieurs champs, de noms longs, etc. Enregistrez vos utilisateurs de devoir taper toute leur adresse en implémentant des préfrages pour ces champs. Bibliothèques comme Google Maps Offrir une API JavaScript simple pour atteindre cela. Tu peux Trouver une solution de travail ici .

08. Utilisez la validation en temps réel

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Des utilisateurs d'alerte immédiatement s'ils font une erreur - ne les faites pas attendre avant d'avoir terminé tout le formulaire

Dans un monde idéal, les utilisateurs remplissent des formulaires avec des informations nécessaires et terminent leur travail avec succès, mais dans le monde réel, les gens font souvent des erreurs. Il est frustrant de suivre le processus de remplissage d'une forme entière uniquement pour découvrir au point de soumission que vous avez commis une erreur.

Le bon moment pour informer quelqu'un sur le succès ou l'échec des données qu'ils ont fournies est juste après avoir soumis les informations. C'est là que la validation en temps réel entre en jeu. Il alerte les utilisateurs à des erreurs de suite et permet de les corriger plus vite, sans avoir à attendre avant d'appuyer sur le bouton "Soumettre".

Et rappelez-vous que la validation ne devrait pas seulement dire aux utilisateurs ce qu'ils ont faussé; Cela devrait également leur dire ce qu'ils font bien. Cela donne aux utilisateurs plus de confiance pour passer à travers le formulaire.

Persil est une excellente bibliothèque de validation de formulaire JavaScript. Il est open source et axé sur UX, vous pouvez donc remplacer presque tous les comportements par défaut pour répondre à vos besoins exacts. Dans le code suivant, il s'agit d'un simple exemple de validation de persil pour un champ «message». Le champ doit comporter au moins 20 caractères, mais pas plus de 100.

 & lt; étiquette pour = "message" & gt; message (20 caractères min, 100 max): & lt; / étiquette & gt;
& lt; textarea id = "Message" Class = "Form-Control" Nom = "Message" Data-Parsley-Trigger = "Keyup" Data-Parsley-Minlength = "20" Data-Parsley-maxlength = "100" Data-Parsley -Minlength-Message = "Allez! Vous devez entrer au moins un commentaire de 20 caractères." Data-persil - validation-seuil = "10" & gt; & lt; / textarea & gt;

Tu peux Trouver l'exemple de code complet ici .

09. Évitez les formats d'entrée fixes

La raison la plus courante de forçage d'un format fixe est la limitation de script de validation (l'extrémité arrière ne peut pas déterminer le format informatique), ce qui est dans la plupart des cas un problème de mise en œuvre. Plutôt que de forcer le format de quelque chose comme un numéro de téléphone lors de la saisie de l'utilisateur, vous devez permettre de transformer tout ce que l'utilisateur entre dans le format que vous souhaitez afficher ou stocker.

10. N'utilisez pas de boutons de réinitialisation

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Peu bon jamais venu d'inclure un bouton de réinitialisation juste à côté de l'option de soumission

Un bouton de réinitialisation n'aide presque jamais les utilisateurs. Il est difficile d'imaginer que quelqu'un voudrait un bouton qui annule tout leur travail, sans parler qu'ils voudront que ce bouton soit assis à côté du bouton qui l'enregistre. Le Web serait un endroit plus heureux si pratiquement tous les boutons de réinitialisation ont été supprimés.

Vous voulez savoir comment vos utilisateurs répondent à votre site Web? Un mot décent hébergement Web Le service vous donnera les analyses dont vous avez besoin.

Cet article est apparu à l'origine dans rapporter , le magazine des concepteurs et des développeurs de sites Web professionnels. Abonnez-vous à Net ici .

Articles Liés:

29 outils de conception Web pour accélérer votre flux de travail
Les 41 polices Web meilleures gratuites
13 meilleurs logiciels de test utilisateur

[dix] [dix]

[dix]

10 règles pour faire des formulaires Web conviviaux

01. Ne demandez que ce qui est nécessaire

02. Commandez logiquement les champs

03. Gardez les étiquettes courtes

04. Ne pas dupliquer les champs

05. Mettez en surbrillance les champs facultatifs

06. Soyez prudent avec les valeurs par défaut

07. minimiser le besoin de taper

08. Utilisez la validation en temps réel

09. Évitez les formats d'entrée fixes

10. N'utilisez pas de boutons de réinitialisation

Comment - Most Popular Articles

Comment utiliser le ressort de réagir pour animer des composants

Tackle Portrait Peinture avec des huiles

Comment sculpter un nez humain dans zbrush: 4 étapes faciles

Comment modéliser l'art concept au cinéma 4D

Créer une image multi-exposition avec Adobe CC

Tutoriel Procreate: Nouveaux outils explorés

Créer un effet de portail dans Maya

Créer un croquis de gravure numérique

Catégories