Notification intégrée

Notification intégrée dans Storybook

Utilisation

Présentation

Les notifications intégrées fournissent des commentaires clairs et immédiats sur les formulaires, les processus et les actions effectuées par l’utilisateur au niveau de la section. Elles aident les utilisateurs à rester informés de l’état de leurs actions, en les aidant à accomplir correctement leur tâche ou en les alertant des problèmes nécessitant une attention particulière.

Pour savoir quand utiliser les notifications intégrées, explorez l’arbre de décision suivant pour les composants de l’interface utilisateur.

La variante groupée de notifications intégrées affiche plusieurs messages associés dans un seul bloc compact afin de réduire l’encombrement et de fournir une vue d’ensemble claire de tous les commentaires pertinents en un seul et même endroit.

Pour savoir quand utiliser les notifications intégrées groupées, explorez l’arbre de décision suivant pour les composants de l’interface utilisateur.

Quand l'utiliser

• Lorsque le message est lié au contenu ou à un objet de la page actuelle.
• Pour obtenir des commentaires instantanés sur un processus, tels que la confirmation de la réussite de la soumission d'un formulaire.
• Pour aider les utilisateurs à identifier les erreurs de validation ou d'autres problèmes lors de la soumission du formulaire.
• Pour communiquer aux utilisateurs des informations très importantes et exploitables.

Types

Les notifications intégrées sont classées en fonction de la gravité du message. On distingue les types suivants :

Type	Icône	Finalité
Information		Communiquer aux utilisateurs des informations utiles qui peuvent aider à l'exécution de la tâche ou noter les étapes suivantes.
Réussite		Informer les utilisateurs qu'une tâche a été effectuée avec succès.
Avertissement		Informer les utilisateurs des conditions qui pourraient ne pas bloquer le flux actuel de l'utilisateur, mais qui pourraient causer des erreurs dans leur tâche à un stade ou une étape ultérieur.
Erreur		Informer les utilisateurs des erreurs, des actions ayant échoué ou des problèmes critiques susceptibles d'empêcher l'utilisateur de poursuivre sa tâche.

Formatage

Structure

Les notifications intégrées comprennent les éléments suivants :

1. Icône : fournit une indication visuelle de la gravité du message.
2. Titre (facultatif) : fournit un bref résumé en un coup d'œil du contenu ou de l'objectif de la notification.
3. Description : décrit la nature de la notification, son importance ou l'action requise.
4. Lien (facultatif) : permet aux utilisateurs d'afficher des détails supplémentaires.
5. Bouton Fermer (facultatif) : ferme la notification.

Notifications intégrées groupées

Les notifications intégrées peuvent s'adapter à différents modèles d'utilisation, y compris le regroupement d’alertes. Cette section détaille la variante groupée, qui permet de regrouper des messages de gravité identique ou différente pour une meilleure clarté et une plus grande efficacité au niveau de l’espace. Utilisez cette approche au lieu d’empiler des notifications intégrées, susceptibles de masquer le contenu critique.

Regroupement d'alertes de gravité identique

Regroupement d'alertes de gravité identique

Lorsque plusieurs messages de gravité identique apparaissent dans l'application, ils peuvent être regroupés pour faciliter leur analyse et leur traitement.

1. Titre : indique le numéro des alertes, accompagné éventuellement d'un message de titre facultatif.
2. Commande Afficher/Masquer : cette commande s'étend pour afficher les messages ou se rétracte pour les masquer.
3. Lien permettant d'accéder à l'emplacement de l'alerte : indique l'endroit où l'alerte s'est produite et donne aux utilisateurs la possibilité d'accéder au point de déclenchement.
4. Description : fournit des informations contextuelles sur le message.

Regroupement des alertes de gravité différente

Regroupement des alertes de gravité différente

Lorsque plusieurs messages de gravité différente apparaissent dans l'application, ils peuvent être regroupés pour faciliter leur analyse et leur traitement.

1. Titre : indique le nombre d'alertes selon l'ordre de priorité le plus élevé. Par exemple, s'il y a 3 erreurs et 3 avertissements, le titre doit préciser le nombre d'erreurs détectées et peut inclure un message de titre facultatif.
2. Fonction de basculement : permet à l'utilisateur de passer d'un groupe d'alertes à un autre. Chaque fonction de basculement contient une icône, qui indique la catégorie de l'alerte et le nombre de messages.
3. Lien de navigation : indique l'endroit où l'alerte s'est produite et donne aux utilisateurs la possibilité d'accéder au point de déclenchement.
4. Description : fournit des informations contextuelles sur le message.

Dimensionnement et placement

Les notifications intégrées sont placées près de la zone de l'interface utilisateur concernée. Elles peuvent s'étendre en largeur pour remplir le conteneur ou la zone de contenu à laquelle elles se rapportent.

La hauteur des messages intégrés augmente avec le contenu jusqu'à 2 lignes de texte renvoyé à la ligne.

Contenu

Directives générales relatives à la rédaction

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Titre de la notification intégrée

Les titres sont facultatifs pour les notifications intégrées et ne doivent être utilisés que lorsque vous pouvez communiquer de manière concise le message principal de la notification. Ils doivent être courts, descriptifs et expliquer les informations les plus importantes.

Description de la notification intégrée

Les descriptions se composent de 1 ou 2 phrases courtes. Elles informent les utilisateurs de l'importance de la notification et des mesures nécessaires à prendre.

Rédaction pour différents types de messages

Informations

Les messages d'information transmettent des informations non critiques ou des mises à jour aux utilisateurs sans qu'il soit nécessaire d'intervenir. Utilisez-les pour fournir aux utilisateurs des informations susceptibles de les aider ou de les concerner.

Utilisez des messages d'information pour transmettre des informations supplémentaires utiles à l'utilisateur.

N'utilisez pas les messages d'information pour transmettre aux utilisateurs des informations critiques qui nécessitent une action.

Réussite

Les messages de réussite informent les utilisateurs qu'une tâche ou une action a été effectuée avec succès. Pour les actions simples et fréquentes, telles que le téléchargement d'un fichier ou l'enregistrement d'un document, le message de réussite doit être court et pratique. Vous pouvez utiliser un ton de célébration pour les réalisations importantes et les messages qui sont de nature plus rare.

Utilisez un langage clair, concis et utile. Pour les tâches régulières, adoptez un ton pratique.

N'utilisez pas un ton de célébration à moins que la situation ne s'y prête. Tenez compte du contexte de l'utilisateur.

Avertissement

Les messages d'avertissement alertent les utilisateurs des problèmes potentiels qui pourraient nécessiter leur attention dans le contexte de leur tâche ou interaction en cours. Si l'avertissement apparaît avant une action, expliquez ce qui se passera si l'utilisateur continue. Proposez une solution alternative dans la mesure du possible.

Faites preuve d'empathie envers l'utilisateur. Informez, mais n'inquiétez pas.

Ne provoquez pas la panique avec un langage trop dramatique ou alarmiste.

Erreur

Les messages d'erreur indiquent qu'une tâche a échoué ou qu'elle a généré des erreurs qui empêchent l'utilisateur de passer à l'étape suivante. Lors de la rédaction de messages d'erreur :

• Expliquez le problème et ce qui n'a pas fonctionné aussi précisément que possible.
• Suggérez comment résoudre le problème et aller de l'avant. Si le problème ne peut pas être résolu à ce moment-là, dites à l'utilisateur ce qui peut être fait pour l'aider et à qui il peut s'adresser.
• Utilisez un langage simple, clair et direct. Évitez de rendre la situation confuse avec des détails techniques ou du jargon.
• Essayez d'utiliser des messages d'erreur pertinents et spécifiques au contexte dans lequel ils apparaissent. Plus les informations sont génériques, moins elles sont utiles.
• N'accusez pas les utilisateurs et acceptez vos erreurs.

Expliquez le problème en utilisant un langage simple et clair. Proposez une solution afin que les utilisateurs puissent terminer le processus.

N'utilisez pas de jargon technique ni de langage qui ne soit pas familier à l'utilisateur.

Comportements

Révocation

Les notifications intégrées n'apparaissent qu'une à la fois. Elles persistent jusqu'à ce que l'utilisateur les révoque, tant que le problème n'a pas été résolu ou tant que l'utilisateur ne quitte pas la page en cours.

Le bouton Fermer est facultatif. Il apparaît sous la forme d'une petite croix (« X ») dans le coin supérieur droit de la notification intégrée. N'incluez pas de bouton Fermer si l'utilisateur doit lire la notification ou interagir avec elle.

Interactions

Cette image illustre un flux de validation de formulaire typique. Une notification intégrée groupée avertit d’abord l’utilisateur de plusieurs erreurs, qui sont ensuite détaillées par des messages individuels au niveau des champs pour qu'une correction puisse être apportée en toute simplicité.

1. Soumission de formulaire : l'utilisateur soumet le formulaire (une section d'une page dans cet exemple) à l'aide de l'action de validation (« Enregistrer » dans cet exemple).
2. Deux types de messages sont utilisés dans ce scénario :

• Notifications intégrées groupées pour indiquer que la soumission du formulaire a échoué
• Messages d'état de champ pour indiquer des problèmes liés aux valeurs d'entrée de champ

3. Aide à la récupération : lorsque l’utilisateur clique sur le lien de navigation de la position de l’alerte, le focus se déplace vers le champ correspondant et l’utilisateur peut vérifier le contenu et apporter des corrections.

Accessibilité

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

• Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
• Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
• Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
• Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Suivez les conseils ci-dessous lors de l'utilisation de ce composant dans vos applications :

• Assurez-vous que les notifications intégrées persistent jusqu'à ce que l'utilisateur les révoque, tant que le problème n'a pas été résolu ou tant que l'utilisateur ne quitte pas la page en cours.
• N'incluez pas de bouton Fermer si l'utilisateur doit lire la notification ou interagir avec elle.

Note:

La dépendance @jutro/router et ses dépendances homologues telles que history et les packages react-router-dom sont désormais facultatives pour les packages de composants. Pour le composant InlineNotification , il est toutefois nécessaire d'ajouter la dépendance à vos dépendances d'application afin de pouvoir l'utiliser.

Code

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  type="success"
/>

Instruction d'importation

import { InlineNotification } from '@jutro/components';

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

className

Type

string

Description

CSS class name for this component.

isBundleOpenByDefault

Type

boolean

Description

If set to true, the bundled messages card will be open.

isDismissable

Type

boolean

Description

If set to true, the dismiss button appears with this component.

Valeur par défaut

true

isEmbeddedNotification

Type

boolean

Description

If set to true, attributes 'aria-hidden' and 'role' will be added.

isTooltipEnabled

Type

boolean

Description

Enables the tooltip to show a full message.

linkProps

Type

Link

Description

Link prop used to navigate the user to an internal or external link. See Link component props for reference.

message

Type

intlMessageShape | {success: IntlMessageShape, warning: IntlMessageShape, info: IntlMessageShape, args?, error: IntlMessageShape, dismiss: IntlMessageShape}

Description

Message or set of messages to be displayed in the case of bundled notifications. For information on the property types accepted, see the IntlMessageShape documentation.

messageProps

Type

{success: IntlMessageShape, warning: IntlMessageShape, info: IntlMessageShape, args?, error: IntlMessageShape, dismiss: IntlMessageShape}

Description

Set of messages to be used as the associated aria-labels for each kind of message. For information on the property types accepted, see the IntlMessageShape documentation.

onClosed

Type

() => void

Description

Function called when the notification disappears.

type

Type

'success' | 'warning' | 'error' | 'info'

Description

Defines the severity of the notification. It is used to set the color and appearance of the notification.

idobsolète

Type

string

Description

Unique identifier for the component.

Crochets

Aucun crochet n'est disponible pour InlineNotification.

Clés de traduction

Il n'existe aucune traduction pour InlineNotification.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Note:

La dépendance @jutro/router et ses dépendances homologues telles que history et les packages react-router-dom sont désormais facultatives pour les packages de composants. Pour le composant InlineNotification , il est toutefois nécessaire d'ajouter la dépendance à vos dépendances d'application afin de pouvoir l'utiliser.

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement une notification intégrée et connaître les différentes options de configuration que nous proposons.

Exemple de notification intégrée de base

Voici un exemple simple illustrant un message de notification intégrée qui exécute une fonction lorsque vous ignorez la notification.

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  isDismissable={false}
  type="success"
/>

Inclure un lien

En utilisant la propriété linkProp, il est possible d'ajouter un lien spécifique à la fin du texte de notification.

<InlineNotification
  message="Message"
  messageProps={{
    warning: 'Hello',
  }}
  linkProps={{
    children: 'More Details',
    to: '/inline-notification',
  }}
  isDismissable={false}
  type="warning"
/>

Notification groupée

Le composant InlineNotification fournit un mécanisme permettant d'afficher un lot avec plusieurs messages. Le type d'objet reçu par la propriété message est utilisé pour décider de l'option d'affichage : message unique ou lot.

Dans le module par lot, le style de notification sera décidé par message avec le type affichant la gravité la plus élevée : erreur, avertissement, réussite et information. Le lot affiche tous les messages reçus par le composant, en les regroupant par type.

<InlineNotification
  message={{
    error: {
      MyField: [
        {
          fieldId: 'MyField1',
          message: 'This is a required field',
          type: 'error',
        },
      ],
      AnotherField: [
        {
          fieldId: 'MyField2',
          message: 'Value is below minimum allowed',
          type: 'error',
        },
      ],
    },
    info: {
      'Process due date': [
        { message: 'The process due date is on 7 days', type: 'info' },
      ],
    },
    success: {
      'Claim data loaded': [
        {
          message: 'Claim information successfully retrieved',
          type: 'success',
        },
      ],
      'Personal details are correct': [
        {
          message: 'Personal information successfully validated',
          type: 'success',
        },
      ],
    },
    warning: {
      'Address not found': [
        {
          message:
            'Please review the address details and confirm it is correct.',
          type: 'warning',
        },
      ],
      'Validate starting date': [
        {
          message: 'Please confirm that the starting date is correct',
          type: 'warning',
        },
      ],
      'Unable to validate financial details': [
        { message: 'No financial record found', type: 'warning' },
      ],
    },
  }}
  isBundleOpenByDefault={true}
  isDismissable={false}
/>

Journal des modifications

10.9.0

• Une nouvelle fonctionnalité d'opt-in a été introduite pour désactiver la publication automatique des événements pour le composant InlineNotification. Vous pouvez activer cette fonctionnalité en ajoutant JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true au fichier .env dans la racine de votre application Jutro. Lorsque cette option est activée, les composants hérités ne publient plus d'événements par défaut. Pour en savoir plus sur les événements et sur la façon d'en créer de nouveaux, reportez-vous à la documentation relative aux événements.

10.1.0

• La propriété id est désormais obsolète