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

Laisser un commentaire