L’Alerte est un composant de feedback temporaire destiné à informer l’utilisateur d’un résultat d’action, d’un état du système ou d’un message fonctionnel qui nécessite attention (erreur, succès, avertissement, information). Ce n’est pas un message persistants ni décoratif.
Localisation et positionnement
Placez les alertes à un endroit où elles sont facilement visibles sans être trop intrusives.
Les alertes peuvent être insérées dans une page pour contextualiser une action ou être flottantes pour que l'utilisateur ai toujours accès à l'information.
|
Emplacement recommandé |
Contexte d’usage |
Remarque / limites |
Exemple |
|---|---|---|---|
|
Au sein d’un conteneur de contenu (en haut d’une section, au-dessus d’un formulaire) |
Pour signaler le résultat d’une action (ex. “Profil mis à jour”) ou un état (ex. “Donnée manquante”) |
Doit être perçue dans le flux du contenu, sans obstruer la navigation |
|
|
En “inline” (dans un bloc, à côté d’un champ) |
Pour des erreurs liées au champ ou retour contextualisé |
Ne doit pas chevaucher d’éléments UI critiques |
|
|
Flottante dans la page (non fixe, margin top) |
Pour capter l’attention après une action générée (ex. redirection) |
Attention à ne pas masquer le header ni gêner l’UX |
|
|
Non recommandé : fixer une alerte au-dessus du header, en bandeau permanent |
Usage observé pour messages informatifs généraux |
Ce n’est pas le rôle d’une alerte : pour ce type de message, on doit privilégier le composant Callout à placer dans le contenu de la page |
|
Bonnes pratiques d’usage
- Le message doit être court, clair et orienté vers l’utilisateur.
- Utiliser les couleurs de feedback du design system (succès, avertissement, erreur, information) selon leur rôle fonctionnel.
- Maintenir une hiérarchie visuelle claire :
- Éviter la juxtaposition d’alertes de natures différentes sur une même zone.
- Fournir un bouton de fermeture lorsque l’alerte n’est pas essentielle à la poursuite du parcours.
- Bannir le jargon technique : privilégier une formulation utilisateur (« Vous n’avez pas rempli ce champ » plutôt que « Champ manquant »).
- Si l’alerte comporte une action, celle-ci doit être secondaire et non bloquante (ex. “Réessayer”, “En savoir plus”)
- Les alertes doivent rester proportionnées au contexte : plus discrètes dans une sous-section, plus visibles dans une page de validation ou de confirmation.
- En responsive, s’assurer que le texte reste lisible sans troncature ni chevauchement.
- L’espacement minimal autour du composant doit respecter la grille de base (8px multiples).
✅ Usage correct
Les alertes peuvent être utilisées pour:
- avertir l'utilisateur qu'il doit être conscient de quelque chose ou qu'il doit traiter quelque chose en relation avec son contexte actuel.
- rappeler à l'utilisateur qu'une action précédente, probablement dans un autre emplacement ou contexte, a été réussie ou échoué.
🚫 Usage incorrect
Le composant alerte ne doit pas être utilisé pour afficher des messages purement décoratifs ou non essentiels.
- Bannière fixe d’information permanente (“Site en maintenance”) affichée en alerte
- Alertes décoratives ou non essentielles (ex : “Bienvenue !”)
- Alerte qui masque ou chevauche le header ou nav
- Multiples alertes visuellement concurrentes sur un même écran sans hiérarchie
- L’alerte ne doit pas être placé au dessus du menu ou en dessous du footer (elle doit être placé dans la page, soit en haut avec de la marge soit proche du contexte de l’action).
Comportement général
L'alerte a pour but de fournir des informations importantes à l'utilisateur de manière concise et discrète, sans l'interrompre de manière excessive dans son parcours.
Affichage
L’alerte reste affiché jusqu'à ce que l'utilisateur décide de fermer l'alerte si l'option est possible. Elle peut être intégrée directement dans une page.
Apparition discrète
Lorsqu'une action importante se produit dans une application ou sur un site web, un composant alerte est généré pour informer l'utilisateur.
Contenu succinct
Le contenu d'une alerte est généralement bref et concis. Il peut s'agir d'un message d'erreur, d'une confirmation de réussite d'une action, d'une information importante, etc.
Interaction
Dans la plupart des cas, l'utilisateur n'a pas besoin d'interagir directement avec l'alerte. Cependant, certaines alertes peuvent inclure des boutons qui permettent à l'utilisateur de prendre des actions spécifiques en rapport avec le message affiché, comme annuler une action ou accéder à plus de détails.
Alternatives
Boite de dialogue
Les boîtes de dialogues peuvent être utilisées comme alternative aux alertes pour communiquer des informations importantes ou demander une action de l'utilisateur.
Callout
Pour les messages d’information persistants ou de portée générale, préférez le composant Callout, conçu pour cet usage.