Modèles & états
États vides & chargementHub seulement
Un écran vide n’est pas une erreur : c’est le moment de dire quoi faire ensuite. Et pendant un chargement, on montre la forme du contenu plutôt qu’un spinner.
Aujourd’hui côté Hub seulement
Ces styles vivent dans
hub.aubota.xyz/assets/polish.css (sous .aub-hub), pas encore dans aubui.full.css. Les autres modules doivent attendre leur passage dans css/aubui/components/ — cette page sera alors mise à jour (règle d’or).État vide .aub-empty
Pas encore de notes
Les notes vivent à côté de tes dates. Ouvre aujourd’hui et écris ta première ligne.
Ouvrir aujourd’hui<div class="aub-empty" id="notesEmpty" hidden>
<div class="aub-empty__icon" aria-hidden="true">📝</div>
<h2 class="aub-empty__title">Pas encore de notes</h2>
<p class="aub-empty__text">Les notes vivent à côté de tes dates. Ouvre aujourd’hui et écris ta première ligne.</p>
<a class="aub-empty__cta" aub-btn primary href="/day">Ouvrir aujourd’hui</a>
</div>| Élément | Rôle |
|---|---|
.aub-empty | Bloc centré, largeur de lecture (42 caractères). |
__icon | Un emoji, décoratif (aria-hidden="true"). |
__title | Ce qui manque, dit simplement (« Pas encore de notes »). |
__text | Pourquoi c’est utile, en une phrase. |
__cta | Une seule action, celle qui remplit l’écran. |
Le Hub propose aussi la variante animée .hub-empty (mêmes sous-éléments, petit ressort d’apparition).
Squelettes de chargement
<div aria-busy="true" aria-label="Chargement des listes">
<div class="hub-skel hub-skel--title"></div>
<div class="hub-skel hub-skel--line"></div>
<div class="hub-skel hub-skel--block"></div>
</div>| Classe | Forme |
|---|---|
.hub-skel | Surface grise + reflet qui balaie (1,3 s). Le texte éventuel est rendu transparent. |
--line · --title · --block | Ligne de texte · titre (45 %) · bloc de 3,5 rem. |
Nom partagé prévu à la promotion dans Aubui : .aub-skel (mêmes variantes). Tant qu’il n’existe pas dans aubui.full.css, n’utilise que .hub-skel, et seulement dans le Hub.
Écrire un bon état vide
- Encourager, pas constater : « Ta première liste en 5 secondes » plutôt que « Aucune donnée ».
- Une action, la plus utile. Pas trois boutons.
- Différencier « rien encore » (onboarding) et « aucun résultat » (filtre) : pour un filtre, propose de l’effacer.
- Un squelette doit avoir la forme du vrai contenu ; au-delà de quelques secondes, remplace-le par un message.
Accessibilité
- Pendant le chargement :
aria-busy="true"sur le conteneur (et un libellé), retiré quand le contenu arrive. - Le reflet s’arrête si « réduire les animations » est actif.
- Le titre de l’état vide est un vrai titre (
h2/h3selon la page) : il structure la lecture.