Designer pour WordPress

avril 27, 2017 — Par Maxime Bernard-Jacquet — Dans User Experience

Partie 1 : Le design

J’ai toujours énormément apprécié  le design et l’ergonomie, malgré le fait que je sois développeur de métier. Quand l’idée m’est venue  de faire cette extension, l’ergonomie a été l’un des premiers axes essentiels sur lequel je voulais me concentrer.

J’ai commencé par étudier plusieurs extensions WordPress (tous types) au niveau de leur design à l’intérieur de l’interface d’administration, j’ai pu regrouper en plusieurs groupes :

1. Les extensions sans branding

La majorité des extensions ne créent pas leur propre univers. Elles utilisent ce que fournit WordPress par défaut. Parfois pour le mieux, parfois pour le pire.

Prenons ACF (Advanced Custom Fields) par exemple. Son interface s’intègre à la perfection à l’interface de WordPress, tant bien qu’on pourrait croire à des fonctionnalités natives.

On peut parler également de WooCommerce, qui est un autre exemple d’intégration.

Mais ce n’est pas toujours aussi parfait. Certaines extensions ne créent pas de styles supplémentaires et l’expérience utilisateur devient très vite un casse tête : beaucoup de textes à l’écran, pas de fil conducteur entre les actions. Parfois on active une extension, et on ne sait pas quoi faire ensuite. Frustrant.

Certaines extensions comme iThemes Security manquent de contraste entre les éléments. On ne sait clairement pas quoi faire après l’activation. Et on ne sait pas dans quelle mesure on est protégé. 2 notices sont ajoutées histoire d’ajouter à la complexité. C’est beaucoup mieux qu’avant cependant.

 

Autre exemple, WPML. Le multilangue dans WordPress n’est certes pas une chose aisée. Mais WPML, en plus d’ajouter beaucoup de tables dans la base de données, ajoute une complexité à l’interface qui n’est pas du tout évidente.

C’est une extension qui génère beaucoup de frustrations au final, même si elle fait plutôt bien le travail.

2. Les extensions très brandées

Certaines extensions au contraire chartent énormément leur interface. C’est le cas de Jetpack par exemple, où la couleur verte est très proéminente. On a une interface à part entière dans l’interface de WordPress.

Le CMS ne fournissant pas les éléments nécessaires à mettre en page une telle extension, c’est cette raison qui a poussé les développeurs à designer leur propre expérience utilisateur.

On notera malgré ça que JetPack, reste parfois un peu déroutant pour un débutant en terme d’ergonomie.

Même constat chez Elegant Themes, que l’on soit sur le Thème Divi ou encore leur extension Monarch.

Ou encore avec Imagify et SecuPress :

Personnellement j’aime beaucoup. Mais en questionnant des utilisateurs lors d’événements WordPress on s’est rendu compte que beaucoup n’appréciaient pas un design trop charté car cela leur donnait l’impression d’une intégration pas naturelle dans l’environnement de WordPress.

Nous avons donc pris en compte vos remarques et nous avons travaillé pour trouver le bon mix entre les deux.

À mi-chemin

Le défi était donc de proposer un design qui soit un minimum sexy, avec des composants adaptés à notre besoin , mais sans pour autant pousser la charte trop loin. On a pris l’exercice en imaginant que nous faisions une sorte de Bootstrap pour l’administration WordPress : il faut que le design s’intègre tout en apportant un peu de modernité.

Lorsque l’on designe pour une application mobile, on est en plein écran, toute la zone nous appartient. Pareil pour une webapp.

C’est un peu plus compliqué dans WordPress : ici nous ne sommes pas en plein écran. Il y a l’interface  à prendre en compte et cela ajoute un défi supplémentaire dont j’avais sous estimé les contraintes.

Avec quels outils aborder le design ?

Pour le design, après quelques wireframes faits sur Sketch et postés sur Invision, nous avons décidé de designer directement dans le navigateur. En tant que développeur de métier, je voyais plus de simplicité à créer des éléments directement en HTML/CSS.

Marge ou Borderless ?

L’une des premières questions a été de savoir si nous allions coller notre interface à celle de WordPress, ou laisser une marge. Après quelques essais on a préféré finalement laisser une marge pour aérer le tout. Rares sont les extensions qui se posent sur les bords. il est plus habituel pour un utilisateur d’avoir cette démarcation entre WordPress et les pages de l’extension

Interface légère

Notre en-tête se veut discrète et pas trop proéminente. Vient ensuite le menu qui propose à gauche les actions principales et à droite les actions secondaires. Il faut laisser le maximum d’espace pour le contenu de la page.

Lorsque vous scrollez, le menu vient se fixer en haut de l’écran. Je trouve qu’il est très frustrant de devoir scroller de bas en haut pour trouver le bouton « enregistrer ». Selon moi les boutons d’actions ou d’enregistrement devraient toujours être à portée, afin de faire gagner du temps et des scrolls inutiles.

Approche Composants

Pour tous les éléments nous avons eu une approche composant (nous avons utilisé la notation BEM en CSS pour rendre ceci maintenable sur le long terme). Chaque composant est indépendant et peut s’intégrer facilement à n’importe quel endroit.

La difficulté dans WordPress et avec le CSS c’est qu’on a vite fait d’hériter des styles parents. Afin d’éviter tout conflit avec d’autres extensions toutes nos classes démarrent avec .delipress__ :

Quelques captures de DeliPress

Voici le résultat de notre travail. Ces captures ne sont pas encore définitives pour autant. La bêta nous permettra de confronter ce design et de connaitre vos impressions.

Une page de type liste :

On aurait pu faire le choix de rester sur les listings proposés par WordPress. Mais on a préféré proposer notre version, plus légère et plus lisible.

Nous avons ajouté tous les hooks nécessaires afin de faire en sorte qu’un développeur tiers puisse ajouter ses fonctions (par exemple ajouter une colonne), comme pour les listes natives.

L’éditeur de campagne :

La page de validation de l’envoi :

Nous avons essayé d’apporter le moindre détail à chaque élément de l’extension, voici quelques champs :

Ou encore le sélecteur de liste, fait maison :

Nous attendons beaucoup de la bêta afin de tester notre vision avec nos utilisateurs. Nous serons très sensibles aux retours, comme nous l’avons été jusqu’à présent. On remercie tous ceux qui nous ont donné des conseils et leurs avis, notamment lors du WordCamp Bordeaux.

Vers l’expérience utilisateur

Dans les prochains articles nous aborderons plus en détails l’UX. Le design est une chose, mais l’UX est infiniment plus importante. On parlera des problématiques rencontrées, des choix que l’on a fait afin de proposer une solution intuitive, personnalisable et qui conviendra autant aux utilisateurs standard qu’aux développeurs.

Abonnez-vous à la newsletter

Ne manquez pas les prochaines mises à jour, offres spéciales et les nouveautés DeliPress !