Les états de chargement existent pour répondre à une question de l'utilisateur : est-ce que quelque chose se passe ? Sans réponse, les gens tapent à nouveau, rechargent la page ou quittent. La bonne réponse dépend du temps qu’ils attendent.
Pour des attentes très courtes, inférieures à environ un dixième de seconde, la plupart des gens ne remarquent pas de retard, donc un indicateur ne fait qu'ajouter du scintillement. Une technique courante consiste à attendre brièvement avant d'afficher une icône, de sorte que les réponses rapides n'en montrent jamais.
Pour une attente d'une seconde ou de quelques secondes, affichez un retour là où le résultat apparaîtra. Un écran squelette, un contour gris de la mise en page à venir, fonctionne bien pour les listes, les cartes et les profils car il montre ce qui arrive et réduit le changement de mise en page. Une roulette fonctionne pour de petites zones ou lorsque le résultat n'a pas de forme prévisible.
Pour les tâches longues telles que les téléchargements, les exportations ou la génération d'IA, affichez les progrès réels si vous pouvez les mesurer, expliquez ce qui se passe et laissez les gens annuler ou poursuivre d'autres travaux. Une roulette qui tourne pendant une minute sans autre information ressemble à un échec.
Le contrôle qui a déclenché l’action a également besoin d’un état. Un bouton de soumission qui passe à un état de chargement et ne peut pas être enfoncé deux fois, empêche les commandes et les messages en double. Une fois le chargement terminé, passez clairement au succès ou à l'erreur plutôt que de revenir silencieusement aux valeurs par défaut.
L'animation aide ici, mais restez calme et courte en boucle, et respectez le réglage de mouvement réduit. ExodeUI, que nous créons, vous permet de concevoir un chargeur ou un bouton avec des états de chargement, de réussite et d'erreur dans un seul fichier entre lequel votre code bascule.