Aviez-vous remarqué le zoom automatique sur les photos de produits chez GAP ?
Lorsque vous êtes sur une page produit, plutôt que de vous proposer le traditionnels ‘Clic for Zoom‘, un survol de la souris sur la photo affiche automatiquement une loupe sur le côté de l’écran (avec un prime un effêt fondu).
C’est très malin car en règle générale, l’oeil suit le mouvement de la souris (et inversement). Partant du principe que si votre souris traîne sur la photo d’un produit alors il y a de fortes chances que vous soyez en train de détailler cette dernière, donc vous avez besoin d’un zoom pour afficher les détails.
Et hop, un clic de gagner !
Nous pourrions dire la même chose des autres vignettes proposées sous la photo principale : un survol affiche la nouvelle photo sans avoir besoin de cliquer dessus.
Décidément je suis réellement admiratif du travail réalisé par les équipes GAP, sont-ils accompagnés par une agence ? Et vous, c’est quoi votre boutique en ligne favorite ? (merci à Isa pour le lien ;-))
On retrouve le meme systeme sur le site du fabriquant de vélo Trek : http://www.trekbikes.com/fr/fr/bikes/2008/mountain_hardtail/6_series/6500disce/ la similitude est d’ailleurs frappante ! Je n’ai pas fait le tour du site Gap mais celui de Trek mérite aussi le détour, sobre, pro et juste ce qu’il faut en fonctionnalité “Web2”.
Je viens de jeter un coup d’œil sur le site de GAP, c’est vrai que c’est assez réussi …
Et puis j’en profite pour faire un petit hors sujet :
Tu es cité dans la page Blogs & Forums du dernier 01 informatique (page 82 du n° 1924 en date du 9 novembre).
C’est rigolo que tu parles de ça juste maintenant.
J’ai fait la même chose sur http://www.uknow.fr il y a quelque mois et je m’aperçois aujourd’hui qu’un concurrent (pas GAP) a repiqué mon code.
Coïncidence.
le lien vers GAP est vide, Fred.
[http:///]
Il existe une techno intéressante (qui vient d’être racheté par Adobe) : Scene7.
Ils se chargent d’héberger les métas-images produits des e-commerçants (très haute def) et proposent ensuite un ensemble de fonctionnalités assez poussées (zoom précis, rotation, changement de couleurs,…).
petite démo pour la mode : http://demo.scene7.com/IntegratedSalesDemo/IntegratedSalesDemo.htm
Hugo
L’excellent Endless utilise le même principe.
Buret > très interessant le truc de Scene7. Merci.
Salut,
les developpeurs de GAP (comme d’autres) ont utilisé un script tout prêt pour intégrer cette fonctionnalité (il coûte 45 $)… leur compétence a quand même été de l’identifier et de le valider ;)
Cette technologie a été développée par yawah (un danois ancien d’Adobe). le principe repose sur l’utilisation d’une image en tiff pyramidal. c’est une application serveur qui permet ensuite de restituer le zoom demandé de manière dynamique au format JPEG sur le navigateur à partir de l’image native.
Nous utilisons cette techno aussi.
http://www.hozoom.com dans la rubrique boutique, il y a des exemples des plans de paris de turgot que nous avons numérisés en 1200 dpi. Chaque image fait environ 350 go.
Le résultat est très impressionnant.
Je travaille chez un gros acteur de e-commerce français et un projet du genre avait été abordé mais différemment. Au survol, il y avait aussi un cadre du même type qui s’affichait, mais le zoom ne s’affichait pas à côté, mais directement dans le cadre. Le système se révèle être plus pratique. Mais il y avait un problème de qualité d’image donc ça a été abandonné (et pour d’autres raisons).
(à éditer dans mon précédent message)
Le système GAP se révèle être plus pratique.
J’ai pas réussi à retrouver mon bookmark d’un tuto sur le système de zoom instantané, dont c’est inspiré (voir même pompé), que j’avais vu il y a 1 an…
Par contre, ce gadget existe depuis un bon moment via le plugin “Better Flickr” pour Firefox :
http://lifehacker.com/software/lifehacker-code/upgrade-flickr-with-the-better-flickr-firefox-extension-263985.php
C’est rigolo que que je vois ca juste maintenant.
J’ai mis la même chose sur http://www.swelles.com, et j’ai montré au gars de uknow il y a quelque mois pour qu’il le reprenne (le script se nomme luckyzoom et est fait la luckyteam) et il s’aperçoit aujourd’hui qu’un concurrent (pas GAP) a repiqué “son” code.
Coïncidence.
:D
Juste pour apporter une note discordante : si effectivement, “l’oeil suit le mouvement de la souris”, il y a un souci, car regarder en même temps le zoom et ce qu’on fait avec sa souris pendant qu’elle survole le visuel n’est pas naturel. On est tenté de regarder alternativement le mouvement du curseur, ou le zoom !
Je suis pas sûr que ce soit si efficace pour des utilisateurs “lambda” versus le bon vieux clic, au final.
Je viens de voir la même chose sur le site Princesse Tam Tam
http://www.princessetamtam.com/PrincesseTamTam.Site/Products-Soutien-gorge-triangle-armatures/ESCAL529.aspx
mitiripa > en l’occurence, j’avais réécrit complètement le zoom, et c’est bien mon code et pas le luckyzoom qui a été repiqué par un concurrent (pas GAP, gap a l’air d’utiliser le luckyzoom)
Le luckyzoom me posait quelques problèmes d’implémentation et était un poil trop obstructif pour moi.
:)
Je signale un site que je trouve plutot pas mal : http://www.t-a-o.com au niveau ergonomie, surtout sur l’affichage taille/couleur dans la fiche produit.
Le principal défaut de l’implémentation du zoom telle que pour Gap ou TAO est la qualité d’image qui est de facto limitée. L’objet Flash intégre l’image sur laquelle le zoom s’effectue, afin de préserver l’effet survol immédiat. Le poids de fichier à télécharger est alors le principal facteur de limitation. Hors moins de poids = moins de pixels réels, d’où des dégradation visibles rapidement. Typiquement, le poids est de l’ordre d’une centaine de Ko.
Le site http://www.landsend.com/pp/CashmereVneckSweater-66619_131900_59.html?CM_MERCH=PAGE_66619
utilise des images de 2000×2000 pixels, ce qui permet de conserver une excellente qualité d’affichage – le poids du fichier d’origine non comprimé étant de 2000x2000x3(RGB)=12Mo. Toutefois, l’image transférée pour l’affichage ne représente jamais plus de quelques milliers d’octet (utilisation d’un format TIFF Pyramidal, comme ceux utilisés depuis longtemps en cartographie numérique)
Par contre, la qualité et la précision sont de loin beaucoup plus importantes, regardez le détail de la maille. Cf. http://www.gucci.com/fr/french/fr/fall-winter-07/handbags/#186235_FTA7G_9694 pour d’autres exemples où la qualité ne saurait être compromise.
Donc pour 45$ et un fichier transmis qui ne représente jamais qu’à peine 1% d’une image haute-déf (et il s’agit bien d’un développement interne utilisant un script du marché) GAP se contente d’une loupe qui n’apporte pas grand chose sur la présentation du produit, si ce n’est quelle est joliment intégrée dans l’IHM.
L’implémentation de Princess Tam-Tam est à mon avis mieux adaptée car les produis présentés sont d’une taille plus réduite (un soutien-gorge prend moins de place qu’un pantalon normalement) et donc à nombre de pixels disponibles égal, le détail est plus précis.
J’en profite pour solliciter votre avis:
Que pensez-vous du site http://www.oli.co.uk et de son look book? http://snipurl.com/1trrj (ok, l’implémentation du zoom n’est pas aussi belle avec son pop-up).
Mais entre look book qui permet d’acheter un ensemble de produit en un clic et video ‘catwalk’ de chaque produit permettant de le voir porté et en action, il se dit qu’ils ont réduit significativement les taux de retour marchandise et boosté leurs taux de convertion. C’est sûrement plus de 45$ de script dépensé, mais c’est surtout plusieurs centaines de millier de £ de marge et de CA en plus.