Rayures zébrées dans une table dynamique
Voici une question hypothétique partiellement inspirée d'un scénario réel.
Supposons que vous ayez une table avec de nombreuses lignes de données. Ce tableau n'est pas statique; les lignes peuvent être modifiées, ajoutées et supprimées dynamiquement en fonction des actions de l'utilisateur. Pour rendre les lignes apparaissant/disparaissant plus intuitives, une brève animation est jouée qui élargit/réduit la ligne de/à zéro. (Il convient également de noter que les rangées ne sont pas nécessairement de hauteur uniforme.)
Y aurait-il un moyen (raisonnable) d'ajouter des bandes zébrées à une telle table? La grande préoccupation est que si une ligne est impaire ou même peut changer au fil du temps, ce qui signifie probablement qu'un gros morceau de la table peut soudainement changer de couleur (ce qui serait probablement gênant) ou que l'on doit permettre à deux lignes voisines d'avoir la même couleur (ce qui ruinerait partiellement le point et pourrait également devenir un gâchis à mesure que davantage de lignes sont ajoutées/supprimées).
Quelqu'un a-t-il une idée intelligente de la façon dont quelque chose comme cela pourrait être accompli sans être ennuyeux à regarder?
Si vous travaillez en html/css, l'effet est vraiment assez simple à configurer: CSS peut prendre en charge à la fois la couleur de ligne alternée et l'effet de transition sur une suppression de ligne.
A Fiddle démontrant l'effet de travail.
Le CSS établit une couleur verte `` de base '' pour chaque cellule du tableau, mais définit ensuite le fond de cellule de chaque 2e ligne ( tr: nth-child (2n) ) en rouge - et le fera toujours même si des lignes sont supprimées ou ajoutées dynamiquement.
La deuxième partie de la déclaration td {} utilise transitions CSS pour établir que pour tout changement (pris en charge) dans le style de l'élément, il doit passer d'un état à l'autre pendant 2 secondes.
Même si vous ne travaillez pas avec les technologies Web, un effet similaire est probablement ce que vous recherchez. Glisser du contenu sur des lignes d'arrière-plan statiques est assez choquant (voir tout site Web qui a une image d'arrière-plan statique/immobile avec du texte défilant ... yikes) et ne couvrirait toujours pas les cas où la hauteur de la ligne change. Vous pouvez jouer avec les couleurs (elles sont assez criardes) et le timing/effet de transition (comme la facilité/entrée, etc.) pour trouver la combinaison la plus discrète pour votre interface utilisateur - mais je trouve une durée d'effet relativement "longue" aide à le cacher de l'avis.
Il s'agit d'une excellente question pour laquelle il existe une excellente réponse. Permettez-moi de commencer par deux exemples.
Couleur et signification
Considérez que vous utilisez un système et que vous souhaitez supprimer un enregistrement (et que vous souhaitez supprimer l'enregistrement). L'interface vous présente la boîte de dialogue suivante:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Sur quel bouton allez-vous appuyer?
Maintenant, après un certain temps, vous souhaitez supprimer un enregistrement à nouveau, maintenant la boîte de dialogue suivante apparaît:
Sur quel bouton allez-vous appuyer?
Dans l'image suivante, voyez-vous le même appareil mobile, uniquement avec des couleurs différentes, ou voyez-vous 5 appareils mobiles différents?
Sémantique
Le fait est que certaines informations visuelles sont sémantiques tandis que d'autres ne sont pas (ou complémentaires ). À moins que les couleurs ne soient utilisées pour représenter la sémantique, le cerveau n'y attache aucun sens.
Un excellent exemple est la carte des tubes de Londres. Les couleurs des lignes sont sémantiques - elles dénotent le nom de la ligne et si demain elles changeraient le bleu avec du rouge, beaucoup de gens confondront les lignes Piccadilly et Central .
Cependant, la zone grise/blanche codant en non sémantique - si celles-ci devaient être échangées demain, pratiquement aucune des 3,6 millions de personnes voyageant dans le tube chaque jour ne le remarquerait.
Striping de ligne
Les 2 teintes qui basculent entre les lignes n'ont pas de sémantique - le cerveau est suffisamment intelligent pour les reconnaître comme des aides visuelles (et à moins que votre cerveau n'essaye de suivre la ligne horizontale, ces couleurs seront ignorées). Les données sémantiques dans un tableau sont le texte. À moins qu'il y ait un sens clair à la couleur d'arrière-plan, le cerveau ne remarquera même pas le changement de couleur d'arrière-plan lorsque les enregistrements sont réorganisés.
Cependant, les couleurs doivent être assez similaires et ne pas attirer l'attention - alors que 20% de gris et 30% de gris fonctionneront, le rouge et le vert peuvent être un problème.
Ainsi, le changement de couleur d'arrière-plan brut est une pratique sûre, aussi longtemps que les couleurs utilisées ne peuvent pas être interprétées comme sémantiques.
Sur l'animation
L'animation est l'un des moyens les plus efficaces d'attirer l'attention de quelqu'un. Il doit donc être utilisé avec parcimonie. L'animation de l'effet ne fera qu'ajouter du bruit visuel et forcera l'attention des utilisateurs sur quelque chose qui n'a aucun sens pour eux. Veuillez consulter cette citation du chapitre 2 (Ce que nous pouvons facilement voir) de Visual Thinking for Design , Ware 2008. Notez que le mouvement signifie l'animation:
Le concepteur Web a désormais la possibilité de créer des pages Web qui rampent, se trémoussent et clignotent. Sans surprise, parce qu'il est difficile pour les gens de supprimer la réponse d'orientation au mouvement, cela a provoqué une forte aversion des utilisateurs pour les sites Web où ces effets se développent. L'utilisation gratuite du mouvement est l'une des pires formes de pollution visuelle, mais un mouvement soigneusement appliqué peut être une technique utile.
Comparez le JSFiddle animé , avec le non animé pour voir les différences vous-même. J'espère que vous trouverez la version non animée moins intrusive et moins attrayante.
Conclusion
D'un point de vue visuel et cognitif, la réponse explique pourquoi vous ne devriez pas vous soucier du basculement de l'arrière-plan des bandes lorsque les données sont réorganisées/modifiées.
Vous devriez:
- Choisissez des couleurs appropriées pour les arrière-plans, c'est-à-dire des nuances proches de la même couleur, idéalement le gris.
- Ne pas animer l'arrière-plan de la bande - ce faisant, vous forcez l'attention sur ce qui devrait être une information dénuée de sens.
- Ne laissez pas les rangées adjacentes avoir la même couleur - cela défie le but des rayures et entraîne une incohérence.
Smallhacker - Avez-vous besoin de la bande zébrée pour commencer? Si c'est pour aider l'utilisateur à numériser sur une large rangée, peut-être qu'un autre modèle de conception fonctionnerait? Vous pouvez essayer de "mettre en surbrillance la ligne au survol".
Une liste à part contient deux articles intéressants sur l'utilité du zébrage:
Jessica Enders, "Zebra Striping: ça aide vraiment?" à A List Apart, 6 mai 2008 http://www.alistapart.com/articles/zebrastripingdoesithelp
Jessica Enders, "Zebra Striping: More Data for the Case", dans A List Apart, 9 septembre 2008 http://www.alistapart.com/articles/zebrastripingmoredataforthecase/
Si vos bandes et votre texte ne sont pas liés à une animation, vous pouvez supprimer la gêne. Je suppose qu'il est même possible de travailler sans hauteur uniforme si vous attendez que l'animation du texte se termine avant de changer la hauteur des rayures.
À mon avis, le Fiddle de Brian North semble beaucoup moins choquant et suffisamment clair sans la transition).