Comment améliorer l'UX de contribution sur le CMS Drupal ?

Optimiser l'expérience utilisateur (UX) représente une priorité essentielle dans le domaine du développement Web. Cela permet de développer des sites web agréables et efficaces.

Et, pour tout développeur, il est important de ne pas négliger l’expérience de contribution car c’est celle qui va affecter directement ses clients.

Voici une partie de ce que nous mettons en place, sur les projets Drupal chez Adimeo, dans le but de rendre l’expérience d’écriture, de paramétrage et d’administration la plus fluide possible.

Naviguer, Contribuer, et Gérer : L'UX dans le Monde du Web et des CMS

L'UX (Expérience Utilisateur) d'un site internet désigne l'ensemble des interactions et des émotions ressenties par les visiteurs lorsqu'ils interagissent avec ce site.
Elle englobe la facilité de navigation, la convivialité, la rapidité de chargement des pages, la cohérence du design, la clarté du contenu, et l'efficacité globale pour atteindre les objectifs de l'utilisateur, comme trouver des informations ou effectuer des actions spécifiques.

Dans le contexte d'un CMS (Système de Gestion de Contenu) tel que Drupal, l'UX de contribution se concentre sur l'expérience des utilisateurs qui créent, éditent et publient du contenu sur le site. Cela inclut la convivialité de l'interface d'administration du CMS, la facilité d'ajout de contenu, la gestion des médias, la structuration des informations, et la possibilité de collaborer efficacement si plusieurs utilisateurs sont impliqués.

Une bonne UX de contribution dans un CMS vise à rendre le processus de création de contenu aussi simple et intuitif que possible, facilitant ainsi la gestion et la mise à jour du site internet.

Simplification de la Navigation dans l'Interface d'Administration de Drupal

Nous allons ici explorer les divers outils que nous utilisons pour simplifier la navigation dans l'interface d'administration de Drupal.

Le module contribué Admin Toolbar

Ce module de la communauté est un incontournable qui permet d’améliorer l’interface d’administration. En effet, il dynamise la barre de menu d’administration, en la transformant en menu déroulant, offrant un accès rapide à toutes les pages du back-office. Voir la documentation officielle.

Un menu dédié et personnalisé en fonction des droits

Le menu d’administration de Drupal est très riche, et très pratique pour les site-builders. En revanche, un contributeur éditorial peut se perdre dans le vocabulaire et le nombre de liens, qui pour la plupart ne le concernent même pas.

Cela fait maintenant des années que nous avons décidé de mettre en place un menu de contribution dédié aux contributeurs des sites Drupal que nous développons.
Pour cela, nous ajoutons programmatiquement un menu à la barre d’administration. Néanmoins, il existe depuis un module de la communauté qui permet de le faire encore plus facilement : Toolbar Menu.

Nous nommons ce menu « Contribuer » et le plaçons à côté de « Gérer » comme ceci :

Dedans, nous ne mettons que les liens qui concernent les contributeurs du site que nous développons.
Cette fonctionnalité, toute simple et facile à mettre en place, réduit considérablement le temps nécessaire de formation que nous dispensons à nos clients.
Un site ne gardant pas toujours les mêmes contributeurs tout au long de sa vie, cela facilite également grandement la prise en main du back-office pour de nouvelles personnes arrivant au sein de l’équipe éditoriale.

Nous ajoutons progressivement les liens dans ce menu via la « Menu API » et ses fichiers « [Nom de mon module].links.menu.yml » qui permettent d’ajouter programmatiquement des liens à des menus existants. Cela permet de les rendre versionnables dans Git, et donc d’avoir les mêmes liens sur toutes les instances, du local à la prod.

Ce fichier YML se présente sous cette forme :

Pour en savoir plus sur les possibilités offertes, voici leur documentation officielle.

La personnalisation de l’accueil des contributeurs

Par défaut, un utilisateur qui se connecte à un site propulsé par Drupal est redirigé vers sa page d’utilisateur. Pour un contributeur, cela n’a pas un grand intérêt, et nous avons donc entrepris, en complément du menu « Contribuer » de modifier ce comportement.

Nos contributeurs sont donc redirigés vers une page, Tableau de bord, créée par un de nos modules interne qui déclare une route et un controller qui affiche toute l’arborescence du menu « Contribuer ».

Le code qui permet d’afficher le menu déplié, comme ci-dessus, est quasiment le même que celui qui affiche la page « Configuration » accessible via le chemin « /admin/config ».
Vous pouvez le trouver dans la méthode « overwiew » du controller « SystemController » du core de Drupal.

La redirection après login est quant à elle gérée par l’ajout d’un gestionnaire de soumission au formulaire de connexion :

/**
 * Form submission handler for user_login_form().
 *
 * Redirects the user to the Adimeo dashboard after logging in
 * (if user has access to admin pages)
 *
 * @param $form
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 */
function _my_module_user_login_submit(&$form, FormStateInterface $form_state) {

  // Check if a destination was set, probably on an exception controller.
  // @see \Drupal\user\Form\UserLoginForm::submitForm()
  $request = \Drupal::service('request_stack')->getCurrentRequest();
  if (!$request->request->has('destination')) {
    if(Drupal::currentUser()->hasPermission('access administration pages')) {
      $url = Url::fromUserInput('/admin/menu-overview/contrib');
      $form_state->setRedirectUrl($url);
    }
  }
  else {
    $request->query->set('destination', $request->request->get('destination'));
  }
}

Faciliter la Création de Contenu sur Drupal : Outils et Bonnes Pratiques

Faciliter la création de contenu est un autre aspect à prendre en compte pour améliorer l'expérience utilisateur sur Drupal. En rendant le processus de création de contenu plus simple, et intuitif, on encourage les contributeurs à produire du contenu de qualité plus rapidement, ce qui contribue à la pertinence et à la fraîcheur du site.

Paragraphs et Paragraphs Browser

« Paragraphs » est un module, très populaire, de la communauté Drupal. Ce module permet de composer des pages à l’aide de blocs de contenu prédéfinis qui peuvent être tout ce que vous voulez, d'un simple bloc de texte, d'une image ou d’une série de chiffres-clefs à un diaporama complexe et configurable. Ces blocs sont réordonnables en drag and drop et permettent une grande flexibilité éditoriale.

En complément de « Paragraphs », nous recommandons l’utilisation du module « Paragraphs Browser ». Ce dernier permet de présenter aux contributeurs la liste des « Paragraphs » disponibles sous forme d’une bibliothèque, avec pour chaque, son nom et une image illustrant son apparence.

Une expérience de création de contenu cohérente

Les formulaires de création de contenus peuvent être disposer de plein de façons différentes, et les développeurs peuvent avoir des préférences différentes. Il est important de mettre en place des règles et de vérifier leurs respects afin d’obtenir une expérience unifiée dans la création des différents types de contenu.

Chez Adimeo, nous utilisons le module «  Field Group » qui donne la possibilité de grouper les champs sous différentes formes : onglets, verticaux ou horizontaux, groupes de champs, accordéons. Les champs d’un contenu sont ensuite regroupés de la manière la plus logique possible, en phase avec la logique métier ou l’ordre d’affichage sur la page de détail. Et nous groupons toujours les champs par onglets verticaux de la façon suivante :

Expliquer ce qui est attendu du contributeur

Les champs de contenu Drupal sont souvent plus complexes qu’un simple titre ou texte d’introduction. Et parfois le nom du champ ne suffit pas à expliquer toutes les subtilités d’affichage ou le type d’information attendu.

C’est pourquoi chez Adimeo, nous portons une attention toute particulière aux descriptions des champs. C’est outil aussi simple que puissant, totalement nécessaire à une expérience de contribution réussie.

Voici quelques exemples :

En complément des descriptions, pour les champs textuels avec un nombre de caractères limités ou conseillés, il est pertinent d’indiquer au contributeur ces informations.

Ainsi, le module « Textfield Counter » permet d’afficher, au fur et à mesure, le nombre de caractères déjà écrits, et le nombre restant.

En conclusion, grâce à ces pratiques et ces outils, nous nous efforçons de rendre Drupal plus convivial et accessible pour les utilisateurs, ce qui contribue à la pertinence et à la fraîcheur des sites web, tout en améliorant la satisfaction de nos clients et de leurs équipes éditoriales.

L'expérience de contribution ne doit pas être sous-estimée, car elle a un impact direct sur la qualité et la vitalité des sites web que nous développons.

Il existe encore de nombreuses autres façons d’améliorer l’UX de contribution d’un site Drupal, parce qu'à l’image de son front-office, son back-office est entièrement extensible et surchargeable.

Si pour vous aussi la qualité d’un projet Drupal réside autant dans la qualité de son code que dans sa facilité de prise en main par ses utilisateurs, rejoignez notre équipe de passionnés et construisez avec nous les sites et les interfaces de demain !

Poursuivez votre lecture avec ces articles de notre blog technique :

• Le cache Drupal : pour une meilleure gestion des performances !
• Drupal : créer une page liste avec filtres, sans utiliser views ?
• La form API de Drupal, késako ?

Crédit photo : scyther5