États Empty et indices UX

1) Pourquoi des états vides sont nécessaires

• explique pourquoi il est vide,
• montre ce qu'il faut faire ensuite,
• offre une première étape sûre,
• réduit l'anxiété et permet d'économiser du temps de soutien.

2) Typologie des états empty

1. Premier démarrage (first-time) - l'utilisateur n'a encore rien fait.
2. Aucune donnée (zero data) - aucune entité n'a été créée ou la liste est vide.
3. Filtres/recherche (no results) : Toutes les conditions ont été exclues.
4. Erreur/indisponibilité temporaire - réseau/serveur, mais les données sont en principe.
5. Aucun droit/restriction - l'accès est interdit, un CUS/rôle/limite est requis.
6. Entretien - travaux planifiés, attente.

3) La structure de la carte empty

Icône/illustration (ne pas surcharger ; contraste ≥ AA).
Titre en une ligne : « Ici encore vide ».
Raison/contexte : « Vous n'avez pas encore ajouté » .../« Le filtre n'a pas trouvé de correspondance ».
1-2 actions (CTA) : primaire (scénario principal), secondaire (alternative).
Link à l'aide (en option).
Niveau de la page : gardez la navigation et les filtres habituels - ne transformez pas l'écran en impasse.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Ton et texte (UX-copywriting)

C'est clair et bienveillant. Éviter « Erreur 0x »....

La raison → l'action. Le filtre VIP a exclu toutes les entrées. Voulez-vous réinitialiser le filtre ?"

Pas de faute. N'accusez pas l'utilisateur du vide.
Une pensée est une phrase.
Localisation : éviter les métaphores culturelles ; Placez + 20-30 % de la longueur du texte.

5) Illustrations et visuels

Neutre, discret ; dans un thème dark, augmentez la luminosité des illustrations.
N'utilisez pas les illustrations comme seul porteur de sens.
L'échelle est fixe ; ne cassez pas la grille et la ligne de base.

6) CTA et alternatives

L'OTC primaire est la prochaine étape principale (créer/déposer/souscrire).
Secondaire - « voir la démo », « importer », « réinitialiser les filtres ».
Limite de sélection : jusqu'à 2 CTA ; le reste est dans « Encore ».
Pour les risques/paiements, un texte transparent sur les conséquences et l'annulation.

7) États vides par script

7. 1 Premier démarrage

Gajd-tcheklist de 3-5 pas : "Ajoutez le moyen du paiement", "Choisissez du provider".
Bouton Ignorer + référence à l'hyde.

7. 2 Pas de données

Explication courte « pourquoi est vide » + CTA « Créer »/« Importer ».
Conseil : « Vous pouvez télécharger CSV » (link sur le modèle).

7. 3 Filtres/recherche

Montrez les filtres actifs et le bouton Réinitialiser.
Proposez des correspondances proches ou d'autres demandes.

7. 4 Erreur/indisponibilité

"Nous avons rencontré un problème. Essayez plus tard" + "Refaire "/" État du système".