UX-fidbek dans les états vides

1) Qu'est-ce que les états vides et pourquoi ils sont nécessaires

L'état vide est un écran/widget où le contenu principal est temporairement absent : jusqu'à la première action, après le nettoyage, à zéro résultat, en cas d'erreur de téléchargement, en l'absence de droits/accès.

• expliquer « pourquoi c'est vide ici » ;
• montrer la valeur de la section ;
• proposer une prochaine étape claire (ou plusieurs à choisir) ;
• réduire l'anxiété et prévenir les soins.

Bon état vide = contexte + bénéfice + action.

2) Typologie des états vides

1. Zéro primaire (first-time empty) : l'utilisateur n'a encore rien créé/configuré.
2. Zéro recherche/filtre : la requête n'a pas donné de résultats.
3. Vide temporaire : les données sont chargées ou la file d'attente est effectuée.
4. Restriction/droit : pas d'accès, niveau de vérification insuffisant.
5. Nettoyé par l'utilisateur : panier/historique nettoyé.
6. Problème technique : défaillance du réseau/service, rétrogradation.

3) Principes de conception

Contextualité : nous parlons de la cause particulière du vide.
La valeur → l'action : d'abord pourquoi cette section, puis quoi faire.
Un CTA principal : secondaire si nécessaire (learn more/FAQ).
Brève et précise : 1-2 phrases + bouton clair.
Support visuel : l'icône/illustration soutient le sens, ne distrait pas.
Prévenir les impasses : il y a toujours une voie à suivre.
Cohérence de ton : amicale et calme ; pas de blague dans les étapes critiques (paiements, sécurité).
A11y et localisation : lisible par le lecteur d'écran, incliné correctement, prend en compte la longueur des lignes.

4) Cadre d'état vide (modèle)

Titre (en option, 1 ligne) - affirmation de la valeur ou de la raison.
Le texte (1-2 phrases) est « pourquoi est vide » + « quoi de plus ».
L'OTC primaire est la principale action ciblée.
STA secondaire/référence - aide/règles/documentation.
Visuel (facultatif) - illustration facile 24-96 px, ne pas surcharger.

5) Modèles par scénario

5. 1 Onbording/premier zéro

Objectif : mener à la première action réussie.
Texte : « Pour voir les recommandations personnelles, remplissez le profil et sélectionnez vos centres d'intérêt ».
CTA : « Remplir le profil »/« Choisir les intérêts ».
Conseil : ajoutez un micro-indicateur force/temps : « Cela prendra ~ 1 minute ».

5. 2 Recherche/filtres = résultat nul

Objectif : aider à ajuster la demande.

Texte : "Rien trouvé par "live blackjack". Essayez « blackjack » ou enlevez le filtre « Fournisseur : X »

CTA : « Réinitialiser les filtres » secondaire : « Ouvrir le répertoire ».

5. 3 Paiements/portefeuille vide

Objectif : encourager l'ajout d'une méthode/première reconstitution.
Texte : « Enregistrez le mode de paiement - les recharges et les conclusions seront plus rapides ».
LTC : « Ajouter un mode de paiement » secondaire : « Règles et frais ».

5. 4 Vérification/accès

Objectif : expliquer de manière transparente la limitation et la voie de retrait.

Texte : "Cette section est disponible après confirmation d'identité. Cela prend généralement jusqu'à 2 minutes"

CTA : « Passer la vérification » secondaire : « Pourquoi est-ce nécessaire ? »

5. 5 Données en transit/vide temporel

Objectif : réduire l'anxiété de l'attente.

Texte : "Nous collectons vos données. Cela prend généralement jusqu'à 30 secondes. Vous pouvez laisser la page - nous vous avertirons quand tout sera prêt"

CTA : « Compris » secondaire : « Que se passera-t-il ensuite ? »

5. 6 Après nettoyage/élimination

Objectif : confirmer l'action et proposer la prochaine étape.

Texte : "L'histoire est purifiée. De nouvelles opérations apparaîtront après la prochaine reconstitution"

CTA : « Réapprovisionner le compte ».

5. 7 Erreur/Rétraction

Objectif : une voie de récupération claire.

Texte : "Impossible de charger les données. Vérifiez le réseau ou réessayez

CTA : « Répéter » secondaire : « État du système ».

6) Microtextes : modèles finis

• "Les jeux favoris apparaîtront ici lorsque vous ajouterez le premier. [Ajouter aux favoris"

• Sur demande, {query} n'a rien trouvé. Affiner la requête ou réinitialiser les filtres. [Réinitialiser les filtres]"

• "Vous n'avez pas encore de méthodes sauvegardées. Enregistrez votre carte ou votre portefeuille pour accélérer vos paiements. [Ajouter une méthode]"

• La fonction n'est pas disponible sans confirmation d'âge. Ça va prendre ~ 2 minutes. [Confirmer l'âge] [Pourquoi est-ce nécessaire ?]"

• "Nous comptons les statistiques des dernières 24 heures... C'est généralement jusqu'à 30 secondes. Nous montrerons la notification quand tout est prêt"

• "Service indisponible. On est déjà en train de bouffer. Essayez plus tard ou vérifiez le statut. [Répéter] [État du système]"

7) Langage visuel et illustrations

Utilisez des illustrations monochromes/bicolores légères pour ne pas argumenter avec le CTA.
Dimensions et indentations - comme la carte de contenu (cohérence visuelle).
Ne figurez pas de scènes humoristiques dans des scénarios stressants (paiement/sécurité).

8) Localisation et disponibilité

Placez la marge sur la longueur des lignes (DE/TR plus longue).
Transférez les formats numériques, la devise, les dates localement.
Pour les lecteurs d'écran : role = « status », aria-live = « polite/assertive » pour la dynamique.
Ne mettez pas le sens seulement dans l'image : dupliquez le texte.
Vérifiez la lisibilité à 320 px et le contraste par WCAG.

9) Métriques et expériences

• CTR sur le CTA principal à l'état vide ;
• Conversion en « premier succès » (événement d'activation) ;
• le temps jusqu'à la première action ;
• la fréquence de retour à l'écran sans progression ;
• la proportion de résultats de recherche nuls ;
• appels à l'appui du scénario.

• un titre commun spécifique vs ;
• CTA verbe d'action vs neutre ;
• ajout d'une estimation du temps ;
• la présence d'un CTA secondaire (FAQ) et l'ordre des boutons ;
• illustration vs icône vs sans visuel.

10) Anti-modèles

« Ici c'est vide » sans explication ni pas.
Blagues dans les étapes critiques (paiement, sécurité).
Un CTA « En savoir plus » sans référence au contexte.
Caution passive : « à ajouter ». Écrivez activement : « Ajoutez »....
Paragraphes longs : 1-2 phrases maximum.
Playholder au lieu d'un label dans les formes - aggrave la A11y et la compréhension.
Restrictions cachées (« instantanément », bien qu'un retard soit possible).

11) Chèque-liste avant la sortie

• Je comprends pourquoi c'est vide ?
• Y a-t-il une valeur de section dans une phrase ?
• Y a-t-il un CTA principal et, si nécessaire, un CTA secondaire ?
• Texte court (≤ 140 caractères) et spécifique ?
• Ajout d'une estimation du temps/de l'effort, le cas échéant ?
• Le ton correspond au scénario (calme/support) ?
• Localisation et A11y testés (attributs aria, contraste) ?
• L'image ne domine pas le CTA ?

12) Exemples « avant/après »

Catalogue de jeux (premier zéro)

« Il n'y a rien ici »

Après : "Ramassez votre ruban. Choisissez les 3 genres préférés - commençons à recommander. [Sélectionner les genres]"

Recherche nulle

Jusqu'à : « Rien trouvé »

Après : "Par "high-limit roulette" il n'y a pas de résultats. Enlevez le filtre « High-limit » ou essayez « roulette ». [Réinitialiser les filtres]"

Paiements

Jusqu'à : « Pas de modes de paiement »

Après : "Enregistrez votre carte ou votre portefeuille - les recharges et les conclusions seront plus rapides. [Ajouter un moyen] [de la Commission et des délais]"

Vérification

Jusqu'à : « Pas d'accès »

Après : "La section est disponible après confirmation d'identité. Ça prend ~ 2 minutes. [Passer la vérification] [Pourquoi c'est important]"

13) Incorporation dans le système de conception

• 'Titre '(ligne, facultatif)
• « body » (court texte 1-2 phrases)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'Icon/illustration '(facultatif)

Stockez les textes dans les fichiers i18n à côté du composant, supportez les clés et les descriptions, connectez tone-map (tonalité et vocabulaire par situation).

14) Constructeur rapide (copier et utiliser)

• Titre : « Commencez par la première étape »
• Texte : « Il y aura des recommandations ici dès que vous aurez choisi vos intérêts ».
• CTA : « Choisir les intérêts »
• Secondaire : « Comment ça marche ? »

• Texte : "Par "{query}" n'a rien trouvé. Réinitialiser les filtres ou affiner la requête"
• CTA : « Réinitialiser les filtres »
• Secondaire : « Catalogue »

• Texte : "La fonction est disponible après confirmation de l'âge. C'est généralement jusqu'à 2 minutes"
• CTA : « Confirmer l'âge »
• Secondaire : « Pourquoi en as-tu besoin ? »

• Texte : "Nous recueillons des données en 24 heures. C'est généralement jusqu'à 30 secondes. Nous vous avertirons quand tout sera prêt"
• CTA : « OK »

Trempe finale

Contexte + valeur + action - dans une « pile ».
Un CTA majeur sans concurrence visuelle.
Bref et précis : 1-2 phrases.
Toujours sortir de l'impasse : il n'y a pas d'écran d'impasse.
La localisation et la A11y sont établies au niveau du composant.