UX design: comment concevoir efficacement avec Gutenberg ?

Proposer à ses clients des sites et des plateformes qui répondent aux besoins de leur audience et qui augmentent leur business est facilité depuis toujours par le CMS WordPress. En effet WordPress étant open source, c’est la solution la plus facile à mettre en place, la plus répandue sur le web, avec la communauté la plus active. Vous trouverez toujours une extension qui répond au minimum à 80% du besoin exprimé par votre client sans avoir recours à du développement supplémentaire. De plus, grâce à Automattic, la communauté internationale de WordPress et l’ensemble des contributeurs, elle est constamment à jour et interropérable avec l’ensemble des grands acteurs du web.

Mais un designer peut-il garder sa part de créativité dans un environnement si charté ?

Beaucoup pensent que Gutenberg est une contrainte pour nous, designers, qu’on ne peut pas tout faire, que nous sommes bloqués, et nous appréhendons en conséquence un projet WordPress avec un sentiment de frustration. Mais en réalité, c’est complètement faux.

D’abord, parce qu’il n’existe aucune créativité sans contrainte et que le design est essentiel quand on parle de conception de sites ou d’interface. Aucun client ne peut, s’il veut un site performant, se passer de design.

Ensuite, parce qu’avec Gutenberg, quand on connaît parfaitement ses blocs et comment jouer avec, quand on référencie des packs de blocs additionnels performants, quand on assimile les extensions solides qu’offre la communauté, il n’y a plus beaucoup de limites pour rendre un site juste, unique, beau et utile. C’est un peu ça le bonheur digital…

1. Premièrement, pensez utile !

Pour l’utilisateur, un bon site, ce n’est ni sa technicité, ni son look and feel. C’est son utilité.

Est-ce que le site sera lu par l’audience? Qu’est ce qui l’intéresserait vraiment au point de venir consulter le site, voire d’y revenir ? Comment augmenter le taux d’engagement et d’acquisition ? Est-ce que le parcours d’achat est fluide ? Est-ce que l’expérience proposée est attendue par l’audience ?…

Toutes ces questions doivent être étudiées en amont et pour cela le travail de l’UX Designer est indispensable. Certaines étapes de conception sont essentielles avant même d’ouvrir les logiciels Sketch ou Figma :

• Ateliers de recueil de besoin du client
• Analyse de l’existant
• Interview et enquête utilisateurs
• Ateliers de cartographie et triage de contenu
• Keyword mapping, arborescence et cartographie

C’est une fois toutes ces données collectées, étudiées et partagées à l’équipe projet, que l’indispensable connaissance du CMS, de ses possibilités et de ses contraintes intervient et que l’UX Designer se doit d’être un expert de WordPress pour designer la meilleure solution réalisable pour le client.

2. Soignez le storytelling des pages

Gutenberg a changé la façon de concevoir les sites. C’est un content builder ultra souple qui permet énormément de solutions mais qui grâce à l’exhaustivité de ses capacités et sa souplesse doit être bien pensé en amont. Maitrisées, ses fonctionnalités ouvrent drastiquement le champ des possibles quant à l’ergonomie du site et facilite énormément la contribution.

Quelques conseils basiques mais pratiques pour la réalisation de vos wireframes :

Trouver d’abord des solutions de mise en page grâce aux blocs natifs.

Quand vous réalisez vos wireframes pensez à utiliser les colonnes disponibles. C’est à dire que tous vos blocs doivent être pensés et préparés au format normal, pleine largeur, 50/50, 30/70 etc… Ainsi vous pouvez rythmer facilement vos strates de contenus tout au long de la page.

Inventez des blocs patterns utiles pour les besoins de votre client.

Suite aux différents ateliers menés avec votre client pour comprendre ses besoins et ses contenus, profitez aussi des groupes de blocs pour concevoir des templates de strates uniques. En composant ces modèles directement en wireframes vous pourrez designer vos pages plus rapidement. De plus, quand le site sera contribué, votre client pourra les choisir dans son back office et composer ses pages sans l’angoisse de casser l’ergonomie, la charte et la mise en page.

Rangez votre bureau !

Philippe Etchebest a dit qu’on ne pouvait pas cuisiner un grand plat sur un plan de travail sale et désordonné. Il en est de même pour vous amis designers ! ****Pensez votre document de travail en atome. ****Que vous travailliez sur Sketch, sur Figma, XD ou autre, simplifiez-vous la tâche en créant en amont du projet vos composants. Plus votre document est pensé en atome, plus il sera aisé de composer vos blocs, groupes de blocs, templates de page…

3. Designez efficace, juste et réalisable avec Gutenberg.

Chez Be API, concevoir des sites sur WordPress avec Gutenberg est notre quotidien. Alors nous avons conçu “Design with Gut”.

Un design system qui comprend tous les blocs Gutenberg natifs (common, formatting, layout element…) mais aussi des extensions et packs de blocks les plus utilisés dans notre référentiel agence (FacetWP, The Event Calendar, Getwid…) pour nous permettre de créer simplement et rapidement nos wireframes. Cela nous facilite nos process de travail à bien des niveaux :

• Une conception de wireframes plus rapide
• Un storytelling des pages plus soigné
• Une faisabilité technique certaine
• Passation UX>UI plus fluide
• Vision plus claire du produit fini pour le client.

“Design with Gut” est en phase de conception et nous itérons beaucoup dessus. Comme tous les Design Systems, il n’est pas complet et nous le mettons à jour projet après projet pour le rendre le plus efficace possible.

Notre volonté est qu’une fois optimisé, nous le rendions public pour que chacun de vous puisse s’en servir et créer de superbes expériences avec WordPress.

Contactez-nous si cela vous intéresse, nous seront ravis d’échanger avec vous.