Application Web Ajax – Edition de cellules dans un tableau

ExtJS vient de sortir la version 3.0 de son framework.
Pour rappel, ce framework (comme Yahoo! UI ou autre Dojo) propose de nombreux composants d’interfaces en Ajax. Ces composants sont principalement à destination d’applications métiers.

Dans cet article, je fais un focus particulier sur l’edition de cellule dans un tableau de données avec 2 exemples issus du framework ExtJS.

Edition de ligne entière

Au double click sur la ligne, l’ensemble des cellules devient éditable et 2 boutons d’actions permettent de valider ou d’annuler les actions effectuées.

• La fonctionnalité est intuitive et simple d’utilisation, à noter la prise en compte du clavier . Un message de guidage pourra être ajouté au dessus du tableau dans les premiers temps d’utilisation puis dispraître car il s’agit tout de même d’une fonctionnalité peu présente dans les applications Web.
• Cependant, il n’y a (dans le cas présenté) aucun feedback visuel sur la ou les cellules modifiées.

Edition de cellule autonome

Au double click sur une cellule, elle devient éditable.

Selon le format de données, divers solutions sont proposées à l’utilisateur :

• Date picker
• Lise déroulante
• Saisie libre

Une fois modifiée, dans le cas présenté, un feedback visuel indique à l’utilisateur que son action a été prise en compte.

5 commentaires to “Application Web Ajax – Edition de cellules dans un tableau”

1. jcQualitystreet dit :

   14 juillet 2009 à 19:51

   C’est la fête !
2. sredeuil dit :

   15 juillet 2009 à 11:18

   L’apprentissage de extJs est assez fastidieux. C’est un framework complet, offrant plein de possibilités, mais je pense que d’autres frameworks comme jquery avec ses nombreuses extensions sont plus faciles à prendre en main, et est plus léger.
   Tu notes qu’il manque de feedback visuel, mais je pense que dans l’exemple que tu as pris le feedback n’a pas été implémenté correctement, car dans le dernier exemple, sur la première ligne 4ème colonne, on voit qu’il y a 1 coin rouge signalant une modification.
3. Mathieu Collet dit :

   15 juillet 2009 à 11:46

   @sredeuil

   D’un point technique je ne saurais te dire s’il est simple ou non d’appropriation, je ne suis pas un profil technique mais ergonome.

   D’un point de vue ergonomique (et c’est sur ce point que j’insiste dans le billet), les exemples fournis sont de bonnes factures et l’appropriation par l’utilisateur dans une interface sera simple.
4. Thomas dit :

   16 juillet 2009 à 10:49

   Personnellement, je trouve que le feedback dans le cas du 2ème est loin d’être optimal (on a une petite icône qui ressemble à une note dans Excel). Comme le souligne sredeuil, par contre, c’est bien un manque dans le premier exemple, l’exemple suivant est là pour le prouver : http://extjs.com/examples/explorer.html#roweditortreegrid

   Pour fournir un feedback utilisateur, je pense plus sympa, mettant en évidence la prise en compte de sa modification, une petite transition de la couleur de la ligne, de verte à bleu (couleur dans le thème présenté ci-dessus) serait plus « sexy ». ça doit être possible en ext JS, vu le nombre d’effet d’animation et de transition qui existe dans cette bibliothèque.

   Enfin, ce sera bien sûr à vérifier avec la population cible
5. Mathieu Collet dit :

   16 juillet 2009 à 11:12

   @Thomas
   Le feedback telle que vous le décrivez est une bonne solution.
   La méthode « GMail » est également intéressant : la cellule a un fond de couleur spécifique (jaune par exemple). Cette couleur de fond disparaît ensuite par effet de transition pour laisser place à l’icône + un léger fond de couleur.
   Il faut faire attention à ne pas surcharger visuellement le tableau.

   Dans l’idéal, il faudrait également fournir à l’utilisateur une fonctionnalité lui permettant de voir en un coup d’oeil l’ensemble des modifications qu’il a effectuées (une liste par exemple)