Facilité d'utilisation du tableau / police lisible pour un tableau de données
Quelle est la meilleure police pour un tableau de données? Monospace est bon mais prend plus de place, vous ne pouvez donc pas avoir autant d'espace entre les éléments. De même, quels sont les bons principes d'utilisation des tableaux de données? Des choses comme le zébrage, etc. J'ai essayé de rechercher Alertbox mais je n'ai rien trouvé.
MIL-STD 1472F La section 5.14.3.5 contient une assez bonne section sur l'affichage des tableaux dans une interface utilisateur, bien qu'elle puisse supporter une mise à jour pour les interfaces graphiques modernes. Voici quelques-unes des normes, ainsi que mon interprétation marquée d'une puce pour les interfaces graphiques:
5.14.3.5.4 Titres. Pour un tableau qui occupe plusieurs pages, les en-têtes de colonne doivent être sur chaque page du tableau.
- Par extension, si l'utilisateur doit faire défiler pour voir tous les éléments du tableau, les en-têtes doivent toujours rester visibles (par exemple, en les plaçant dans un div sans défilement ou en les répétant).
5.14.3.5.5 Extension horizontale. Les tableaux ne doivent pas être répartis horizontalement sur plusieurs pages.
- Il est préférable d'avoir un défilement horizontal, tant que l'en-tête de ligne (identifiant d'enregistrement) est fixe afin qu'il ne défile pas hors de la vue.
5.14.3.5.6 Listes. Les éléments des listes doivent être classés dans un ordre reconnaissable, tel que chronologique, alphabétique, séquentiel, fonctionnel ou d'importance.
- Notez qu'il existe alternatives à l'alphabet qui peut être supérieur selon la tâche.
5.14.3.5.6.2 Extension verticale. Lorsque les listes s'étendent sur plusieurs pages d'affichage, la dernière ligne d'une page doit être la première ligne de la page suivante.
- Par extension, lorsque vous faites défiler une table une image complète à la fois en cliquant sur la piste de la barre de défilement, la dernière ligne d'une image complète doit être la première ligne de l'image suivante.
5.14.3.5.6.5 Ordre vertical en plusieurs colonnes. Lorsque les éléments d'une liste sont affichés dans plusieurs colonnes, les éléments doivent être classés verticalement dans chaque colonne .
- Cela ne devrait s'appliquer que si la liste est entièrement visible sans avoir à faire défiler.
5.14.3.5.10 Justification de la saisie numérique. Les utilisateurs doivent être autorisés à saisir des chiffres dans des tableaux sans souci de justification; l'ordinateur doit justifier à droite des nombres entiers, ou justifier par rapport à un point décimal s'il est présent.
- C'est-à-dire que la décimale de tous vos nombres doit s'aligner pour permettre des comparaisons faciles.
5.14.3.5.11 Étiquetage des unités de mesure. Les unités de données affichées doivent être systématiquement incluses dans les étiquettes des colonnes affichées.
5.14.3.5.13 Repères de balayage des colonnes. Une séparation des colonnes d'au moins trois espaces doit être maintenue.
- Cela se traduit par environ 12 pixels, en utilisant Arial 12 points comme standard
5.14.3.5.14 Repères de balayage des lignes. Dans les tableaux denses à plusieurs lignes, une ligne vierge doit être insérée après un groupe de lignes à intervalles réguliers. Pas plus de cinq lignes doivent être affichées sans qu'une ligne vierge soit insérée.
- Cependant, ces jours-ci, le zébrage est probablement une meilleure alternative pour insérer une ligne vierge.
La lisibilité des polices d'un tableau est à peu près la même que partout ailleurs, vous devez donc probablement utiliser la même police que le reste de votre contenu. les polices monospaces comme Courier New doivent être évitées : leur lecture est plus lente et il n'y a vraiment aucune raison pour cela dans les tableaux avec un balisage moderne. Au-delà de cela, la la lisibilité de la police est compliquée , mais si vous choisissez une police "ordinaire" courante comme Tahoma, vous ferez probablement bien.
Je pense que Segoe UI est une bonne police qui peut également être lue à une taille inférieure.
Il est préférable d'utiliser une police sans empattement (comme Helvetica ou Verdana) car elle est plus propre qu'une police empattement (comme Times New Roman) et ne fonctionne donc pas 't faire la table semble encombrée. Pourquoi? Un empattement utilise des "pieds" décoratifs ou des boucles alors que l'empreinte sans empattement n'en utilise pas. Différentes études ont été menées pour mesurer le type de police présentant la meilleure lisibilité à l'écran, comme "Les effets du type et de la taille de police sur la lisibilité et le temps de lecture du texte en ligne par les personnes âgées" ou "L'impact des combinaisons de couleurs texte-arrière-plan de page Web". sur la lisibilité, la rétention, l'esthétique et l'intention comportementale "et les sans-serifs sont plus efficaces. Lorsque l'interface est encombrée, elle affecte notre charge cognitive, ce qui rend plus difficile la compréhension de la table.
Même si je n'ai pas fait d'étude statistiquement significative à ce sujet moi-même, les personnes à qui j'ai demandé semblent penser que les sans-empattements dans les tableaux sont plus agréables visuellement. (Vous devez demander (ou faire un cerveau pour être extrasure) votre groupe cible pour être sûr qu'il aura la même expérience.)
Si quelque chose est visuellement agréable, cela affectera la facilité d'utilisation perçue de la table. Il existe également une forte corrélation entre l'esthétique et la satisfaction et le plaisir de l'utilisateur. Cela a été étudié par exemple dans "Une théorie neuropsychologique de l'affect positif et son influence sur la cognition. Psychological Review, 106, 529-550." Pourquoi? - Parce que certaines des influences cognitives de l'humeur positive sont dues à des niveaux accrus de dopamine dans les zones corticales frontales qui résultent des événements provoquant l'élévation de l'humeur. Vous pouvez également consulter l'étude "Évaluation des dimensions de l'esthétique visuelle perçue des sites Web".
Je n'ai trouvé qu'une seule étude qui tente de mesurer la vitesse de lecture et la précision entre les tables ordinaires et les tables zébrées et il semble qu'il n'y ait presque aucune différence entre ces deux. Voir l'étude complète ici
Cependant les gens ont tendance à mieux aimer les tableaux zébrés probablement parce que c'est plus joli. (Voir les paragraphes ci-dessus pour les raisons pour lesquelles cela est important)
Si vous générez de très longues tables avec beaucoup de colonnes que les gens doivent faire défiler - utilisez un en-tête de table fixe afin que les gens puissent voir ce que les nombres signifient sans dépendre de leur mémoire à court (très court) terme.
Verdana est un bon OMI. Il est destiné à être lu sur des écrans basse résolution. Il est facile à lire, même à petite taille.