Meilleur moyen d'afficher de nombreuses options oui / non (cases à cocher) et commentaires
Je migre une fonctionnalité d'une ancienne application (pour laquelle je n'ai qu'une capture d'écran de l'interface utilisateur) vers ma nouvelle application, et sur cette partie, j'ai besoin de conseils.
Dans l'interface utilisateur actuelle, il y a environ 60 champs indépendants que l'utilisateur peut vérifier ou non (mais devrait pouvoir sélectionner jusqu'à chacun d'eux), et pour chacun qu'ils sélectionnent "oui", une zone de texte apparaîtra pour cette option seul (donc 120 champs au total). Ces options sont actuellement juste en bas de la page dans une longue liste, avec des séparateurs de temps en temps pour briser les choses un peu.
Ma première pensée est d'utiliser un panneau d'accordéon pour chaque section (dont il n'y en a que 4) afin de ne pas submerger les utilisateurs (qui ont utilisé l'ancienne interface utilisateur depuis un certain temps maintenant, donc y sont au moins habitués), mais je Je me demande s'il y a plus que je pourrais faire pour accélérer la numérisation, la sélection et la saisie de commentaires.
Edit: capture d'écran du système actuel 
Ma nouvelle maquette (utilisant des accordéons) 
EDIT: Nouvelle idée des utilisateurs J'avais demandé aux utilisateurs s'ils avaient vraiment besoin d'une zone de texte pour chaque option, ou s'ils pouvaient en avoir une par section (tous les 10 -20 cases à cocher). Ils ont dit qu'ils étaient d'accord avec cela et ont demandé d'avoir, au lieu de cases à cocher, "une liste déroulante avec 3 options:" Non examiné ";" Impact - voir les commentaires "; et" Aucun impact "
Compte tenu de cela, je pense plutôt à des groupes de boutons pour minimiser les clics (ainsi que pour pouvoir voir les trois options à la fois), car quand ils disent "déroulant", ils signifient simplement "sélection" et ne connaissent que la mise en œuvre du menu déroulant ; ils ne sauraient pas demander "groupe de boutons".
Alors, voici ma nouvelle maquette, faites-moi savoir ce que vous en pensez (et oui, nous avons des tonnes d'acronymes): 
Dans ce cas d'utilisation, il semble que le travail de l'utilisateur soit de considérer chaque cas. La visibilité est alors un rappel et un positif. Les accordéons/onglets signifieraient des clics supplémentaires et potentiellement masquer des rappels
Je vais supposer que cette interface utilisateur est bien présentée visuellement. Taille de police, espacement, etc. Supposez également que le contrôle du clavier est optimal.
Alors peu de choses peuvent faire
Un marqueur de section sur le côté gauche qui se synchronise automatiquement lorsque l'utilisateur fait défiler la liste. Il fournit également une ancre pour une navigation rapide si une section présente un intérêt particulier.
Rendez une zone "Cliquez pour ajouter un commentaire" visible, et ce clic [ou en appuyant sur la touche "Entrée"] ici cochera automatiquement la case et entrera en mode d'édition de texte en un seul mouvement.
Si l'utilisateur a un cas d'utilisation pour passer à des éléments de révision connus, laissez-les taper et l'interface utilisateur filtre uniquement pour les options qui correspondent. Similaire à http://caniuse.com/
Notez qu'aucune de ces modifications ne constitue une modification "cassante" de l'interface utilisateur pour l'utilisateur existant. Cette cohérence de fonctionnement est un plus surtout car vous n'avez signalé aucun problème testé avec l'interface utilisateur existante. On ne veut vraiment pas aggraver accidentellement l'interface utilisateur avec un effort mal guidé pour l'améliorer :-)
Voici ma suggestion. J'espère que vous l'aimerez. Et ici, j'ai donné 2 options, c'est-à-dire `` pagination '' pour afficher le nombre fixe de commentaires ou le bouton `` charger plus '' pour afficher tous les commentaires à la fois.
Vous pouvez essayer une grille multi-enregistrements où chaque enregistrement a une zone de liste avec 60 options et une zone de texte.
Vous devez vous assurer que la même option n'est pas entrée deux fois. Lorsqu'une option est sélectionnée, l'enregistrement suivant n'affichera pas cette option dans la zone de liste.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Prenant des morceaux des réponses des autres, ainsi que d'obtenir des commentaires supplémentaires des utilisateurs (qui ont dit qu'ils seraient d'accord avec une seule zone de texte à la fin de chaque section), voici deux autres maquettes: Utilisation des groupes de boutons 
Utilisation d'une table radio (voir dans Codepen)
J'ai une suggestion alternative. Toutefois, la pertinence de cette option dépendra des informations généralement saisies dans les champs facultatifs "commentaires". Si ces champs contiennent généralement beaucoup de données une fois remplis, cette conception peut ne pas convenir.
Je suggère de diviser les soixante champs en catégories et d'utiliser des colonnes et des lignes pour diviser les champs en groupes logiques. J'ai une maquette rapide d'une façon dont cela pourrait fonctionner:
Ce qui précède n'est qu'un exemple, mais j'ai utilisé deux lignes et colonnes pour diviser les champs en quatre catégories. Bien sûr, vous pouvez avoir plus de catégories, mais vous avez l'idée.
Par défaut, il n'y a pas de champs de commentaires jusqu'à ce qu'un utilisateur sélectionne "oui" (selon la description de l'OP).
Voici une maquette montrant à quoi cela peut ressembler pour les champs pour lesquels les utilisateurs ont sélectionné "oui":
Comme vous pouvez le voir sur mes maquettes, j'ai ajouté un bouton "Enregistrer" pour chaque quadrant, mais vous pouvez choisir de gérer cela différemment. Avec ma conception, je changerais le bouton "Enregistrer" en un bouton "Modifier" si l'utilisateur a déjà enregistré les données, ou avoir une sorte de repère visuel quant à la progression de l'utilisateur.
J'espère que cela (avec les autres réponses) vous donnera quelques pistes de réflexion utiles. Bonne chance!