Creative
Blog Du Webdesign
Emploi BDW
L'accès à l'information en 3 clics et moins de 10 secondes demeure un code de survie pour tout site e-commerce en développement.
Ce très bon article nous parle des 3 clics comme un mythe, cependant, dans un souci de vulgarisation, je trouve légitime de conserver ce repère. D'ailleurs, il est possible de vérifier cette règle via Google Analytics en observant à la fois le nombre de pages, le temps passé, et le moment du départ de l'internaute.
Les usages et les techniques évoluent. Les designers d'interfaces, les marketeurs, les experts SEO, les développeurs, doivent dialoguer avec leurs clients e-commerçants pour trouver un terrain d'entente dans un objectif convergent : l'optimisation du taux de transformation bien sûr :) ! Voici quelques techniques décryptées sur les modes de recherches d'articles sur un site marchand.
Le champ de recherche ancestral a muté sur certains sites pour devenir rapidement multi-critères. Plus riche, plus fonctionnel et mieux adapté aux expressions de besoins et requêtes de l'internaute.
Certains sites ont développé un champ de recherche avec saisie semi-automatique. Il permet de proposer les recherches les plus courantes pendant la saisie d'un mot-clé par l'internaute.
Voici quelques exemples.
http://www.pixmania.com/fr/fr/home.html
Dans cet exemple (maison / matelas) on trouve de nombreux critères de recherche : type de matelas, marque, budget, taille, fermeté, avis client, vendeur.
http://www.expedia.fr/derniere-minute
Expedia propose par exemple parmi les critères de recherche : vol, hôtel, voiture, activités mais aussi des critères couplés (ex : Vol + voiture).
http://www.adidas.fr
Adidas propose comme options de filtrage des coloris et des tailles.
Il est assez rare de trouver dans un site e-commerce une catégorisation d'articles accessible via un tunnel de type : cible > besoins > pré-sélection d'articles.
C'est pourtant une stratégie gagnante qui correspond à une attente forte de l'e-acheteur.
Voici quelques exemples.
http://www.fnac.com
En cette période de fêtes, la Fnac propose un petit module "Trouvez le cadeau idéal" avec comme tri, la cible du cadeau.
http://www.nosmeilleurescourses.fr/gamme-restauration-et-familles-nombreuses.htm
Alter Eco propose sur sa boutique en ligne NosMeilleursCourses.fr une pré-sélection d'articles dédiés aux publics "Restauration" et "familles nombreuses".
http://www.apple.com/fr/business
Apple propose un site dédié à sa cible professionnelle.
Certains sites proposent des modules interactifs qui permettent par jeu de drag&drop, survol, clic… de paramétrer au plus juste les critères de recherche et de façon visuelle.
Voici quelques exemples.
http://www.pixmania.com/fr/fr/home.html
Pixmania propose pour Noël une zone dédiée "Quel cadeau choisir ?". Un mélange entre boutons radio et tirettes interactives pour définir ses critères après avoir choisi un type de destinataire du cadeau (adulte ou enfant).
http://www.wonderbox.fr
La zone "Trouvez votre coffret cadeau" est un bon exemple de design interactif mixant ergonomie, esthétisme et fonctionnalités. Les critères sont représentés par des silhouettes, des boutons, et une zone de tarif à tirettes. La sélection de critères modifie en direct le nombre de résultats sur le bouton permettant de les consulter.
http://www.leroymerlin.fr/v3/p/idees-conseils/cuisine/pour-creer-votre-cuisine-en-3d-l1308216749
Au-delà de la recherche, nous voyons ici un exemple poussé de module interactif, un outil de conception 3D en ligne de cuisine. De plus en plus d'e-commerçants ont recours à cette technologie.
Le principe du menu étendu devenu monnaie courante est de proposer une présentation très large et complète d'une gamme d'articles via un menu de navigation principale permanent, en haut de page.
On oublie donc le principe du menu déroulant vertical. Le menu se développe sur toute la largeur du design, souvent par-dessus un diaporama promotionnel.
Voici quelques exemples.
http://www.decathlon.fr
Décathlon est un vrai modèle sur le sujet, une réussite associant design graphique, sémantique, ergonomie… L'exemple ici nous montre le menu étendu "SPORTS". On trouve une vingtaine de sports avec des pictogrammes descriptifs. Au survol d'un sport, un nouveau menu étendu se déploie avec des catégories d'articles classés par sport.
http://www.darty.com
Un exemple plus classique, sans image de produits mais efficace de par la sobriété.
http://www.spartoo.com
La capture d'écran montre le menu étendu "Montres & Bijoux". Spartoo est visuellement un bon exemple : on trouve une photo représentant la catégorie d'articles, des colonnes de groupes d'articles, ainsi qu'un bouton permettant de consulter une liste plus exhaustive.
Ce sont des sélections ou des catégories d'articles pensées en fonction des cibles, des usages, des besoins, du contexte produit, d'un évènement saisonnier...
Voici quelques exemples.
http://www.ikea.com/fr/fr/catalog/categories/departments/kitchen/
Dans le volet "cuisines" Ikea nous propose par exemple une sélection d'accessoires "le petit plus de la touche finale".
http://www.laredoute.fr
Sur la boutique de La Redoute, "Le blanc à la folie" est un thème "produit" plus ou moins saisonnier.
http://www.lafraise.com/Content/xmas
La Fraise propose par exemple une sélection de tee-shirts pour Noël.
Dirigeants e-commerçants, e-acheteurs, professionnels et particuliers, designers, ergonomes, marketeurs, développeurs… à vous la parole !
Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus
Auteur : BERNIER Frédéric
voir son blog
Frédéric Bernier est directeur artistique et expert en communication. Il a créé le Studio Kumorfos en 2004, spécialisé notamment en ergonomie IHM, webdesign et création de sites vitrine / e-commer...
le 18/12/12| #2
Article plutôt intéressant, merci !
Petite précision, le module cuisine de Leroy merlin nécessite quand même l'installation d'un exécutable sur l'ordinateur du client.
le 20/12/12| #3
Effectivement, autant esthétiquement que SEO, il est très important de bien guider l'internaute, sous peine de le perdre définitivement. La recherche en interne sur le site est un des éléments clés du site.
Un beau choix d'exemple en tout genres, mais réussis, de ces e-boutiques.
le 21/12/12| #4
Merci pour cet article intéressant.
La partie "Je cherche un thé" de Envouthé est intéressante également. Elle rejoint la logique du moteur de recherche de Wonderbox (utilisation d’éléments visuels) mais le "plus" est que des informations apparaissent en survol de chaque picto pour répondre aux questions des utilisateurs les moins à l'aise sur le sujet :
http://envouthe.com/
En effet, malgré des libellés clairs, si vous voulez guider un maximum vos utilisateurs c'est de les informer le plus rapidement possible.
Le menu de navigation de Décathlon est bien fait mais attention aux interactions :
Le temps d'affichage des sous sous menus (Par exemple Sport > Randonné...) peut devenir vite agaçant au bout de la 3ème à 4ème fois, les utilisateurs peuvent imaginer un bug.
Concernant les push dans les sous menus, combien de fois faudra t-il le répéter : N'oubliez jamais l'effet banner blindness ! Un push dans un sous menus ne sera pas vu, et s'il est il sera perçu négativement. Au stade de l'utilisation d'un menu de navigation les utilisateurs sont concentrés sur leur propre recherche et non des offres annexes, si vous voulez l'intéresser sur des offres il faut le faire plus subtilement.
le 21/12/12| #5
Bonjour Pierre,
merci. Nous sommes en phase sur l'intérêt d'un moteur de recherche multi-critères rapide, puissant, pertinent.
L'exemple de votre client est opportun.
le 21/12/12| #6
Gianni, merci pour votre retour.
En effet, de nombreux modules interactifs nécessitent de sortir du browser mais cela va clairement évoluer avec les évolutions de l'HTML et des CSS. Nous pourrons probablement bientôt bénéficier d'enrichissements interactifs poussés, en natif, directement dans nos navigateurs et mobile friendly of course :)
le 21/12/12| #8
Merci pour ce retour sur le menu Decathlon. Les effets de latence sont encore à optimiser. Et en effet, les bannières ne sont pas toujours nécessaires et utiles. Nous allons tenter de placer du conseil à la place des messages trop "commerciaux". Notre dernière étude d'eyetracking nous l'a encore démontré.
le 24/12/12| #9
Bonjour Sylvain,
Votre article
http://www.e-merchandising.net/nouvelle-fiche-produit-decathlon-fr/
est fort intéressant et complémentaire :)
Décathlon est souvent revenu comme un modèle dans le discours de mes clients e-commerçants en 2012 sur les sujets de la navigation tels que l'extended menu...
Magazine Webdesign, Tendance Web, Webdesign et Actualité Graphique. Suivez nos Articles rédigés avec soin sur les thèmes du Motion Design et de l'actualité du Web ! Suivez le Blog du Webdesign, suivez le Magazine du Webdesign !
En Savoir Plus
le 18/12/12| #1
Il est désormais clair que la mise en place d'un bon moteur de recherche, qui tire le meilleur parti des données présentes dans le catalogue produits, est un vecteur important pour l'amélioration du taux de transformation et même de la valeur du panier moyen d'un site marchand.
Mais la technologie n'est pas tout et , comme vous le montrez bien, le moteur de recherche doit être au service du visiteur et futur client, dont il s'agit de fluidifier la navigation sur le site, et du e-commerçant dont le merchandising doit être optimisé.
Parmi les exemples que vous présentez figurent Wonderbox et Decathlon, qui utilisent le moteur de recherche AFS@Store d'Antidot. Vous trouverez ici un retour d'expérience d'un autre de nos clients, ORECA, qui témoigne d'un accroissement significatif de son taux de transfo et explique comment il a mené son projet "moteur de recherche" : http://fr.slideshare.net/AntidotNet/amliorez-le-taux-de-transformation-de-votre-site-marchand-avec-afsstore-12514655