15 avril 2019

Dries Buytaert l’a annoncé officiellement : l’interface d’administration de Drupal va enfin évoluer, après 10 années sans changements majeurs ! Dans un premier temps, l’interface devrait être disponible en bêta-test d’ici peu de temps (au printemps 2019 d’après Dries). Elle sera ensuite enrichie de fonctionnalités JavaScript pour être intégrée dans le core de Drupal 8.8.0 (et donc Drupal 9), fin 2019.

Cette nouvelle interface standardisée à l’aide d’un « Design System » devrait être plus moderne et respecter des standards d’accessibilité : une nouvelle UI au service de l’UX de Drupal. C’est une réelle opportunité, alors que de nombreuses agences menant des projets Drupal déclarent que l’interface actuelle est évoquée comme un point négatif par leurs clients lors du choix de la solution.

« Un back-office obsolète »

Drupal est reconnu pour sa modularité, ce qui en fait un outil prisé des développeurs et agences. Mais le back-office est souvent décrié comme obsolète par une partie des utilisateurs. C’est en tout cas le retour qu’a reçu le fondateur d’Acquia, lors de rencontres avec des agences web vendant la solution. D’après celles-ci, le constat est le suivant : le premier frein évoqué par leurs clients lorsque la solution leur est recommandée, c’est que l’interface d’administration n’est pas assez moderne.

drupal-7-8-administration-comparaison.jpg

Image : Administration d’un contenu Drupal 7 vs Drupal 8

Offrir une expérience utilisateur plus riche

Malgré les évolutions apportées par Drupal 8 - offrant une expérience de création de contenus améliorée, intégrant une nouvelle barre d’outils et proposant un WYSIWYG aux fonctionnalités avancées – l’interface n’a pas changé de manière majeure depuis 10 ans. Et pourtant, les tendances en matière de conception ont évolué au-delà de l’aspect graphique. Ce sont en effet les attentes en matière d’expérience utilisateur qui ont changé.

Actuellement, l’interface nécessite de nombreuses actions de la part de l’utilisateur comme par exemple les clics de sauvegarde, ou de rechargement de contenu. L’utilisation du framework React semble être privilégiée pour rendre l’interface utilisateur plus conviviale et facile à utiliser.

L’UX devrait donc être plus intuitive avec des contenus dynamiques, apportant ainsi plus de feedback immédiat sur les interactions avec l’administration. La prise en compte des commentaires des utilisateurs des versions précédentes et le retour d’experts témoignent de la volonté de mettre l’UX au centre de cette refonte.

nouvelle-administration-Drupal.jpg

Légende : Nouvelle interface d’administration Drupal

Un cadre de conception (Design System) entièrement repensé

Afin de définir un cadre des améliorations à apporter, un « Design System » a été défini sur le site Drupal.org dans la rubrique « Drupal Core ideas ». Celui-ci définit notamment les principes, modèles et outils à utiliser pour créer la nouvelle interface d’administration.

Ce cadre de conception a déjà été en partie intégré dans ce qui semble être le successeur du thème admin « Seven ». Nommé « Claro », il devrait être disponible en version bêta test à partir du printemps 2019. Son intégration dans le Core de Drupal 8.8.0 est prévue pour décembre 2019.

Lors du développement du thème « Claro », des études UX seront menées pour s’assurer que les modifications apportées soient bien perçues comme des améliorations de l’expérience utilisateur. Les améliorations pourront alors être intégrées au fur et à mesure du développement du thème final.

Comme tout bon « Design System », celui-ci est collaboratif. Un channel slack est disponible pour les contributions : https://drupal.slack.com/?redir=%2Fmessages%2FC2SJQ5FMG. Le projet est disponible ici : https://www.drupal.org/project/claro.

 

Plus de précisions sur le Design System

L’interface générale

Une échelle typographique modulaire

 

La taille de la police a été cadrée avec comme taille de référence 16px. Les autres tailles sont basées sur une échelle modulaire pour obtenir une harmonie entre les différents types de textes. Cela garantit la hiérarchisation visuelle du contenu.

echelle-typographique-ux-drupal.png

Image : échelle typographique cohérente

Une palette de couleur simple et moderne

 

Pour cette nouvelle mouture, le choix des couleurs s’est fait à partir d’une palette plus claire, avec des gris neutres et un bleu vif (couleur universelle et facilement distinguable par les daltoniens) permettant de mettre en relief les informations importantes.

charte-couleur-back-office-drupal-9.png

Image : Par rapport au thème Seven, les 4 couleurs primaires évoluent et la palette de gris s’agrandit.

Des icones plus lisibles

 

Le flat design est à l’honneur pour cette version de l’interface Drupal. Elles offrent plusieurs avantages :

  • Théoriquement les icônes plus rapides à charger (selon le format employé),
  • Les formes simples et « remplies » offriront une meilleure lisibilité et les caractéristiques essentielles seront exprimées.
set-icones-drupal-9.png

Image : des icones au contraste fort

Les « surfaces »

 

Pour plus de lisibilité, les éléments pourront se superposer, imitant les mises en perspective physique avec ombres et profondeurs.

interfaces-superposables-drupal-9.png

Image : superposition de l’interface

Unité des espacements et des dimensions des éléments

 

La taille des éléments (icônes, boutons…) et marges devrait être bornée, avec une échelle définie à partir de la typographie. Le but est d’avoir une harmonie et une logique dans les proportions de chaque élément.

design-system-espacements-elements-durpal-9.png

Image : Unité dans l’espacement des éléments

Les composants

Les boutons et dropdown

 

Les boutons ont été revus afin d’être mieux identifiés comme éléments cliquables. Leur taille a été déclinée pour une intégration parfaite selon les tailles d’écran et les emplacements d’intégration.

design-system-boutons-drupal-9.png

Les champs et éléments de formulaires

 

Dans cette version de l’interface d’administration de Drupal, les efforts sur l’UX sont aussi portés sur les field label, checkbox et boutons radio. La volonté est de garder des champs et labels sobres, comportant des éléments graphiques permettant de les identifier comme champs éditables.

Les feedbacks sont assez poussés avec des résultats graphiques pour différents états : élément actif, hover, focus, erreur, désactivé, inactif et informations requises.

retours-interactifs-elements-interface.png

Image : les feedbacks sont plus clairs sur les éléments

Les tableaux

La taille des lignes a été revue pour offrir plus de lisibilité aux textes. Des icônes sont intégrées dans les éléments de l’entête du tableau pour indiquer s’il est possible de trier ou filtrer le contenu.

tableaux-interface-administration-drupal-9.png

Image : Des tableaux plus lisibles

Les messages d’alerte

Un large bandeau gauche intégrant un logo et une fine bordure entourent le message, laissant les autres éléments du texte lisibles, comme les liens ou encore le graissage du texte. Cette solution convient aux longs et couts messages.

message-back-office-drupal-9.png

Image : des messages d’alertes plus visibles

L’entête

Pour une meilleure expérience de navigation, le fil d’Ariane est placé au-dessus du titre de la page en cours d’édition. L’utilisateur devrait donc plus facilement se repérer.

entete-page-administration-drupal-9.png

Image : réorganisation du fil d’Ariane

Les pages de navigation (listes)

 

Les pages de navigation profitent de changements mineurs, mais l’accent est mis sur la lisibilité. Comme ici avec un listing plus lisible : moins d'éléments, des espacements plus importants, des contrastes plus importants entre les textes.

page-structure-claro-D8.png

Image : Nouvelle interface Drupal 8.8 vs Drupal 8

Les éléments « accordéons »

 

L’objectif du « Design System » est aussi d’unifier les éléments et menus « accordéons » à l’aide de comportements et propriétés similaires. Les différentes versions dans l’administration utiliseront les mêmes directions pour les flèches (orientées vers la droite une fois l’élément réduit, orientées vers le bas une fois l’élément ouvert). Le texte des étiquettes aura pour grandeur 16px.

accordeons-administration-drupal-9.png

Image : unification des menus « accordéon »

Les pages

Les pages d’édition de nœud

Pour ces pages, la taille du texte a été revue, l’espacement des lettres augmenté, les couleurs sont plus claires et globalement les éléments sont plus simples avec moins d’effets au niveau du CSS. La mise en surbrillance des éléments actifs permet en un coup d’œil à l’utilisateur de voir ou il en est.

edition-page-drupal-9.png

Les pages listant le contenu

Plus claire, cette page reprend les caractéristiques des composants : le bouton « ajouter du contenu » est mis en avant, les espacements du tableau plus importants, la possibilité de trier le tableau est perceptible. La section de sélection de filtres est mise en avant avec une bordure et le numéro de page est plus visible.

page-administration-drupal-9.png

Capture écran : Drupal.org / MyConsulting.digital