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 :

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

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

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

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 :

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.