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.