Tableaux

Dans les applications d'entreprise, les données sont souvent affichées sous forme de tableaux. Compacts, les tableaux permettent aussi de trier, filtrer et grouper les données. L'utilisation de tableaux doit suivre quelques règles essentielles. Regardez la vidéo pour en savoir plus.

Dans les applications d'entreprise, les données sont souvent affichées sous forme de tableaux. Compacts, les tableaux permettent aussi de trier, filtrer et grouper les données. L'utilisation de tableaux doit suivre quelques règles essentielles. La présentation de données sous forme de tableaux (données tabulaires) facilite leur comparaison, aussi bien horizontalement que verticalement.

Assurez-vous que la hauteur des lignes permette de comparer facilement les valeurs d'une même colonne. Si la hauteur des lignes est trop grande, l'utilisateur aura du mal à comparer les données, alors que la présentation sous forme de tableau a précisément pour objectif de faciliter les comparaisons. La hauteur de ces lignes est clairement inappropriée. Ces problèmes de hauteur de ligne surviennent souvent lors de l'imbrication d'une section tirée d'une autre interface dans une cellule d'un tableau. Cette pratique est risquée et est à éviter. L'imbrication d'une section externe dans une cellule de tableau peut générer de nombreux problèmes d'alignement, de hauteur de ligne et de largeur de colonne.

Les développeurs imbriquent parfois une section dans une cellule de tableau pour créer une logique d'affichage/masquage. Dans ce cas, transférez plutôt la logique aux données elles-mêmes. En d'autres termes, obtenez les données source en fonction de la logique voulue, plutôt qu'en imbriquant une section d'interface utilisateur.

La largeur des colonnes doit être définie en fonction des données qu'elles contiennent. Par exemple, si une colonne comprend un identifiant qui ne dépassera jamais 15 caractères, la largeur de cette colonne ne doit pas excéder ce nombre de caractères. Si une colonne est susceptible de contenir des données plus longues, par exemple le nom d'un candidat, il faut d'abord définir les largeurs des autres colonnes, puis définir cette colonne pour qu'elle occupe le reste de l'espace disponible. Vous voyez sur cet exemple plusieurs largeurs de colonne mal définies. Les colonnes ‘applicant ID’ et ‘grade’ sont beaucoup trop larges, et laissent trop de peu de place aux colonnes ‘applicant name’ et ‘start date’. Du coup, les en-têtes se retrouvent affichés sur plusieurs lignes.

Les en-têtes de colonne sur une seule ligne sont plus lisibles. Cet affichage sur une ligne n'est pas toujours possible, mais vous pouvez réfléchir à un en-tête de colonne clair et concis. Dans un tableau, un alignement judicieux des données est indispensable pour faciliter les comparaisons. 

Cet exemple illustre plusieurs problèmes. Dans un tableau, les chiffres doivent être alignés à droite, et l'en-tête de chaque colonne doit toujours être aligné de la même manière que les données qu'elle contient. Enfin, les données en colonnes doivent être arrondies de manière cohérente, avec le même nombre de décimales pour toutes les valeurs.

Voici le même tableau avec des chiffres alignés à droite, tous arrondis de la même façon, et des en-têtes de colonne cohérents. Le tableau est maintenant beaucoup plus resserré, et plus lisible.

Remarque : les dates ne sont en général pas alignées à droite, car le format de ce type de données n'est pas nécessairement numérique.

Dans la plupart des cas, l'affichage initial est limité à 100 lignes, avec une possibilité de défilement vers le bas. Les filtres basés sur une liste de valeurs ne doivent être utilisés que pour des colonnes de données comportant moins de 50 valeurs uniques. Si la colonne comporte plus de 50 valeurs, seul le filtre de recherche textuelle doit être utilisé, pour des questions de performance. Les dates et les nombres doivent être filtrés selon des plages de données.

Vérifiez vos connaissances avec l’interaction suivante.