Comment implémenter un spinner occupé avec un bouton
Que doit-il se passer lorsqu'un utilisateur clique sur un bouton qui déclenche une action qui prend peu de temps à terminer, montrant un spinner occupé pour indiquer le traitement?
[click]↖⇒[click] ↖⚙- Le curseur de la souris se transforme en curseur de spinner occupé par le système[click]⇒⚙- Le spinner occupé remplace entièrement le bouton[click]⇒[ ⚙ ]- Le spinner occupé remplace le texte du bouton[click]⇒[click ⚙]- Le spinner occupé apparaît à l'intérieur du bouton[click]⇒[click] ⚙- Le spinner occupé apparaît à l'extérieur du bouton[click]⇒[⚙ please wait...]- Le spinner occupé remplace le texte du bouton, accompagné du texte[click]⇒⚙ please wait...- Le spinner occupé remplace entièrement le bouton, accompagné du texte
Laquelle des solutions ci-dessus est la plus conviviale?
La réponse qui est la plus conviviale est toujours que cela dépend. Cela dépend de nombreux facteurs dont le principal est qui est votre public cible? Quels sont leurs connaissances et leurs modèles mentaux.
Pour cet exemple, comme je n'ai aucune idée du contexte de l'action, je recommanderais de penser à peu de choses:
- Quelle action cet utilisateur a-t-il entreprise? (action)
- À quoi s'attendaient-ils? (connaissance)
- Leur attente est-elle différente du comportement du système (écart)
- Combler l'écart en fournissant des commentaires à l'utilisateur (compréhension)
Pour votre exemple
[cliquez] ↖ => [cliquez] ↖⚙ - Le curseur de la souris se transforme en curseur de spinner occupé par le système
- Quel système est occupé?
[click] => ⚙ - Le spinner occupé remplace entièrement le bouton
- Pourquoi le bouton a-t-il disparu?
[click] => [⚙] - Le spinner occupé remplace le texte du bouton
- Cela me semble être une bonne solution, bien que ce ne soit que mon opinion. Cette approche suppose également que l'utilisateur saura ce que signifie cette rotation.
[click] => [click ⚙] - Le spinner occupé apparaît à l'intérieur du bouton
- L'utilisateur peut-il cliquer à nouveau sur le bouton? Que se passera-t-il s'ils le font?
[click] => [click] ⚙ - Le spinner occupé apparaît à l'extérieur du bouton
- L'utilisateur peut-il cliquer à nouveau sur le bouton? Que se passera-t-il s'ils le font?
[cliquez] => [⚙ veuillez patienter ...] - Le spinner occupé remplace le texte du bouton, accompagné du texte
- Bonne solution car l'utilisateur a un retour d'information sur le fait qu'il se passe quelque chose et doit attendre. Peuvent-ils cliquer sur le bouton à ce stade? Que se passera-t-il s'ils le font?
[cliquez] => ⚙ veuillez patienter ... - Le spinner occupé remplace entièrement le bouton, accompagné du texte
- Où est passé le bouton? L'ai-je cassé? Oh ouais je dois attendre ...
À mon avis, les 3ème et 6ème options sont les meilleures, mais je suggérerais de trouver des études à ce sujet ou d'effectuer un test d'utilisabilité et de voir comment vos utilisateurs réagissent à ces différentes approches.
[cliquez] ↖ => [cliquez] ↖⚙
- Cela peut être très déroutant pour l'utilisateur, car il ne sait pas spécifiquement si un processus est en cours d'exécution sur le site Web ou sur son ordinateur.
[cliquez] => ⚙
- Cela aurait été génial seulement, cela ne transmet pas suffisamment d'informations à l'utilisateur
[cliquez] => [⚙]
- Ceci est similaire à l'option ci-dessus, toujours pas beaucoup d'informations transmises, l'utilisateur extrême ne saura pas ce que cela signifie à coup sûr.
[cliquez] => [cliquez ⚙]
- Cela incite toujours l'utilisateur à cliquer et il est occupé par le travail en même temps, c'est déroutant pour la plupart des utilisateurs
[cliquez] => [cliquez] ⚙
- Ceci est similaire au précédent, juste au-dessus. Assurez-vous que la plupart des utilisateurs cliquent sur ce bouton même lorsqu'une flèche est affichée.
[cliquez] => [⚙ veuillez patienter ...]
- C'est bien mieux, pour la plupart seulement, c'est toujours un bouton, ce qui implique "il faut cliquer" pour un certain nombre d'utilisateurs. Sauf s'il est désactivé, il devient parfait.
[cliquez] => ⚙ veuillez patienter ...
- Ceci est une autre excellente option, en tirant complètement sur le bouton et en évitant aux utilisateurs de possibles clics consécutifs, et en leur faisant savoir qu'un processus est en cours.
RÉSUMÉ
Les dernières et avant-dernières options (désactivation du bouton) sont les meilleures sélections.
Je crois qu'aucun des exemples.
Je préférerais commencer à charger le squelette HTML et CSS de tout ce que ce bouton doit remplir. Supposons que lorsque les utilisateurs cliquant sur le bouton, il fait une demande REST pour remplir un tableau, dès que l'utilisateur clique sur le bouton, il commence à charger le squelette HTML et CSS, cette fois dans l'animation est utilisée comme un temps d'attente pour l'utilisateur.
Ceci est un exemple bien expliqué de ce que je veux dire: BLOG - arrêtez d'utiliser-chargement-spinner-theres-quelque chose de mieux
Je ne changerais jamais le curseur de la souris. À mon humble avis, le meilleur UX est de désactiver le bouton dès qu'il est cliqué et de changer le texte du bouton en 'Veuillez patienter ...'/'Chargement ...'. Appelez-le à l'ancienne, cela fonctionne mieux pour les mises en page Web et mobiles.
Changer le curseur de la souris n'est pas une bonne idée et risque de dérouter l'utilisateur. Le spinner occupé est la conséquence d'une action entreprise par l'utilisateur, il doit donc être affiché en relation avec cette action.
Le spinner doit être suffisamment visible pour ne pas être manqué par l'utilisateur. Si vous ne remplacez que le texte à l'intérieur du bouton, ou si vous faites apparaître la double flèche dans le bouton, l'utilisateur peut facilement ignorer une si petite modification.
Je voudrais changer l'état du bouton pour donner à l'utilisateur un retour visuel immédiat que son clic a été enregistré, et ajouter le spinner à côté avec le message "Veuillez patienter". Le libellé du message pourrait être amélioré si vous avez un rédacteur de micro-copie. Donner une estimation du temps serait également une bonne chose, si c'est réaliste.