Toaster

Le toaster informe l’utilisateur d’un feedback sur une opération qu’il vient tout juste d’effectuer.

# Usage

Le Toaster est un message pop-up temporaire qui apparaît à l'écran pour informer l'utilisateur d'un événement spécifique. Il peut contenir des messages de succès, d'erreur, d'avertissement ou d'information.

  • Confirmation d'action : Pour informer les utilisateurs qu'une action qu'ils ont entreprise a été réussie, comme l'ajout d'un produit au panier ou la mise à jour de leurs informations personnelles.

  • Alertes et erreurs : Pour alerter les utilisateurs des erreurs ou des problèmes, comme une connexion échouée ou des informations manquantes dans un formulaire.

  • Notifications informatives : Pour fournir des informations non critiques, comme des mises à jour de service ou des notifications de nouveau message.

Quand utiliser

  • Vente :
    • Utiliser des toasters pour confirmer que l'achat a été effectué avec succès.
    • Informer les utilisateurs de nouvelles promotions ou offres spéciales en cours.
    • Alerter les utilisateurs en cas de problème avec leur paiement ou leur panier.
  • Assistance :
    • Confirmer la soumission réussie d'un ticket d'assistance.
    • Informer les utilisateurs du statut de leur demande ou ticket.
    • Alerter les utilisateurs des erreurs dans les formulaires de demande d'assistance.
  • Application/Espace client :
    • Confirmer que les modifications de profil ont été enregistrées avec succès.
    • Confirmer la souscription à une offre ou une option.

Quand ne pas utiliser

  • Informations critiques : Pour des informations qui nécessitent une interaction immédiate ou une attention prolongée, utilisez plutôt des modales ou des dialogues.
  • Messages longs : Évitez d'utiliser des toasters pour des messages trop longs qui nécessitent plus de temps pour être lus
  • Notifications persistantes : Pour des informations qui doivent rester visibles jusqu'à ce que l'utilisateur les ferme explicitement, les bannières ou les alertes permanentes sont plus appropriées.

# Do & Don't

Privilégier un titre concis
Éviter les doublons entre le titre et le contenu de l’alerte
Associer une action maximum à une alerte
Ne pas changer/enlever l’icone