Introduction de l'article de wulin.com (www.vevb.com): Il y a moins d'articles qui utilisent la technologie frontale pour stimuler l'expérience utilisateur. J'espère que cet article vous apportera de nouvelles perspectives et de la réflexion. L'objectif ultime est d'espérer que les utilisateurs peuvent avoir une meilleure expérience.
HUA: Récemment, j'ai fait quelques optimisations au carrousel du site Web. Bien que cela semble simple, la réflexion du point de vue de l'utilisateur peut vous offrir une expérience intéressante.
Les photos de carrousel sont essentielles pour de nombreux sites Web. Ils affichent plus de contenu dans un espace limité et peuvent utiliser des effets de commutation éblouissants pour attirer les utilisateurs. Voici des captures d'écran de certains sites Web bien connus:
Il n'est pas difficile d'utiliser JavaScript de la technologie frontale pour créer des images de carrousel. Tout d'abord, nous devons implémenter 3 fonctions de base:
1. L'image est jouée cycliquement à un certain intervalle de temps;
2. Boucle de navigation numérique avec l'image;
3. Affichage de l'image de contrôle de navigation numérique;
Vous sentez-vous malheureux après l'expérience? Par exemple, lorsque la souris entre dans l'image et veut juste voir clairement les détails, vous passez à l'image suivante. Oui, cela est très nocif pour les sentiments de l'utilisateur. Comment le résoudre, le principe est très simple. Déplacez la souris dans l'image et en pause le carrousel, et la souris hors de la souris pour reprendre le carrousel.
Bien que de nombreux sites Web aient déjà implémenté cette fonction, il y a un problème sans exception - lorsque la souris retire l'image, elle doit encore attendre quelques secondes avant de passer à l'image suivante. Cette expérience est-elle raisonnable? Du point de vue de l'utilisateur, lorsque l'utilisateur termine la visualisation, la souris déplace l'image et la logique raisonnable devrait être de passer immédiatement à l'image suivante; Du produit ou au point de vue opérationnel, ils espèrent également que l'utilisateur pourra voir plus d'images publicitaires.
La taille de l'image du carrousel de certains sites Web est souvent relativement importante, en particulier les sites Web de commerce électronique. Afin d'attirer l'attention des utilisateurs et de créer une atmosphère heureuse, celles-ci sont raisonnables. Cependant, l'image du carrousel devient plus grande et l'espace occupé par le premier écran deviendra plus grand. Lorsque l'utilisateur fonctionne sur la page, il peut glisser accidentellement sur l'image, puis glisser l'image. Ce processus est extrêmement court. Si la méthode correspondante répond immédiatement à la méthode correspondante provoque la page ou ne change pas la page, elle entraînera une confusion ou même des inconvénients à l'utilisateur. Par exemple, si l'utilisateur glisse accidentellement dans et hors de l'image du carrousel plusieurs fois sur une période de temps, la réponse de l'image du carrousel est interrompue et reste sur l'image fixe, ce qui fera sentir l'utilisateur que le carrousel n'est pas valide.
Par conséquent, un mécanisme de tolérance aux défauts est nécessaire pour cette situation, c'est-à-dire une réponse retardée. Si vous constatez que l'utilisateur n'a déplacé que instantanément, il ne répondra pas, tout comme la souris ne passe jamais par l'image; Lorsque la souris reste sur l'image pendant une certaine période de temps, on pense que l'utilisateur doit vraiment regarder l'image et la méthode correspondante répondra. Ce délai est généralement considéré comme ne soit pas inférieur à 200 ms.
Pour résumer, il y a deux points pour implémenter la fonction d'expérience améliorée:
4. Déplacez l'image vers le haut et en pause. Après avoir déplacé l'image, sautez immédiatement à l'image suivante et continuez au carrousel;
5. La souris réagit après retard;
Après avoir tellement plaint, jetons un coup d'œil au code. Les étudiants non finaux peuvent penser que la mise en œuvre des deux fonctions ci-dessus nécessite beaucoup de code, mais en fait, ce ne sont que quelques lignes:
Bien qu'il n'y ait pas beaucoup de code, il existe encore des techniques de base, comme le contrôle booléen dans la boîte rouge est la clé de la fonction de retard.
Après avoir écrit cela, l'expérience utilisateur semble être assez bonne, alors y a-t-il encore de la place pour l'optimisation? !
La vitesse Internet chinoise se classe deuxième au monde, et même dans de nombreux endroits, la vitesse Internet est d'environ 1 m, il est également important d'améliorer l'expérience utilisateur de la vitesse Internet à basse vitesse. Chargement des photos de carrousel à la demande est l'une des méthodes. Lorsque vous passez à l'image correspondante, vous pouvez télécharger les photos requises. C'est la seule façon d'accélérer l'affichage de l'image et d'enregistrer le trafic. Mais tout a deux côtés, avec des avantages et des inconvénients, voir l'image:
Cela devrait être une image que vous voyez fréquemment. Le processus de chargement d'image est exposé aux utilisateurs, ce qui est particulièrement évident à des vitesses de réseau faibles. La méthode pour compenser ce défaut est également très simple - l'image est préchargée et une invite d'icône d'attente est donnée lors du chargement et continue de regarder l'image:
Le préchargement peut permettre à l'image d'être entièrement affichée à la fois sans exposer le processus de chargement, donnant ainsi aux utilisateurs des attentes raisonnables.
Les deux expériences améliorées qui ont finalement été mises en œuvre sont les suivantes:
6. Chargement des images au besoin;
7. L'image est préchargée et une invite d'icône d'attente est donnée pendant le processus de chargement.
Les étudiants peuvent cliquer ici pour découvrir l'effet amélioré de l'image du carrousel.
Il existe peu d'articles qui utilisent une technologie frontale pour stimuler l'expérience utilisateur. J'espère que cet article vous apportera de nouvelles perspectives et de la réflexion. L'objectif ultime est d'espérer que les utilisateurs peuvent avoir une meilleure expérience.