Plusieurs tableaux similaires avec différentes largeurs de colonne
Lorsque plusieurs formulaires sont affichés sur une page qui affichent le même type de données, regroupées en catégories, est-il correct de faire varier les colonnes de chaque tableau ou faut-il utiliser des largeurs fixes pour assurer la cohérence?
Par exemple.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
ÉDITER:
Les mêmes colonnes seront affichées sur tous les tableaux, les données seront très similaires, juste regroupées selon la zone à laquelle elles sont pertinentes. (On pourrait imaginer une seule grande table avec une colonne contenant une zone)
Je voudrais changer légèrement ma question et demander si c'est MAUVAIS pour que les colonnes soient de différentes largeurs comme ça? Les utilisateurs remarquent-ils réellement ou regardent-ils les tables isolément?
Les utilisateurs le remarqueront.
Les interfaces qui affichent les mêmes informations de différentes manières augmentent la charge cognitive placée sur l'utilisateur, ce qui rend l'expérience inefficace.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Permettre à l'œil de l'utilisateur de suivre verticalement le long d'une ligne continue est un guide visuel que vous fournissez qui lui indique que toutes ces valeurs sont liées.
L'espace blanc entre les tableaux montre à l'utilisateur qu'il existe des groupes de données distincts, mais que les données sont du même type ("nom", "âge", "surnom", etc.).
La combinaison de alignement linéaire et regroupement donne des indices visuels clairs qui aident le l'utilisateur peut facilement identifier et mettre en contexte les données sur l'écran. Il s'agit d'une charge cognitive plus faible que si l'œil doit zigzaguer et zaguer d'un groupe à l'autre.
Bien que l'utilisateur puisse choisir de redimensionner les largeurs de colonne, en choisissant par défaut des largeurs de colonne uniformes, vous offrez à votre utilisateur une interface plus facile à utiliser qu'il peut ensuite choisir de modifier s'il le souhaite.
Si chaque colonne contient le même type de données, alors pourquoi ne pas utiliser une grande table?
Ce tableau peut avoir différentes sections, en utilisant <th> éléments en lignes pour les en-têtes de section. Vous pouvez styliser ces en-têtes comme vous le souhaitez, en ajoutant la bonne attention visuelle à chaque début de section.
En faisant cela la cohérence sera dans la sémantique , pas seulement dans le style. Les cols auront la même largeur.
Le W3C a quelques exemples intéressants: http://www.w3.org/TR/html401/struct/tables.html#h-11.4.2
En général: ne forcez pas une cohérence de forme qui n'est pas là dans le sens. Ainsi, des tables totalement différentes avec des données totalement différentes peuvent avoir des largeurs de colonne différentes. Forcer les colonnes à avoir la même largeur lorsqu'il n'y a pas de relation entre elles envoie le mauvais message. Les utilisateurs ont le droit de savoir ce qu'ils regardent et ne devraient pas être tentés de tirer de fausses conclusions, sur la base d'indices visuels.
Si les tableaux affichent le même nombre de colonnes, je dirais que c'est une meilleure expérience d'avoir une largeur partagée des colonnes; cependant, si vous affichez un nombre différent de colonnes, probablement moins.
Si les tableaux n'étaient pas des regroupements de nature similaire - l'utilisation des mêmes largeurs de colonne peut en fait être une expérience négative, car les gens ont tendance à voir les modèles comme étant "les mêmes".
Regardent-ils les tables indépendamment:
Pour trouver la réponse absolue - vous souhaitez tester vos utilisateurs spécifiques. Cela dit, cela dépend de la façon dont ils sont stylisés ou fragmentés - pour le dire en termes généraux.
Si vous avez 5 tableaux verticalement sur la page - chacun avec le même nombre de colonnes - avec pas plus d'espacement que ce que vous avez dans la maquette, vos utilisateurs les regrouperont probablement comme étant similaires (ce qui peut être bon ou mauvais - il dépend si vous voulez qu'ils considèrent les données comme similaires ou non). Si vous avez un tableau placé d'un côté de la page et un autre de l'autre, avec un nombre différent de lignes et/ou de colonnes - alors probablement pas.
Pour le filaire que vous avez - c'est "mauvais". Cependant, les utilisateurs verront probablement le tableau un contenant les informations de la catégorie 1 et le tableau 2 contenant les informations de la catégorie 2.
Mais, la règle d'or s'applique toujours. Des tables alignées dans le même espace vertical - avec des largeurs de colonnes variables - malgré le même nombre de colonnes, brisent "la grille" - et feront probablement le cerveau de l'utilisateur faire un petit hoquet; ou pensez que ce n'était pas intentionnel.
J'espère que cela aide à clarifier les choses.