Nouveau baromètre de la conversion

Les trucs d’Ergoman : « Ne faites pas rechercher la recherche ! »

Par Capitaine | avril - 2 - 2014 | 9 commentaires  
Auteur de ce billet : Olivier Sauvage, l'auteur, est le fondateur de Capitaine-commerce.com et de Wexperience, agence d'ergonomie digitale pour le ebusiness. Il travaille pour les plus grands comptes du ecommerce en France et est spécialiste de l'optimisation des sites sur mobile, tablette et web. Pour plus d'informations sur cette critique, n'hésitez pas à le contacter ou à l'appeler directement sur son portable.
» Voir tous les articles de Capitaine

Une des règles absolues de l’ergonomie est bien celle qui consiste à ne pas faire chercher trop longtemps un élément d’interface (c’était même presque le titre d’un bouquin célèbre sur l’utilisabilité, « Don’t make me think », une référence en la matière). Si cette règle est vraie pour tous les éléments de l’interface, elle prend encore plus d’importance quand il s’agit du champ de recherche d’un site ecommerce.

D’après mes chiffres top secrets donnés par la NSA, il s’avère que sur ces derniers, les personnes qui démarrent la navigation par une recherche sont beaucoup plus à même de passer une commande (je n’ai pas de vraies stats là dessus en vérité, mais elle m’a toutefois été confirmée par nombre de responsables ecommerce. Vérifiez sur votre site et dites-moi si c’est vrai, ça m’évitera peut-être de diffuser de fausses informations).

Mais revenons-en à notre sujet.

Si la recherche est un outil primordial de votre site, reste que celle-ci doit être immédiatement et très rapidement accessible par un utilisateur. Autrement dit, il faut permettre à l’utilisateur de ne pas avoir à chercher le champ de recherche (d’où le titre très humoristique de mon article).

Beaucoup de sites semblent l’avoir mal compris et pourtant, il n’est pas si difficile que ça de mettre en avant un champ de recherche sur une page web. Voici quelques règles tirées de la théorie et des expériences que nous avons pu faire dans le labo secret de Wexperience.

5 règles à suivre

  • Votre champ de recherche doit être placé en haut de page (ça tombe presque sous le sens) et, de préférence, centré au milieu de la page. Non pas que le centre soit une position meilleure qu’une autre, mais on constate qu’en général, c’est là qu’il est et, par conséquence, que les internautes ont certainement, depuis un certain temps, pris l’habitude d’aller regarder à cet endroit de la page pour le trouver.
  • Votre champ de recherche doit être proéminent. C’est à dire qu’il doit « trancher » avec le reste des éléments qui l’entourent.
    • Utilisez de préférence un fond blanc
    • Délimitez-le bien avec des bordures fines, mais constrastant bien avec le fond de la page.
    • Dégagez de la place autour du champ (faites qu’il ne soit pas au milieu d’un fouillis d’autres éléments)
  • Rendez-le affordant (définition sur Wikipedia) en évitant notamment de le redesigner pour qu’il soit beau. « Tu l’as vu, mon champ de recherche ? Tu l’as vu ? Il est beau, non ? » Ben non, justement, on le voit pas ton champ de recherche, coco, et tu ferais mieux de le rendre un peu plus AF-FOR-DANT. Une bonne technique pour cela est de lui donner une certaine profondeur en utilisant un ombrage pour qu’il apparaisse encore plus comme une petite cavité au milieu de la page (ça attire inexorablement l’oeil).
    • Ne le préremplissez pas : surtout pas, oh mon Dieu (Oh, my god, en anglais), car en écrivant de jolies choses dedans, en quelque sorte, vous diminuez son affordance
    • Ajoutez-lui un beau bouton « Chercher » (même si on peut faire « Entrée » au clavier, croyez-moi, il y a encore plein de gens qui utilisent la souris et, de plus, mettre le bouton de recherche à côté du champ, permet à l’utilisateur de bien comprendre qu’il s’agit du champ de recherche (Loi de la Proooooooooooximitééééééé !)
  • Ne mettez pas un autre champ à côté : type newsletter par exemple. Ou sinon, vous risquez de vous retrouver avec beaucoup d’abonnés dont les adresses emails ressemblent à des termes de recherche (« robe rouge », « perçeuse pas chère, etc.).
  • Rendez-le suffisamment grand pour que les internautes puissent y rentrer de grandes requêtes, ce qui est une habitude de plus en plus fréquente aujourd’hui.

Quelques exemples

Joue à trouver le moteur de recherche sur ce site. Bien caché en haut à gauche, il est à peine visible. Et les choix graphiques d'entourer les titres de boites, plus la présence de champs de connexion rend sa trouvabilité encore plus faible.

Joue à trouver le moteur de recherche sur ce site. Bien caché en haut à gauche, il est à peine visible. Et le choix graphique d’entourer les titres de boites, plus la présence de champs de connexion, rend sa trouvabilité encore plus faible.

Sur Amazon, le champ de recherche est énorme. Il est, en outre, équipé d'un menu de sélection par boutique pour affiner la recherche. Normal, vu le nombre de références du site.

Sur Amazon, le champ de recherche est énorme. Il est, en outre, équipé d’un menu de sélection par boutique pour affiner la recherche. Normal, vu le nombre de références du site.

Ici le champ est parfaitement visible, libéré de toute contrainte. Son seul (petit) défaut est son manque de longueur. Sinon, c'est 20/20.

Ici le champ est parfaitement visible, libéré de toute contrainte. Son seul (petit) défaut est son manque de longueur. Sinon, c’est 20/20.

Là aussi, le champ est bien placé, mais le libellé du bouton ("OK") n'est pas assez explicite, malgré l'insertion du mot "rechercher" à l'intérieur du champ. Ici, on trouve une curiosité : une icone dont on ne comprend pas bien la signification et que je n'ai pas chercher à comprendre. Le champ aurait aussi sans doute gagné à être en blanc.

Là aussi, le champ est bien placé, mais le libellé du bouton (« OK ») n’est pas assez explicite, malgré l’insertion du mot « rechercher » à l’intérieur du champ. Ici, on trouve une curiosité : une icone dont on ne comprend pas bien la signification et que je n’ai pas chercher à comprendre. Le champ aurait aussi sans doute gagné à être en blanc.

Chez Leroy Merlin, le champ de recherche est très vite visible. L'utilisation d'une icone "loupe" à la place du terme "Rechercher" permet de raccourcir la longueur du bouton et de gagner de la place.

Chez Leroy Merlin, le champ de recherche est très vite visible. L’utilisation d’une icone « loupe » à la place du terme « Rechercher » permet de raccourcir la longueur du bouton et de gagner de la place.

Et voilà une autre page où on peut chercher le champ de recherche. Positionné vers le bas à gauche, il est en partie éclipsé par les champs de login au centre du header. Sans compter le terme "Rechercher" inscrit à l'intérieur du champ dans un gris clair contrastant faiblement avec le fond de la page.

Et voilà une autre page où on peut chercher le champ de recherche. Positionné vers le bas à gauche, il est en partie éclipsé par les champs de login au centre du header. Sans compter le terme « Rechercher » inscrit à l’intérieur du champ dans un gris clair contrastant faiblement avec le fond de la page.

Voilà. C’est tout, mais c’est déjà pas mal. Si votre champ de recherche correspond à ces critères, vous pourrez passer à une autre phase d’optimisation bien plus cruciale encore : l’affichage des résultats de recherche, mais, c’est encore une autre histoire.

Amis ergonomes, UX Designer et autres consorts, bonsoir !

Via UX Mag

Je partage cet article sur Tweet about this on TwitterShare on FacebookShare on LinkedInDigg thisPin on PinterestShare on Tumblr

9 commentaires pour l'instant.

  1. Clem dit :

    Des petits problèmes avec votre droite / gauche ?… 😉
    Mais je suis entièrement d’accord. La recherche doit tomber sous la souris en haut à droite en général (pour moi), et sur toutes les pages… pas seulement l’accueil!

  2. Roxy dit :

    La main gauche, c’est celle ou le pouce est à droite (tout comme les champs de recherche des Screenshots 😉 )

  3. Merci Ergoman pour cet article pertinent.
    Juste une question quant à la remarque de ne pas préremplir le champ de ce formulaire de recherche. J’aurais tendance au contraire à le faire avec un chouilla de javascipt pour enlever le texte au clic et le remettre par défaut si on en ressort sans l’avoir rempli.
    Si on regarde bien les exemples en capture on remarque qu’il y a un texte par défaut avec « rechercher ».

  4. Clem dit :

    Ou avec l’attribut « placeholder » en HTML5.

  5. ckarone dit :

    Que pensez alors de la recherche sur sony.fr? Selon moi une catastrophe sans aucun bouton pour lancer la recherche, le contraire de l’article.

    • Duchêne JB dit :

      Concernant Sony.fr je suis d’accord.
      C’est très « design » mais il manque le bouton pour lancer la recherche à côté du champ de saisi… un oubli?

  6. Vous avez tout à fait raison, le search est un vrai déclencheur d’achat s’il est efficace, et un repoussoir s’il ne l’est pas !

    Je me permets d’ajouter une fonctionnalité incontournable aujourd’hui : les suggestions de produits en promotion, de marques, de catégories, d’univers dès que le visiteur a saisi 3 ou 4 caractères dans la boîte de recherche. C’est d’une efficacité terrible sur le taux de conversion, les clients d’Antidot qui utilisent notre moteur de searchandising AFS@Store en témoignent régulièrement lors de conférences.

    Trop souvent, hélas, le moteur de recherche interne d’un site marchand est le point faible de l’expérience client, tout simplement parce qu’il est mauvais. La boîte de recherche ne propose pas de suggestions pertinentes, le moteur de recherche n’est pas tolérant aux fautes de frappe, il ne gère pas les synonymes, il ne met pas automatiquement en avant les produits en promotion ou à déstocker, il ne propose pas de facettes pour filtrer rapidement la liste de résultats par marque, par prix, selon les caractéristiques des produits… bref il ne joue pas son rôle de guide pour le visiteur, qui désormais a tendance à s’en aller très vite s’il ne trouve pas rapidement le produit pour lequel il est venu !

    Dans la mesure où de plus en plus de visiteurs arrivant sur un site marchand utilisent le moteur de recherche interne pour trouver au plus vite les produits souhaités, ce composant technologique et métier est désormais un levier-clé pour booster le taux de conversion des visiteurs en clients. Il est donc aberrant, pour ne pas dire criminel, de ne pas s’en occuper sérieusement, surtout quand on investit en acquisition de trafic, que ce soit via du SEM avec des publicités Adwords ou du retargeting, du SEO en référencement naturel, de l’affiliation, de l’e-mailing, des jeux-concours etc.

    Installer une solution e-commerce prête à l’emploi comme Magento, Prestashop, Oxid, OScommerce ou toute autre plateforme e-commerce et se contenter de la fonction de recherche basique livrée avec est vraiment du gâchis, car cela revient à jeter par les fenêtres une bonne partie du budget dévolu à l’acquisition de trafic : à quoi bon créer une offre riche de produits variés puis amener un trafic important vers ce catalogue mis en scène dans un beau site web si c’est pour ne pas bien traiter ensuite les visiteurs si chèrement acquis, alors même qu’ils sont des clients en puissance ?

    Dès lors, la seule question à vous poser, en fonction de votre niveau de chiffre d’affaires et de marge, est la suivante : « Si mon taux de conversion passe de 2,5% à 3,5%, de combien augmentent mon CA et ma marge ? » Et si l’investissement pour disposer d’un moteur de searchandising interne efficace car piloté par vos objectifs commerciaux ne représente que quelques centaines d’euros, et donc une fraction de cette marge additionnelle, alors il est immédiatement rentable !

    Vous l’avez compris, l’optimisation du searchandising de votre site marchand est donc un enjeu stratégique pour vous, professionnel du e-commerce qui voulez accroître vos ventes, augmenter votre marge et fidéliser vos clienst en leur offrant une expérience de qualité.

  7. Duchêne JB dit :

    Ok sur tous les points, sauf peut-être sur l’ombre interne.
    C’est un effet de style importé de l’ancien design qui visait à « faire croire que »:
    . Les boutons étaient des éléments pleins, en relief, avec un effet dégradé du bas sombre au haut clair (pour simuler l’effet de la lumière du soleil peut être?). Au survol, ils avaient l’air de « s’écraser »…
    . Les fonds étaient fait en alu brossé (Ah Apple, quand tu nous tient…)

    Aujourd’hui, on peut complètement s’en passer et produire du ré-so-lu-ment ‘flat’… Amazon l’a presque compris… son champ de recherche est flat, il reste quelques résurgences de relief dans un léger dégradé sur le fond du header et il me semble que sa combo de choix de catégorie aussi (who designed this??).

    JB DUCHENE
    UX Designer

  8. […] ici sur l’aspect du moteur de recherche, chose déjà évoqué récemment, mais qui remettra une couche de peinture à notre dernier article sur le sujet. Un bon moteur de […]

Rédiger un commentaire


Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.



Sites amis à visiter : Wexperience - Digitaleez

Site hébergé par NBS System, spécialiste de l'hébergement ecommerce

Copyright © 2006 - 2016 Capitaine commerce - Le Blog du Commerce Digital - Ce blog utilise WordPress - Mentions légales

Webmaster : Alexis Sauvage aka Mecano Commerce