Réflexion sur l'UX de l'éditeur

Dans tout ce qui suit, je ne parlerai que du nouvel éditeur.

Malgré ses quelques bugs, le nouvel éditeur est pratique. Pour la rédaction, c’est un vrai confort d’avoir la prévisualisation côte à côte, la coloration du Markdown, etc. Mais je trouve que d’un point de vue expérience utilisateur, il pourrait être amélioré ; voici donc quelques pistes de réflexions.

Un éditeur qu’a en réalité deux catégories d’usage

On a toujours eu un seul éditeur sur ZdS sur tout le site : le même éditeur sur les forums, les contenus, etc. Et c’est très bien d’un point de vue maintenance : on n’a pas vraiment envie d’avoir à gérer douze éditeurs différents, ou même deux, ce ne serait pas très pratique.

Mais. Si on y réfléchit un peu, on a deux contextes d’écriture assez différents sur ZdS :

• l’écriture sur les forums, qui est généralement directe, rapide, sans de gros besoins de mise en forme ;
• l’écriture d’un contenu, qui est généralement plus longue, plus complexe, avec toute la puissance de zmd utilisée.

Et notre éditeur ne reflète absolument pas cette différence de contexte d’écriture, car il est identique (et complet) partout. Il est donc bien pour les contenus, mais assez lourd pour les forums, par exemple. Regardez-donc tous ces boutons, on dirait qu’il est adolescent.

Une idée pour optimiser l’éditeur pour les deux usages : le mode “plein écran”

L’éditeur a déjà deux modes d’affichage : en petit, et en plein écran. Ma proposition est de réduire le nombre de boutons affichés dans le mode de base, et de tout mettre dans le mode plein écran. Ça permettrait de simplifier drastiquement l’éditeur pour les cas simples (typiquement, les forums), en allant directement à l’essentiel — tout en permettant de garder toutes les options sous la main, en un clic.

Aussi, comme c’est un cas d’usage majoritaire, je mettrais le mode “double-colonne” en mode par défaut quand on passe en plein écran.

Au passage, on pourrait en profiter pour améliorer l’apparence de l’éditeur en version petite. À ce niveau, j’admets que j’aime beaucoup ce qu’a fait GitHub, et je pense qu’on pourrait s’en inspirer. Seule chose, j’ignore quelles sont les possibiltiés et contraintes d’EasyMDE en terme d’intégration de l’éditeur et de différences entre le mode normal et le mode plein écran : peut-on l’utiliser juste pour le bloc de texte, et gérer le reste nous-même, en appelant ses API au clic sur un bouton ?

Qu’est-ce que ça pourrait donner ?

J’avais donc imaginé un truc comme ça pour l’éditeur en petite version. Bien sûr, ce n’est qu’un brouillon sur papier, pour le moment, et je suis ouvert à toutes les remarques. Le style graphique n’est pas encore le propos (de toute façon, ça reprendrait celui de ZdS) ; surtout l’organisation de l’interface et l’expérience utilisateur. Ah, et considérez que tous les éléments en dessous sont correctement alignés, aussi : ce n’est pas censé dépasser.

Les boutons que je garderais pour la version petite sont les suivants (ordonnés et séparés ainsi) :

• Gras
• Italique
• Barré
• Titre
• — 
• Liste
• Liste numérotée
• Liste de tâches
• — 
• Lien
• Citation
• — 
• Formule mathématique
• Code en ligne
• Bloc de code
• — 
• Blocs d’information/avertissements/secrets/etc.

C’est ce que je juge utile dans un contexte de forum, ou pour de petits contenus. Ça exclue notamment :

• les touches de clavier (peu utile sur un forum, généralement, et simple à taper donc peu d’intérêt d’avoir un bouton) ;
• les abréviations (surtout utiles dans des contenus, moins dans des posts de forum) ;
• les exposants et indices ;
• les alignements ;
• les tableaux.

Ces boutons resteraient bien sûr accessibles sur la version plein écran.

Le bouton d’aperçu est remplacé par une sorte d’onglet bien plus explicite (dans l’idée de séparer les boutons de formatage du texte, des boutons d’action sur l’éditeur (aperçu, plein écran…).

Le bouton de plein écran est remplacé par un lien en bas à droite de l’éditeur « Version complète », assorti d’une icône “plein écran” afin de ne pas surprendre l’utilisateur.

Le mode double-colonne disparaît de la petite version — vue la largeur, il me semble de toute façon peu pertinent.

Qu’en pensez-vous ?

Il faut encore que je me renseigne sur la faisabilité (mais je suppose qu’il n’y aurait pas d’oppositions particulières à ce niveau). De toute façon, ce ne sont que pistes de réflexion. Qu’en pensez-vous ?

Sympas la proposition. J’ai une autre proposition également (je tilt régulièrement dessus, autant en profiter) : pouvoir visualiser le rendu Markdown en temps réel (= l’aperçu) juste en dessous plutôt que de recharger la page. Après si ça ne convient pas à tout le monde, l’enregistrer dans le profil utilisateur. Ce serait tellement pratique !!

Ça c’est actuellement possible si tu passes en mode double-colonne avec ce bouton : sur l’éditeur expérimental

Par contre c’est à côté, pas en dessous.

Personnellement je trouve que c’est une excellente suggestion !