Comment améliorer au mieux la densité de l'information pour les formulaires longs et complexes?
Comment disposer des formulaires longs et complexes de manière à ce que le plus grand nombre possible de champs soit visible sur la page, mais que la lisibilité soit préservée?
Je redessine une application web d'entreprise où il y a un total de 30x champs à travers 5 sections lors de la création d'un devis, et où 10-20x champs supplémentaires sont ajoutés en fonction de l'état du devis.
Le client a exprimé une forte préférence pour voir autant de champs de formulaire que possible dans chaque écran sans avoir à faire défiler (cette demande semble raisonnable mais je n'ai pas encore testé)
Voici à quoi ressemble le formulaire:
Ma première tentative a été d'introduire une hiérarchie plus claire et de regrouper les entrées dans d'autres sous-sections:
Mais je pense que l'UX pourrait être encore amélioré en faisant circuler le contenu dans chaque onglet verticalement (et en utilisant la barre latérale pour présenter un résumé) au lieu de horizontalement + verticalement.
Y a-t-il d'autres modèles qui pourraient convenir ici?
Quelles sont les autres façons de garder visible un grand nombre de champs de formulaire?
Essayez d'être explicite sur les dépendances et l'ordre, à la fois dans les onglets (qui sont des sections étagées) et dans le contenu de l'onglet (la partie actuelle du total des formulaires).
Si je vous comprends bien, il s'agit d'un processus en plusieurs étapes. Il y a plusieurs aspects ici:
- Communiquer l'intégralité de ce qui est nécessaire pour l'achèvement
- Clarté sur l'ordre et les dépendances (entre et à l'intérieur des sections)
- Empathie pour les utilisateurs qui ont beaucoup de travail à faire pour se conformer avec succès à vos exigences
1. Divisez les onglets en sections ordonnées. Vous pouvez utiliser une liste numérotée avec sous-texte pour plus de clarté sur ce qu'ils rencontreront.
Les onglets sont souvent utilisés pour regrouper les données liées, mais pas autant pour diviser et grouper données ordonnées ou dépendantes.
En utilisant les sections verticales impliquant un ordre décroissant (le bas est le dernier) et un codage supplémentaire à l'aide d'une liste numérotée, vous expliquez:
- Le nombre total d'étapes
- L'ordre
- Une description pour amorcer l'utilisateur ce dont chaque section pourrait avoir besoin
2. Dans chaque section, utilisez un chemin vertical pour terminer afin que les utilisateurs connaissent l'ordre et vous avez la possibilité de modifier les sections ci-dessous en fonction de ce qu'un utilisateur a sélectionné dans une section ci-dessus.
Étant donné que vous avez des dépendances (c'est-à-dire des listes déroulantes conditionnelles qui modifient ou exposent des informations dans une section suivante), l'utilisation du format vertical mettra l'accent sur l'ordre dans lequel les choses doivent être terminées.
Il est également plus facile pour les clients de numériser et de faire défiler verticalement afin de voir les étiquettes pour toutes les entrées.
Compromis: données compactes vs clarté de l'ordre
Il y aura des compromis entre garder les informations `` au-dessus du pli '', mais il est probable que vous n'ayez pas de contrôle sur la fenêtre des utilisateurs. Ils pourraient utiliser un moniteur de 30 pouces ou un Macbook Air de 11 pouces.
3. Autorisez l'enregistrement et la sortie, car ils peuvent ne pas avoir toutes les données du formulaire à compléter, mais ne veulent pas recommencer.
Ne punissez pas les utilisateurs en vous conformant à votre modèle d'implémentation.
Étant donné que vous avez un formulaire complexe à plusieurs étapes, supposez que les clients ont BEAUCOUP de données à saisir, dont certaines peuvent dépendre de collègues (ou de systèmes externes) pour la collecte.
Permettez-leur de sauvegarder et de quitter, afin qu'ils n'aient pas à recommencer à zéro.
Mise à jour: une note sur les tabulations et les steppers
Comme l'a souligné @plainclothes, cette solution pourrait également fonctionner avec un stepper horizontal. J'ai vu des exemples des deux qui sont efficaces:
Si vous utilisez Material comme framework, ils proposent l'utilisation de horizontal ou vertical .
