web-dev-qa-db-fra.com

Dois-je afficher l'interface utilisateur dès que possible et la remplir plus tard ou afficher un préchargeur jusqu'à ce que j'obtienne mes données?

Je travaille sur une webapp riche en données avec Meteor. Je considérais précédemment que tout ce que je peux charger devrait être chargé dès que possible, et chaque partie de ma page en fonction des données devrait avoir son chargeur alors qu'elle n'a pas été reçue.

En conséquence, tout se charge assez rapidement, l'utilisateur peut explorer l'interface pendant le chargement des données, mais je reçois plusieurs filateurs simples remplissant mon interface. Il crée à mon humble avis un sentiment d'encombrement, ou un manque de simplicité de conception.

Je me demande si je devrais passer à une approche différente: utiliser une seule page entière (sauf pour la mise en page de navigation), un chargeur de fantaisie et afficher les choses en une fois lorsque j'obtiens ses données associées. Le résultat final serait certainement plus propre, mais l'interface utilisateur resterait cachée plus longtemps, sans oublier que toutes les données CDN (principalement des images) auront toujours leur chargeur une fois que le reste de la page aura été chargé et rempli.

Y a-t-il un consensus sur la façon de traiter cela? Une meilleure pratique? Pour autant que je sache, les grands joueurs (facebook, google, quora, etc.) n'utilisent pas un seul chargeur de page. Y a-t-il une raison?

7
Billybobbonnet

Un excellent moyen de faire en sorte que les utilisateurs perçoivent le chargement comme "rapide" consiste à afficher des images filaires factices, comme des espaces réservés.

Il donne à l'utilisateur un sentiment de progrès. Lorsque le filaire factice est chargé (ce qui prend moins de 100 millisecondes), il semble que le contenu y sera ajouté très bientôt.

enter image description here

Chargement factice ou icône de chargement?

Une icône de chargement boucle et ne montre pas la progression, donc elle devient ennuyeuse et imprévisible pour l'utilisateur à regarder.

Les filateurs ennuieront les gens, surtout si le chargement prend du temps. Si le chargement prend moins d'une seconde, il ne servira à rien d'afficher l'icône de chargement, car la plupart des utilisateurs ne le remarqueront même pas.

Icône de chargement ou barre de progression?

Selon le Nielsen Norman Group:

La ligne directrice principale consiste à utiliser un indicateur en boucle pour les retards de 2 à 9 secondes et un indicateur de pourcentage pour les retards de 10 secondes

https://www.nngroup.com/articles/progress-indicators/

Conclusion

Mon conseil serait de montrer d'abord la mise en page comme un filaire, en utilisant des espaces réservés pour le contenu. Une fois le chargement du contenu terminé, il peut apparaître dans les champs dédiés.

Sources

  1. http://uxmovement.com/mobile/3-tricks-to-make-your-load-times-feel-faster/
  2. http://www.justinmind.com/blog/loading-times-make-the-wait-feel-shorter/
  3. http://productblog.seek.com.au/3ux_tips_to_make_your_site_feel_faster
7
Max de Mooij