Retour d'information en place
Le retour d'information d'une action se produit là où elle s'est produite : le conteneur indique qu'il fonctionne et comment il s'est terminé, et les mots apparaissent juste au-dessus.
Sur cette page
Règle
Toute action qui prend du temps ou modifie un état répond dans le très même conteneur où elle est arrivée : pendant son exécution, le conteneur s'assombrit et une ligne dessinée à la main tourne au centre ; à la fin, un coche en mousse ou un X en vin, et le Notice arrive juste au-dessus, avec les mots. Pas de toast dans un coin de l'écran.
Test result:
Les trois états
Saving…
Saved
Not saved
La séquence
- Chargement : l'assombrissement arrive (320ms) et la ligne tourne jusqu'à ce que la réponse arrive. Le conteneur ne prend plus de clics, et une seconde soumission est ignorée.
- C'est réussi : le coche est dessiné en mousse, reste un instant, puis l'assombrissement part. Le Notice de succès arrive juste au-dessus.
- C'est échoué : le X est dessiné en vin, reste un instant, puis l'assombrissement part. Le Notice d'erreur arrive au-dessus et prend le focus ; ce que la personne a écrit reste toujours là.
- Motion réduit : rien ne tourne ou n'est dessiné ; le dessin apparaît terminé, et le mot dit le reste.
Faire et ne pas faire
Do
Le formulaire s'assombre et affiche la case ; l'avertissement « Rappel sauvegardé » apparaît juste au-dessus.
La rétroaction indique où se trouve le regard, sur n'importe quelle taille d'écran.
Don’t
Un « Sauvegardé ! » toast dans le coin inférieur de la fenêtre qui disparaît en 3 secondes.
Sur un écran 4K, le coin est à demi-mètre du formulaire : la personne sauvegarde et ne voit pas si cela a fonctionné.
Rédaction
- Chargement : le verbe en -ing (« Sauvegarde… », « Suppression… »).
- Fin : un ou deux mots (« Sauvegardé », « Non sauvegardé »). L'avertissement porte la phrase entière et ce qu'il faut faire.
Composants
- StatusOverlay : l'assombrissement, le dessin et le mot.
- Notice : les mots du résultat, au-dessus du conteneur.
- Écrans larges : pourquoi la rétroaction ne va pas dans le coin.