Drupal
07/07/2022

Améliorer l'expérience utilisateur d'un back-office Drupal 9

Site builder experience
Historiquement, Drupal est connu pour être un CMS puissant, et ses interfaces d'administration sont parmi les meilleurs en termes d'accessibilité. Mais parce qu'il peut faire beaucoup, son interface d'administration peut être difficile à utiliser si elle n'est pas a minima un peu personnalisée. Suite de nos avancées sur l'expérience de la contribution...

Moderniser le thème d'administration avec Gin

Heureusement, nous avons vu depuis quelques années que la communauté Drupal a mis la question de l'ergonomie en avant et que c'est un véritable sujet. Drupal 8 et 9 ont apporté leurs lots d'amélioration et depuis peu, nous avons de nouveaux thèmes par défaut en front (Olivero) mais surtout en back (Claro) en versions stables.

Au-delà du thème d'administration, il existe de nombreux modules destinés à améliorer l'expérience utilisateur en back-office. Nous en utilisons déjà certains par défaut, d'autres sont toujours à l'étude.

Gin : comme Claro mais en mieux !

De multiples sites Drupal utilisent le thème d'administration par défaut, Seven.

Copie d'écran d'un back-office avec le thème Seven

Vous le reconnaissez ?

Le thème d'administration par défaut de Drupal, Seven, laisse beaucoup à désirer.

Seven est stable et fiable, mais donne l'impression d'avoir été créé il y a bien longtemps, et vous auriez à peu près raison, car il est là depuis au moins Drupal 6...

Claro (désormais stable et par défaut) inclus dans la dernière version de Drupal 9 est lui bien de son temps !

copie écran de claro

C'est déjà mieux, plus lisible et agréable à l’œil.

Il existe cependant un autre thème d'administration Gin (un sous-thème de Claro) qui va encore plus loin.

Il s'agit d'un sous-thème de Claro qui apporte encore plus d'élégance. Comme il s'agit d'un module contribué qui ne fait pas partie du noyau de Drupal, son développement est plus rapide que celui de Claro. Gin est un thème largement utilisé, stable et bien maintenu.

Il y a peu, nous le déconseillons uniquement dans certains cas, par exemple pour les sites disposant de nombreux paragraphes imbriqués les uns dans les autres, ce qui posait des problèmes d'affichage en back-office. Mais les choses se sont grandement améliorées.

Copie écran du thème Gin

Gin est un thème d'administration qui apporte un aspect propre et moderne à l'interface graphique de Drupal.

Simplifier l'interface utilisateur

Notre interface d'administration est désormais plus moderne, plus lisible, mais elle n'en reste pas moins touffue voir intimidante pour l'administrateur néophyte. En effet, le back-office de Drupal propose de multiples fonctionnalités, mais toutes ne sont pas forcément nécessaires au jour le jour ou pour certains types de contributeurs.

Faire le ménage

Si, par exemple, votre site Web n'utilise pas la fonctionnalité "Promu en page d'accueil" ou "Épinglé en haut des listes", vous pouvez supprimer complètement l'onglet de travail Options de promotion.

Supprimez les composants de formulaire inutiles à l'aide de la fonction Gérer l'affichage des formulaires

Désactiver les champs inutiles

Dans la capture d'écran ci-dessus, nous nettoyons le formulaire Article dans Structure > Content Types > Article > Manage form display :

Aussi, bien souvent, dans le cas des articles, il n'est pas nécessaire de les lier à un menu, il existe sans doute un bloc "derniers articles" en page d'accueil ou une Vue "Tous les articles".

On peut dans Structure > Content Types > Article dans l'onglet principal décider de ne pas afficher la section menus.

Désactiver l'ajout dans les menus

Dans cette même section, on peut également décider de désactiver la prévisualisation si on préfère d'abord tester ses pages en "non publié" (généralement plus fidèle).

Interface saisie simplifiée avec Gin

Et voilà le résultat !

Se débarrasser des commentaires

Aujourd'hui, la plupart des sites n'ont plus cette fonctionnalité.

On peut tout à fait l'exclure en affichage, en configurant un à un les types de contenus, mais si l'on est sûr de ne pas en avoir besoin, autant la désactiver.

Attention, si vous voulez pouvoir le supprimer, il faut d'abord vérifier qu'aucun de vos types de contenus ne contient déjà les champs "commentaires".

Commentaires désactivés

Plus d'onglet commentaire dans la liste des contenus !

Limiter les formats de texte autorisés

Drupal permet de créer de nombreux formats de texte, dit plus simplement un grand nombre d'interfaces WYSIWYG (CKEDITOR) avec plus ou moins de fonctionnalités.

C'est très bien, mais dans certains cas cela déroutera encore plus les contributeurs qui se demanderont à quoi cette zone sous chaque champ de saisie riche peut bien servir ???

Choix des formats de texte dans un champ wysiwyg

Il est possible si nécessaire de désactiver cette fonctionnalité pour ne plus laisser le choix aux éditeurs. Cela nécessite toutefois d'installer un module supplémentaire : Allowed Formats.

Une fois le module installé, de nouvelles options d'affichage dans Structure > Types de contenus permettent de simplifier / limiter le choix des formats textes.

Choix des formats de texte à afficher

On choisit dans les paramètres des champs le format voulu.

désactivation la liste de sélection et du champ d'aide.

Si nécessaire, on peut même désactiver la liste de sélection et le champ d'aide.

Interface d'insertion simplifiée

Et voilà, c'est quand même plus propre !

L'aide qui n'en était pas (vraiment) une...

La page d'aide est une liste des pages d'aide de chaque module activé, mais elle s'adresse à des profils techniques comme les développeurs et non à des éditeurs de contenus. Comment éviter les fausses joies ?

C'est assez compliqué, car pour le moment le fait dans le système de droits de Drupal de pouvoir accéder à cette aide est lié au fait de pouvoir voir les pages d'administration...

En attendant que ce problème soit résolu par la communauté, si vous utilisez la barre d'administration spécifique de Gin, il est possible de la masquer en CSS.

Sur la page du module sur drupal.org, il est mentionné qu'on peut facilement customiser le thème de Gin en ajoutant un fichier nommé gin-custom.css dans /sites/default/files.

.menu-item.menu-item__help-main {

display : none ;

}

Attention de bien versionner ce fichier dans votre dépôt Git (il ne l'est pas dans le fichier .gitignore fourni par défaut)

Et vous voilà le menu d'aide inutile masqué !

Barre de menu d'administration sans le champs aide

À bientôt pour plus d'astuces et modules utiles.