Capitaine commerce 2.1

En parlant vendredi de “Sapins de Noël”, allusion à la surcharge visuelle des pages d’accueil des grands sites ecommerce français, je ne m’attendais pas à tomber aussi rapidement sur un contre exemple pertinent. Certes, Mango n’est pas un généraliste et sa gamme de vêtements, bien qu’étendue, n’atteint sans doute pas les plusieurs milliers de références d’un La Redoute ou d’un 3 Suisses, mais il n’empêche que la boutique mondiale du fabricant espagnol doit répondre dans une certaines mesure au mêmes problématiques d’ergonomie et de navigation.

L’intérêt de Mangoshop.com ne réside pas dans sa page d’accueil, mais dans la navigation du site qui mélange à la fois les pages de catégorie, le moteur de recherche et les fiches produits, ce qui permet de réduire d’une certaine manière le nombre de clics avant d’arriver au produit que l’internaute recherche.
Voyons voir un peu tout cela en détail.



Plusieurs éléments ont attirés mon attention :

• Les filtres dynamiques (1) permettent d’affiner les critères de sélection de la recherche. L’avantage ici, c’est que la modification d’un critère entraîne presque instantanément l’affichage de la liste des produits grâce à l’emploi à bon d’escient d’une pincée d’Ajax.
• Les outils de personnalisation de l’interface (2 et 3) : j’aime beaucoup ces boutons. Ils permettent assez instinctivement de simplifier l’affichage de la liste des produits selon votre goût. Autrement dit, et c’est ce dont je parlais vendredi, ils permettent d’adapter l’ergonomie et la navigation au type d’utilisateur du site. Dommage toutefois que les préférences ne soient pas sauvegardées sur un cookie, dommage également que l’utilisation des symboles d’agrandissement ou de diminution de la taille des images ou du nombre de colonnes soient un brin ésotérique. Mais bon, il faut reconnaître que cet effort est louable et va dans le bon sens.
  
  
  
  Deux types d’affichage possible de la liste des produits
• Comme déjà précisé, vous pouvez voir de vous même que la fiche produit est directement intégrée dans la navigation par catégorie (4), ce qui fait économiser un clic et rend également la navigation plus simple. En revanche, il est curieux qu’un site utilisant aussi abondamment l’ajax propose des zoom produits et une page d’information détaillée dans de vulgaires popups qui semblent tout droit sortir d’un site ecommerce des années 90. Autre point fort, l’utilisation d’Ajax permet vraiment un affichage plus dynamique des erreurs et de l’ajout du produit au panier, sans avoir à recharger la page.
  
  
  
  Une bonne utilisation en Ajax des messages d’alerte
• Enfin pour finir, le cross selling (5) est très abondamment utilisé et est dynamique en ajax, comme tout le reste de l’application, ce qui permet de passer facilement d’un produit à l’autre sans devoir faire des clics de retour en arrière ou en avant.

Mais Mangoshop.com n’est pas exempt de tout reproche et c’est ce qui est un peu dommage. Le choix du tout Ajax pose la question du référencement. Durant toute ma navigation, je n’ai vu qu’une url, ce qui fait peu de pages à indexer par Google, et, curieusement, certains bons choix technologiques sont gâchés par des gimmiks antédiluvien du web, comme les popups windows “à l’ancienne” (question de temps dans la réalisation du site ?). Malgré cela, la piste proposée ici par les concepteurs du site me semble être vraiment intéressante et devrait être ardemment copiée. A titre de comparaison, voici ce que l’on peut trouver sur un site plus classique (la Redoute pour ne pas le nommer) :



Comme vous pouvez le constater, un clic supplémentaire est nécessaire pour passer de la liste de produit à la fiche produit (1 et 2), sans compter qu’il m’a fallu 2 clics avant de parvenir à la liste produits. Sur la vignette trois (même si ce n’est pas très visible), le message d’alerte d’erreur est affiché dans une vulgaire boîte d’alerte windows qui fait “Klong” en s’affichant : à comparer avec les alertes “douces” sur Mango. En revanche, la mise au panier se fait dans une fenêtre en Ajax tout ce qu’il y a d’agréable (ouf, le progrès a quand même touché les pages de la Redoute !).

Conclusion

Le propos de ce billet n’étant pas de démolir la Redoute, je voulais simplement attirer votre attention sur les possibilités et les limites d’Ajax en matière de navigation sur un site ecommerce, Mango étant très certainement plus avancé que le vépéciste français sur ce point là. Dernière chose à noter enfin : le coût d’une telle solution devrait être à considérer uniquement sous l’oeil de l’amélioration du taux de transformation.