Quels sont les moyens de gérer plus de données sur une seule page sans faire défiler?
Bonjour à tous.
je dois gérer disons plus de 10 colonnes sur une seule page, pour Ex = 
C'est une application qui dit que l'élève veut donner son avis à l'enseignant et selon les domaines que l'élève doit répondre.
Ci-dessus, mon travail est fait, mais je pense que c'est un travail répétitif que je montre à l'utilisateur. par exemple: voir SR.No 1 (par erreur, tous sont 1) mais voir la première ligne, dans ce commentaire, réponse de la direction, élément (c.-à-d. attribution de tâche à un utilisateur particulier), la pièce jointe est des colonnes communes pour toutes les lignes, donc je pense que je peux combiner tous et mettez-le dans le coin supérieur droit de sorte que lorsque l'utilisateur veut donner une réponse qui sera là et lorsque la question changera, elle deviendra vierge pour cette question.
Toute conception prête m'aidera également. veuillez me suggérer quelque chose qui résoudra mon problème. Merci d'avance.
1. Moins c'est plus
Essayer de mettre plus de choses sur une seule page n'est pas le but de fournir une bonne UX. Déterminez quelle est la tâche principale à accomplir et montrez-la seulement. Si des détails supplémentaires sont nécessaires dans de rares cas, masquez-les jusqu'à ce que l'utilisateur les demande en cliquant sur show advanced options bouton à bascule.
"La perfection n'est pas atteinte quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à retirer."
-- Antoine de Saint-Exupéry
2. La taille d'une page est fixe
Vous ne pouvez tenir que sur une seule page et lors de la conception d'une application Web, nous ne pouvons jamais être sûrs de ce que la taille sera . Vous avez la bonne idée d'afficher les informations les plus pertinentes sur une seule page sans défilement mais cela n'est pas possible lorsque les utilisateurs peuvent saisir ce qu'ils veulent.
3. Développer/réduire des groupes de données
S'il y a plus de contenu que ne peut en contenir une seule page, vous pouvez regrouper les données à l'aide d'un développer/réduire le composant qui permet à un utilisateur de travailler sur une seule pièce à la fois.
4. Si vous devez faire défiler puis faites défiler verticalement
Même après avoir utilisé toutes les méthodes ci-dessus, il arrive toujours un moment où le défilement est inévitable. Plus précisément dans votre cas où les utilisateurs peuvent saisir des notes de différentes longueurs.
Envelopper le contenu dans une largeur raisonnable puis le faire défiler verticalement offre la meilleure expérience sur la plupart des appareils (écran tactile, molette de la souris, etc.)
L'utilisateur doit-il entrer chaque champ pour chaque question? Sinon, envisagez d'utiliser la divulgation progressive pour alléger un peu la charge cognitive initiale de l'utilisateur.
Par exemple, si l'état initial de votre écran n'était qu'une liste de questions et de zones de saisie de texte pour les commentaires, cela rendrait la tâche très claire pour l'utilisateur. Lorsque l'utilisateur décide de répondre à des questions, vous pouvez afficher des options de saisie supplémentaires telles que la conformité, les pièces jointes, etc.
Disons que les données sont présentées sous forme de tableau. Les données de colonnes répétitives ne peuvent être affichées qu'une seule fois dans un panneau au-dessus des données tabulaires et des colonnes distinctes peuvent être affichées sous forme de tableau. Le nombre de colonnes affichées sous forme de tableau est limité par l'espace horizontal disponible à l'écran. Plutôt que de faire défiler l'utilisateur horizontalement, placez les colonnes supplémentaires dans le panneau ci-dessous, et ce panneau sera actualisé avec les données correspondantes, chaque fois que l'enregistrement des données tabulaires est sélectionné par l'utilisateur. 
Pourquoi ne pas utiliser des colonnes horizontales? Il semble moins répétitif et ne prendra pas beaucoup de place, et ne cause aucune mauvaise expérience visuelle (car il semble plus empilé et plus organisé).
Prenons un exemple de International Student Calculator by Brightside , comme vous le voyez ici, vous entrez, et cela montre les colonnes horizontales, l'une pour le revenu et l'autre pour le résultat, chaque colonne a ses questions, mon idée est de changer votre disposition en quelque chose d'aussi similaire, des colonnes avec les noms des enseignants, et en dessous se trouvent des questions les étudiants sont ces questions, et une fois qu'ils ont terminé toutes les colonnes, un bouton d'appel à l'action apparaît, comme pour "envoyer" ou " enregistrer "voir l'image ci-dessous:
Maintenant, disons que vous avez trop de colonnes, il y a toujours une solution pour les organiser au lieu de les encombrer, et pour cela, nous prenons Trello by Fogcreek comme exemple, Trello utilise également des colonnes pour organiser les tableaux, mais si vous ajoutez trop de tableaux, il continue d'ajouter les colonnes sur la droite, jusqu'à ce qu'ils ne soient pas visibles, cela peut sembler mauvais, mais ce n'est pas le cas, car les gens de Fogcreek ont fait un excellent travail sur l'interface, voir le image ci-dessous:
Alors, qu'ont-ils fait pour que l'utilisateur remarque qu'il y a des colonnes cachées à droite? Facile!
Ils n'ont pas entièrement masqué les colonnes, mais à la place, ils en ont montré une petite partie pour faire remarquer à l'utilisateur qu'il a d'autres colonnes qui ne sont pas visibles sur son écran.
En outre, ils ont rendu la barre de défilement horizontale toujours visible, de sorte que l'utilisateur peut dire qu'il a d'autres colonnes qui ne sont pas visibles à droite.Une autre chose de bonne expérience utilisateur est la barre de défilement elle-même, la couleur se démarque de l'arrière-plan , ce qui fera que l'utilisateur le remarquera, une autre chose est la taille, la couleur seule n'aidera pas si la taille est une barre de défilement normale, donc ils l'ont agrandie et impossible de ne pas la voir.
L'étudiant qui va à votre programme doit "toujours" savoir qu'il va commenter et noter son professeur avant d'atteindre cette page, car il s'attend à ce que de nombreux formulaires soient remplis.
Parallèlement à la création de fluidité horizontale dans votre page, elle sera complexe à réaliser, mais pour le bien de l'utilisateur final, elle supprimera la répétitivité et ajoutera le facteur de "plaisir" à votre page;
Un exemple de la fluidité serait d'adapter la conception aux réponses précédentes de l'élève:
1. combien de points donnez-vous à X? X> 7: 2. Quelle est la chose que vous aimez le plus dans les cours de cet enseignant? X <4: 2. Qu'est-ce qui vous dérange le plus dans les cours? Faites de la question X> 7 un champ de texte pour les commentaires, et pour X <4 une liste déroulante des choses les plus courantes que les élèves n'aiment pas dans la classe (le matériel est dur, environnement ennuyeux ....)
Etc ..... EDIT: Merci d'avoir créé ce prototype, je suis sûr qu'il aidera les autres membres de la communauté et les visiteurs confrontés à votre problème.
Une autre chose est de savoir comment traiter les longs textes dans la petite zone prévue. La solution à laquelle je pense maintenant est de supprimer le contenu à 300 caractères et d'ajouter un bouton "plus" à la fin de celui-ci, si l'utilisateur clique dessus, il affiche le contenu supplémentaire dans la même boîte ou dans un modal, don N'oubliez pas d'ajouter le bouton "Moins" pour masquer le contenu et ne pas lui permettre de ruiner l'interface utilisateur. Une autre chose que je suggérerais, c'est qu'en plus du bouton "Plus", vous ajoutez le nombre de mots restants, afin que l'utilisateur puisse se faire une idée de ce qu'il va lire de plus, si vous utilisez un modal, Je vous suggère d'ajouter une petite icône indiquant que le contenu supplémentaire ne sera pas affiché dans la même zone, et pas de paniquer l'utilisateur.