Si vous souhaitez mettre en œuvre des interfaces riches au sein de votre boutique en ligne, plusieurs options s’offrent à vous : soit vous sortez l’artillerie lourde et partez pour une refonte complète (un site 100% Flash à l’image de ShopComposition) soit vous optez pour un déploiement plus léger avec de l’Ajax par ci-par là (comme chez GAP).
C’est de ce second cas de figure que je souhaite vous parler avec cette superbe boutique qui pratique l’enrichissement progressif : American Eagle Outfitters. C’est un site à priori en HTML sauf que certaines partie des écrans sont en fait bien plus dynamiques que l’on ne pense.
Première illustration avec les quatre liens ‘Find a Store‘, ‘Trak Order‘, ‘Shopping List‘ et ‘My Bag‘ qui déplient des mini-panneaux au survol de la souris :
Deuxième exemple avec cette page catégorie où un survol sur les étiquettes à gauche de la photo permet de changer la couleur du sweat :
Troisième exemple sur cette page produit où il possible de changer le motif et modifier la vue du produit sans avoir besoin de recharger la page (vous noterez au passage le bouton ‘View Larger‘) :
Dernier exemple sur cette autre page produit où il est possible de faire tourner le mannequin pour voir le produit sous différents angles :
Serais-je tombé amoureux de cette boutique en ligne ? Oui complètement. Je suis ébahi par les trésors d’inventivité déployés par ce site marchand (ils proposent par exemple un check out sans création de compte). Une véritable mine d’or de bonnes pratiques.
En tout cas un très bon exemple de parfait équilibre entre efficacité marchande et sophistication de l’interface.
Je me suis précipité pour y jetter un oeil (je suis moi-même développeur web). Après 10secondes je me disais déjà “il y aura bien du jQuery la dessous”… un petit coup d’oeil à la source et bingo !
Cette librairie est décidemment géniale :)
Et je confirme, très belle ergonomie du site. On aimerait en voir plus souvent.
Beau site en effet même si j´ai l´impression d´avoir déjà vu d´autres boutiques avec de telles fonctionnalités (et c´est là que je suis embêté parce que je n´ai pas d´exemples sous la main….)
Par contre, je me pose une question : quid du référencement avec de l´ajax ?
Je ne travaille pas dans le référencement mais il me semble que avoir plusieurs contenus sous une seule et même URL ne va pas dans le sens de Google et autres ?…
Il me semble que l’URL n’est qu’un des paramètres qui intéresse Google. L’astuce est de réaliser un site en HTML dans un premier temps puis de rajouter par dessus un peu de sophistication à base d’Ajax. C’est ça l’enrichissement progressif.
/Fred
Une bête question : les 4 liens (my bag,find a store, etc) en home page qui permettent de déployer un mini panneau au survol de la souris, est ce qu’il n’auraient pas pu être développés en HTML ? A première vue je ne vois pas ce qu’apporte ajax dans ce cas précis (mais je n’y connais pas grand chose). Pour le reste des fonctionnalités c’est vraiment sympa, même si ce n’est pas toujours très bien mis en avant.
Oui effectivement, Ajax est devenu un terme générique (qui remplace DHTML) mais ces panneaux sont en fait réalisés avec du “simple” HTML et javascript.
/Fred