Rendre un très grand formulaire convivial
Nous sommes actuellement dans la phase de conception d'une application qui nécessite à un moment donné que les utilisateurs remplissent un formulaire.
Le formulaire peut être divisé en 3 sections. Nous laisserons l'utilisateur utiliser ensuite un processus par étapes pour remplir les 3 sections
par exemple.
Étape 1 (Détails des membres)
Étape 2. (Détails du bénéficiaire)
Étape 3 (Détails de la transaction)
Chacune de ces sections contient environ 15 entrées
Allant du nom aux coordonnées à l'état civil, etc.
De toute évidence, il ne serait pas très judicieux de tout ranger dans un seul écran et de faire défiler l'utilisateur pour tout terminer. Et l'utilisation d'une approche accordéon n'est pas non plus idéale car elle donne l'impression que la forme est très fracturée.
Quelle serait une bonne approche lorsque vous essayez de créer de grandes formes sur une plate-forme uniquement mobile et y a-t-il des entreprises qui l'ont suffisamment bien intégré dont je peux peut-être m'inspirer.
Vous pourriez regarder dans un Material Design Stepper .
Les steppers sont conçus pour la progression des étapes séquentielles, qui dans votre cas seraient les trois sections de votre formulaire. Consultez la section Types d'étapes pour voir comment ceux-ci sont utilisés sur une plate-forme mobile.
J'ai lu beaucoup d'études qui montrent qu'une forme longue est meilleure qu'une page à plusieurs pages/à étapes multiples. De plus, vous pouvez voir une réponse plus détaillée à la question "Formulaires à page unique ou à pages multiples?" ici .
Ce que je propose:
Vous avez déjà les champs regroupés en sections. Cela vous aidera, assurez-vous simplement que les sections sont bien délimitées;
Regroupez les champs en ensembles de champs et modifiez la conception pour avoir 2-3 entrées sur une ligne;
Utilisez des étiquettes claires et courtes.
Utilisez l'approche "Wizard"
- Je suggère de suivre l'approche de l'assistant dans ce cas
- Le regroupement des éléments de formulaire est logiquement un point clé ici
- Validation en ligne (sur flou)
- Faites passer automatiquement l'utilisateur à l'étape suivante une fois que tous les champs obligatoires sont remplis et qu'il n'y a pas d'erreur.
- Intégrez un mécanisme sujet aux erreurs (choisissez judicieusement les éléments du formulaire) plutôt que de corriger les erreurs et de valider les champs lors du flou.
Vous avez déjà mentionné les étapes. Donc
1: Assurez-vous que l'utilisateur est en mesure de comprendre qu'il existe des étapes. L'accordéon simple ne transmet parfois pas ce message. Vous devrez le rendre interactif comme Tory l'a suggéré dans Material Design.
2: Comme vous l'avez mentionné, il y a 15 champs, ayez également les zones de saisie au format de conception matérielle. Vous pouvez avoir l'étiquette sur le texte lui-même, ce qui économise de l'espace et vous pouvez afficher plus de saisie sur un seul pli. Vérifiez ce lien: https://material.google.com/components/text-fields.html#text-fields-single-line-text-field
3: Dans les grandes formes, le regroupement est le facteur le plus nécessaire. Si l'un d'eux se passe mal, l'utilisateur peut s'énerver.
4: Vérifiez si certains champs peuvent être réduits.
5: Traitez les messages d'erreur dès le départ. Vous pouvez l'essayer sur les zones de saisie lui-même soit en le montrant par couleur (rouge et vert) ou par une notification de type texte de présentation à côté des champs de saisie.
6: Amenez automatiquement le curseur sur le champ de saisie suivant, ce qui peut réduire la charge du moteur pour l'utilisateur.
En cas de grande forme, je pense à elle comme un ensemble de sous-formes plus petites plutôt que comme des étapes. lorsque vous remplissez un formulaire, vous pouvez laisser certains fichiers pour une saisie ultérieure, puis y revenir simplement lorsque vous êtes prêt. Et si vous faites un pas, il est plus difficile de faire un pas en arrière - cela devient "dansant" en cas de retours multiples.
Faisons donc un ensemble de sous-formulaires. Nous pouvons avoir beaucoup plus de 3 sous-formulaires (sections). La réflexion la plus importante à prendre en compte est la validation des entrées. Si une entrée affecte un autre champ, il est préférable de les avoir dans la même section. Certaines entrées peuvent affecter même toute une autre section - la faire apparaître ou disparaître. En d'autres termes, lorsque vous affichez un message de validation croisée, son champ référencé doit être visible à proximité.
Si vous affichez vos sous-formulaires (ou sections) à l'aide d'un accordéon avec des titres de section et des marques de validité de section, vous pouvez réduire tous les sous-formulaires remplis et validés et développer d'autres sous-formulaires. Indiquez simplement clairement avec une marque dans le titre qu'aucune action n'est requise dans le sous-formulaire rempli. Vous pouvez également fournir à l'utilisateur (s'il en a besoin) un formulaire d'une seule page lorsque tous les sous-formulaires sont développés.