Système de Bannières et d’Alertes

Que fait Système de Bannières et d’Alertes ?

Objectif

Le Système de Bannières et d’Alertes fournit une méthodologie pour concevoir des couches de communication non persistantes et non superposées. Contrairement aux modales qui bloquent l’utilisateur, les bannières et alertes fournissent des informations critiques (mises à jour de statut, avertissements ou annonces) tout en permettant à l’utilisateur de poursuivre sa tâche en cours. Ce système garantit que les notifications sont visuellement distinctes, correctement priorisées et accessibles.

Cas d’Utilisation

• Communiquer des annonces à l’échelle du site (ex. « Maintenance programmée dans 2 heures »).
• Fournir un retour contextuel dans un formulaire (ex. « Modifications enregistrées avec succès »).
• Avertir les utilisateurs de problèmes de compte (ex. « Abonnement expire dans 3 jours »).
• Notifier les utilisateurs d’erreurs système qui ne bloquent pas toute l’application mais affectent la fonctionnalité (ex. « La synchronisation bancaire est actuellement indisponible »).
• Afficher des « Bannières Marketing » pour des promotions ou le lancement de nouvelles fonctionnalités.

Quand ne PAS Utiliser

• Blocages Critiques : Si l’utilisateur doit agir avant de continuer, utiliser overlay-and-dialog-system (Modale).
• Retour Passif : Pour des mises à jour de statut brèves et de faible priorité (ex. « Lien copié »), utiliser des Toast (voir overlay-and-dialog-system).
• Étiquettes de Données : Pour des indicateurs de statut simples sur un seul élément, utiliser badge-and-tag-system.
• Navigation : Ne pas utiliser les bannières pour des liens de navigation primaires ou secondaires ; utiliser site-navigation-system.

Entrées

1. Gravité du Message : Le message est-il une Erreur, un Avertissement, un Succès ou une Info ?
2. Portée : Est-ce Global (à l’échelle du site) ou Intégré (spécifique à une section/page) ?
3. Possibilité de Fermeture : L’utilisateur peut-il masquer ce message, ou doit-il rester visible ?
4. Action Requise : Le message nécessite-t-il une action de suivi (ex. « Mettre à jour la facturation ») ?
5. Palette de Marque : Couleurs standard pour les états de statut (Rouge danger, Ambre avertissement, etc.).

Sorties

1. Spécification de l’Anatomie de l’Alerte : Définition de l’icône, de la hiérarchie du texte et du placement de l’action.
2. Logique Spatiale : Règles pour l’emplacement des bannières (Haut de la fenêtre, Au-dessus du contenu, ou À l’intérieur d’une section).
3. Matrice d’États : Traitements visuels pour différentes gravités de message.
4. Plan d’Accessibilité : Rôles ARIA et règles de gestion du focus pour les alertes interactives.

Workflow

1. Déterminer le Niveau d’Alerte (Gravité)

Attribuer un état en fonction de l’intention :

• Erreur (Haute Priorité) : Problèmes critiques qui nécessitent une attention mais ne cassent pas la vue.
• Avertissement (Priorité Moyenne) : Problèmes potentiels ou échéances à venir.
• Succès (Faible Priorité) : Confirmation d’une action terminée.
• Info/Annonce : Informations neutres ou mises à jour marketing.

2. Choisir le Motif de Placement

• Bannière Globale (Barre du Haut) : Se trouve tout en haut de la fenêtre. Idéal pour les annonces haute priorité à l’échelle du site.
• Bannière de Page : Se trouve sous l’en-tête global mais au-dessus du contenu de la page. Idéal pour les notifications spécifiques à une page.
• Alerte Intégrée : Se trouve directement dans une section ou à côté d’un composant pertinent (ex. dans un formulaire). Idéal pour le retour contextuel.

3. Concevoir l’Anatomie du Composant

Chaque alerte doit suivre une hiérarchie interne cohérente :

• Icône : Un raccourci visuel pour la gravité (ex. coche pour succès).
• Titre (Optionnel) : Un en-tête en gras pour les alertes plus longues.
• Description : Le message central. Restez concis.
• Action : Un bouton ou un lien pour l’étape suivante.
• Bouton de Fermeture : Un bouton « X » si l’alerte n’est pas critique.

4. Établir les Règles d’Interaction

• Persistance : Déterminer si l’alerte disparaît après une action, après un délai (déconseillé pour les bannières), ou seulement lorsqu’elle est fermée manuellement.
• Gestion des Changements de Mise en Page : S’assurer que l’apparition des bannières ne provoque pas de changements brusques de mise en page (CLS). Utiliser un espace réservé ou des transitions fluides.

5. Définir le Comportement Responsive

• Empilement : Sur mobile, les actions doivent passer sous le texte si elles ne tiennent pas horizontalement.
• Largeur : Les bannières globales sont en pleine largeur ; les alertes intégrées suivent la largeur du conteneur.

Règles de Décision

• La Règle « Une à la Fois » : Ne jamais empiler plus de deux bannières globales. Si vous avez plusieurs annonces, regroupez-les en un seul « Centre de Notifications » ou un carrousel.
• Couleur + Icône : Ne jamais se fier uniquement à la couleur pour communiquer l’état de l’alerte. Toujours inclure une icône pour l’accessibilité.
• Placement par Contexte : Si l’alerte est provoquée par une action utilisateur (ex. cliquer sur « Enregistrer »), placer l’alerte près du point d’action (Intégré). S’il s’agit d’un état système, la placer en haut (Global).
• Logique de Fermeture : Toujours permettre aux utilisateurs de fermer les bannières « Info » et « Succès ». Les bannières « Erreur » et « Avertissement » ne doivent pouvoir être fermées que si le problème sous-jacent est résolu.

Contraintes

• Accessibilité : Utiliser role="alert" pour les erreurs haute priorité et role="status" pour les mises à jour de moindre priorité. Assurer un rapport de contraste de 4,5:1 pour le texte. Si une bannière globale est fixe/sticky, vérifier qu’elle n’obscurcit jamais de manière permanente un élément focalisé lors du défilement du contenu (WCAG 2.2 SC 2.4.11).
• Typographie : Utiliser une taille de police claire (minimum 14 px) et éviter le tout en majuscules pour les descriptions longues.
• Accessibilité Mobile : S’assurer que les boutons de fermeture respectent le WCAG 2.2 SC 2.5.8 avec un minimum de 24x24 px, dimensionné jusqu’à 44x44 px si la mise en page le permet.

Schémas d’Échec Courants

• L’« Erreur Ignorable » : Utiliser un style « Info » pour une erreur critique, ce qui fait manquer des avertissements importants à l’utilisateur.
• Marketing Intrusif : Utiliser des bannières globales pour des promotions de faible valeur qui agacent les utilisateurs et dévalorisent l’espace « Alerte ».
• Actions Manquantes : Informer l’utilisateur d’un problème (ex. « Paiement échoué ») sans fournir de lien direct pour le résoudre.
• Basculement de Mise en Page : Bannières qui « surgissent » et poussent tout le contenu de la page vers le bas, provoquant des clics erronés.

Critères de Validation

• Chaque alerte utilise une combinaison d’icône et de couleur correspondant à sa gravité.
• Les bannières globales sont positionnées en haut de la hiérarchie.
• Les alertes intégrées sont placées à proximité immédiate de leur contenu associé.
• Tous les éléments interactifs (Fermeture, Appel à l’action) respectent la cible tactile minimale WCAG 2.2 de 24x24 px (2.5.8).
• Les alertes haute priorité utilisent des rôles ARIA appropriés (alert).
• Les bannières fermables mémorisent leur état (ou possèdent une logique pour décider quand réapparaître).