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 :

Blink-two-rows

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

PulseApp-Table-sections

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

Builditwithme-table-filters

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

DropBox-action-menu

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 :

mint_inline_edit_expanded

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 sur “Soignez vos tableaux

  1. 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

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s