Passer au contenu principal

État vide

Présentation​

Un état vide est un élément de conception qui apparaît lorsqu'une zone spécifique manque de données ou de contenu. Il permet de communiquer le statut actuel, de guider les utilisateurs sur les actions ultérieures et de maintenir une expérience utilisateur positive même en l'absence d'informations attendues. Ce scénario se produit généralement dans les contextes suivants :

  • Première utilisation
  • Après suppression ou achèvement
  • Aucun résultat de recherche
  • Erreurs ou problèmes

Quand l'utiliser​

Utilisez un état vide dans l'un des scénarios suivants :

  • Première utilisation : lorsqu'un utilisateur accède à une fonctionnalité ou à une page pour la première fois et qu'il n'existe pas encore de données ou de contenu généré par l'utilisateur.
    Exemple : « Vous n'avez pas encore créé de tâches. Pour commencer, sélectionnez Ajouter une tâche. »

  • Après suppression ou achèvement : lorsqu'un utilisateur a supprimé tous les éléments d'une liste ou terminé toutes les tâches.
    Exemple : « Votre boîte de réception est vide. Bravo ! Vous avez fait tout ce qu'il y avait à faire. »

  • Aucun résultat de recherche : lorsqu'une recherche ne renvoie aucun résultat.
    Exemple : « Aucun résultat trouvé pour « environnement PB34 ». Essayez différents mots-clés ou vérifiez l'orthographe. »

  • Erreurs ou problèmes : lorsque les données ne se chargent pas en raison d'erreurs, de problèmes de réseau ou de restrictions d'accès.
    Exemple : « Page 404 introuvable. Désolé, nous ne trouvons pas cette page. Le lien est peut-être rompu, ou la page a peut-être été supprimée. »

Quand ne pas l'utiliser​

  • Retards de chargement temporaires : pendant de brefs temps de chargement lorsque le contenu devrait bientôt apparaître. Un chargeur ou une barre de progression est plus approprié.

  • Absence de données ou de contenu attendue : lorsque les utilisateurs savent que les données ne seront pas présentes tant qu'ils n'auront pas effectué certaines actions (par exemple, avant qu'une recherche ne soit effectuée).

Structure​

Structure d'un état vide pour une page

Structure d'un état vide pour une section

Le modèle d'état vide se compose des éléments suivants :

  1. Image ou repère visuel (obligatoire dans la plupart des cas) : représentation visuelle qui aide l'utilisateur à traiter le message d'état vide.
  2. En-tête (obligatoire) : communique le statut actuel ou l'objectif de l'espace vide, oriente les utilisateurs et définit les attentes. L'état vide de la page entière comprend un en-tête H2 en couleur Texte 1 [#28333F], tandis que l'état vide de la section comporte un en-tête H3 ou H4.
  3. Description (facultative) : guide les utilisateurs à travers l'état vide, en fournissant le contexte et les étapes suivantes. La description utilise le style paragraphe normal (Corps 1) dans la couleur Texte 1 [#28333F].
  4. Actions (facultatives) : donnez aux utilisateurs un moyen direct pour sortir de l'état vide. Il n'y a généralement qu'un seul bouton d'action, mais le modèle d'état vide de Jutro peut accueillir des actions supplémentaires si nécessaire.

Ces éléments sont alignés au centre de leur conteneur parent.

Directives générales​

Repère visuel​

  • De manière générale, utilisez une illustration de la bibliothèque d'illustrations Spot ou une icône de la bibliothèque Jutro.
  • Si vous ne trouvez pas d'illustration adaptée à votre cas d'utilisation dans la bibliothèque d'illustrations Spot, envisagez d'en créer une vous-même en suivant les instructions relatives aux illustrations Spot et partagez-la avec la bibliothèque pour l'aider à se développer.
  • Choisissez la taille d'image adaptée à votre cas d'utilisation spécifique. Tenez compte des directives suivantes :
    • Pleine page : utilisez la variante XLarge de l'illustration ponctuelle ou une icône dont la zone englobante ne dépasse pas 80 x 80 px (lorsque l'icône est aussi grande, il est probablement préférable de l'inclure en tant qu'image dans le code).
    • Section : utilisez la variante Moyenne ou plus petite de l'illustration ponctuelle ou une icône dont la zone englobante ne dépasse pas 40 x 40 px.

Titre​

Il existe des cas d'utilisation où la taille de l'en-tête doit être différente. Dans de tels cas, la règle générale consiste à utiliser un niveau de titre inférieur à celui utilisé pour cette section.

Exemple : un en-tête de tiroir d'applications utilise H2. Nous pouvons définir sans problème l'en-tête de l'état vide sur H3.

Actions​

Omettez les actions natives de l'état vide s'il existe déjà des actions présentes dans le composant où se trouve l'état vide (par exemple, les tables et les tiroirs d'applications). Dans ce cas, dirigez l'utilisateur vers l'élément d'interface utilisateur afin qu'il sache où se trouvent les éléments et comment il effectuera les tâches à l'avenir.

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​

  • L'en-tête doit être concis.
  • Utilisez un langage simple et direct pour expliquer pourquoi l'état est vide.
  • N'utilisez pas l'en-tête pour expliquer les détails du cas d'état vide spécifique.

Description​

Utilisez la description pour donner plus de détails sur le cas spécifique d'état vide et guider l'utilisateur sur la marche à suivre.

Écriture pour différents scénarios d'état vide​

Observez les meilleures pratiques suivantes lors de la rédaction de différents scénarios d'état vide :

Première utilisation​

  • Indiquez clairement ce qui sera disponible lorsque les données auront été ajoutées.
  • Expliquez les prochaines actions que les utilisateurs peuvent effectuer pour remplir l'espace. Vous pouvez également expliquer pourquoi l'espace est vide et les avantages de prendre cette mesure.
  • Guider les nouveaux utilisateurs d'une application ou d'une fonctionnalité à travers les actions initiales. L'écran d'état vide est l'occasion de renseigner l'utilisateur.

L'exemple suivant illustre un état vide pour l'utilisation initiale :

Exemple d'utilisation initiale d'un état vide pour l'ajout de sinistres

Après suppression ou achèvement​

Indique que l'utilisateur a terminé avec succès un processus ou une tâche et qu'aucune autre action n'est requise à ce moment-là.

L'exemple suivant illustre un état vide après suppression ou achèvement :

Exemple d'état vide après qu'un utilisateur a effacé toutes ses notifications

Aucun résultat de recherche​

  • Informez les utilisateurs que la recherche est terminée et qu'il n'y a pas de résultats correspondants.
  • Suggérez d'autres actions que les utilisateurs peuvent effectuer pour trouver ce qu'ils recherchent.
  • Donnez des conseils sur la façon de procéder à partir de l'état vide, en veillant à ce que les utilisateurs connaissent les prochaines étapes.

L'exemple suivant illustre un état vide pour l'absence de résultat de recherche :

Exemple d'état vide sans résultats après qu'un utilisateur ait effectué une recherche

Erreurs ou problèmes​

  • Utilisez des repères visuels cohérents. La bibliothèque d'illustrations Spot inclut une illustration d'avertissement appropriée à ce cas d'utilisation. Vous pouvez également utiliser l'icône gw-warning de la bibliothèque Jutro. Dérogez à cette norme uniquement si cela est nécessaire dans votre contexte.
  • Utilisez un ton empathique et adapté à la situation. Tenez compte de la frustration potentielle de l'utilisateur sans le culpabiliser. Expliquez clairement le problème et indiquez des étapes précises pour le résoudre.
  • Expliquez l'impact que l'erreur peut avoir sur le travail d'un utilisateur. N'incluez que les informations nécessaires pour résoudre le problème.
  • Utilisez un langage simple et évitez le jargon inutile ou les termes complexes. N'utilisez pas de code d'erreur à moins que votre public ne comprenne le code et que cela facilite les diagnostics techniques.

L'exemple suivant illustre un état vide pour les erreurs ou les problèmes :

Exemple d'état vide pour les erreurs ou les problèmes

Accessibilité​

Assurez-vous que le texte utilise un jeton avec un contraste suffisant pour couvrir les exigences de contraste AA lors de l'application d'un thème personnalisé. Sinon, nous vous recommandons d'utiliser le jeton de couleur Jutro Texte 1 [#28333F].

Création de thèmes​

Par défaut, le thème et la marque correspondent à ceux de l'application, sauf s'ils sont remplacés.

Il est possible de donner un thème aux modèles pour répondre à des exigences spécifiques en matière de valorisation de la marque et aux besoins des clients. Cela inclut des éléments visuels tels que les couleurs, la typographie, les icônes, les boutons et d'autres composants et éléments graphiques.

En savoir plus sur les thèmes avec les jetons de conception

Prise en charge de la recherche​

La recherche de ce modèle a consisté en une analyse concurrentielle. L'analyse concurrentielle est une technique de recherche que vous pouvez utiliser pour comparer et comprendre ce sur quoi les autres travaillent dans le même domaine. Les concepteurs d'UX ont analysé comment Jutro et plusieurs autres systèmes de conception gèrent les états vides. Ils ont recherché les forces et les faiblesses relatives, les tendances et les différences. Les concepteurs ont pris ces informations, trouvé des points communs et créé un modèle basé sur ces pratiques.

Composants​

Modèles​

Ressources​

Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.

Bibliothèque de modèles Jutro (19.6 MB)