Comportement de la galerie à défilement automatique
Il y a un petit site Web d'entreprise qui offre un certain nombre de services.
Sur la page d'accueil, il y a une vitrine des services offerts. Il y a une bande contenant un certain nombre d'éléments sous forme réduite (petite photo), et sous la bande il y a un très grand composant qui montre une grande photo expérientielle avec les informations complètes sur l'élément actuellement sélectionné sur la bande. Schématiquement, cela ressemble à ceci:
Je veux que la galerie défile automatiquement à travers les éléments, mais j'ai également besoin qu'elle soit interactive - l'utilisateur doit pouvoir se concentrer sur un élément de son choix.
Quelle est la meilleure façon de définir le comportement ici? Plus précisément, une fois que j'arrête le défilement automatique, quand dois-je le réactiver? Un de mes problèmes est que l'élément du bas occupe toute la largeur de la page et est assez grand, donc le fait que la souris reste là ne signifie pas nécessairement quelque chose.
Des exemples d'éléments similaires sur des sites Web existants sont très appréciés.
Merci!
ÉDITER
Je n'ai peut-être pas été clair - par "défilement automatique", je ne veux pas dire que les photos glissent progressivement dans une vue pour être remplacées par d'autres. Ce n'est pas animé dans ce sens . Ils changent juste de temps en temps - probablement environ 5 secondes, car la sélection passe à l'élément suivant dans la bande.
EDIT 2
Le comportement que j'avais en tête est proche de celui ici (restez un peu sur la page jusqu'à ce que vous voyiez la photo changer).
- En cas de doute, contrôlez l'utilisateur.
Vous pouvez commencer en faisant défiler. Dès qu'ils cliquent sur l'une des vignettes, ARRÊTEZ. Montrez cette image. C'est celui qui les intéresse! Si vous avez le sentiment qu'après 10 secondes, vous devriez recommencer à faire défiler, résistez à l'envie. Au lieu de cela, fondez quelque chose sur l'image qui permet à l'utilisateur de recommencer le défilement automatique s'il le souhaite. Il pourrait s'agir d'un hypertexte disant "diaporama". Il peut s'agir de boutons de diaporama cliquables.
Le la raison du défilement est de leur montrer l'étendue de ce qui est là. Une fois qu'ils vous ont montré qu'ils sont intéressés et qu'ils savent comment sélectionner l'une des images dans les miniatures, vous avez atteint votre objectif. Ne le détruisez pas en leur arrachant le contrôle.
Ce type de publicité tournante est devenu très populaire ces dernières années. Cependant, un comportement reconnaissable n'a pas encore été établi
Un site comme disney.com.a ou abc.com a des images en rotation constante. Même lorsqu'une certaine image est sélectionnée via l'interface proposée, la rotation continuera.
Un autre exemple est skins.net qui a implémenté un bouton pause qui désactive la rotation automatique.
Si les images contiennent du texte accommodant, un utilisateur peut trouver la rotation automatique très frustrante. Cela dit, s'il n'y a pas d'interface pour arrêter la rotation et que vous êtes réellement intéressé à lire un bouton de pause, cela pourrait être une bonne solution.
Je pense qu'une fois que l'utilisateur a identifié que les vignettes peuvent être cliquées, la rotation automatique doit être désactivée. Voici un exemple en action australianopen.com
Je pense que vous avez raison de penser que le fait de se fier à la position de la souris ne serait ni précis ni fiable. Le cyclage automatique des photos devrait avoir ce que toute animation continue devrait avoir: des commandes évidentes pour faire une pause et jouer. Les utilisateurs peuvent arrêter et démarrer le diaporama quand ils le souhaitent. Cela peut être combiné avec une pause automatique lorsque l'utilisateur clique sur une miniature (ou une image expérientielle), comme d'autres l'ont suggéré sur cette page. Cependant, un contrôle explicite de pause/lecture indiquera clairement que l'utilisateur peut suspendre l'animation. Cliquer sur une image a une mauvaise découvrabilité.
Ensuite, il y a des utilisateurs comme moi qui suspendraient l'animation immédiatement après son chargement, car l'animation peut être vraiment ennuyeuse et a été reconnue comme telle depuis 1996 . C'est moins un problème si la liste et la photo expérientielle sont les seules choses sur la page car il n'y a rien pour que l'animation puisse distraire l'utilisateur. Cependant, s'il y a du texte à lire au-dessus ou en dessous de l'animation, vous avez un problème potentiel.
Avez-vous envisagé non l'auto-cyclisme? Afficher la photo expérientielle la plus convaincante par défaut ou, si les utilisateurs proviennent d'un moteur de recherche, essayez de choisir la photo qui correspond le mieux à leur critère de recherche respectif. Sinon, ne disposez d'aucune image expérientielle sur la page d'accueil et utilisez l'espace pour une liste de services élargie afin que l'utilisateur puisse mieux évaluer chaque élément. Faites de chaque article un lien vers la photo expérientielle associée sur une page séparée avec de petits liens vers les autres services ci-dessous. Certains utilisateurs peuvent cliquer sur Retour pour revenir à la page d'origine afin de choisir le service suivant, en supposant que les utilisateurs sont intéressés par plusieurs services. Cela ajouterait un clic pour certains utilisateurs, mais cela peut être mieux que les utilisateurs qui doivent déterminer si et comment ils peuvent contrôler l'animation.
Franchement, je ne comprends pas l'activité que l'automobile est censée soutenir. Nous attendons-nous vraiment à ce que les utilisateurs regardent passivement une liste animée comme s'ils regardaient la télévision? Une liste de services ne ressemble pas à un récit qui doit se dérouler à un rythme défini dans un ordre défini. Si un élément d'intérêt (léger) quitte la région expérientielle, vous vous attendez vraiment à ce que les utilisateurs attendent qu'il se reproduise? Cela peut suffire à annuler tout minimum d'enthousiasme que l'utilisateur a rassemblé. C'est contre-productif.
Peut-être que le problème est qu'une image expérientielle non animée par défaut amènera les utilisateurs à cliquer sur Retour car ils supposent que le site n'offre qu'un seul service (ce n'est pas celui qu'ils veulent). Étant donné la rapidité avec laquelle les utilisateurs cliquent sur Précédent, je doute que l'animation aidera: si chaque image expérientielle est suffisamment longue pour évaluer s'il s'agit du bon service, elle est suffisamment longue pour cliquer sur Précédent avant que l'utilisateur n'ait le temps de voir apparaître un autre service.
Les utilisateurs ont une souris dans leurs mains respectives et ils l'utilisent sans réfléchir. Je pense qu'ils préfèrent parcourir la liste de services et choisir les articles qui semblent les plus intéressants dans l'ordre qu'ils choisissent, et les regarder aussi longtemps qu'ils le souhaitent, plutôt que d'attendre que les articles apparaissent d'eux-mêmes et d'intervenir empêche la disparition d'un élément d'intérêt. L'intérêt pour chaque service variant considérablement d'un utilisateur à l'autre, c'est un vrai défi de trouver la bonne fréquence de cyclisme sans que certaines photos expérientielles apparaissent trop longtemps et d'autres trop peu.
Je suggère d'arrêter la rotation lorsque la souris passe sur une petite image (et montre les détails ci-dessous). Tant que la souris est terminée, l'animation est arrêtée. Lorsque la souris sort des petites images, vous pouvez redémarrer l'animation.
De cette façon, l'utilisateur peut passer d'une image à l'autre à la vitesse qu'il souhaite, s'il veut revenir en arrière d'une image, le bouton pause pourrait être frustrant dans ce cas, car il devra redémarrer l'animation et attendre la prochaine itération.
Je laisse le clic pour entrer dans la section actuellement sélectionnée.