Prototype d’édition d’article avec SPIP

Réfléchir à l’amélioration d’une interface d’édition telle que celle de SPIP est un travail passionnant, qui n’est jamais aussi simple qu’il y paraît de prime abord. Comme toute interface, cet « espace privé » a son histoire, ses utilisateurs et leurs bonnes et mauvaises habitudes. Plutôt que de faire la révolution, mieux vaut partir de l’existant pour l’optimiser de façon progressive.

Proposition de structure pour les formulaires d’édition

J’ai profité de ce merveilleux week-end du 1er mai aux grottes de Mazangé pour travailler sur la structure HTML des formulaires de l’espace privé de SPIP, dans le but de proposer quelque chose de simple, c’est-à-dire de facile à maintenir, à ré-utiliser et à reproduire.
En effet, dans un projet tel que SPIP, où l’interface d’administration est codée à plusieurs mains et dont le code est ausculté par des centaines de contributeurs, copié et ré-utilisé (notamment sous forme de plugins), nous ne pouvons pas nous permettre des choses trop complexes à maintenir et à transmettre. Nous devons faire simple et explicite.

J’ai attaqué le formulaire d’édition des articles (à partir d’une version 1.9 en développement) parce que c’est l’un des plus complets. Voyez ce prototype de formulaire d’édition d’article.

• Je ne me suis intéressée qu’à la partie centrale de la page, strictement au formulaire : ne considérez donc que la structure HTML du diviseur div.formulaire_editer. Les règles d’écriture mises en œuvre sont exposées dans cet autre article : Des formulaires bien structurés, faciles à styler.
• Côté CSS, ça tient en une centaine de lignes seulement. Oui, cela suffirait à donner la base formelle de l’ensemble des formulaires d’édition de l’espace privé. J’ai également appliqué le script dit « cmxform » de Nick Rigby (cf. : De jolis formulaires accessibles ).

C’est tout ! Il n’y a besoin de rien d’autre pour fabriquer plein de formulaires souples et costauds. Les contributeurs vont apprécier !

Côté look, je ne me suis pas embêtée, puisque j’ai seulement épuré l’habillage traditionnel, améliorant la lisibilité, avant d’appliquer le look très discret du script cmxform. Toute modification graphique devrait désormais s’effectuer très facilement, en ne touchant qu’à la feuille de style externe. Amis graphistes, à vos palettes !

Signalétique des statuts de publication et identité

Ce travail sur le formulaire d’édition n’a pu se faire sans s’accompagner d’une réflexion sur le fonctionnement et l’ergonomie de l’édition d’articles dans SPIP. Il y aurait beaucoup de choses à en dire, mais commençons par des choses simples.

Découvrez la suite de mon joli prototype en changeant vous-même le statut de l’article via le select : brouillon, article proposé, publié, etc.

• Dans ce proto, tout se joue en 2 colonnes, dans une largeur de page minimale de 830 pixels qui mériterait d’être agrandie (ou fluide) pour proposer une zone d’édition plus large et plus confortable.
  Les multiples variantes actuelles de l’interface (textuelle ou graphique, simplifiée ou complète, à 2 ou 3 colonnes, dans 6 couleurs au choix) devraient être abandonnées au profit d’une interface unique plus accessible. La maintenance et les évolutions en seront simplifiées d’autant, quel soulagement !
  Actuellement, la troisième colonne est effectivement peu exploitée et les autres variantes sont plus problématiques que réellement utiles. Deux colonnes suffisent : la principale pour l’édition des contenus, l’autre pour les objets associés.

• Le formulaire d’édition (précédemment présenté) a été épuré et réduit à son simple rôle, c’est-à-dire l’édition des contenus propres de l’objet éditorial sélectionné (sa titraille et ses textes, et non plus sa rubrique ou ses documents joints tel qu’actuellement).

• Les objets associés (rubrique, auteurs, mots, documents, etc.) sont listés en colonne latérale. On gère les associations (changement de rubrique, ajout d’auteur, de document, etc.) depuis cette colonne latérale (éléments repliés/dépliables). L’édition de ces objets associés se fera par contre en partie centrale.
  Le fonctionnement de cette colonne est imaginé de façon idéale et reste à tester en situation réelle, sur des cas concrets.

• Une fiche d’identité nous rappelle le type d’objet sur lequel nous travaillons (article, brève, etc.), son numéro identifiant unique, ses dates (de naissance, etc.) et son statut (publié, brouillon, etc.). Cette fiche est un repère synthétique, présent sur chaque page de l’espace privé et reste affichée en permanence (cela semble évident, mais ce n’est pas le cas dans l’interface actuelle, où l’on perd souvent ces informations de vue, notamment sur les formulaires d’édition). Sa couleur indique ostensiblement le statut de l’objet, de façon à ce que l’utilisateur évalue l’impact des ses interventions, en toute circonstance et d’un simple coup d’œil : on ne travaille pas avec les mêmes précautions sur une page déjà publiée ou sur un brouillon !

Pour conclure...

Cette page traite de deux choses différentes qui auraient pu être exposées dans deux articles distincts : une proposition d’amélioration ergonomique et une méthode de structure HTML/CSS — l’une est une approche conceptuelle, quand l’autre est déjà une ébauche de solution.
Il faut dire qu’on ne décide pas de la structure de formulaires d’édition sans réfléchir plus globalement au processus d’édition lui-même (dans SPIP comme ailleurs). Cependant, la structure ici présentée n’est qu’une possibilité parmi d’autres. Et la réflexion ergonomique qui l’a accompagnée peut être poursuivie indépendamment.

Ce prototype et cette réflexion ne constituent qu’une hypothèse d’amélioration. Ils mériteraient d’être enrichis de vos critiques et autres expérimentations. Remercions déjà les réflexions éclairées d’Aurélien Lévy et Matthieu Marcillaud qui ont contribué à peaufiner ce proto. À vous de prendre la suite.