Comment faire savoir à un utilisateur qu'une image est en fait un GIF animé
Un peu d'histoire - Je travaille actuellement sur un site de vêtements de commerce électronique spécifiquement avec une tranche d'âge plus âgée (50+). Historiquement, la société a toujours utilisé des jpgs plats pour afficher des images de produits sur l'ensemble du site.
Nous avons récemment commencé à étudier l'utilisation des GIF pour afficher les produits.
La question est, comment puis-je le mieux communiquer à l'utilisateur? J'ai eu l'idée simple d'avoir une icône de bouton de lecture standard superposant l'image sur un PDP (page de description du produit). Ce ne sera pas une vidéo avec du son, juste un GIF de 3 secondes du produit qui tourne (par exemple). Je veux être en mesure de communiquer à l'utilisateur qu'un produit a un GIF disponible à afficher sur la PLP (page de liste de produits) sans dire littéralement "GIF disponible" car certaines personnes peuvent ne pas savoir ce qu'est un GIF.
Le fait qu'il s'agisse d'un GIF est vraiment un détail technique et non pertinent (ou même compréhensible) pour la plupart des utilisateurs. Ce que vous devez leur transmettre, c'est qu'il y a plus de données disponibles. Techniquement, il serait même plus logique d'utiliser des vidéos réelles plutôt que des GIF, selon la taille et le contenu de l'animation.
Une option est en effet de superposer un bouton "play" (triangle pointant vers la droite), que la plupart des gens prendront pour une indication qu'il y a une vidéo.
Une autre option, si en effet la vidéo/GIF montre l'objet en rotation, est de le transmettre, en utilisant une icône comme l'une d'elles par exemple:
Bien sûr, s'il existe différents types de "fonctionnalités", l'icône doit refléter les différences. Le choix de l'icône exacte doit également refléter le fait qu'il n'y a pas de contrôle, juste une animation, alors évitez les icônes qui incluent un pointeur ou une main par exemple.
Mais pour moi, cela ne devrait être le cas que sur les pages de liste de produits (où vous pouvez même démarrer l'animation en survol), juste pour éviter que trop de choses ne bougent partout. Sur une page de produit, s'il s'agit de l'image principale, vous devriez probablement commencer immédiatement l'animation.
Oui, votre solution est bonne et fonctionnera, mais cela devient problématique si un jour vous introduisez des vidéos sur votre site.
De plus, si les gens voient le bouton de lecture, ils attendent une vidéo (plus longue qu'un gif) qui fournit généralement un son de meilleure qualité.
Vous pouvez utiliser une approche de style facebook pour cela.
Si vous voulez que cela soit plus évident pour votre utilisateur, vous pouvez utiliser "Play GIF" au lieu de "GIF" uniquement.
De cette façon, vous n'aurez aucun problème si vous commencez à ajouter des vidéos car vous les différenciez.
L'utilisation de sites de modèles comme l'utilisation de Facebook est généralement bonne, car les utilisateurs connaissent déjà ces modèles.
Du point de vue des utilisateurs non techniques, il s'agit d'une vidéo. Le manque de son ne change rien à cela. Pas besoin d'expliquer la différence - dites simplement qu'il jouera une vidéo lorsque vous appuyez sur le bouton.
Je recommanderais d'utiliser un terme plus large comme "animation" au lieu de "GIF", qui pourrait être trop technique et inutilement spécifique, en particulier pour votre base d'utilisateurs cible.
Je pense que l'apparence dépendra de ce que vous voulez. Peut-être jouer le GIF automatiquement au survol de la souris, ou avoir une petite étiquette "jouer l'animation" dans un coin de l'image du produit.
Dans ce cas précis, je choisirais une icône de rotation avec un texte court mais descriptif See 3D à côté/comme légende. Il "dit" spécifiquement ce qui se passera en jouant. Inutile d'expliquer le format de fichier, peu importe.
Comme personne ne l'a encore mentionné,
vous pouvez également envisager d'avoir la lecture automatique de la vidéo, mais uniquement lors du survol de la souris, cela élimine également le problème de la lecture automatique de tout tout le temps, ce qui finit par surcharger la stimulation oculaire de l'utilisateur et de ses ressources de périphérique/bande passante.
Sur les points positifs, l'utilisateur peut s'y habituer et s'attendre à cette fonctionnalité de manière intuitive sans être averti par une icône, lorsqu'il a besoin de plus de détails sur un élément en un coup d'œil. Cela élimine également le problème avec des personnes moins technologiques, comme votre public cible ici, submergé ou confus par (GIF) ou des icônes de bouton de lecture qui obscurcissent également les visuels de l'article en vente.
EDIT: cela a été conçu comme une proposition de grilles d'articles, où vous en avez trop dans la même page (car OP a suggéré de vouloir exécuter cela sur leur site). Pour les pages de produits uniques (où les images sont agrandies de toute façon pour éviter les problèmes d'obscurcissement), un bouton de lecture superposé sur le gif est toujours un choix valide.
Avez-vous envisagé de lire automatiquement les gifs plutôt que d'attendre l'interaction de l'utilisateur? Les gens sont attirés par les choses en mouvement, ce qui peut augmenter la satisfaction des clients (tant que les gifs sont pertinents pour ce que les utilisateurs recherchent). Cette suggestion concerne le bureau principalement parce que les gifs sont relativement gourmands en données.
Si vous voulez attendre l'interaction de l'utilisateur, je vous suggère de mettre un bouton de lecture dans le coin inférieur droit du gif. Je m'abstiendrai de le placer au centre de l'image, car vous souhaiterez très probablement que vos utilisateurs obtiennent l'image complète de l '"image fixe". Compte tenu de votre public cible, je suggère une simple icône de lecture. Quelque chose comme ça 
J'ajouterais une petite légende à l'intérieur de l'image qui amène le consommateur à savoir qu'il se passe autre chose. Inclure une petite info-bulle/texte qui dit, See product in Action! ou quelque chose du genre, car nous ne nous préoccupons que de présenter votre produit et de ne pas montrer vos compétences pour intégrer un GIF.