web-dev-qa-db-fra.com

Pour utiliser ou ne pas utiliser les «rayures zébrées» ou les couleurs de ligne alternées pour les tableaux

Existe-t-il des recherches montrant si l'alternance des couleurs des lignes pour un tableau augmente/gêne le temps nécessaire pour analyser les informations? Un exemple peut être trouvé à l'emplacement suivant:

enter image description here

Je trouve généralement facile d'associer les champs de saisie aux noms de ligne tant que le tableau est formaté correctement. Donc, je ne sais pas si l'alternance des couleurs ajoute réellement à l'expérience utilisateur, mais je suppose que je peux voir pourquoi cela est stylistiquement attrayant.

90
sklein

Jessica Enders a écrit un article sur A List Apart sur trois études qu'elle a faites pour déterminer si les "rayures zébrées" sont utiles.

La première étude, décrite dans un article précédent , a testé la capacité des utilisateurs à lire et interpréter les données dans un tableau simple. La deuxième étude était similaire à la première, avec une méthodologie améliorée. La troisième étude a tenté de déterminer si les utilisateurs ont tendance à avoir une préférence subjective pour les tableaux rayés.

La recommandation

Les résultats des trois études menées à ce jour suggèrent que l'option la plus sûre consiste à ombrer les rangées individuelles alternées de votre table avec une seule couleur. Cette approche est susceptible de garantir que:

  • les performances des tâches sont meilleures, ou du moins pas pires, qu'avec les autres styles de tableau, et
  • les sensibilités esthétiques et les préférences subjectives de la majorité de vos utilisateurs sont prises en compte.

Si le zébrage de ce type ne peut pas être fait facilement, alors la règle d'une ligne entre chaque ligne peut être la meilleure option suivante.

Mise à jour : Ne manquez pas réponse de Filipe Hoffa ci-dessous.

73
Patrick McElhaney

Pour les tableaux à l'écran, je pense qu'il est préférable d'avoir des tableaux non alternés mais d'avoir la ligne entière sous la souris à mettre en évidence. En outre, l'en-tête de colonne vers lequel la souris pointe doit également être mis en surbrillance.

27
Lie Ryan

Non. N'utilisez pas de rayures zébrées.

Permettez-moi de citer Edward Tufte :

Encore une fois, il s'agit d'un problème résolu, avec des exemples dans Envisioning Information, chapitre 3. Les bandes sont simplement des trucs bureaucratiques ou graphiques; une bonne typographie peut toujours organiser une table, sans rayures.

- Edward Tufte https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001IV

Si vous allez utiliser des couleurs, donnez-leur du sens. Pourquoi cette rangée est-elle sombre? Pourquoi cette rangée est-elle plus légère que les autres? Il devrait y avoir une raison autre que "cette ligne s'est retrouvée après cette autre".

https://i.imgur.com/ZY8dKpA.gif

Qui n'utilise pas de rayures

Qui utilise des rayures

Résultat net

  • Apparemment, les projets de plusieurs milliards d'utilisateurs ne choisissent aucune bande. Soyez comme eux :)
12
Felipe Hoffa

Pour les grands ensembles de données, je suis fan d'un léger gradient pour chaque ligne. Un rapport annuel épuré que j'ai vu il y a quelques années a fait l'effet en alternant les couleurs de fond de bordure de ligne comme # 333 à # 666.

+1 Lie Ryan pour l'effet de vol stationnaire. Notre tracker de temps met en évidence les lignes en survol. Gareautrain. ET en plus, il fournit des données supplémentaires dans la fenêtre contextuelle de l'info-bulle. Gain d'engagement progressif.

5
Benxamin

L'objectif est de faciliter la lecture et la numérisation des données. Les rayures zébrées ne sont qu'un élément qui peut être exploité pour aider à cela.

Souvent, ils sont maltraités et deviennent des ordures.

Je dirais qu'ils devraient être un outil de dernière option. Si la disposition des données ne peut pas tenir ensemble dans des lignes faciles à numériser, lancez les rayures. Mais soyez extrêmement subtil avec eux pour commencer.

4
DA01

Je ne connais aucune recherche dans ce domaine, mais si vous prenez beaucoup de lignes et de colonnes dans Microsoft Excel et les comparez avec et sans arrière-plans alternés, mon expérience est qu'il est beaucoup plus facile de savoir quelle colonne est connectée à quelle ligne, en particulier si vous voulez des données de la colonne la plus à droite et que vous utilisez la première colonne (la plus à gauche) comme référence.

3
Henrik Ekblom

Étant donné que les humains regroupent facilement les choses en grappes de 3 à 7 (selon l'humain), je me suis toujours demandé pourquoi les rayures zébrées sont par rangée plutôt que par grappe.

J'ai également trouvé un point culminant sur le survol de la souris (ou cliquez si vous souhaitez prendre en charge les écrans tactiles comme les smartphones) pour être utile - un peu comme une bande de zèbre qui ne semble que grouper visuellement la ligne spécifique qui vous intéresse pour le moment.

Si vous souhaitez utiliser l'un de ces arrière-plans de regroupement visuel, les séparer comme ils l'ont fait dans l'image que vous avez publiée à titre d'exemple est strictement interdit. La rupture visuelle par le rembourrage des cellules du tableau est choquante.

3
Chris Moschini

L'alternance de la couleur d'arrière-plan dans les lignes aide à l'accessibilité pour les utilisateurs qui ont des problèmes de vision. Un exemple est les utilisateurs scotopiques, qui sans les bonnes couleurs ou les lignes alternées peuvent finir par lire la même ligne encore et encore parmi d'autres problèmes. Voici certains des symptômes de la vision scotopique:

  • Inconfort avec les motifs occupés, en particulier les rayures ("stress visuel" et "éblouissement du motif")
  • Gêne avec des conditions extrêmes de contraste clair/sombre (c'est-à-dire rétro-éclairage)
  • Inconfort ou difficulté à lire (la lecture implique des motifs chargés, en particulier des rayures. Les personnes présentant de forts symptômes du syndrome ont du mal à lire du texte noir sur du papier blanc, en particulier lorsque le papier est légèrement brillant.)
  • Texte qui semble bouger (monter, tomber, tourbillonner, trembler, etc.) Perdre le contenu du texte et ne voir que des fleuves de blanc à travers le texte Les mots se déplaçant ensemble deviennent un seul mot méconnaissable

Cette liste est trompeuse quand elle dit des rayures à cause du sujet, cependant, le texte lui-même est les "rayures" et les rayures dans le tableau sont en fait ce qui brise cela et le rend plus facile à lire.

2
Brad Hutchison