Dans un tableau de données statique, les lignes doivent-elles être mises en surbrillance au survol?
Mon équipe crée un composant de table Material Design. Les directives de conception des matériaux sur les tableaux de données indiquent:
Survol de ligne (bureau)
Affichez un arrière-plan dans une ligne du tableau si un utilisateur survole une partie de cette ligne.
Il convient de noter que nos tableaux de données ne comportent pas de cases à cocher ou d'autres contrôles de sélection. Ils sont en lecture seule.
Est-ce que cela a du sens pour un tableau de données non interactif? Les utilisateurs s'attendraient-ils à pouvoir mettre en surbrillance les lignes en survol? Aide-t-il à la lisibilité?
Oui. Oui.
Bien que je fasse du travail UX, je parle en tant qu'utilisateur sur celui-ci. En tant qu'utilisateur, je souhaite vivement que vous m'aidiez à suivre facilement une ligne de données de bout en bout. Je veux pouvoir voir facilement ce qui s'aligne et ce qui va avec quoi.
Il est trop facile pour moi de regarder une colonne d'un côté d'une ligne, puis de regarder ce que je pense être le côté opposé de la même ligne mais qui est en fait la ligne au-dessus ou en dessous. Je le fais accidentellement tout le temps sur des interfaces qui ne m'aident pas. Je finis par tracer physiquement avec mon doigt sur le moniteur pour m'aider à m'assurer que je regarde la même rangée de bout en bout. C'est lent, frustrant et sujet aux erreurs. Aidez-moi, s'il vous plaît.
Comme pour certaines des sous-questions:
Est-ce que cela a du sens pour un tableau de données non interactif?
une. Oui! J'utilise cette fonctionnalité pour m'aider même dans les tableaux en lecture seule.
Les utilisateurs s'attendraient-ils à pouvoir mettre en surbrillance les lignes en survol?
une. Je ne l'attends pas en soi, car beaucoup d'interfaces (malheureusement) ne le font pas. Mais je l'espère et je suis ennuyé quand il n'y a pas une telle assistance.
b. Si vous vouliez dire "Les utilisateurs s'attendraient-ils à pouvoir sélectionner ..." (ou autrement être exploitables): peut-être. Certains utilisateurs peuvent se demander si cela signifie qu'ils sont cliquables, mais ils se rendront rapidement compte qu'ils ne le sont pas. Si certains utilisateurs pensent que la ligne est actionnable et perdent accidentellement quelques secondes et quelques clics, cette gêne est éclipsée par les gênes de lisibilité de la table.
Aide-t-il à la lisibilité?
c. Oui! Beaucoup. Tout comme quelqu'un l'a commenté, je sélectionne souvent un en-tête de ligne dans Excel même si je n'ai pas l'intention de modifier cette ligne; Je le fais pour aider à la lisibilité de cette ligne.
Une autre option pour la lisibilité: @Tulains Córdova a suggéré l'approche des couleurs alternées. C'est aussi une bonne idée, sauf que les images fournies montrent des couleurs trop contrastées. Le meilleur des deux mondes: utilisez des couleurs alternées très contrastées (blanc et gris très clair, par exemple), et utilisez une couleur de surbrillance plus contrastée pour la ligne de souris unique.
TL; DR
Non, alternez plutôt les couleurs des rangées.
Longue réponse:
Des couleurs de lignes alternées (généralement du blanc et du vert clair) pour faciliter la lecture des lignes dans les rapports larges ont été utilisées bien avant l'affichage de l'ordinateur.
Si cette table avait des couleurs alternées pour être utilisée, il ne serait pas nécessaire de surligner la ligne lorsque vous la survolez.
Ci-dessus: Papier continu à barre verte
Ci-dessus: Couleurs des lignes alternées dans un rapport d'ordinateur
Ci-dessus: moins de contraste est plus facile pour les yeux
Parfois, les démangeaisons liées à l'ajout de cloches et de sifflets animés nous poussent à nous éloigner des solutions d'utilisabilité simples, traditionnelles et éprouvées.
En outre, la mise en surbrillance en survol peut transmettre le faux indice que la ligne est cliquable ou actionnable.
Material Design est un cadre avec des directives (complet mais un point de départ): testez avec les utilisateurs pour déterminer ce qui leur convient le mieux.
Avez-vous également envisagé les lignes rayées (rayures zébrées) si vous pensez que les utilisateurs doivent lire attentivement? Il semble qu'ils n'effectuent aucune sélection ou opération.
Un aspect des rayures zébrées est qu'elles montrent clairement des lignes distinctes sans que l'utilisateur n'interagisse avec la table.
S'appuyer sur des états stationnaires peut indiquer une interactivité potentielle avec les données (et la sélection ou les opérations), ce qui n'est pas votre intention dans votre cas.
Il y a un article (un peu plus ancien maintenant) sur A List Apart:
Zebra Striping: Plus de données pour le cas
Elle a une étude rigoureuse (même en testant des types de rayures pour voir si cela améliore la lisibilité), et à la fin, elle déclare:
si vous concevez une application ou un site Web contenant des tableaux de données, ne laissez pas les préférences personnelles, l'habitude ou le statu quo (non testé) guider vos décisions de conception. Allez-y et obtenez des données utilisateur.
La conception matérielle est incroyable (je l'utilise constamment), mais elle ne peut pas tenir compte de tous les besoins ou scénarios (ils disent même que c'est une ligne directrice). Testez et découvrez ce qui fonctionne pour vos propres utilisateurs.
La mise en évidence n'implique pas nécessairement l'interactivité, elles aident également l'utilisateur à maintenir sa ligne horizontale. Les tables qui sont particulièrement denses ou clairsemées sur un ou les deux axes peuvent rendre difficile le maintien sur une seule ligne.
Les directives de conception des matériaux recommandent déjà suffisamment d'espace pour éviter d'être trop dense, mais n'empêchent pas nécessairement la rareté de devenir problématique.
Cependant, les états de vol stationnaire sont problématiques en raison de leur relation avec les périphériques pointeurs, ce qui peut créer des problèmes d'accessibilité. Ils sont également problématiques sur mobile. Inca est également droit de le souligner que s'il y a un élément interactif dans une région en surbrillance, l'attente peut être que le surlignage implique ladite interaction - dans votre exemple, la case à cocher.
Donc, si vous pensez qu'une séparation visuelle forte est une caractéristique nécessaire, envisagez une alternative statique - par exemple, le zebra striping Mike M suggère.
Je ne l'utiliserais que là où cela aiderait réellement: s'il est difficile de suivre visuellement ce qui se passe sans. Sinon, cela semble ajouter une complexité visuelle inutile.
Dans un très grand tableau, il permet de suivre visuellement les lignes. J'ai trouvé que, tant que cela est justifié, cela vaut l'étape initiale de "l'utilisateur veut peut-être cliquer, découvre qu'il ne peut pas" (la ligne rougeâtre a un pointeur de souris dessus, désolé pour tout le flou):
Je trouve que c'est moins bruyant visuellement que la coloration des lignes paires/impaires quand il y a beaucoup d'informations présentées:
L'inconvénient évident de la mise en évidence, bien sûr, est que cela ne fait pas beaucoup de bien sur les appareils sans pointeur (les pages ci-dessus sont très destinées à un usage de bureau).
Dans votre cas, cependant, la mise en évidence ne semble pas nécessaire sur le plan fonctionnel.
En ce qui concerne le respect des directives de conception des matériaux, cela dépend vraiment de vous. Je ne suis pas moi-même un grand fan de la conception matérielle stricte, beaucoup trop de devinettes et de mémoriser ce que les icônes signifient en raison de sa quête inexplicable pour débarrasser le monde du texte, et un peu lourd sur les espaces. Vous pouvez être quelque peu flexible, la police de conception de matériaux ne cassera pas (encore) votre porte, tant que votre interface utilisateur reste claire et saine.
Cela aide à la lisibilité, surtout si le tableau est large, mais dans l'exemple que vous donnez, je pense que les gens s'attendront à un tel effet de survol pour indiquer que la case à cocher sera cochée.
Cela peut être une action valide, si le fait de cocher la case est quelque chose qui doit être fait beaucoup, ou cela peut être trop si la case à cocher est très rare, d'autres actions (comme la sélection de texte pour copier-coller) sont plus courantes ou l'action qui sera entreprise est destructrice. (Dans ce cas, il est préférable de cocher uniquement la case à cocher réelle.)
Il convient également de considérer dans quelle mesure les utilisateurs auront besoin des lignes individuelles et des informations sur la table. S'ils scannent généralement la liste entière pour une référence et que les détails à droite sont agréables mais généralement pas importants, un effet de survol perturbera plus que d'aider et obligera les gens à déplacer la souris hors de leur chemin pour avoir une vue dégagée. vue.
Alors, testez certainement avec vos utilisateurs réels et obtenez leurs commentaires si c'est important. Seuls, ils peuvent dire à quel point la lisibilité d'une seule ligne est importante et comment le fait de planer ou non la affecte.
Pour donner d'autres options: vous pouvez également envisager de changer la couleur de la bordure sur les règles de survol, en particulier la bordure inférieure, ou de changer la couleur du texte, ou d'avoir des dégradés sur la ligne au-dessus et en dessous. (Soyez prudent lorsque vous modifiez le poids de la police ou la largeur des bordures, car cela peut entraîner une refusion et des mouvements.)