Comment puis-je indiquer que les images peuvent être cliquées sur un site mobile?
J'ai créé un site mobile avec une page de portfolio. Sur la version de bureau, le fait de passer la souris sur les images change le pointeur de la souris en un doigt indiquant que l'image est liée par un lien hypertexte.
Pour essayer d'obtenir le même effet sur mobile, j'ai placé un "petit pointeur à doigt pulsant" sur chaque image hyper-liée, mais après un certain temps, cela me dérange.
Y a-t-il une meilleure façon?
J'ai utilisé une icône de "pointeur de doigt" délavée dans le coin des images, et elle ne semble pas trop ennuyeuse avec une quantité correcte de décoloration. J'en ai aussi essayé un "pulsé", ce qui a provoqué des ennuis. Je n'ai pas entendu de mauvais commentaires sur le fané, il a donc au moins réussi les tests avec mon public. Donc, s'il n'est pas évident pour tout le monde que certaines images sont cliquables sur l'écran tactile, il existe une astuce décolorée.
Les utilisateurs d'appareils mobiles dotés d'écrans tactiles ont tendance à penser que tous les objets de taille raisonnable peuvent être cliqués. Regardez n'importe quelle application mobile et vous constaterez que la plupart des images sont cliquables, mais il n'y a généralement aucune indication à ce sujet.
Je suis d'accord que la plupart des utilisateurs tactiles verront la plupart des images sur une page comme pouvant être liées, mais une ombre derrière l'image et une fine bordure blanche autour de l'image crée une séparation visible de la page.
Un doigt clignotant me dérangerait.
Les images doivent être données à Affordance. Il existe de nombreux articles sur le Web, voici le premier d'une recherche Google pour "ui designencyance".
http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html
Il existe une variété de façons de donner un prix aux objets visuels sans "doigt pulsant" (bon sang qui sonne drôle). La façon la plus courante de fournir une accessibilité est de créer un contraste entre l'objet nécessitant une accessibilité et son contexte environnant.
La norme Internet consiste à entourer l'image d'une bordure de la même couleur que les liens hypertextes.
<a href=""><img src="something.png></a>
Ce HTML sans modifier le CSS produira une image avec une bordure indiquant que l'image peut être cliquée.