Quand devriez-vous utiliser l’interface utilisateur squelette au lieu d’un spinner ?
Utilisez l'interface utilisateur squelette (espaces réservés fantômes) lorsque l'écran affiche de nombreux enregistrements : listes, tableaux, lignes CRM, cartes Kanban ou widgets de tableau de bord. Les squelettes maintiennent la mise en page stable pendant le chargement des données afin que les utilisateurs puissent analyser la structure immédiatement. Les fileuses conviennent mieux aux actions courtes et atomiques (enregistrement, soumission, téléchargement d'un fichier) pour lesquelles il n'y a pas de forme de contenu dense à prévisualiser.
Squelettes contre spinners sur des écrans denses.
| Option | Idéal pour | Stabilité de la mise en page | Coût de production | Un compromis honnête |
|---|---|---|---|---|
| Interface utilisateur squelette/fantôme | Listes, tableaux, flux, tableaux de bord | Élevé : les espaces réservés correspondent au chrome final | Nécessite un modèle de mise en page (ou un générateur) | Les mauvaises formes de squelette semblent fausses ; garder les rôles simples |
| Flèche centrée | Actions courtes, soumissions modales | Faible : la page saute souvent lorsque le contenu arrive | Trivial CSS | Très bien en dessous de ~ 1 s ; frustrant sur les longues listes de chargement |
| Ghost Wireframe Generator | Chrome d'atterrissage + squelettes de chargement pour HTML | Les exportations correspondent aux mises en page de bureau/mobile | Gratuit, local sur navigateur | Mode bibliothèque uniquement dans la v1 – pas encore de conversion SVG-from-Figma |
Pourquoi les listes et les tableaux préfèrent les fantômes.
Les interfaces utilisateur denses communiquent la hiérarchie via des lignes, des colonnes et des cartes. Un spinner efface cette hiérarchie jusqu'à la fin de la requête. Les barres et blocs fantômes permettent aux utilisateurs de s'orienter – « ceci est un tableau avec des filtres », « ceci est un tableau Kanban » – avant l'arrivée des données réelles. C'est pourquoi les équipes produit fournissent des squelettes de chargement pour CRM et des vues analytiques, pas seulement pour les maquettes marketing.
Exportez un squelette de chargement en moins d’une minute.
- Ouvrez Ghost Wireframe Generator.
- Choisissez une disposition de tableau, d'analyse ou de tableau de bord CRM — utilisez Combo si vous avez besoin d'un ordinateur de bureau + d'un mobile.
- Ajustez les rôles de couleur en fonction de la surface de votre produit, puis Copy HTML (inclut les variables
--ghost-*). - Facultatif : récupérez le Ghost Wireframe Skill pour le même contrat dans votre éditeur.
Lisez la procédure complète dans le guide Ghost Wireframe Generator.