Quelle est la meilleure expérience utilisateur: un tableau déroulant ou un tableau pleine grandeur permettant à la fenêtre du navigateur de faire défiler?
Quelle est une meilleure expérience utilisateur:
- Un tableau déroulant en utilisant les paramètres CSS de débordement dans un DIV?
- Une table pleine grandeur permettant à la fenêtre du navigateur de faire défiler?
Une table pleine grandeur permettant à la barre de défilement du navigateur (2) de faire défiler les données est une meilleure expérience utilisateur, car plusieurs barres de défilement sur la même page auraient tendance à dérouter les utilisateurs et à être un peu exaspérantes.
Bien sûr, cela ne s'applique que si les données dont nous parlons ici de défilement sont le principal objectif de la page, auquel cas, il serait acceptable d'avoir une barre de défilement dédiée à cette partie de l'écran.
- Plusieurs barres de défilement verticales dans la même fenêtre de navigateur peuvent prêter à confusion, en particulier lorsque vous utilisez une molette de défilement.
Tant que cela a du sens dans le contexte de l'interface, l'une ou l'autre méthode peut être utilisée. J'essaie de ne pas utiliser les DIVs à défilement dans les DIVs en règle générale, cependant, car ils deviennent désordonnés. Lorsque l'utilisateur fait défiler le bas d'un DIV, le navigateur commence souvent à faire défiler le DIV suivant ou la page, ce qui peut être discordant.
D'après mon expérience, une interface moins complexe aura une courbe d'acceptation/d'apprentissage plus courte, tous les autres facteurs étant égaux.
Je dirais que si vous avez une très grande table de données, la meilleure façon de le faire est d'utiliser CSS pour régler le débordement sur votre <tbody> tag dans le tableau. De cette façon, votre en-tête (stocké dans <thead>) restera visible quel que soit le défilement de l'utilisateur. Cela donnera à l'utilisateur une expérience similaire à celle qui peut être fournie dans une application standard lors de la visualisation de données tabulaires.
Je pense que c'est la meilleure solution car avec beaucoup de défilement, l'utilisateur est tenu de se rappeler ce que sont ces en-têtes de colonne, et si vous pouvez le faire pour qu'ils puissent toujours voir les en-têtes, alors vous leur donnez certainement une meilleure expérience (Rappelez-vous les mots immortels de Steve Krug - "Don't Make Me Think").
Arrivé sur un exemple parfait de très mauvaise implémentation d'une fenêtre défilante dans la fenêtre du navigateur juste après avoir lu ce post. Je pense que c'est clair à quel point c'est gênant à utiliser.
J'ai d'abord essayé d'utiliser la barre de défilement externe qui faisait défiler tous les chiens, déplaçant la souris dans la fenêtre intérieure fait défiler les chiens mais maintenant je ne vois que la moitié de la fenêtre et je dois retourner à la première barre de défilement pour la reculer. Le contenu principal ne doit pas être relégué dans un petit cadre intérieur comme celui-ci.
Allez avec l'option 2. Le défilement dans le défilement confond toujours les utilisateurs et son ennuyeux lorsque vous arrivez en bas et que la page défile.
Ma question est, avez-vous un moyen de trier les données afin que l'ensemble de données affiché soit plus petit au départ? Soit en se cachant avec un mélange de JavaScript et CSS ou en utilisant une sorte de script? L'affichage de nombreuses lignes de données n'est jamais très convivial. À moins que l'utilisateur ne comprenne les merveilles de ctrl + f, beaucoup de temps peut être gaspillé à défiler.
Vous pouvez également penser à ajouter des en-têtes qui flottent en haut de la liste lors de leur défilement. De cette façon, les utilisateurs n'auraient pas à faire défiler vers le haut pour savoir quels sont les noms des colonnes.
En règle générale, les barres de défilement imbriquées doivent être évitées. La seule fois où ils doivent vraiment être utilisés, c'est si vous avez des contrôles en dessous du tableau qui pourraient être manqués si le tableau est très long.
Cela dépend de l'usage que vous envisagez.
Il existe de nombreuses bonnes raisons d'éviter les barres de défilement imbriquées, mais il existe également des cas où le tableau doit être défilé. Voilà quelque:
- Mis à part la table, tout le reste tient sur l'écran. Si tel est le cas, vous n'avez pas de barres de défilement imbriquées (c'est-à-dire que le navigateur ne les a pas), et il peut y avoir de bonnes raisons de ne faire défiler que le tableau.
- L'utilisation principale du tableau est de faire référence à une petite partie de celui-ci par rapport à autre chose sur la page. Par exemple, vous devez remplir trois informations basées sur quelque chose dans le tableau que l'utilisateur doit rechercher (le "quelque chose" étant trop intuitif pour être automatisé). Si vous faites défiler la page entière, l'utilisateur doit rechercher ce qu'il veut dans le tableau, puis faire défiler vers le haut pour remplir les informations, puis effectuer une nouvelle recherche, etc. Si vous faites défiler le tableau, la partie "remplir" de l'interface utilisateur reste à l'écran.
le défilement vertical permet au navigateur de gérer le défilement horizontal (vous devez l'éliminer totalement) utilisez les paramètres de débordement css pour gérer.
Des études ont montré que les utilisateurs ne craignent pas de faire défiler vers le bas, mais détestent faire défiler les pages.