L'art de la communication efficace sur Drupal

Rédigé par Teddy Vermeulin le 08/05/2024

Découvrez comment afficher des messages à l'attention des utilisateurs, qu'ils soient informatifs, d'avertissement ou d'erreur. Vous pourrez ainsi facilement communiquer des retours sur les actions effectuées, améliorer l'expérience utilisateur et déboguer plus efficacement en fournissant des informations claires et visibles directement dans l'interface de Drupal.

Les messages dans Drupal

Améliorer l'expérience utilisateur

Les messages affichés aux utilisateurs jouent un rôle crucial dans l'approche UX/UI d'un site web. Grâce à la fonction \Drupal::messenger()->addMessage, les développeurs peuvent communiquer efficacement avec les utilisateurs en leur fournissant des informations claires et contextuelles. Ces messages permettent de confirmer les actions réussies, d'avertir en cas de problème ou de fournir des informations importantes, ce qui rassure l'utilisateur et renforce sa confiance dans le site.

En offrant un retour immédiat et pertinent, ces notifications améliorent la navigation et l'interaction, rendant l'expérience utilisateur plus fluide et intuitive. L'intégration judicieuse de ces messages contribue à une interface utilisateur plus réactive et conviviale, essentielle pour fidéliser les utilisateurs et optimiser leur engagement.

En pratique

Drupal fournit en son coeur une fonction qui permet la réalisation de cette action :

\Drupal::messenger()->addMessage('Mon message', 'type_de_message');

Par défaut, Drupal propose trois types de messages :

Le message d'information : status
Utilisés pour le contenu neutre et informatif.
Le message d'avertissement : warning
Utilisé pour les messages d'avertissement non destructifs.
Le message d'erreur : error
Utilisé pour les erreurs et les actions dangereuses.

Mais vous pouvez également créer vos propres typologies de message. Il est par exemple souvent pertinent dans l'expérience utilisateur d'ajouter le type de message success, pour les actions et informations positives ou réussies.


// Le message d'information : status
\Drupal::messenger()->addMessage('Mon message');
\Drupal::messenger()->addStatus('Mon message');

// Le message d'avertissement : warning
\Drupal::messenger()->addMessage('Mon avertissement', 'warning');
\Drupal::messenger()->addWarning('Mon avertissement');

// Le message d'erreur : error
\Drupal::messenger()->addMessage('Mon erreur', 'error');
\Drupal::messenger()->addError('Mon erreur');

// Le message de succès: success
\Drupal::messenger()->addMessage('Mon message', 'success');

// Type custom
\Drupal::messenger()->addMessage('Mon message', 'custom');

Intégration twig

Pour modifier l'apparence de vos messages, il vous suffit du surcharger dans votre thème le fichier status-messages.html.twig.

Ajouter ce fichier dans :

custom_theme
- templates
  - misc
    - status-messages.html.twig

status-messages.html.twig


{#
/**
 * @file
 * Theme override for status messages.
 *
 * Displays status, error, and warning messages, grouped by type.
 *
 * An invisible heading identifies the messages for assistive technology.
 * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
 * for info.
 *
 * Add an ARIA label to the contentinfo area so that assistive technology
 * user agents will better describe this landmark.
 *
 * Available variables:
 * - message_list: List of messages to be displayed, grouped by type.
 * - status_headings: List of all status types.
 * - attributes: HTML attributes for the element, including:
 *   - class: HTML classes.
 * - title_ids: A list of unique ids keyed by message type.
 *
 * @see claro_preprocess_status_messages().
 */
#}
<div data-drupal-messages class="messages-list">
  <div class="messages-list__wrapper">
    {% for type, messages in message_list %}
      {%
        set classes = [
          'messages-list__item',
          'messages',
          'messages--' ~ type,
        ]
      %}
      {%
        set is_message_with_title = status_headings[type]
      %}
      {%
        set is_message_with_icon = type in ['error', 'status', 'warning']
      %}

      <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
        {% if type == 'error' %}
          <div role="alert">
        {% endif %}
          {% if is_message_with_title or is_message_with_icon %}
            <div class="messages__header">
              {% if is_message_with_title %}
                <h2 id="{{ title_ids[type] }}" class="messages__title">
                  {{ status_headings[type] }}
                </h2>
              {% endif %}
            </div>
          {% endif %}
          <div class="messages__content">
            {% if messages|length > 1 %}
              <ul class="messages__list">
                {% for message in messages %}
                  <li class="messages__item">{{ message }}</li>
                {% endfor %}
              </ul>
            {% else %}
              {{ messages|first }}
            {% endif %}
          </div>
        {% if type == 'error' %}
          </div>
        {% endif %}
      </div>
      {# Remove type specific classes. #}
      {% set attributes = attributes.removeClass(classes) %}
    {% endfor %}
  </div>
</div>

Pour aller plus loin

L'utilisation des Toasts de Bootstrap 5

Le composant Toasts de Bootstrap est un outil puissant pour afficher des notifications non intrusives aux utilisateurs. Conçus pour être flexibles et légers, les toasts permettent de présenter des messages contextuels de manière élégante et discrète. Ils apparaissent généralement en bas de l'écran et disparaissent automatiquement après un certain temps, assurant ainsi que l'information est visible sans perturber l'expérience de l'utilisateur.

Les toasts peuvent contenir du texte, des liens et même des boutons pour des actions rapides, offrant une grande flexibilité pour répondre aux divers besoins de communication. Grâce à leur conception réactive, les toasts s'adaptent parfaitement aux différents types d'écrans, garantissant une expérience utilisateur cohérente sur les appareils mobiles et de bureau.

Utiliser les toasts de Bootstrap améliore l'interaction utilisateur en fournissant des feedbacks immédiats et pertinents, tout en maintenant une interface propre et sans encombrement.

Mise en place

custom_theme
- templates
  - misc
    - status-messages.html.twig
  - region
    - region--highlighted.html.twig

region--highlighted.html.twig


{%
  set classes = [
  'region',
  'region-' ~ region|clean_class,
  'position-absolute p-3'
]
%}
{% if content %}
  <section id="highlighted" {{ attributes.addClass(classes) }}>
    {{ content }}
  </section>
{% endif %}

status-messages.html.twig


{#
/**
 * @file
 * Theme override for status messages.
 *
 * Displays status, error, and warning messages, grouped by type.
 *
 * An invisible heading identifies the messages for assistive technology.
 * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
 * for info.
 *
 * Add an ARIA label to the contentinfo area so that assistive technology
 * user agents will better describe this landmark.
 *
 * Available variables:
 * - message_list: List of messages to be displayed, grouped by type.
 * - status_headings: List of all status types.
 * - attributes: HTML attributes for the element, including:
 *   - class: HTML classes.
 */
#}
<div class="toast-container" data-drupal-messages>
  {% block messages %}
    {% for type, messages in message_list %}
      {% for message in messages %}
        <div class="toast {{ 'toast--' ~ type }}" data-bs-config='{% if type == 'error' %}{"autohide":false}{% else %}{"delay":10000, "autohide":true}{% endif %}'  aria-atomic="true" {% if type == 'error' or type == 'warning' %}role="alert" aria-live="assertive"{% else %}role="status" aria-live="polite"{% endif %}>
          <div class="toast-header pe-0">
            {% if type == 'status' %}
              <i class="toast-icon fa-solid fa-circle-info text-info me-2 fa-lg"></i>
            {% elseif type == 'warning' %}
              <i class="toast-icon fa-solid fa-circle-exclamation text-warning me-2 fa-lg"></i>
            {% elseif type == 'error' %}
              <i class="toast-icon fa-solid fa-circle-xmark text-danger me-2 fa-lg"></i>
            {% elseif type == 'success' %}
              <i class="toast-icon fa-solid fa-circle-check text-success me-2 fa-lg"></i>
            {% endif %}
            <span class="toast-type fw-medium">
              {% if type == 'status' %}
                {{ "Info"|t }}
              {% elseif type == 'warning' %}
                {{ "Warning"|t }}
              {% elseif type == 'error' %}
                {{ "Error"|t }}
              {% elseif type == 'success' %}
                {{ "Success"|t }}
              {% endif %}
            </span>
            <button type="button" class="ms-auto btn btn-link btn-link--close text-decoration-none px-3" data-bs-dismiss="toast" aria-label="Close">
              <i class="fa-regular fa-xmark"></i>
            </button>
          </div>
          <div class="toast-body">
            <p>{{ message }}</p>
          </div>
        </div>
      {% endfor %}
      {# Remove type specific classes. #}
      {% set attributes = attributes.removeClass(classes) %}
    {% endfor %}
  {% endblock messages %}
</div>


/**
 * @file 
 */

import { Toast } from "bootstrap";

((Drupal) => {
  
  /*
   * Toast behaviors
   */
  Drupal.behaviors.Toast = {
    attach() {
      const triggerToast = () => {
        const toastElList = document.querySelectorAll(".toast");
        [...toastElList].map((toastTriggerEl) => {
          toastTriggerEl.addEventListener("hidden.bs.toast", (e) => {
            e.target.remove();
          });
          const toastEl = Toast.getOrCreateInstance(toastTriggerEl);
          toastEl.show();
          return toastEl;
        }, {});
      };
      triggerToast();
    },
  };

})(Drupal);

En résumé

L'importance de la communication efficace avec les utilisateurs ne peut être sous-estimée dans le développement web. Les outils mis en avant dans cet article jouent un rôle crucial dans l'amélioration de l'expérience utilisateur. Ils permettent de fournir des retours immédiats et contextuels, renforçant la confiance et l'engagement des utilisateurs.

Le secret pour bien gérer l'expérience utilisateur ? C'est comme parler à une belle-famille : il faut toujours être clair, direct et, surtout, savoir quand se taire.

Lettre d'informations

Restez connecté•e avec nos dernières actualités et bien plus.

S'inscrire

Technologies

Drupal
Bootstrap