Dans cet article, je parlerai de différentes approches de conception qui aideront à donner l'impression que le site (ou l'application) est plus rapide.
REMARQUE L'article est inspiré d'une conversation avec Ada Cannon , qui défend les intérêts des développeurs dans le projet Internet Samsung et dans la série de nos vidéos YouTube Google Chrome Developers «Designer and Developer». Vous pouvez écouter un enregistrement plus complet de la conversation en le téléchargeant ou en vous abonnant à notre podcast sur la plate-forme iTunes ou Google Play Music .Vous êtes-vous déjà demandé pourquoi lorsque vous appelez quelque part le support, incluez-vous de la musique pendant que vous attendez? Et vous imaginez vos sentiments, si au lieu de la musique il y avait un silence de mort.
CNN a mené une enquête qui a montré que si l'appel d'un abonné est mis en attente, dans 70% des cas, l'appelant raccroche dans les 60 premières secondes de silence: il peut penser que l'appel est terminé et que l'attente elle-même semble plus longue. Par conséquent, le sens de «musique» est de remplir quelque chose d'attente et de prendre le temps de l'abonné.
Il y avait un problème similaire à l'aéroport de Houston: les passagers se sont plaints d'avoir dû attendre longtemps leurs bagages. Après que l'avion a atterri au terminal, les passagers sont rapidement arrivés au carrousel, et ils ont donc dû attendre leurs bagages en moyenne pendant sept minutes - et ils n'ont pas cessé de se plaindre, même lorsque l'aéroport a agrandi son personnel. Par conséquent, il a été décidé de prendre l'avion plus loin du terminal pour que les passagers aillent plus longtemps - et les
plaintes sont tombées à presque zéro .
Traduit en AlconostPerception du temps
La façon dont une personne perçoit le temps dépend du niveau d'anxiété, du fait qu'une personne bouge ou soit à la maison. Dans une étude que nous avons menée sur Google, il s'est avéré: si les utilisateurs étaient à la maison, 75% d'entre eux pensaient que le site fonctionnait rapidement, mais en dehors de la maison, ce chiffre est tombé à 52%. Pour les utilisateurs plus jeunes, le chargement du site semble plus lent que les personnes âgées. En général, le retard que nous percevons lors du chargement est de 80 millisecondes plus long qu'en réalité. Et si vous êtes obligé d'attendre, il semble que le temps passe encore plus lentement.
Les sites Web et les applications peuvent se charger et se chargeront lentement même s'ils sont optimisés, et 30% des utilisateurs penseront toujours qu'ils sont plus lents qu'ils ne le sont en réalité. Que faire à ce sujet? Évidemment: pour occuper l'utilisateur de certaines choses.
Chargement
Vous ne pouvez pas afficher un écran vide, vous ne pouvez pas forcer une personne à attendre sans aucune réaction de l'application - mais l'indicateur de téléchargement présente également des inconvénients.
Voici un exemple de mise en page d'une application mobile pour un journal, que j'ai appelé Tailpiece. L'utilisateur doit attendre que la page se charge, donc le temps de chargement semble plus long. De plus, cela donne l'impression que l'application est plus susceptible de «penser» que de «travailler».
Remplissage d'écran
Dans cet exemple, au lieu d'un indicateur de chargement, nous remplissons l'écran de contenu qui reflète la structure de la future page. Cette option est déjà meilleure, mais l'utilisation d'une telle solution n'est pas en soi l'approche la plus efficace: il y a toujours un sentiment d'erreur et nous ne voyons pas le contexte concernant le type de contenu qui devrait apparaître.
Chargement pas à pas
En utilisant un aperçu de la structure de la page, des métadonnées contextuelles et des images floues partiellement chargées, vous détournez l'attention de l'utilisateur plus longtemps et il commence à penser que la page fonctionne plus rapidement. Le but est de donner à l'utilisateur un indice sur ce qu'il voit, et en même temps de tout télécharger le plus rapidement possible.
Afin de masquer le temps de chargement, vous pouvez également créer des animations étape par étape - par exemple, comment nous le faisons dans les
exemples de conception «matériel» ci-dessous.
Animation étape par étape dans des exemples de conception «matérielle»Le chargement pas à pas fonctionne bien, car il suscite l'intérêt de l'utilisateur avant de passer au contenu - enfin, et distrait bien sûr de l'attente.
L'animation pas à pas lisse les transitions importantesLa navigation
Facebook ,
RedBooth ,
Spotify et
Google Plus ont mené des études qui ont révélé que si vous ne montrez pas les éléments de menu, l'utilisateur ne les recherchera pas et ne les utilisera pas. De plus, Facebook a appris que l'application avec la barre de navigation inférieure
semble être plus rapide . Parce que, d'une part, hors de vue - hors de l'esprit, et d'autre part - plus vite vous pouvez trouver le bon article, mieux c'est. Par conséquent, gardez les principaux boutons de navigation en vue au même endroit. De l'exemple avec l'application dans la conception «matérielle» de la
Chouette , vous pouvez voir que cette approche n'interfère pas avec la conception originale. De plus, sur les appareils mobiles, la navigation par le bas est plus pratique: l'utilisateur peut aller à la section souhaitée d'une seule main et travailler avec l'application semble plus rapide et plus naturel.
Réponse et communication
Il est très important de dire à l'utilisateur ce qui va se passer ensuite, mais vous devez réagir aux actions effectuées par l'utilisateur - il lui semblera donc que l'application (ou le site) est plus rapide. Pour informer l'utilisateur que l'action souhaitée est en cours d'exécution, vous pouvez utiliser des animations de mouvement, de guidage et d'ondulation.
En appliquant les techniques ci-dessus dans la conception du projet, vous pouvez diriger l'utilisateur vers l'endroit où il doit et distraire l'attente, donnant l'impression que l'application est plus rapide. Vous pouvez en savoir plus sur la perception des utilisateurs et comment en tenir compte dans la conception dans notre livre
Speed Matters .
À propos du traducteurL'article a été traduit par Alconost.
Alconost
localise des jeux , des
applications et des sites dans 70 langues. Traducteurs en langue maternelle, tests linguistiques, plateforme cloud avec API, localisation continue, chefs de projet 24/7, tout format de ressources de chaîne.
Nous réalisons également
des vidéos de publicité et de formation - pour les sites qui vendent, présentent des images, de la publicité, des formations, des teasers, des explicateurs, des bandes-annonces pour Google Play et l'App Store.
Plus de détails