Comment aider les internautes à trouver le(s) produit(s) qu’ils recherchent et leur proposer une expérience utilisateur « riche » ? Cet article s’articule autour du trio « recherche / liste de résultats / fiche produit » et dispense quelques conseils et des « nice to have » qui permettent d’améliorer l’expérience utilisateur
La recherche
Vous ne pouvez pas vendre un produit si vos clients ne le trouvent pas. C’est pour cela que de plus en plus de e-commerçants mettent en place un module d’assistance à l’achat. Une étude de Aberdeen Group montre que 68% des
sites d’e-commerce intitulés les « best-in-class » utilisent les données saisies dans leurs propres moteurs de recherche
pour optimiser leur tactique de merchandising online et proposer aux clients ce qu’ils recherchent.
On s’oriente de plus en plus vers des modules de recherches plus évolués. Il est donc primordial de faire le bon choix du
mode de recherche, celui qui permettra aux utilisateurs de chercher et de trouver le produit tant désiré.
La recherche « simple »
Composée le plus souvent d’un champ de saisie et d’un bouton de validation, c’est le mode de recherche le plus ancien et certainement le plus répandu. Sur les sites disposant d’une arborescence importante, un menu déroulant est ajouté, permettant de réduire le champ de la recherche à une rubrique ou une catégorie du site. Mais on voit de plus en plus apparaître des modes de recherches simples mais « riches » : des compléments à la requête initiale sont directement affichés pendant la saisie (l’autocomplétion) C’est ainsi le cas sur Yahoo. Le site de Apple quant à lui propose des résultats « incitatifs » : des résultats prioritaires sont « poussés » vers l’utilisateur directement sous le champs de saisie. On essaie donc de l’aiguiller vers les pages les plus pertinentes tout en lui laissant la possibilité de visualiser l’ensemble des résultats.
La recherche multicritères
Cette recherche est en quelque sorte le reflet de la structure de votre catalogue produit. Simple à utiliser, elle est encore
trop souvent assez peu travaillée graphiquement. C’est un tort, multicritère ne rime pas forcément avec austère. Sur le site e-commerce de Jules, les catégories de critères (produits, coloris...) sont illustrés par un visuel qui attire le regard, et les critères similaires (ex : pantalons jeans et bermudas) sont regroupés. Enfin des filets gris permettent de structurer l’ensemble, qui reste lisible et agréable à l’oeil malgré le nombre important de critères.
La recherche visuelle
Sur le site de Like, l’internaute peut effectuer une recherche visuelle basée sur un détail du produit. Il lui suffit d’entourer la partie du produit qui l’intéresse. Ce détail devient un critère de sélection et le site affiche des produits similaires en terme de couleur, de forme et de motif. C’est un mode de recherche très utile lorsque le processus de choix est plus subjectif qu’objectif. Egalement, pour faciliter la compréhension des critères par l’utilisateur, les cases à cocher sont remplacées dès que possibles par l’illustration des différents critères (ex : des carrés colorés pour les couleurs, la forme du produit pour les différents styles, les motifs sont dessinés, etc…)
La recherche experte / avancée
Ce mode de recherche est à envisager lorsque le site propose par exemple un service bien particulier et qu’une recherche
multicritère n’est pas suffisante pour trouver le bon produit. Sur le site de Blue Nile l’utilisateur a la possibilité de se confectionner une bague sur mesure. Pour ce faire, la recherche est scénarisée en 2 grandes étapes : sélection du diamant et choix du sertissage. A chacune de ces 2 étapes,de multiples critères à renseigner sont présentés soit avec des cases à cocher illustrées (pour bien visualiser la forme du diamant par exemple) soit avec des sliders, ces petites tirettes à déplacer en drag’n’drop (ou glisser déposer / pour définir des tranches minimum et maximum, comme le caratage ou le prix).
La mise en page de type « mini-tableau de bord » qui est utilisée est lisible bien qu’un certain nombre de critères soient affichés. Même si la fonctionnalité de confection surmesure est réservée à un public averti en joaillerie, sa mise en scène reste relativement simple à utiliser notamment grâce à la scénarisation en différentes étapes.
La liste de résultat
Après avoir sélectionné les critères importants pour sa recherche, l’utilisateur arrive sur une SERP - « Search Engine Result Page » (une page de résultats). Là encore,quelques conseils permettent de fluidifier la navigation et améliorer ainsi l’expérience utilisateur.
Etre complémentaire avec la page de recherche
Même si elle se trouve souvent sur une page distincte, la liste de résultat est la continuité logique de la recherche.
Et parce que la recherche est rarement fructueuse du 1er coup, il est judicieux de laisser les critères de recherche sur la page de résultat (comme sur le site de Endless) et ce, pour plusieurs raisons :
>> l’utilisateur voit toujours les critères qu’il a sélectionnés.Ainsi en cas d’erreur, il peut s’en apercevoir et corriger.
>> il peut donc modifier ses critères ou effectuer une nouvelle recherche sans avoir à revenir sans cesse sur la page de recherche.
>> au lieu de faire des allers-retours entre les pages de résultats et de recherche, cela lui donne l’impression de progresser et d’avancer dans sa recherche.
Rafraîchir localement la page
Lorsqu’un critère est sélectionné, la liste de résultats doit se mettre à jour. Auparavant, lorsque les sites étaient intégralement en HTML, c’est la page toute entière qui se rafraîchissait, mais avec l’utilisation de plus en plus fréquente d’Ajax notamment, on peut mettre à jour uniquement certaines zones de la page. C’est ainsi que fonctionne Kayak, un des premiers sites à avoir mis en place cela. Ainsi, on évite-t-on l’utilisation de frames ou de iframes. Tout s’enchaîne parfaitement, il n’y a pas de rupture dans la navigation.
Adapter sa liste de résultats
Bien que très usuelle, la page de résultats doit toujours être conçue en fonction du positionnement du site. Voici 2 exemples de SERP très différentes alors que les 2 sites sont dans le secteur de la Joaillerie.
Tiffany a opté pour une mise en page simple et épurée qui fait la part belle aux produits. La composition horizontale
à 12 produits est originale : elle permet, grâce aux différences de taille de visuels, de mettre en valeur les 2 produits présents aux extrémités gauche et droite et ce, sans avoir de scroll vertical. Les informations textuelles sont affichées dans une infobulle et apparaissent uniquement au survol du visuel produit. Les informations sont donc présentes sans pour autant alourdir la page et parasiter les visuels. C’est beau et fonctionnel à la fois, et c’est surtout adapté au reste du site : simple, luxe et épuré.
Sur le site de Blue Nile, la liste de résultats a été conçue autour de la notion de confection sur mesure et d’expertise
joaillière (cf. paragraphe sur la recherche experte). La mise en page est donc plus complexe. Comme le visuel du produit n’a pas d’importance, il laisse sa place à toute une série de critères (forme de la pierre, caratage, découpe…) présentés directement dans un « mini-tableau de bord ».Cela permet de comparer rapidement les critères de chacune des pierres. La liste se rafraîchit « à la volée », des informations supplémentaires sont affichées dans une vignette prédictive au survol du produit, on peut trier ses résultats… Le système permet même l’ajout de critères de sélection supplémentaires !
Quelques « nice to have »
>> proposer plusieurs modes de visualisation : en vignette,en liste… (Decathlon ) Cela permet de mettre en avant différentes informations en fonction du mode sélectionné
>> proposer des tris supplémentaires une fois les résultats affichés : trier par nouveauté, par prix, par best-selling, par marque… (Endless)
>> permettre à l’utilisateur de changer le nombre de résultats affichés par page (Like)
La fiche produit
Là encore, il faut penser cette page dans une dynamique d’enchaînement avec la liste de résultat. Si le produit A n’est pas exactement celui que l’internaute cherchait, peutêtre que le produit B correspondra. Il faut donc toujours faciliter la navigation de l’internaute, même sur la fiche produit.
Permettre l’accès aux autres résultats depuis la fiche produit
Sur les sites de Tiffany et Endless, lorsqu’il y reste par exemple 15 produits qui correspondent à une recherche et que l’internaute clique sur la fiche produit de l’un d’entreeux, les visuels des 14 autres produits sont affichés sur la page produit. Le fait de les laisser accessibles permet d’accéder directement à la fiche détaillée sans avoir à revenir sur la liste de résultats. Cela évite ainsi des allersretours à l’internaute (remarquez qu’on ne pourra que très difficilement combiner cette option avec la mise en place de ventes additionnelles - cross-selling / up-selling…- car les 2 fonctionnalités risquent de se parasiter)
Sur le site de Endless, les produits correspondants à ma recherche sont toujours accessibles sur la fiche produit.
Sur la fiche produit du site de Jules, on permet à l’internaute une découverte linéaire de ses résultats de recherche en affichant les liens « produit précédent » et « produit suivant ». Au survol des 2 liens, le visuel du produit suivant/précédent apparaît, et un lien permet de revenir à la liste de recherche.
Have a (quick) look !
Certains sites comme Piperlime ou Gap proposent à leurs utilisateurs un « quick look ». Le « quick look » est un « condensé » de la fiche produit affiché en popin ou sous la forme d’une vignette prédictive. Il contient les informations indispensables à la concrétisation de l’achat (ex : le choix de la taille et de la quantité) et ne permet pas généralement l’affichage du cross-selling ou du zoom produit.
Fiches produits
Sur les sites de prêt-à-porter, les produits sont souvent présentés sous la forme d’un « total look » (ex : un mannequin porte le jean, la ceinture, le t-shirt et la veste) Si l’internaute souhaite acheter l’ensemble, au lieu de lui imposer des allers-retours entre les différentes fiches produits, mettez en place une fiche produit comprenant l’intégralité des articles comme le fait American Eagle. Ainsi l’internaute aura plus de facilité à acheter l’ensemble car tous les articles du look sont sur la même page.
Une légère variante peut être envisagée, celle de l’achat multiple d’un même produit mais avec des variations de couleur. C’est ce que propose le site de Victoria’s Secret : à la demande de l’internaute, des menus déroulants supplémentaires s’affichent et permettent d’acheter le même produit dans des couleurs et des quantités différentes à partir d’une seule fiche produit.
Quelques « nice to have »
>> choix d’une couleur : la couleur « pourpre » sera perçue différemment d’une personne à l’autre. Le fait d’afficher
un carré coloré en plus du nom de la couleur permet de lever des ambiguïtés. C’est également très pratique pour les visualiser les motifs.
>> choix de la taille : pour éviter de frustrer l’utilisateur, il vaut mieux proposer, si possible, uniquement les tailles
disponibles. Ainsi, on évite de lui donner de faux espoirs avant qu’il n’appuie sur le bouton « acheter ».
>>visuel produit : proposer plusieurs vues du produit peut jouer un rôle décisif dans l’acte d’achat lorsqu’une seule vue ne permet pas de se faire une bonne idée du produit.
NB : ces fonctionnalités ne sont pas adaptées à tous les produits.
Conclusion
Les sites d’e-commerce se sont multipliés depuis ces dernières années. Aucun détail ne doit être laissé au hasard et tout doit être pensé pour favoriser la fluidité de la navigation, permettre à l’internaute de trouver ce qu’il est venu chercher, et augmenter le taux de conversion.
Il n’y a donc pas de « recette miracle » ni de bons conseils à appliquer de manière automatique. Même si l’on peut faire ressortir de grandes pratiques, l’ergonomie d’un site e-commerce doit être conçue au cas par cas pour répondre à vos objectifs et être adaptée à votre cible, votre positionnement…
COMMENTENTAIRES
comments powered by Disqus