Actions asynchrones
Concevez une mutation UX fiable avec des mises à jour optimistes, des niveaux de rétroaction, réessayez et annulez les stratégies.
Vue d’ensembleLien vers la section
Les actions asynchrones sont les endroits où la qualité du produit devient visible.
Contrairement à la récupération de données, les actions changer la réalité:
- enregistrer des données
- supprimer du contenu
- Déclenchement de la logique commerciale
- Mise à jour de l'état utilisateur
Ce guide définit comment gérer les mutations d'une manière qui se sent:
- rapide
- fiable
- Compréhensible
- prêt pour la production
Principe clé
Le chargement est une question d'attente. Les actions sont basées sur la confiance.
Ce que vous allez mettre en œuvreLien vers la section
Feedback immédiat
Niveau de feedback correct
Stratégies de rétablissement
Modèle mentalLien vers la section
Les actions doivent se sentir instantanées Les erreurs doivent se sentir récupérables Rien ne doit se sentir brisé
ÉtapesLien vers la section
Choisir optimiste vs pessimisteLien vers la section
Toutes les actions ne doivent pas se comporter de la même manière.
Utilisez une interface utilisateur optimiste lorsque
- bascules (activer / désactiver)
- Mise en vedette / faveur
- Mises à jour réversibles
Utilisez l'interface pessimiste lorsque
- paiements
- Des actions destructrices irréversibles
- Modifications sensibles aux autorisations
Article premier
Si vous pouvez annuler en toute sécurité à optimiste Si vous ne pouvez pas attendre la confirmation du serveur
Appliquer le bon niveau de feedbackLien vers la section
Toutes les actions ne méritent pas le même poids UX.
Rétroaction en ligne
Inline feedback keeps users in flow and close to the affected element.
Réessayer et annuler les fluxLien vers la section
La récupération fait partie de l’UX.
Réessayer
- doit être explicite
- doit être en sécurité
- Doit être idempotent
Annuler
- fonctionne mieux pour les actions destructrices
- Nécessite un véritable backend
- devrait être immédiate
Important
Undo n'est pas une astuce UI. Il doit être soutenu par votre logique de backend.
Niveaux de rétroactionLien vers la section
| Niveau | Quand utiliser |
|---|---|
| Inline | attendues, les changements locaux |
| Toast | Confirmation ou échec sans blocage |
| boîte dialogue | Des actions destructrices ou irréversibles |
Ne jamais mélanger les rôles.
Messagerie d'erreurLien vers la section
Bons messages d'erreur :
- Expliquer ce qui a échoué
- Suggérer quoi faire ensuite
- Restez calme et clair
ExemplesLien vers la section
Good
- "Je n'ai pas pu enregistrer les changements. Vérifiez votre connexion et réessayez. »
- « Le paiement a échoué. Essayez une autre carte. »
Bad
- “Quelque chose a mal tourné”
- « Erreur inconnue »
Article premier
Toujours inclure: ce qui a échoué + quoi faire ensuite
Motifs communsLien vers la section
Enregistrer le fluxLien vers la section
- État de chargement en ligne
- toast succès ou erreur
- Réessayer en cas d'échec
Supprimer le fluxLien vers la section
- boîte de dialogue de confirmation
- toast avec undo
- Réessayez si la restauration échoue
Basculer le fluxLien vers la section
- changement instantané d'interface utilisateur
- rollback sur erreur
- toast feedback
Guide de décisionLien vers la section
Préférez
- retour instantané sur les filateurs
- Effacer les chemins de récupération
- Niveaux de feedback cohérents
- Mises à jour optimistes en toute sécurité
Éviter
- blocage de l'interface utilisateur pour les actions à faible risque
- défaillances silencieuses
- pas de réessayer ou annuler le chemin
- Incohérence des schémas de rétroaction
Pourquoi cela compteLien vers la section
Les actions asynchrones sont l'un des plus grands signaux de confiance dans un produit.
Mauvaise mutation UX conduit à:
- hésitation
- clics répétés
- confusion
- Perte de confiance
Bonne mutation UX se sent:
- rapide
- prévisible
- coffre-fort
C'est là que les produits commencent à se sentir prêt pour la production.