Grand formulaire d'édition VERSUS Edition "on line"

Lors de la Yacserie à Paris cette année, j'ai présenté quelques travaux et idées concernant l'ergonomie d'utilisation de yacs et principalement, des écrans permettant de créer ou mettre à jour du contenu. cela avait permis d'initier des échanges entre nous mais sans statuer sur la direction à prendre.

Je voudrais réflechir et discuter ici de l'opportunité ou pas de revoir le mode de fonctionnement actuel compte tenu des possibilités que nous apporte l'utilisation de Jquery et d'une "lightbox" plus sophistiquée.

Prenons l'exemple de l'édition d'une section. Actuellement, un programme (/sections/edit.php) affiche une page avec l'ensemble du contenu et des paramètres de la section éditée, répartis sur 3 onglets différents.



L'avantage (pour un connaisseur) est de pouvoir agir sur tout les élements de la section, à partir d'une seule page chargée.
L'inconvénient, c'est que c'est complexe et inquiétant à appréhender pour un débutant.
Vous me direz que l'on peut paramétrer yacs pour que sa page d'édition soit grandement simplifiée. C'est très bien mais se pose alors le problème d'accéder facilement aux fonctions expurgées si le besoin s'en fait sentir un jour.

L'idéal serait de pouvoir simplifier l'écran d'édition d'une section tout en conservant l'accès à toutes les fonctions offertent par yacs...

Cela m'avait amené à suggérer une autre approche que j'ai pu voir et utiliser dans d'autres CMS.
Imaginez que vous êtes sur une page et que vous cliquez sur le lien "Modifier cette page (1)".

Voici l'exemple qui avait servi d'illustration dans la présentation Yacs "Friendly use" :



Au lieu d'arriver sur une page d'édition composée d'un formulaire réparti dans 3 onglets, on affiche de nouveau la page en y ajoutant des éléments d'édition (2,3,4,5 et 6).
Par exemple, l'affichage d'un crayon à coté du titre (2) afin de pouvoir l'éditer et le modifier. En cliquant dessus, un voile à moitié opaque recouvre la page tandis qu'un formulaire apparait en popup. Ce formulaire permet de modifier le titre de la page et de sauvegarder sa modification. La page est alors chargée de nouveau pour afficher son nouveau titre (tout en restant en mode "édition") 

Il y a plusieurs avantages à procéder ainsi :
- l'utilisateur n'a pas besoin de savoir dans quel onglet et à quel endroit du formulaire aller pour modifier le titre. Il le trouvera intuitivement
- le popup qui s'ouvre pour définir le titre dispose de toute la place nécessaire pour pouvoir, si on le souhaite,  y afficher des instructions complémentaires (par exemple : indiquer que le titre est repris dans les listes et proposer un lien pour définir un titre court. Il devient également possible d'incorporer des copies d'écran et même une vidéo explicative si on le voulait !)
- selon le profil et les droits de l'utilisateur, le popup pourrait lui afficher un message lui expliquant qu'il n'a pas les droits suffisant pour modifier cette valeur mais que sa proposition de modification de titre va être transmise au responsable de la page qui pourra l'entériner d'un simple clic... (on pourrait aussi le faire sur le formulaire actuel mais cela alourdirait le code et l'affichage de la page d'edition).

Autre exemple avec la liste des sous-sections. A l'emplacement où apparait cette liste (sous la description), un crayon permet également de modifier  son paramétrage. Si la page est actuellement configurée pour ne pas afficher la liste des sous-section, la liste apparait quand même mais en grisé (avec des sous-sections bidon s'il n'y a pas de sous-sections réelles) ce qui permet intuitivement à l'utilisateur de comprendre qu'à cet endroit, il peut faire apparaitre une telle liste. Il ne lui reste plus qu'à cliquer sur le crayon associé pour indiquer qu'il souhaite afficher cette liste. Enfantin, non ?

A terme, on pourrait même envisager de "drag and dropper" la liste des sous-sections pour pouvoir la déplacer en tête de la page ou après les commentaire ou dans le panneau extra latéral, si on le souhaite.

Dans l'exemple ci dessus, la poubelle (4) permettait de supprimer l'affichage du composant "surveillance" tandis que le signe + (5) permettait d'ajouter de nouveaux composant. Quant au crayon à coté des introductions des articles (6) contenus dans cette section, ils permettaient d'éditer ces introduction pour les modifier.

Mais qu'en est-il des paramètres de la page que l'on ne peut pas afficher dessus ? Par exemple, le paramétrage des droits d'accès à la page.
On peut imaginer afficher un cartouche additionnel (déroulable) listant ces paramètres et leur valeur. Là aussi, l'image d'un crayon permettrait d'ouvrir une popup avec le formulaire permettant de modifier tous ces paramètres.

Je vois quand même quelques inconvénient à cette manière d'éditer une page.
- c'est plus long et fastidieux lorsqu'on a de multiples modification a faire sur la page, principalement à cause de temps de rechargement de la page.
- cela impose aux contributeurs (mais pas aux simples visiteurs) d'accepter l'exécution de javascript dans leur navigateur.

Pour le premier point, il est possible d'éviter de reconstruire toute la page entre chaque modif en répercutant en ajax la modif directement sur la page déjà chargée.
Pour ceux qui préfèrent malgrés tout travailler sur un gros formulaire unique, on peut également envisager de conserver tous les onglets actuels lorsque l'on affiche la popup qui permettra de configurer les paramétres "non visuel" que j'ai évoqué juste avant. On conserve ainsi les deux fonctionnement et les habitudes des "anciens".

Pour le second point, je ne trouve pas cela rédibitoire. D'une part, je pense qu'aujourd'hui, sans javascript, la plupart des sites majeurs intéractifs ne fonctionnent pas et que la très grosses majorité des utilisateurs accepteront javascript.
Mais dans le cas contraire, on doit pouvoir se débrouiller pour que les popup affichée par jQuery s'affichent malgrés tout sans javascript. Le fonctionnement sera dégradé mais quand même possible (je pense).

En conclusion, j'ai l'impression qu'un tel changement d'ergonomie d'edition serait bénéfique.
Qu'en pensez vous ? 

 

PersonWatcherEditorOwner
 Christian - YACS team - responsable support
création site internet
annuaire entreprise Rhône-Alpes
 Bernard Paques - YACS Leader
 Alexis Raimbault - YACS Team - Modérateur, Support, Développement.