Nous avons testé Claro, nouveau thème d'admin Drupal 8 et 9

Samedi 11 Avril 2020

Nous avons testé Claro, le nouveau thème d'administration (backend - Admin Thème) avec Drupal 8.8 qui anticipe son adoption dans Drupal 9. Et nous sommes séduits !...

Drupal Admin Thème - Image d'agrément

Un grand besoin de nouveauté côté Administration

Drupal est un CMS puissant mais complexe, difficile de le nier. En comparaison avec d'autres CMS connus (Wordpress pour ne pas le citer), son interface d'administration peut sembler intimidante au premier abord. Et soyons franc, elle le reste encore par la suite.

C'est toute la force de ce CMS que de permettre un grand nombre de choses uniquement via l'interface d'administration mais il n'est pas possible de tout simplifier malheureusement.

Actuellement en version 8, la version 9 arrivant pour cet été, il faut se rappeler que l'interface d'administration que nous utilisons en ce moment a été pensée et réalisée pour la sortie de Drupal 7, ce qui fait presque 10 ans... Ce qui dans le web se rapproche du siècle.

Claro : la future interface d'administration par défaut

Voici donc l'interface utilisateur améliorée de Drupal Admin : Claro. Elle est issue de la  JavaScript and Admin UI Modernization initiative, l'une des nombreuses équipes qui travaillent sans cesse à améliorer Drupal sur différents points.

Pour les curieux, voici le lien figma vers les maquettes toujours en perpétuelle évolution.

Principes et caractéristiques du thème Claro

L'idée générale de la  JavaScript and Admin UI Modernization initiative est de rendre Drupal compatible avec les applications découplées et de faciliter la navigation pour les utilisateurs finaux. 

Depuis le lancement de Drupal 8.8, le thème d'administration Claro a été introduit comme une nouvelle expérience et comme une première version à venir avec le support natif de Composer.

Des fonctionnalités telles qu'une nouvelle palette de couleurs, des contrastes plus élevés, la compatibilité avec les écrans tactiles, des pages de contenu redessinées, des fichiers et des widgets de téléchargement d'images ont été planifiées et réalisées avec Claro. 

Cette initiative est un objectif lointain car sa réalisation peut prendre plusieurs années. Elle vise principalement à mettre à jour les APIs de Drupal et le code JavaScript sous-jacent.

C'est pourquoi Claro est apparu comme une première version de cet objectif. Ce nouveau thème suit les lignes directrices du nouveau design du thème d'administration de Drupal 8, dont voici quelques exemples :

  • des formes précises et des contrastes accessibles ;
  • une hiérarchie et des relations claires entre les éléments ;
  • un objectif clair pour chaque élément ;
  • l'utilisation rationnelle de l'espace négatif ;
  • une lisibilité optimale ;
  • des couleurs plus gaies.

Regardez cette dernière mise à jour sur le nouveau thème d'administration de Drupal 8 (Claro) :

Sauter le pas ?

Si votre site ne fait pas appel à beaucoup de modules contribués, vous pouvez y aller et choisir ce nouveau thème pour votre administration, vous ne le regretterez pas. Il couvre toute l'administration par défaut.

Dans le cas contraire, nous vous conseillons de bien tester et de vérifier que vous pourrez faire marche arrière facilement. Jusqu'à peu le module Paragraphs que nous utilisons assez fréquemment posait problème avec nouveau thème. La version 8.8 a amélioré les choses pour des cas simples.

Peut-être que la version 8.9 / 9.0 résoudra ces problèmes sur l'ensemble des modules ?

En attendant clients ou pas, si vous avez des soucis avec votre interface d'administration Drupal, n'hésitez pas à nous contacter.

Ressources -

Historique des travaux 


Les travaux ont été débattus dans drupal.org pour permettre aux utilisateurs précoces de commencer à utiliser les versions préliminaires du thème. Claro est également inclus dans le profil d'installation Lightning. Il est par conséquent utilisé par près de 400 sites. L'équipe de Drupal a également reçu des rapports de bugs indiquant clairement que Claro avait été utilisé sur des sites en production.


L'une des principales raisons pour laquelle les versions préliminaires de Claro ont pu être utilisées est qu'il a été conçu sur Seven. Les composants ou les interfaces utilisateur qui n'ont pas été mis à jour sont restés fonctionnels pendant tout le processus. Pour rendre les interfaces plus attrayantes, Claro utilise un jeu de couleurs plus froid et offre un contraste de couleurs plus élevé. Les nouveaux modèles rendront également Drupal plus facile à utiliser pour des écrans tactiles en augmentant la taille de tous les contrôles de formulaire. Le nouveau design couvre également les composants frontaux, tels que la barre d’outils, la modification rapide et les liens contextuels.


Le travail a été facilité par l'utilisation de Figma, permettant à plusieurs designers de travailler en même temps, et d'annoter le travail produit en groupe.

 

Les composants


Une fois l'identité de l'interface établie, les composants ont été déclinés. La méthode utilisée est celle dite "Atomic Design" : décliner des micro-éléments jusqu'aux interfaces finales (atomes > molécules > organismes > templates > page.


> Boutons et champs de saisie - Ils ont été revus afin d'être mieux identifiés comme éléments cliquables appartenant à une hiérarchie. Dans cette version de l’interface d’administration de Drupal, les efforts sur l’UX sont aussi portés sur les champs label, checkbox et boutons radio. La volonté est de garder des champs et libellés sobres, comportants des éléments graphiques permettant de les identifier comme champs éditables. Les états sont plus facilement identifiables : élément actif, hover, focus, erreur, désactivé, inactif, etc.

> Les tableaux - La taille des espacements entre les lignes a été revue afin de fournir une meilleure facilité de lecture. Des indices de lectures, comme des icônes, ont été insérés dans les en-tête de tableaux afin d'indiquer des options supplémentaires (trier, sens du tris, etc).

> Les messages d'alertes - Un large bandeau foncé intégrant une bande de couleur et un énoncé entourent le message. 

> Barre de navigation, liste, accordéons - L'objectif est d'unifier cet ensemble d'éléments, tout en catégorisant le comportant de chacun.

 

Les pages


Une fois chaque composant établi, ses comportements et variations, voici les pages (ou le template) :

> Les pages d’édition de contenus - Le changement de perception repose sur l'augmentation de la taille du texte, l’espacement accru, la simplification des éléments et les couleurs (plus claires). De cette façon, le contenu aura plus de pertinence car seuls les éléments ciblés, actifs ou cliquables sont mis en surbrillance.

> Les pages listant le contenu / article - L’augmentation de la taille du texte et de la hauteur minimale de la ligne, ainsi que la palette de couleurs concentrent l'attention sur les éléments pouvant faire l’objet d’une action ou sur le contenu d’une interface utilisateur occupée. Dans cette page, le composant de pagination et l'élément "ajouter du contenu" sont bien plus visibles.