# 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.

## 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:

### Rappel

Nom

## Les trois états

Saving…

Chargement

Saved

C'est réussi

Not saved

C'est échoué

## 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](../confirmacao.html#status-overlay) : l'assombrissement, le dessin et le mot.
-   [Notice](../feedback.html#notice) : les mots du résultat, au-dessus du conteneur.
-   [Écrans larges](/fr/design/telas-grandes/) : pourquoi la rétroaction ne va pas dans le coin.