Le contenu doit-il être aligné à gauche ou à droite dans un tableau contenant un mélange de texte et de nombres?
J'ai de nombreux tableaux dans un site qui ont un mélange de valeurs numériques de tous types (devise, entiers, etc.) et de colonnes qui contiennent du texte.
Quelles sont les directives ou normes d'alignement? Les étiquettes de colonne et le contenu de la colonne doivent-ils être alignés à droite, à gauche ou les deux?
Quelle que soit la combinaison de types de données dans une table, le type de données dans la colonne individuelle doit conduire l'alignement.
Alignements typiques (et bien sûr, il y a toujours des raisons et des façons de faire différemment)
- Texte et éléments traités comme du texte: alignement à gauche (mise en garde: je trouve que les chiffres sont toujours plus faciles à lire rt alignés)
- Nombres et éléments traités comme des nombres: alignement à droite (et si vous avez des décimales, il est préférable de toujours les afficher, même si l'un est 23,00 et l'autre 1,23)
Un rapide coup d'œil à une grille avec des données mitigées sur le site Bloomberg en montre un bon exemple. Cette grille montre un mélange de valeurs, le texte de l'avis est aligné à gauche, les nombres sont alignés à droite. Cela facilite la digestion des informations par les yeux et le cerveau.
1. Les étiquettes doivent être alignées avec les colonnes
Les étiquettes doivent être alignées exactement de la même manière que la colonne en dessous. Si vous utilisez différents alignements pour différentes étiquettes, vous risquez de compliquer l'identification des données avec lesquelles l'étiquette est censée être alignée.
2. Les colonnes doivent être alignées en fonction du rôle et non du type
Les colonnes peuvent être un dimension quelque chose que vous recherchez , ou metrics quelque chose que vous recherchez
Il s'agit d'une distinction importante dans la conception de tables utilisables, il vaut donc la peine d'y creuser un peu.
Dans un tableau normal, vous avez une à deux colonnes sur le côté gauche de votre tableau qui classent les données en lignes. Ce sont vos dimensions, l'utilisateur les analyse généralement pour trouver des lignes spécifiques.
Parce que leur cas d'utilisation principal est la numérisation pour trouver un seul élément, ils doivent être alignés et idéalement triés dans un ordre raisonnable. Voici un tableau avec dimensions en surbrillance
Dimension number cost
-item1- 567 $8954
-item2- 12 $56
-item3- 4444 $38372
L'autre type de colonne est metrics. Ce sont les chiffres ou les catégories qui appartiennent à chaque ligne. Ceux-ci sont sur le côté droit du tableau, et leur principal cas d'utilisation est que l'utilisateur essaie de les comparer avec le même metric dans les autres lignes. Voici un tableau avec metrics en surbrillance:
Dimension number cost
item1 -567- -$8954-
item2 -12- -$56-
item3 -4444- -$38372-
Les mesures doivent être alignées à droite, car cela facilite la comparaison. Si vous ne le faites pas, vous vous retrouvez avec ce genre de problème:
Dimension number cost
item1 567 $8954
item2 12 $56
item3 4444 $38372
Dans ce cas, dans la colonne numérique, le premier chiffre de la ligne 1 représente 500, le premier chiffre de l'élément 2 représente 10 et le premier chiffre de la ligne 3 représente 4000. Mais ils sont tous alignés les uns contre les autres comme s'ils étaient directement comparable.
Au lieu de cela, quand ils sont alignés à droite, ceci:
Dimension number cost
item1 567 $8954
item2 12 $56
item3 4444 $38372
Les 7 sur 567, 2 sur 12 et 4 sur 4444 représentent tous un seul chiffre. Les aligner à droite ici diminue la charge cognitive nécessaire pour comparer les chiffres dans une colonne.
3. Mais que se passe-t-il si certaines de mes mesures ne sont pas des nombres?
Les points importants ici sont que les mesures ne sont pas normalement analysées, elles sont normalement comparées et l'œil humain a tendance à détecter les incohérences visuelles.
Donc, si vous avez des colonnes alignées à gauche et des colonnes alignées à droite, l'œil essaie de regrouper mentalement toutes les colonnes alignées à gauche et toutes celles alignées à droite.
Le résultat final est quelque chose comme ceci:
company status value code units
google red 59 googl 2394
Apple green 504 aapl 359
Microsoft orange 300 msft 45
Il est difficile de dire si l'état est quelque chose que vous êtes censé comparer ou quelque chose que vous êtes censé analyser. Il ressemble implicitement à une dimension, car il est aligné de la même manière que l'entreprise.
Ce tableau est beaucoup plus utilisable comme suit:
company status value code units
google red 59 googl 2394
Apple green 504 aapl 359
Microsoft orange 300 msft 45
La meilleure ressource que je connaisse à ce sujet est celle de Stephen Few Montrez-moi les chiffres et toute la discussion que cette réponse paraphrase ce livre.