Un texte ou un spinner de "chargement" doit-il rester un minimum de temps à l'écran?
Dans une application que je construis, l'utilisateur peut cliquer sur un bouton pour charger plus de contenu, ce qui peut prendre 1 seconde ou jusqu'à X secondes (lorsque X secondes se sont écoulées, j'affiche un message d'erreur de temporisation). Il y a un texte de "chargement" (pour le moment, il pourrait finir par être un spinner) qui apparaît une fois que le bouton est cliqué et disparaît lorsque le contenu est chargé.
Mon idée est de montrer l'état de chargement dès que l'utilisateur clique. Si le contenu arrive "trop vite", le chargement apparaîtra pendant très peu de temps, donc l'utilisateur saura que quelque chose a été montré mais ne pourra pas réaliser ce que c'était (et avoir l'air étrange).
D'une part, le contenu doit arriver le plus tôt possible, mais d'autre part, il peut être étrange de montrer des informations sans un minimum de temps (2 secondes peut-être?) Pour les assimiler.
Avez-vous des idées sur la bonne façon de procéder?
Je ne cherche pas de solutions spécifiques sur la façon d'implémenter un état de chargement , @ Majo0od a fourni un lien très utile dans les commentaires . Je recherche une justification et/ou tout cas ou information pertinent, le cas échéant.
Dans cette situation, la solution utilisée par Facebook est excellente si vous pouvez le faire. Un "squelette" de la page est immédiatement affiché, puis le contenu réel remplit le squelette lorsqu'il est disponible. Les boîtes squelettes sont animées pour montrer la progression.
- Si la page se charge rapidement, le squelette est très rapidement remplacé par le contenu réel, et l'utilisateur peut même ne pas remarquer la différence si le squelette est proche de la même taille. Il ne souffre pas de "scintillement" ou d'une expérience de secousse en masquant immédiatement un indicateur de progression
- Si la page prend un certain temps à charger, le squelette montre à l'utilisateur ce à quoi il peut s'attendre et est animé pour montrer que le travail est en cours en arrière-plan.
Voici un article de blog expliquant comment obtenir un effet similaire. Je sais que vous ne demandiez pas les détails de l'implémentation, mais cela montre l'effet en action: http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html =
Sur la base des recherches de Jakob Nielson, je dirais que 1 à 9 secondes est un temps acceptable si vous ajoutez un spinner et que le minimum est de 1 seconde.
Voir cet article, Temps de réponse du site Web :
Les 3 limites de temps de réponse sont les mêmes aujourd'hui que lorsque j'ai écrit à leur sujet en 1993 (basé sur une recherche vieille de 40 ans par des pionniers des facteurs humains):
- 0,1 seconde donne le sentiment d'une réponse instantanée - c'est-à-dire que le résultat semble provenir de l'utilisateur et non de l'ordinateur;
- 1 seconde permet au flux de pensée de l'utilisateur d'être fluide. Les utilisateurs peuvent ressentir un retard et donc savoir que l'ordinateur génère le résultat, mais ils se sentent toujours en contrôle de l'expérience globale et qu'ils se déplacent librement plutôt que d'attendre sur l'ordinateur. Ce degré de réactivité est nécessaire pour une bonne navigation.
- 10 secondes retiennent l'attention de l'utilisateur.
Un délai de 10 secondes oblige souvent les utilisateurs à quitter un site immédiatement.
Un autre aspect que vous devriez considérer est que vous devriez faire la différence si vous avez également des barres de progression sur le site Web. S'il vous plaît voir cet article pour les références, Barres de progression vs Spinners: Quand utiliser lequel :
Les Spinners ne disent pas aux utilisateurs combien de temps le processus prendra pour se charger. Si vous l'utilisez pour de longs processus, ils finiront par se demander si quelque chose s'est mal passé avec l'application. L'absence de rétroaction crée une incertitude qui fait que les utilisateurs assument le pire. Ils supposeront que le chargement prendra beaucoup de temps, ce qui les découragera d'attendre. L'impatience s'installe et ils peuvent appuyer sur le bouton de retour ou quitter l'application.
Si c'est vraiment un problème (et je ne suis pas sûr que ce soit le cas), alors la solution la plus simple consiste à animer la suppression du spinner de chargement APRÈS le chargement du contenu.
De cette façon (parlons hypothétiquement), si le contenu est chargé en 0,05 seconde, le spinner de chargement n'est sans doute que suffisamment long pour être présenté, ne commence pas à tourner, mais le processus de suppression peut prendre une seconde complète.
L'animation de suppression peut être un mélange de fondu et de rétrécissement, de fondu et de déplacement, ou tout autre élément qui offre suffisamment de temps à l'écran pour que l'utilisateur reconnaisse le spinner. Il doit également indiquer que le spinner de chargement n'est plus nécessaire, ni opérationnel, et que le contenu est chargé et prêt.
Il doit être clair que l'utilisateur n'a pas besoin d'attendre la suppression complète du spinner de chargement pour interagir avec le contenu.
Pourquoi je ne pense pas que ce soit une préoccupation:
Si vous utilisez (et vous devriez) un spinner généralement reconnaissable, même un petit aperçu de celui-ci fournira suffisamment d'informations pour que le spectateur sache ce qu'il a vu et l'ignore si le contenu se charge très rapidement.
Mon approche habituelle pour gérer les opérations d'une durée imprévisible est de faire exactement le contraire de ce que vous proposez: plutôt que de forcer l'indicateur de "chargement" à rester à l'écran plus longtemps qu'il ne le faut, au lieu de cela de retarder l'affichage de l'indicateur lui-même par certains (assez court ) durée.
Cela évite le problème de clignotement et de désactivation de l'indicateur si rapidement qu'il ressemble à une erreur:
- Si l'opération se termine rapidement, vous pouvez immédiatement afficher les résultats et annuler l'affichage de l'indicateur de "chargement" avant qu'il n'apparaisse.
- Si l'opération prend du temps, l'indicateur apparaîtra dans les délais, avant que l'utilisateur ait suffisamment de temps pour vraiment remarquer qu'il a été retardé.
La durée exacte du retard du spinner dépend dans une certaine mesure de la tâche en cours d'exécution et de l'attente de l'utilisateur quant au temps que cela prendra, mais elle doit être suffisamment courte pour que l'utilisateur n'ait pas le temps de penser "peut-être mon cliquez sur "Je ne me suis pas inscrit" et réessayez. (Bien que le cas échéant, vous pouvez atténuer cela en associant le spinner de chargement à un indicateur plus subtil et non persistant que le clic a été reçu.)
Ceci est très utile lors de l'affichage de données qui peuvent ou non déjà être dans le cache du navigateur: c'est-à-dire si le navigateur possède déjà les données, il peut les afficher immédiatement; si ce n'est pas le cas, il doit attendre un aller-retour sur le serveur - ce qui signifie que vous aurez des réponses très très rapides, certaines relativement lentes et très peu entre les deux.
Un moyen simple de l'implémenter sur le Web est de bourrer toute la logique d '"affichage différé" dans le CSS En ce qui concerne le DOM, il vous suffit de montrer le spinner lorsque la demande est faite et de le supprimer lorsque la demande est terminée, très simple, aucune logique de synchronisation nécessaire. L'animation CSS peut être utilisée pour garder le spinner invisible jusqu'à ce que vous soyez certain que l'utilisateur a besoin de le voir, comme:
@keyframes delayVisibility {
0% { opacity:0; }
99% { opacity:0; }
100% { opacity:1; }
}
.spinner {
animation: delayVisibility linear 1s; /* exaggerated; 1s is too long */
}
La solution à votre problème se trouve dans les Material Design Motion Guidelines .
Le postulat Durée et vitesse du mouvement précise que:
Lorsque des éléments se déplacent entre des positions ou des états, le mouvement doit être suffisamment rapide pour ne pas provoquer d'attente, mais suffisamment lent pour que la transition soit comprise. Gardez les transitions courtes car les utilisateurs les verront fréquemment.
Et cela semble approprié. Techniquement, l'utilisateur ne se souciera pas d'un autre, disons 300 ms, de son temps perdu à regarder le chargeur terminer la transition.
Les animations sont intégrées dans les sites Web et les applications afin de bénéficier d'un flux naturel dans l'environnement du site Web/de l'application. Dans le cas où l'animation est tuée brusquement au cours de son déroulement, simplement parce que le contenu est chargé dans une fraction de seconde plus petite que celle de l'animation, l'objectif principal du chargeur de servir de rétroaction et une transition en douceur est vaincu.
Par conséquent, je suppose que terminer la transition du chargeur serait le bon choix à faire, à condition que le temps de réaction du chargeur soit suffisamment rapide pour ne pas provoquer d'attente, mais assez lent pour que la transition peut être compris.
Cet article de Viget suggère de laisser une animation de chargement terminer son cycle plutôt que de s'arrêter à mi-chemin (et donne le code de cette fonctionnalité).
Avez-vous des idées sur la bonne façon de procéder?
L'idée générale est de laisser l'utilisateur comprendre ce qui se passe, à l'écran sans freiner les attentes natives, en particulier lorsque l'interaction est impliquée dans le processus.
Donc, ce que vous voulez faire, c'est appliquer l'indicateur de chargement (texte/animation/icône/etc) à côté du bouton de chargement (vous ne voulez pas utiliser le chargement au centre de l'écran, par exemple), mais avec une attention particulière à a) ce que Kartik Iyer a dit à propos de assez lentement et b) ce que Madalina Taina a dit à propos de "<1 sec" et "> 1 sec".
Il est extrêmement important de comprendre qui est-ce pour vous. Si vous le faites pour certains enfants de geek technologiques impliqués dans la technologie moderne. 24/7 pour toute leur vie ou pour une génération plus âgée qui a du mal à utiliser un PC avec clavier et souris.
C'est difficile, si vous ne savez pas à l'avance combien de temps prendra l'opération. Une solution à cela (je n'ai pas lu l'article indiqué par @MajoOod, donc je pourrais répéter ce qui y est dit) est d'allouer et d'étiqueter un espace dans l'interface utilisateur pour un indicateur de progression. Ensuite, si l'opération ne prend pas assez de temps pour que le téléspectateur voit vraiment l'indicateur de progression s'allumer et s'éteindre, l'étiquette permanente sur l'espace indiquera au téléspectateur ce qui vient de se passer. Vous pouvez même modifier le libellé pour inclure le temps nécessaire à la dernière opération, par exemple, "Fichier chargé en 0,05 seconde".