Comment organiser un formulaire avec plusieurs champs?
Là où je travaille, nous avons un système qui a un écran avec plusieurs champs. Il y a environ 50 champs et tous sont importants et devraient apparaître.
// édité dans gimp: D
Avez-vous des suggestions sur la façon d'organiser les champs pour que cela ne soit pas aussi laid et compliqué?
Pour la question, supposons que tous les champs sont nécessaires. Mais cela pourrait être un problème d'architecture de l'information. L'adresser en premier pourrait réduire le nombre de champs dans le formulaire et le rendre plus facile. Voici un bon article sur IA et les formulaires web .
Le "problème" le plus évident avec la forme est le manque de rythme et d'équilibre , en fait, il brise la plupart des principes de conception connus .
Remarquez qu'il y a trop de lignes verticales . Cela pourrait être corrigé par en utilisant une grille , et même en composant à un rythme vertical , cela donnerait de l'ordre à la forme.
Enfin, vous pouvez en faire un formulaire en plusieurs étapes, de sorte que tous les champs ne s'affichent pas en même temps. Voici un Q&A expliquant quand les utiliser et ici comment indiquer les progrès.
Je pense que la forme séquentielle serait la solution efficace à ce problème. - Cela obligera l'utilisateur à passer par chaque étape pour terminer le processus. - Aucune étape obligatoire ne serait manquée. (Son problème dans l'onglet que nous ne pouvons pas voir sous quel onglet nous avons des champs obligatoires, nous devons donc passer par chaque onglet) - Il réduit la charge cognitive des utilisateurs en divisant/divisant les données.
J'espère que cela vous aidera.
Utiliser des onglets au lieu de groupes et placer tous les champs de saisie dans une colonne de taille constante rendrait les choses beaucoup plus faciles pour les yeux.
Si vous avez des zones de liste déroulante contenant moins d'environ 5 à 7 éléments possibles, remplacez-les par des zones de liste - prend plus d'espace vertical, mais semble beaucoup mieux et si vous utilisez des onglets, vous aurez plus d'espace.
Utilisez des onglets pour les champs qui ne sont pas obligatoires.
Divisez les champs (par exemple, personnel, financier, comptabilité) en onglets appropriés séparés.
Découvrez quelles informations les gens devraient normalement remplir, s'ils remplissent tout votre formulaire, ce n'est pas vraiment de l'expérience utilisateur, car ce sont vraiment beaucoup de champs. Si vous l'utilisez dans une application commerciale, les utilisateurs vont penser que c'est trop encombré et difficile, ce qui conduit à plus d'appels de support, ... Peut-être devriez-vous vérifier avec votre patron, quelles informations peuvent être automatisées/supprimées. Si je ne me trompe pas, il s'agit d'un document juridique ou d'un contrat. S'il s'agit d'un contrat, les clients avec adresse, nom, numéro, .../produits avec leur taxe et informations devraient déjà être dans le système, cela faciliterait le débordement des informations;)
Vous avez également des champs dérivés, par exemple. lorsque les utilisateurs remplissent une ville, vous pouvez obtenir le code postal, la région et le pays. Quand ils remplissent les rues, vous savez tout ce qui précède (ou vous pouvez faire une sélection en fonction de cela), juste en disant. Le fractionnement dans un assistant est une façon de le résoudre.
J'ai normalement des onglets avec le premier onglet = "global" avec tous les champs obligatoires. Ensuite, je sépare les onglets pour leur utilisation et leur utilisation (= beaucoup utilisé - oui/non?).