Makina Blog

Le blog Makina-corpus

Améliorer l'ergonomie du back-office Drupal


Dans cet article, quelques pistes pour améliorer l'ergonomie du back-office de votre site Drupal vont vous être présentées.

Drupal est aujourd'hui reconnu comme CMS stable, sécurisé et puissant. Les principales critiques le visant, justifiées, concernent souvent son back-office souvent considéré comme triste, vieux ou "pas sexy" 😉

Heureusement, de nombreux moyens existent pour améliorer l'expérience des utilisateurs qui gèrent le contenu sur le site.

Ne pas utiliser le back-office

D'accord, c'est un peu tricher. Mais rien ne vous oblige à utiliser l'interface complète du back-office, notamment pour les utilisateurs qui sont simplement créateurs / éditeurs de contenus.

Dans Drupal, vous n'avez accès aux fonctionnalités que si la permission associée vous est accordée. Vous pouvez donc assez simplement désactiver l'accès à la barre d'administration :

Drupal Toolbar permissions

Les utilisateurs doivent tout de même pouvoir modifier les contenus, mais pour ça le module "Contextual Links" peut simplement être utilisé, fourni avec le cœur de Drupal, celui-ci permet de modifier directement le contenu affiché sur une page :

Drupal Contextual Links permission

Le rendu sur le thème de front-office est en général un crayon ouvrant un menu contextuel permettant plusieurs opérations, correspondant aux permissions que vous avez :

Drupal Contextual Links crayon

Enfin, la dernière étape est d'éventuellement permettre aux utilisateurs d'ajouter un nouveau contenu. Pour cette étape, la solution que nous adoptons régulièrement est d'ajouter un lien de création sur les pages de Vues, du module Views du cœur de Drupal, listant les contenus d'un certain type. Là encore, l'idée est de permettre aux utilisateurs d'ajouter un contenu sur une page où ils sont déjà naturellement listés. Ainsi, un contexte précis est toujours respecté.

Utiliser un thème d'administration dédié

De même que le changement de thème du front-office est possible, le thème dédié au back-office peut aussi être utilisé (cf. menu Apparance) :

Choix du thème d'administration Drupal dans le back-office

En 2011 Seven, comme son nom l'indique, est un thème qui a été introduit en Drupal 7. S'il reste le thème de back-office de Drupal 9, d'autres thèmes sont utilisables, et notamment celui qui est amené à devenir le nouveau thème d'administration en Drupal 10 : Claro (présent en tant que thème expérimental en Drupal 9) :

Screenshot du thème Drupal Claro

D'un style un peu plus moderne, nous pouvons aussi lui associer un autre thème issu de la communauté, Gin, qui ajoute une barre latérale reprenant un style ressemblant à Wordpress :

Barre latérale Gin (en complément du thème Claro)

Attention cependant : Gin est encore en alpha et son utilisation peut provoquer un certain nombre de problèmes de styles ou de scripts, notamment avec un module de présentation plus avancé comme Layout Builder.

Utiliser les fonctionnalités natives de Drupal pour personnaliser l'édition des contenus

Textes d'aide

Souvent, lorsque nous intervenons en maintenance sur des projets, nous constatons que certains besoins auraient pu être réalisés en utilisant des fonctions natives au prix probablement d'une légère différence dans le rendu utilisateur, mais un temps de développement non négligeable est gagné. C'est le cas notamment des textes d'aide sur les formulaires de création de contenu.

En effet, tous les champs des entités Drupal peuvent contenir un texte d'aide, et il ne tient qu'à vous de mettre en valeur ce texte d'aide avec un peu de CSS plutôt que de développer des fonctionnalités additionnelles simplement pour un rendu un peu différent :

Drupal field help text

 

Accompagnement des utilisateurs

Depuis Drupal 8, le cœur de Drupal inclut également un module d'aide contextuelle appelé "Tour" :

Drupal Tour module

Ces "tours" permettent de mettre en valeur certaines zones d'un formulaire ou d'une page afin d'expliquer à l'utilisateur ce qui est attendu de lui. C'est particulièrement intéressant dans le cadre d'une application un peu métier pour permettre à l'utilisateur de découvrir les fonctionnalités de l'application lors de sa première visite.

Exemple de Tour

Nous pouvons les créer via l'interface graphique de Drupal en ajoutant le module communautaire Tour UI, un développeur se contentera souvent de fournir le fichier .yml de définition du tour lui-même.

Organiser différemment les formulaires

Dans un écran d'édition de contenu, en se contentant du cœur de Drupal, les champs sont simplement listés les uns après les autres, sans plus de mise en forme.

La première étape est donc déjà de les ordonner logiquement, en fonction de la tâche à accomplir, et de façon uniforme selon les types de contenus : les champs "Langue", "Titre", "Image principale" toujours au même endroit et dans le même ordre, notamment.

En ajoutant le module "Field group", les champs peuvent être regroupés pour découper les formulaires de façon encore plus explicite, par exemple au sein de fieldsets.

Simplifier les formulaires

Un autre moyen de faciliter l'utilisation du back-office pour les contributeurs est de guider les utilisateurs en enlevant de l'affichage les champs que les utilisateurs n'ont pas besoin de modifier.

Une première façon de le faire est d'utiliser a bon escient les permissions de Drupal. En effet, par défaut Drupal n'affiche pas les champs ou liens que vous n'avez pas le droit d'utiliser. En configurant correctement les permissions, vous diminuez les éléments affichés dans les formulaires, et vous diminuez d'autant la charge cognitive des contributeurs.

Une autre façon, là encore en utilisant les fonctions natives de Drupal, notamment la gestion de l'affichage ou "Manage Form Display", vous pouvez créer différents affichages de formulaires et afficher, pour le même contenu, des formulaires différents selon les rôles de l'utilisateur (par exemple en utilisant un module comme "Form Mode Control" ou "Form mode manager").

Naturellement, toutes ces opérations peuvent également se faire par du code grâce à hook_form_alter().

Simplifier les tâches complexes

Parfois, la création de certains contenus demandent la création de contenus annexes qui seront ensuite référencés depuis ce contenu.

Par exemple, nous pouvons créer directement le contenu annexe depuis le contenu "principal" au moyen de solutions telles qu'"Inline Entity Form".

Utiliser le contexte d'exécution

Dans la plupart des sites, nous trouvons des pages qui listent des contenus d'un même type, souvent les pages d'accueil de rubrique. Une bonne pratique que nous mettons régulièrement en place est d'ajouter sur ces pages un lien vers la création d'un nouveau contenu de ce type, uniquement pour les utilisateurs autorisés à créer ces contenus.

Plutôt que de se promener dans le back-office, les utilisateurs peuvent directement enrichir le contenu du site depuis celui-ci de façon naturelle, nous rejoignons ici notre premier point qui vous suggérait de ne pas utiliser le back-office. Une des maximes de l'ergonomie web se retrouve ici, tirée d'un excellent livre, "Don't Make Me Think".

Et dans le futur ?

Les équipes Drupal ont conscience que leur back-office n'est pas toujours le plus facile à utiliser. Il y a régulièrement Des modifications d'organisation ou de vocabulaire utilisé sont souvent effectuées.

Vous pouvez y contribuer sur les tickets suivants :

Enfin, les équipes travaillent sur une interface de back-office totalement repensée, sur laquelle vous pouvez également donner votre avis : Directional Feedback for the Next-Gen Admin UI avec par exemple une prévisualisation du contenu directement dans l'interface de création :

Futur back-office Drupal avec prévisualisation du contenu dans l'écran d'édition

À suivre !

Conclusion

Comme vous le constatez, de nombreuses options existent pour améliorer le back-office de Drupal, et si vous manquez d'imagination, contactez-nous !

Formations associées

Formations Drupal

Formation Drupal Administrateur

Toulouse Du 22 au 24 mai 2024

Voir la formation

Formations Drupal

Formation Drupal Développeur

À distance (FOAD) Du 2 au 4 avril 2024

Voir la formation

Actualités en lien

Image
Migration Drupal 7 à Drupal 10
04/04/2024

Migration d'un site Drupal 7 en Drupal 10

Trucs, astuces et "bouts" de code pour migrer votre site web de Drupal 7 à Drupal 10. Compte-rendu d'une conférence donnée au Drupalcamp Rennes 2024.

Voir l'article
Image
Drupal 9
29/06/2022

Cartographie en Drupal 9

Les différentes solutions techniques pour ajouter de la cartographie à vos sites Drupal 9.

Voir l'article
Image
Drupal 9
04/11/2021

Migration de Drupal 8 à Drupal 9

Retour d'expérience sur la montée de version de plusieurs sites de Drupal 8 à Drupal 9.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus