Meilleure approche de l'interface utilisateur pour aligner les titres des colonnes des rapports
Je voudrais savoir quelle est la meilleure approche pour aligner les colonnes d'en-tête en fonction de leur type de données.
Je n'ai trouvé aucun article de Human Design Interface expliquant cela.
La colonne d'en-tête doit-elle suivre le même alignement que ses valeurs de données utilisent?
Si oui, j'aimerais voir des références fiables.
Les colonnes de figures doivent être tabulaires et alignées à droite si elles partagent la même unité, et les titres doivent correspondre.
Directives, via Morten Hjerde ( fil IXDA ):
- Tout le texte est aligné à gauche
- Tous les nombres sont alignés à droite
- Les caractères uniques sont centrés
- Les nombres qui ne sont pas des valeurs, comme les codes produits par exemple, sont traités comme du texte et alignés à gauche.
- Utilisez le même nombre de décimales pour tous les nombres d'une colonne
- Alignez les dates à gauche.
- Utilisez 2 chiffres et zéro devant pour les numéros de jour (cela peut être culturel?), Et utilisez le même format pour les dates partout
Je ne trouve pas de références Tufte-esque, mais de nombreux exemples:
J'ai dû supprimer des liens et des images supplémentaires car je n'ai pas encore de représentant. Désolé l'ami :\
Hoefler & Co., d'un point de vue plus axé sur la conception d'impression, fournit un exemple raisonnable ( source ):
Exemple deux (tiré de this Behance profile). Juste assez clair pour dire ce qui se passe:
En général, Excel est considéré comme le grand-papa des applications de grille de données, et la plupart des applications avec des tableaux de données suivent généralement ses valeurs par défaut de base. Ainsi, les titres, les dates et le texte s'alignent généralement à gauche et les valeurs numériques s'alignent généralement à droite. Les en-têtes de colonne s'alignent toujours à gauche quel que soit le type de données.
- Les données numériques sont alignées à droite.
- Les données textuelles sont alignées à gauche car lues de gauche à droite.
- Les en-têtes sont alignés avec leurs données et l'alignement central n'est pas recommandé.
Je sais que cette question date d'il y a 5 ans, mais j'ai vu qu'elle n'avait pas de réponse et j'ai trouvé cet article, "Design Better Data Tables" très détaillé et complet comme réponse.
Les données numériques sont lues de droite à gauche; c'est-à-dire que nous comparons les nombres en regardant d'abord leur chiffre, puis leurs dizaines, puis leurs centaines, etc. C'est aussi ainsi que la plupart des gens apprennent l'arithmétique - commencez à droite et déplacez-vous vers la gauche, en portant des chiffres au fur et à mesure 1 . Par conséquent, les tableaux doivent conserver les données numériques alignées à droite.
Les données textuelles sont lues (en anglais) de gauche à droite. La comparaison des éléments textuels se fait généralement en triant par ordre alphabétique: si deux entrées commencent par la même lettre, la deuxième lettre est utilisée, etc. Essayer de numériser rapidement du texte peut être exaspérant s'il n'est pas aligné à gauche.
Les en-têtes, en général, doivent porter l'alignement de leurs données. Cela maintient les lignes verticales de la table propres et fournit cohérence et contexte.
L'alignement au centre fait que les lignes du tableau deviennent "irrégulières", ce qui rend beaucoup plus difficile le balayage des entrées, nécessitant souvent des séparateurs et des éléments graphiques supplémentaires.
Je pense que dwils soulève un point intéressant. Ses exemples semblent faire référence au monde de la presse écrite. J'ai utilisé les principes de conception de ces visualisations dans des tableaux/grilles de données HTML que j'ai développés. Les principes tels que les colonnes qui contiennent des données numériques sont alignés à droite tout comme l'en-tête, les colonnes qui ont un sous-titre sont centrées sur la plage.
Jetez un œil à la façon dont banques et sociétés de crédit immobilier présentent leurs rapports annuels. Les rapports présentent une cohérence visuelle dans leurs formats tabulaires.