États de chargement, d'erreur et vides :ce que l'IA oublie

Les états de chargement, d'erreur et vides sont les trois que les applications créées par l'IA oublient : chaque écran a quatre états — chargement, erreur, vide et succès — et la plupart des produits conçus avec l'IA ne gèrent que le dernier. C'est pour cela qu'ils ressemblent à des prototypes. Corrigez les trois états oubliés et votre application ressemble instantanément à quelque chose que les gens paieraient.

Je peux dire en dix secondes si quelqu'un a livré son application tout droit sortie d'une session de code avec l'IA. Je l'ouvre et je vois « Loading... » en texte brut. Une erreur fait tomber toute la page. Les écrans vides n'affichent que du blanc. Les fonctionnalités marchent. Le produit a quand même l'air cassé.

Les quatre états de chaque écran : états de chargement, d'erreur et vides, plus le succès

Quand votre application récupère des données — et presque chaque écran en récupère — quatre choses peuvent arriver. Les données sont en route. Quelque chose a mal tourné. Il n'y a pas encore de données. Ou les données sont arrivées et tout va bien. La plupart des créateurs ne conçoivent que pour la fin heureuse, parce que c'est l'état qu'ils voient en construisant. Résultat : leur application a l'air cassée 40 % du temps, car les vrais utilisateurs passent un vrai temps dans les trois autres états.

Les utilisateurs jugent votre produit à l'état dans lequel ils se trouvent maintenant, pas à celui pour lequel vous avez conçu. Le chargement prend 2 à 5 secondes à chaque page. Les nouveaux utilisateurs atterrissent toujours sur un écran vide. Les réseaux tombent. Si ces moments sont laids, votre produit paraît peu professionnel — quelle que soit la qualité des fonctionnalités.

États de chargement : les squelettes battent les spinners

Le « Loading... » en texte brut échoue deux fois. Il est affreux, et la mise en page saute quand le vrai contenu arrive. La solution est un squelette : des formes de remplacement grises qui pulsent doucement et reprennent la mise en page du contenu à venir. Une liste de cinq cartes se charge derrière cinq contours de cartes grises. Quand les données arrivent, elles se glissent dans l'espace exact que le squelette tenait.

Les squelettes sont mon arme secrète. Ils donnent à l'application l'impression d'être 2 fois plus rapide même quand elle ne l'est pas, car on perçoit l'attente différemment quand on voit la forme de ce qui arrive. C'est de la psychologie UX, pas de l'optimisation de performance — et cela ne vous coûte qu'une demande à votre IA.

La règle simple : un petit spinner pour les actions rapides comme l'appui sur un bouton qui dure moins d'une seconde, et un squelette pour tout ce qui charge une page ou une liste. Construire un squelette est une formule, pas un travail de design : copiez la mise en page du vrai composant, remplacez le texte par des rectangles gris et les images par des cercles gris, gardez les mêmes espacements, ajoutez une animation de pulsation. L'IA peut le faire en un seul passage si vous le demandez.

États d'erreur : utiles, pas effrayants

L'état d'erreur par défaut d'une application créée avec l'IA est un message technique brut — ou pire, une page complètement cassée. Les deux terrifient les utilisateurs. Un bon état d'erreur remplit trois rôles : il dit ce qui s'est passé en langage humain (« Nous n'avons pas pu charger vos candidatures »), il dit quoi faire ensuite (« Vérifiez votre connexion et réessayez »), et il offre un moyen de s'en remettre — un bouton pour réessayer, un bouton retour, un lien vers le support.

Il y a une couche de plus que la plupart des créateurs sautent : un filet de sécurité autour de toute la page, pour que, lorsqu'un composant plante, il affiche une carte polie « quelque chose s'est mal passé » au lieu d'entraîner tout l'écran dans sa chute. Demandez à votre IA un « error boundary » et vous obtenez exactement cela — un widget qui plante ne tue plus la page.

Ne montrez jamais un code d'erreur en guise de titre. Ne faites jamais perdre le travail en cours. Et donnez toujours un bouton sur lequel appuyer — c'est l'impuissance qui rend les erreurs catastrophiques.

Le livreThe Solopreneur RevolutionLuis Gonçalves sur la création d'une activité de solopreneur avec l'IA, sans quitter son emploi.Obtenir le livre →

États vides : transformer une impasse en prochaine étape

L'état vide est le plus négligé des trois, et le plus précieux. Chaque nouvel utilisateur commence sur un écran vide. Si cet écran est blanc, il suppose que le produit est cassé et s'en va. S'il l'accueille et lui indique la prochaine action, il devient de l'accueil client.

Un bon état vide a trois parties : un visuel clair qui représente ce qui manque, un titre utile qui explique ce qui viendrait ici (« Aucune candidature pour l'instant »), et une prochaine étape (« Partagez votre lien de candidature »). Le ton compte — « Commencer » invite, « Rien ici » décourage.

Les états vides doivent aussi changer selon le contexte. Une recherche sans résultat mérite « Rien ne correspond à votre recherche — essayez d'autres mots-clés » et un bouton pour effacer les filtres. Un nouvel utilisateur mérite un accueil et l'indication de sa première action. Même mécanisme, message différent — et chacun transforme un moment de confusion en moment de guidage.

Comment faire construire les quatre états par l'IA, à chaque fois

Voici ce qui rend cela pratique pour un fondateur non technique : vous n'avez rien à construire à la main. Vous devez l'exiger. Quand vous demandez un nouvel écran à l'IA, la plupart des gens ne décrivent que l'état de succès — et c'est tout ce qu'ils obtiennent. Détaillez plutôt les états dans la demande :

Crée l'écran de la liste des candidatures. Chargement : affiche un squelette avec cinq cartes de remplacement. Erreur : affiche un message amical avec un bouton pour réessayer. Vide : affiche un message utile et un bouton pour créer la première candidature. Succès : affiche les données. Suis le même schéma que les écrans existants.

Cinq lignes de plus. L'IA génère automatiquement les quatre états, et dès qu'un écran a le schéma, vous pouvez le citer en référence pour tous les écrans suivants. C'est la compétence centrale de la construction avec l'IA : vous fixez le standard, l'IA l'implémente. Les états que tout le monde oublie ne sont oubliés que parce que personne ne les a demandés.

Gérer les trois états oubliés, c'est la moitié de ce qui rend une application réelle. L'autre moitié, c'est la cohérence — chaque écran ayant l'air d'appartenir au même produit. C'est un système, pas un talent, et c'est exactement ce que vous apportent les design tokens et une bibliothèque de composants.

12 semainesVotre carrière en entreprise n'a jamais été le planPostulez au Solopreneur Accelerator.Postuler →

Questions fréquentes

Que sont les états de chargement, d'erreur et vides ?

Ce sont les trois situations dans lesquelles un écran peut se trouver en dehors de « tout a fonctionné » : les données arrivent encore, quelque chose a échoué, ou il n'y a pas encore de données. Les utilisateurs les rencontrent constamment — à chaque chargement de page, chaque hoquet réseau, chaque première visite — si bien qu'un produit qui ne conçoit que l'état de succès paraît cassé une grande part du temps.

Les écrans squelettes donnent-ils vraiment l'impression d'une application plus rapide ?

Oui — la vitesse perçue s'améliore même si la vitesse réelle ne change pas. Des formes de remplacement calquées sur le contenu rendent l'attente environ 2 fois plus courte qu'un spinner générique, car les utilisateurs voient la forme de ce qui arrive et la mise en page ne saute pas à l'arrivée.

Qu'est-ce qui fait un bon état vide ?

Trois choses : un visuel qui montre ce qui manque, un titre qui explique ce qui apparaîtrait ici, et un bouton qui mène à l'action suivante. Les meilleurs états vides font aussi office d'accueil — chaque nouvel utilisateur commence sur l'un d'eux, traitez-le donc comme votre paillasson de bienvenue, pas comme une impasse.

L'IA ajoutera-t-elle ces états automatiquement ?

Seulement si vous le demandez. L'IA construit ce que vous décrivez, et la plupart des gens ne décrivent que le chemin heureux. Ajoutez quatre lignes à chaque demande d'écran — chargement, erreur, vide, succès — et citez un écran bien construit comme modèle. Dès lors, chaque nouvel écran sort avec les quatre états.