L'utilisation d'une bannière entière comme lien est-elle une mauvaise utilisation?
Je travaille sur un site de commerce électronique qui a un grand espace de bannière de héros qui défile à travers un certain nombre de bannières 865 X 450 px. Chacune de ces bannières est liée à une offre spécifique du site. Lorsque j'ai initialement planifié la conception, mon plan était d'avoir un bouton d'appel à l'action dans chaque bannière qui serait le lien vers l'offre.
Mais en raison de restrictions techniques, nous avons constaté que la seule façon d'avoir un bouton d'appel à l'action lié sur chaque bannière était de coder en dur une carte d'image qui ne fonctionnerait pas bien si la bannière d'image était modifiée car la position du bouton serait fixe et le le contexte relatif du bouton serait perdu par rapport au texte. La possibilité de créer une nouvelle image-map est également hors de question puisque le site va être remis à un client qui n'a aucune idée des détails techniques de l'implémentation
Ainsi, la seule option alternative semble être de lier directement chaque image de bannière à l'offre.
Je me demandais simplement si c'était une mauvaise utilisation car l'utilisateur pouvait accidentellement cliquer sur une grande bannière défilante et se retrouver soudainement transporté vers une section du site sans comprendre comment il y est arrivé.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Non, c'est l'inverse. Comme vous avez un carrousel, il y a un problème de timing à résoudre. Le carrousel change d'images et les utilisateurs doivent cliquer rapidement sur la bannière pour accéder à l'offre actuellement visible, avant qu'elle ne se déplace à nouveau.
Selon loi de Fitts , illustré ci-dessus, le temps qu'il faut à un utilisateur pour cliquer sur une zone est fonction de la distance et de la zone cible. Si vous avez une grande zone cible - moins il faut de temps à un utilisateur pour cliquer sur le lien de la bannière.
Le problème avec le faux bouton est résolu en appliquant le même style des images du carrousel que le reste de la conception de votre site. De cette façon, les images du carrousel ne ressemblent pas à des ajouts, mais font partie de votre site.
Problème résolu, de manière technique et forme une vue de l'expérience utilisateur.
Je ne pense pas que ce soit une mauvaise idée.
Avoir des bannières entières cliquables est assez courant et certains utilisateurs s'y attendent même. Envisagez des bannières publicitaires graphiques (comme celles de Google AdSense). Même s'ils ont un bouton d'appel à l'action, la bannière entière est toujours cliquable.
De plus, je ne pense pas que sur un ordinateur de bureau, les utilisateurs cliquent vraiment accidentellement. Cliquer sur le bouton de votre souris nécessite un effort. Puisque vous concevez un site, votre principal public cible est probablement les navigateurs de bureau. Un "clic" accidentel est plus logique sur les appareils tactiles mobiles. Je peux cependant voir un utilisateur toucher accidentellement l'écran, en particulier lors du défilement de votre contenu. Les appareils mobiles gèrent généralement cela en affichant une courte animation avant de modifier le contenu. Par exemple, faites glisser le nouveau contenu sur le côté (navigation iPhone) ou mettez en surbrillance le lien entier avant d'agir sur celui-ci. Si la transition est animée, elle aide l'utilisateur à comprendre que son interaction est à l'origine du changement de contenu. Cela peut encore être accidentel, mais au moins l'utilisateur comprend et peut cliquer sur "retour".
Une transition animée peut être une jolie idée de toute façon. Pensez à assombrir un peu toute la bannière (un simple filtre de luminosité/montrant une superposition noire semi-transparente) soit lorsque la souris survole la bannière, soit lorsque le clic a été effectué. Ce sera une assez bonne indication que la bannière est interactive.
De plus, sur les navigateurs de bureau, n'oubliez pas que le curseur change lorsque vous survolez des zones cliquables. Cela peut être déclaré par CSS si cela ne se produit pas par défaut (curseur: main;). Cela le rend également assez clair ..
Utiliser la bannière entière comme lien est un bon choix. Il fournit une taille cible plus grande et prend en charge les utilisateurs qui supposent que des images entières sont des hyperliens (j'ai vu ce comportement lors des tests). Les clics accidentels ne sont pas vraiment un problème (ils sont difficiles à faire), et tant que vous ne cassez pas le bouton de retour en ouvrant une lightbox ou une page dans une nouvelle fenêtre, tout ira bien.