Les tableaux d'information sont ennuyeux. Dans un sens, ils sont censés être comme ça. Une bonne table communique beaucoup d'informations de manière concise et facile à comprendre. Parce que l'accent doit vraiment être mis sur l'information, trop concevoir un tableau peut nuire à son efficacité. Cependant, entre les bonnes mains, une conception intelligente peut non seulement rendre une table plus attrayante, mais peut en réalité augmenter la lisibilité.
Aujourd'hui, nous allons examiner différentes manières d'améliorer la fonctionnalité et l'esthétique de vos tables. L’un des endroits les plus courants que nous trouvons actuellement dans les tableaux en ligne est la page de tarification d’une application Web. La plupart de nos exemples se présentent sous cette forme. Rappelez-vous que ces principes peuvent s’appliquer à tout type de grille d’information (qu’il s’agisse ou non d’une table).
Vertical, horizontal ou matriciel?
Comme toujours, nous allons commencer par l'évidence. La première étape consiste à décider de la structure générale de votre table. La structure que vous devez choisir dépend du type et de la complexité de l'information que vous présentez.
Le choix entre des colonnes verticales et horizontales peut dépendre en grande partie de vos préférences personnelles. Esquissez votre contenu dans chaque formulaire et choisissez la méthode qui, selon vous, transmet le mieux les informations. De toute évidence, si votre message est basé sur plusieurs variables, une matrice est la voie à suivre. Voici quelques exemples:
Verticale
Horizontal
Matrice
Commencer dans Excel
Pour mémoire, c’est la première fois, et j'espère que ce sera la dernière fois, que vous me entendrez suggérer d’utiliser Microsoft Office pour tout ce qui concerne la conception. La vérité est que les tableaux sont sans aucun doute faciles à créer dans Excel; c'est à peu près ce que ça fait. Comparez cela avec le temps nécessaire pour coder de manière stricte la structure organisationnelle en HTML et Excel gagnera à chaque fois.
Aujourd'hui, je suis tombé sur une excellente petite application Web appelée Tableizer qui vous permet de coller vos tableaux à partir d'Excel pour les transformer comme par magie en HTML. Vous devrez toujours gérer vous-même la plupart des styles, mais vous gagnerez certainement du temps sur le front-end.
Tableizer
Utiliser un générateur de table
Déteste Excel? Ne te sens pas mal, moi aussi. Si vous souhaitez toujours gagner du temps sur la création du squelette de base d'un tableau HTML, de nombreux générateurs en ligne vous permettront de faire le travail. Notez que j'ai dit "squelette de base". n'allez pas penser que vous avez terminé après avoir utilisé l'un de ces outils pour vous empêcher de coder un peu. Vous avez encore un long chemin à parcourir si vous ne voulez pas que ça craigne.
Voici une liste rapide de générateurs de tables gratuits pour vous faire économiser une recherche Google:
- QuackIt
- Générateur de tables
- TextFixer
Un peu de style va un long chemin
Maintenant que vous avez un tableau de base, la première étape pour le sortir des années 90 consiste à ajouter du CSS. Bien sûr, vous pouvez devenir fou et passer des heures à expérimenter différentes options de style. Rappelez-vous que même un peu de couleur et de style de police peuvent améliorer considérablement la lisibilité et l'attractivité de la table.
Il s'agit d'un vieux didacticiel, mais toujours pertinent, sur le style de table de base avec CSS qui couvre les bases.
Ajouter une section sélectionnée
Ceci est extrêmement courant dans les tableaux de prix mais s'applique à n’importe quel tableau. Réfléchissez aux informations contenues dans le tableau et demandez-vous si vous souhaitez que le lecteur se concentre sur une partie spécifique. Qu'il s'agisse du plan offrant la meilleure valeur ou d'un élément populaire de la liste des fonctionnalités, essayez de faire varier la couleur et / ou la taille pour le différencier des autres.
Il y a certainement beaucoup de façons, à la fois subtiles et extravagantes, de faire ressortir la section décrite. En voici quelques exemples:
Différenciation des couleurs
Différenciation de la taille
Différenciation couleur et taille
Rendre l'information triable
Si vous créez des tableaux contenant de nombreuses informations organisées en plusieurs colonnes, il peut être judicieux d'ajouter une fonctionnalité de tri afin que vos utilisateurs puissent choisir la manière dont ils souhaitent voir les informations organisées.
Mint.com intègre le tri dans les tables à votre liste de transactions, facilitant ainsi le passage d'une vue par date à une vue par catégorie afin que vous puissiez identifier les domaines dans lesquels vous avez tendance à dépenser beaucoup d'argent.
Voici quelques plugins jQuery qui vous permettent d'ajouter rapidement cette fonctionnalité:
- table de tri
- table à manger
Utiliser des icônes
Comme je l'ai dit plus haut, il est important de pouvoir comprendre les informations en un coup d'œil. En réduisant les lectures nécessaires, des icônes bien conçues peuvent considérablement améliorer la vitesse à laquelle un visiteur peut comprendre les informations contenues dans votre tableau.
Attention, cela va dans les deux sens. Les icônes peu soignées peuvent laisser vos utilisateurs se gratter la tête en essayant de comprendre ce que vous essayez de communiquer.
Ajouter des rayures de zèbre
C’est une idée assez fondamentale qui remonte à l’existence de tables d’information. L'ajout de couleurs de rangées en alternance permet à vos yeux de suivre la ligne de communication et de relier les informations flottantes situées au centre d'un tableau à la catégorie ancrée située sur le côté ou en bas.
Cette technique simple peut améliorer la lisibilité des tableaux grands et petits, mais il est généralement judicieux d’inclure toujours des bandes (ou tout autre support visuel) si votre tableau nécessite que le lecteur connecte des informations de plus d’un pouce ou moins. deux à part.
C'est super simple à faire avec CSS:
Go Minimal
Vous détestez le look Web 2.0 brillant du conseil précédent? Aucun problème, il existe un argument encore plus fort pour minimiser les graphiques de la table. Cela permet à l'utilisateur de se concentrer sur le contenu sans distractions inutiles. Utilisez des lignes de grille nettes et subtiles (ou pas de lignes), des polices simples et des couleurs contrastant bien avec votre arrière-plan.
Ajouter une fonction de recherche
Parfois, ajouter une fonctionnalité de tri ne suffit pas.Lorsque vous avez des pages d'informations à trier, rien ne vaut un champ de recherche. C'est assez simple à faire avec un peu de jQuery:
- Comment créer une table de filtrage / recherche
Ne surchargez pas la table avec des redondances
Si votre table ne rend pas les informations plus lisibles, elles sont contre-productives. Les développeurs d’applications adorent proposer d’énormes listes de fonctionnalités et une table est un moyen naturel et même approprié de s’y prendre. Cependant, il arrive que les concepteurs rassemblent des tableaux contenant de nombreuses informations inutiles et redondantes qui pourraient être présentées de manière bien meilleure.
Consultez l'exemple ci-dessus de Invoice Machine. Les quatre plans proposés sont presque identiques, à l’exception de trois caractéristiques. Cela crée 15 rangées inutiles qui laissent vos yeux se déplacer en sautillant pour relier les coches à la fonctionnalité correspondante. Une simple liste à puces ou un tableau indiquant: «Tous nos plans incluent les fonctionnalités suivantes:». Cela permettrait aux utilisateurs de voir rapidement que, quel que soit le forfait choisi, ils bénéficient de toutes ces fonctionnalités.
Ensuite, le tableau pourrait être réservé aux zones de différenciation, ce qui le réduirait à 3 ou 4 rangées beaucoup plus gérables. Encore une fois, laissez-moi souligner que les tableaux devraient rendre les informations plus lisibles. Si votre table ne remplit pas cet objectif, elle est contre-productive.
Créer des zones extensibles
Une autre fonctionnalité intéressante que vous pouvez ajouter à vos tables est la possibilité de développer certaines lignes. Cela vous permet de placer beaucoup de contenu dans un espace relativement peu encombré. Il est assez simple de retirer cela avec un plugin jQuery appelé jExpand. Voici un tutoriel de jankoatwarpspeed sur la façon de le mettre en œuvre.
Si vous utilisez un tableau extensible, assurez-vous simplement que vos en-têtes indiquent clairement où trouver certaines informations. La dernière chose que vous voulez, ce sont les utilisateurs agacés, en parcourant chaque section pour trouver ce qu'ils veulent.
Mettre en évidence les relations
C'est une technique qui augmente réellement la lisibilité d'une table ou d'une matrice complexe. L'idée est de mettre en surbrillance la cellule sur laquelle l'utilisateur survole, ainsi que la colonne et la ligne auxquelles il appartient. Ce n'est pas la chose la plus simple à faire, mais c'est parfaitement possible avec un code intelligent. Voici un exemple de la façon de le faire.
Eh bien, je suis persuadé que vous n’avez jamais voulu en savoir plus sur les tableaux dans la conception Web. Utilisez les commentaires ci-dessous pour nous faire part de vos réflexions sur les techniques ci-dessus et assurez-vous de partager toutes les tables uniques que vous trouverez!