Cela fait 10 mois que nous avons lancé Page Builder Sandwich pour le grand public. Nous comptons désormais environ 6 000 installations actives, et c’est une véritable réussite pour nous. Nous avons également reçu une multitude de retours, bons comme mauvais. Le consensus, cependant, est que les utilisateurs apprécient la facilité avec laquelle ils peuvent concevoir des mises en page et créer leur contenu par rapport aux autres constructeurs de pages du marché.
Une grande partie des retours que nous avons reçus concernait des demandes de fonctionnalités, et nous en avons ajouté un grand nombre au cours des derniers mois. Mais au fil de ces ajouts, nous avons également commencé à modifier progressivement l’interface utilisateur. Et, par conséquent, nous modifiions aussi l’expérience utilisateur… pour le pire. Nous en étions arrivés à un point où il fallait repenser l’interface, car elle ne fonctionnait tout simplement plus de manière fluide, et les différentes fonctionnalités ne s’harmonisaient plus avec elle.
L’ancienne interface
Dans les versions précédentes de PBS, nous voulions que tout se présente sous la forme de boutons. Pourquoi ? Parce que les boutons sont faciles à utiliser. Il suffit de… cliquer dessus. Sur les anciennes versions de l’inspecteur (la barre latérale sur l’image ci-dessus), cliquer sur un bouton augmentait une valeur, et faire Maj+clic la diminuait. Cela paraît assez simple. Mais avec l’ajout de carrousels, d’onglets, de cartes et d’autres nouveaux éléments et fonctionnalités, tous ces boutons sont devenus un méli-mélo d’icônes aux designs différents, et ont fini par ressembler davantage à des hiéroglyphes qu’à une interface moderne. Ce n’était pas un problème pour les utilisateurs chevronnés, mais c’était assez intimidant à regarder lorsqu’on découvrait PBS.
Ensuite, plusieurs problèmes sont apparus au niveau de l’inspecteur. L’idée initiale était de rendre tout simple et disponible au sein de l’inspecteur. Et par tout, je voulais dire absolument tout – de la transformation de texte en titres jusqu’à la modification des couleurs d’arrière-plan, des couleurs de police, etc. Dans son état actuel, cependant, l’inspecteur contient désormais de nombreuses options qui vous obligent constamment à faire défiler la page vers le haut et vers le bas avec la molette de la souris. Bien loin de l’inspecteur que j’espérais concevoir à l’origine pour les utilisateurs.
Enfin, nous avons récemment introduit le mappage de shortcodes pour vos extensions préférées. Cette fonctionnalité nous a obligés à créer des champs de texte, des curseurs numériques, des cases à cocher et d’autres nouveaux types d’options nécessaires pour rendre votre expérience d’édition de shortcodes plus agréable. Au départ, c’était une bonne idée et, oui, cela vous a facilité la manipulation des shortcodes. Mais là encore, cette fonctionnalité s’écartait de notre interface « boutons uniquement ». Avec le recul, il était réellement impossible de n’utiliser que des boutons pour modifier les attributs des shortcodes. Désormais, dans la dernière version, nous nous sommes retrouvés avec 2 types de contrôles : les boutons et les champs de shortcode.
Il y a d’autres raisons qui nous ont amenés à constater que notre interface n’était plus efficace (ou adaptée à nos besoins), mais les points ci-dessus sont les principaux. Une chose était néanmoins certaine : nous savions que nous devions mettre à jour l’interface.
Définir le fonctionnement idéal d’un constructeur de pages
Au lieu de nous précipiter et de tout changer immédiatement, nous avons pris un grand recul pour observer l’expérience globale du constructeur de pages. Nous voulions insuffler une nouvelle vie à l’interface. En toute franchise, nous ne voulions pas continuer à la reconstruire année après année. C’est épuisant et cela n’apporte clairement aucune aide significative à la communauté WordPress. Cette fois, nous avons décidé de faire les choses lentement et avec soin. Nous avons étudié chaque recoin de Page Builder Sandwich et ce qui en fait un bon constructeur de pages, pour finalement structurer toute l’expérience d’édition autour de quelques concepts fondamentaux.
Concept essentiel n°1 : Saisir directement dans votre contenu pour modifier les éléments
L’une des principales raisons d’installer un constructeur de pages est de s’affranchir des contraintes de l’éditeur de texte du panneau d’administration de WordPress. Ce n’est pas que l’éditeur d’administration soit mauvais, mais lors de la création de vos pages web, il ne vous montre pas immédiatement à quoi ressemblera votre page pour les visiteurs de votre site, et ne vous permet pas non plus de mettre en page votre contenu en dehors d’une disposition sur une seule colonne. Vous ne pouvez y voir que votre texte et quelques images, mais aucun des éléments plus complexes (comme les formulaires de contact). Vous pouvez ajouter des shortcodes, certes, mais ils n’apparaîtront pas sous leur forme générée*.
* Il existe des extensions créées par des tiers pour remédier à cela, telles que Shortcake UI, mais là n’est pas la question.
C’est là que les constructeurs de pages front-end entrent en jeu. Ils déplacent l’expérience d’édition du back-end vers le front-end, avec la possibilité de modifier votre site tel que vos visiteurs le verront réellement. Comme le dirait Pippin : ce que vous voyez est ce que vous obtenez (WYSIWYG).
Un autre avantage d’un éditeur front-end est qu’il vous permet de modifier directement votre texte. Saisir du texte dans des titres et des paragraphes procure la même facilité que celle d’un traitement de texte classique appliqué à la création de sites web. Les boutons et les libellés d’onglets devraient également pouvoir être modifiés en cliquant simplement dessus et en tapant au clavier.
C’est un domaine dans lequel la plupart des autres constructeurs de pages ne sont pas à la hauteur. La plupart d’entre eux vous obligent à taper dans un champ de texte pour tout modifier. Encore une fois, cela ne devrait pas être le cas avec de véritables constructeurs de pages front-end. Saisir et modifier le texte directement est un point fort de Page Builder Sandwich depuis la version 2, et nous nous sommes assurés que cela demeure dans la version 3.
Concept essentiel n°2 : Utiliser la souris pour des ajustements rapides
La souris est un outil puissant qui est souvent négligé dans les constructeurs de pages. Bien souvent, les constructeurs de pages l’utilisent pour permettre aux utilisateurs de glisser-déposer des éléments à différents endroits, ou pour cliquer sur des boutons ou des champs de saisie. Même si c’est très bien, on peut faire tellement plus avec la souris dans le domaine de la création de pages.
D’une part, l’utilisation de la souris comme outil d’édition de page offre un retour visuel formidable, en particulier pour ajuster des propriétés visuelles comme les marges externes, les marges internes et les dimensions. Désormais, peaufiner vos éléments devient une expérience naturelle.
Dans la version 3 de PBS, vous pourrez ajuster de nombreux éléments à l’aide de votre souris. Vous pouvez ajuster les marges/espacements entre les différents éléments, les marges internes au sein de vos colonnes, ainsi que la taille des images, des icônes et des cartes. Nous avons également remplacé les boutons permettant de modifier des valeurs numériques par des curseurs.
Concept essentiel n°3 : Le texte doit être facile à mettre en forme
Si vous prenez un peu de recul par rapport à votre écran, vous remarquerez que la majeure partie de ce que vous ajoutez sur vos pages web est du contenu textuel. Certes, des images et des icônes viennent l’accompagner – et ces derniers temps, nous avons tendance à ajouter des images plus grandes sur nos sites. Mais la majorité du contenu important reste du texte : titres, listes à puces, paragraphes, citations, etc. Parallèlement, nous mettons en forme notre texte pour l’adapter à nos créations. Nous modifions ses tailles et ses couleurs, ou nous le mettons en gras ou en italique. Tout cela vise à rendre notre contenu plus lisible, pertinent et attrayant pour nos lecteurs respectifs.
Puisque nous mettons souvent le texte en forme, les boutons qui nous permettent de modifier ces styles doivent être très accessibles. Ils ne devraient pas être enfouis dans une fenêtre contextuelle qu’il faut d’abord ouvrir. La plupart des constructeurs de pages souffrent de ce défaut. Pour que leur interface utilisateur puisse être qualifiée d’« épurée », même les options les plus utilisées sont dissimulées à la vue de tous.
Pour résoudre cela, nous avons observé les traitements de texte les plus couramment utilisés. Nous avons remarqué qu’ils disposent généralement d’une barre contenant une multitude de boutons près du haut de l’écran pour formater le texte, et nous avons reproduit cette disposition pour la version 3. Nous disposons désormais d’une barre regroupant tous les boutons de mise en forme du texte toujours présente en haut de votre écran. Cela rend la mise en forme extrêmement rapide et aussi intuitive qu’une seconde nature pour l’édition de texte.
Concept essentiel n°4 : Les options de style avancées doivent être flexibles tout en restant faciles à comprendre
L’objectif fondamental d’un constructeur de pages est de permettre de créer de superbes designs facilement. Cela signifie que nous devons proposer de nombreux paramètres et options différents sans imposer une courbe d’apprentissage ardue. Pouvoir ajuster les marges, les espacements et mettre en forme le texte est formidable, mais cela a ses limites. Vous aurez besoin d’options bien plus élaborées pour mener à bien votre travail, comme des images d’arrière-plan, des motifs, des bordures, des arrière-plans fixes et bien plus encore. Empiler tous ces différents paramètres peut vite devenir déroutant, c’est pourquoi nous en avons simplifié certains et les avons organisés par catégories pour rendre le tout plus convivial dans la version 3.
Concept essentiel n°5 : Prise en charge des shortcodes
Enfin, n’oublions pas que notre constructeur de pages repose sur WordPress. Nous devons adopter la plateforme et ses fonctionnalités, sans les restreindre ni nous en écarter. Une fonctionnalité majeure offerte par WordPress réside dans les shortcodes. Cela ne signifie pas que tout le contenu doit être composé de shortcodes – ce serait le désordre –, mais plutôt que nous devons simplement être compatibles avec eux. De nombreuses extensions et thèmes utilisent des shortcodes, et ce serait une réelle perte de les ignorer. En réalité, les shortcodes offrent aux utilisateurs une flexibilité maximale lorsqu’il s’agit de créer des pages.
Nous avons lancé il y a quelques semaines notre système de mappage de shortcodes, et grâce à lui, nous avons mappé des centaines de shortcodes issus de centaines d’extensions. Nous avons donné la priorité aux extensions les plus populaires du répertoire d’extensions WordPress, vous avez donc de fortes chances de les retrouver sur vos propres sites. Cela s’est encore renforcé dans la version 3, et nous continuerons à améliorer cet aspect à l’avenir.
Conclusion
Nous avons réuni toutes ces propriétés essentielles mentionnées ci-dessus et les avons intégrées dans Page Builder Sandwich version 3. C’est le meilleur constructeur de pages que nous ayons conçu pour WordPress à ce jour. Il est plus intuitif et plus naturel à utiliser, plus performant, plus facile d’accès et plus convivial que jamais.
Si vous avez des idées sur une fonctionnalité essentielle pour un constructeur de pages, faites-le-nous savoir en laissant un commentaire ci-dessous.