Soignez vos tableaux

Suite à la publication d’un tutoriel il y a quelques années (Des tableaux plus simples, oui je sais il y a un problème d’encodage) je me rend compte qu’il y a bien longtemps que je n’ai pas abordé le sujet des tableaux. C’est bien dommage car il ne se passe pas un jour sans que je croise un tableau de données en ligne.

Même si aujourd’hui la conception de tableaux de données ne pose plus trop de problème, la complexité de certains tableaux pousse les concepteurs à utiliser des astuces pour gagner de la place et faire rentrer dedans toujours plus de données et de fonctionnalités. Je vous propose donc de découvrir ces trois articles qui listent des cas très intéressants : Ultimate guide to table UI patterns, Ultimate guide to table UI patterns (même titre) et 15 Tips for Designing Terrific Tables. Je vous propose donc ma sélection d’exemples.

Chez BlinkCampaign nous avons une alternance des couleurs des rangées et des données affichées sur deux lignes :

Le tableau à double rangée de données de BlinkCampaign
Le tableau à double rangée de données de BlinkCampaign

Chez PulseApp nous avons des sections en guise de séparateurs :

Les sections du tableau de PulseApp
Les sections du tableau de PulseApp

Chez BuildItWith.me nous avons des filtres dignes d’une application Apple :

Les options de filtre chez buildItWith.me
Les options de filtre chez buildItWith.me

Chez Dropbox nous avons un menu déroulant d’actions contextuelles :

Le menu déroulant d'actions contextuelles de Dropbox
Le menu déroulant d'actions contextuelles de Dropbox

Enfin chez Mint nous avons de l’édition en ligne des lignes avec la possibilité de dérouler un panneau pour les données complémentaires :

L'édition en ligne étendue de Mint
L'édition en ligne étendue de Mint

Tout ceci est très inspiré et nous prouve qu’il est possible de construire des interfaces applicatives très performantes à partir de “simples” tableaux.

2 commentaires pour “Soignez vos tableaux”

  1. Posté par FredCavazza.net > L’actualité de mes autres blogs (mars 2010) a dit : le

    [...] Soignez vos tableaux. [...]

  2. Posté par JMR a dit : le

    Bonjour,

    merci pour ces informations qui apportent des arguments à l’utilisabilité des tableaux. A ce propos, je vous conseille fortement le livre “Show Me The Numbers: Designing Tables And Graphs To Enlighten” de Stephen Few.

    Je reste néanmoins confronté à un problème récurrent qui est celui de la largeur des tableaux par rapport à l’écran. Lorsque l’application impose l’affichage de 12 colonnes ou plus, indissociables les une des autres, lorsque le javascript ne peut être appliqué pour des raisons de sécurité, que faire à part opter pour le scroll latéral? Les utilisateurs ne se situent pas vraiment dans un environnement “site Web” mais bien dans un applicatif en ligne.

    Je recherche des pistes de réflexion à ce sujet.

    Auriez-vous des suggestions?

    Bien à vous,

    JMR