“WYSIWYG, tu crains !”


Technique, User Experience


Il y a
environ un million d’années apparaissaient les premiers logiciels de traitement de texte. Il s’agissait en fait de logiciels de PAO qui permettaient de prévisualiser sur son ordinateur un document destiné à l’impression.
Microsoft et Apple en particulier ont défini un standard quant à l’interface et l’utilisabilité de ces logiciels qui a tout naturellement été transposé dans la création de contenu sur Internet. 

WYSIWYG edition “WYSIWYG, tu crains !”L’éditeur TinyMCE, utilisé par défaut sur WordPress, et donc par au moins 26 % du web.


Sauf que…

Sauf que le concept est inapplicable pour le web. À une époque où un contenu en ligne peut être consulté depuis un ordinateur, un mobile, une tablette, une liseuse, un flux RSS ou même un frigo connecté, l’expression “What You See Is What You Get” perd tout son sens. Par ailleurs, il est aussi déraisonnable de demander au contributeur de s’assurer que son travail s’adapte sur chaque support que de demander au lecteur d’ajuster la taille de son écran à celle prévue lors de la rédaction.

S’ajoute à cela le risque créé par l’utilisation de ces éditeurs. Les possibilités de mises en forme mènent forcément à une perte de contrôle sur l’apparence du site. L’affichage du contenu est censé respecter la charte graphique établie, et laisser le champ libre à la créativité du rédacteur peut avoir un effet désastreux sur cette règle.

Et même du point de vue de l’utilisation, donner au contributeur des options de mises en forme baroques s’avère distrayant mais l’éloigne du principe de séparation du fond et de la forme.

D’un point de vue strictement technique aussi, le constat est déplaisant : la modification de l’apparence engendre à de très rares exceptions un code HTML de mauvaise qualité, avec des styles inline, des balises vides et autres réjouissances qui rendent le site difficilement maintenable et la mise en place d’évolutions graphiques fastidieuse.

WYSIWYG code source “WYSIWYG, tu crains !”Exemple de HTML généré par TinyMCE, AKA le 6e cercle de l’enfer.

 

Le principal défaut de l’éditeur vient de son essence même : le formatage doit être invisible. On ne doit voir que ses effets. Il revient alors au développeur de trouver des moyens pour “nettoyer” le code généré en anticipant le comportement à la fois de l’éditeur et du rédacteur.

Certes, la plupart des WYSIWYG proposent de basculer la vue vers un aperçu du code, provoquant une mise en abîme de types d’édition, mais on ne peut attendre d’un contributeur qu’il soit familier avec le langage (à quoi bon passer par un WYSIWYG en premier lieu, sinon ?), donc la solution n’est pas fiable.

Alors, si les WYSIWYG sont un mensonge et sont si toxiques, pourquoi restent-ils si largement populaires ?

Tout simplement parce qu’il s’agit de l’interface “naturelle” attendue par quiconque a déjà utilisé un logiciel de traitement de texte. Ils libèrent de la tâche triviale d’écrire du HTML en présentant une interface confortable et familière. Et pour une personne non initiée, avoir une interface “comme Word” pour modifier du contenu en ligne est la solution la plus logique.


Sémantique, WYSIWYM et utopie

Une solution, proposée par Medium, par exemple, consiste à débarrasser l’éditeur de toute fonctionnalité superflue et à ajouter un niveau d’abstraction supplémentaire : la sémantique.

Avec le WYSIWYM (What You See Is What You Mean), l’utilisateur est en face de son texte et n’a plus la possibilité que d’ajouter des mises en forme qui ont un impact sur la sémantique, pas forcément sur l’apparence. À savoir :

  • Le gras
  • L’italique
  • Les intertitres
  • Les liens
  • Les images
  • Les listes
  • Les citations

medium 1024x438 “WYSIWYG, tu crains !”L’éditeur de Medium / le résultat une fois publié.

 

La liste peut inévitablement varier selon les besoins de chacun mais l’idée principale est là. Exit les changements de police, de taille ou de couleur de caractère ; nous avons sous les yeux un contenu dans son expression la plus simple. Les choix graphiques fait par Medium rendent leur éditeur visuellement très, très proche du résultat final sur le même support, mais le but du WYSIWYM est de rester le plus support-agnostique possible (adaptable aux différents supports avec lesquels il interagit).
Le formatage est toujours invisible, mais nous sommes déjà libérés des risques de contredire l’aspect général de la page et des distractions qu’entraîne une barre d’outils trop fournie.


Les alternatives

Les WYSIWYG sont intrinsèquement faillibles, OK, mais quelles sont les alternatives ?

Aujourd’hui, la tâche quelquefois laborieuse d’écrire en HTML, même s’il s’agit du langage prédominant, a été presque entièrement abolie de la rédaction sur Internet. Les forums utilisent le BBCode alors que Wikipédia, Github, Reddit et Stackexchange se servent de différentes variations de Markdown.

Ces LML (Lightweight Markup Language — langage de balisage léger) ont pour but d’ajouter une surcouche au HTML classique permettant de garder une trace des mises en forme opérées tout en gardant un texte facilement lisible. Ils datent de l’époque des moniteurs qui n’avaient pas la possibilité d’afficher du texte italique ou gras et ont fait naître des méthodes permettant de simuler l’accentuation.

Ainsi, Markdown, créé par John Gruber en 2004, reprend cette syntaxe intuitive et informelle, et la traduit en HTML valide.
Par exemple, *italique* devient italique et **gras** devient gras.
Les balises au sens HTML n’existent plus mais le formatage est bien présent et facilement identifiable par un programme. 

Forcément, les besoins de la rédaction d’un contenu en ligne riche ont donné naissance à des syntaxes beaucoup plus subtiles (notamment pour insérer des liens, des images…)  mais globalement, la phase d’apprentissage est réduite (comparé au HTML) ce qui permet d’économiser un temps inestimable pour les traitements en aval.

stackeditio “WYSIWYG, tu crains !”

L’éditeur stackedit.io, basé sur Markdown.


En résumé

Pour conclure, les WYSIWYG en ligne sont apparus pour simplifier la réalisation d’une tâche complexe. Si l’utilisation d’une interface familière réduit grandement la phase d’apprentissage, cela s’effectue souvent au prix de la qualité et de la pérennité du travail fourni.

Au final, rares sont les cas où un WYSIWYG s’avère être indispensable, la plupart du temps il est juste choisi comme solution par défaut. Un conseil donc si vous voulez rester copain avec votre designer et éviter des cheveux blancs à votre développeur : pensez à proposer des solutions alternatives au client !

 

 

 

 


Sources :

Inventing on Principle
Your WYSIWYG Editor sucks
WYSIWTF
Say No To WYSIWYG
Writing in Medium
WYSIWYG is a disaster

Laisser un commentaire