7 pratiques UX pour réussir son search box
Le search box (ou champ de recherche) est un outil inévitable que les visiteurs emploient pour alléger leur parcours d’achat et atteindre rapidement le produit désiré. Face aux différentes contraintes de navigation et de conversion qui peuvent s’imposer, comme la taille restreinte des écrans des appareils mobiles, le manque de concentration et l’impatience du visiteur, le grand nombre de produits exposés sur le site e-commerce, etc, vous devez appliquer certaines bonnes pratiques pour transformer votre champ de recherche en un levier de conversion et d’engagement.
Suivez dans cet article quelques astuces pour parfaire l’UX de votre site à l’aide d’un search box efficace.
L'importance d'un search box
Le search box est un moteur de recherche interne qui joue un rôle éminent pour :
- Assurer une exploration du site et une expérience de recherche agréables, d’où une expérience utilisateur globale plus optimale.
- Guider le visiteur directement et rapidement vers le produit recherché. En effet, entre 30% et 60% des visiteurs se servent de la barre de recherche pour trouver plus rapidement le produit qui répond à leur intention d’achat, au lieu de parcourir tout le site à cet effet.
- Renforcer l’autonomie du visiteur pendant sa navigation sur votre site. Le champ de recherche lui épargne le temps de dialoguer avec le chatbot ou de contacter le service client pour se renseigner sur le produit envisagé et accentue le contrôle de l’utilisateur de son parcours.
- Favoriser l’engagement et la satisfaction des utilisateurs, ce qui donne lieu à plus de conversions. Certains visiteurs disposent d’une intention d’achat développée et connaissent exactement le produit qu’ils désirent acquérir. Pour cette raison, ils utilisent automatiquement le search box pour être dirigés directement vers leur besoin. Selon l’étude menée par Econsultancy, les utilisateurs qui passent par la barre de recherche sont susceptibles de réaliser des conversions de 2 à 4 fois plus que ceux qui ne le font pas.
7 pratiques UX pour réussir son search box
Améliorer la visibilité du champ de recherche
La bonne visibilité et l’accessibilité du contenu sont parmi les fondements d’une bonne UX. Compte tenu de la capacité de concentration relativement limitée et de l’impatience du visiteur, il est important de placer le champ de recherche dans une zone parfaitement proéminente, sur chaque page web (y compris la page 404) et au même emplacement. Inversement, votre site risque d’avoir un taux de rebond élevé.
Il est intéressant d’intégrer un widget sous la forme d’un bouton de recherche pour rendre le search box toujours accessible au visiteur pendant le défilement de la page. C’est un facteur clé d’optimisation de l’expérience utilisateur.
De plus, il faut prévoir la zone la plus idéale pour ériger le champ de recherche, là où l’utilisateur s’adresse naturellement pour effectuer une recherche. Généralement, ce composant est placé en haut, au milieu ou à gauche dans un site e-commerce.
La manière avec laquelle on scanne un contenu suit la forme de F, en partant par le haut, puis en regardant à gauche. C’est pourquoi, la zone de recherche doit être disposée en haut, pour être le premier point de contact visuel avec l’interface UI. Évitez toutefois de placer la barre de recherche à gauche, car les utilisateurs sont habitués à le voir à gauche, notamment sur les sites e-commerce.
Il est aussi recommandé de différencier la zone de recherche des produits des autres search box, notamment, selon l’emplacement, la forme, les icônes, etc.
Dans cette optique, il est conseillé de tester différentes alternatives, notamment, à l’aide de l’A/B testing, la heatmap, l’eye tracking, etc. Ainsi, vous pouvez localiser la partie la plus visible, selon le modèle mental de vos cibles, à laquelle ils s’orientent directement pour réaliser leurs recherches.
Il est aussi important de choisir un contraste optimal entre la couleur du texte et le fond de la barre de recherche, en fonction du contexte d’usage du site (jour, nuit) et des contraintes de l’utilisateur (déficience visuelle).
Optimiser l’ergonomie du search box
Il est important de créer un search box avec une taille suffisamment large pour pouvoir accueillir une requête relativement longue. Pareillement pour les zones tactiles sur les appareils mobiles. Le champ de recherche doit être conçu de manière à interagir efficacement avec les touchers des doigts. Cela assure une meilleure utilisabilité de cet élément et par la suite une meilleure UX.
Par ailleurs, il faut bien illustrer le champ de recherche, à travers un placeholder et une icône de loupe. Ces composants, intégrant une icône de qualité, mettent en relief la barre de recherche et invitent l’utilisateur à rechercher son produit de façon intuitive.
De plus, pour garantir une meilleure utilisabilité, il est conseillé d’éviter la conception d’un search box avec uniquement une icône et d’accompagner cette dernière avec un champ de recherche, si la taille de la zone cible le permet.
Il est aussi important d’optimiser la convivialité et l’accessibilité de ce composant graphique à travers :
- L’affichage des dernières recherches effectuées pour aider le visiteur à trouver plus rapidement son besoin.
- La proposition d’options de recherche supplémentaires et des filtres de recherche poussés, pour faire gagner du temps à l’utilisateur et lui offrir une expérience de recherche plus fluide.
- L’intégration d’un mécanisme de correction et de compréhension des fautes de frappe. Il est obligatoire de renforcer l’utilisabilité du champ de recherche en ajoutant une croix pour annuler rapidement texte erroné. Ces fonctionnalités évitent de perdre des visiteurs à cause de leur incapacité à trouver des résultats à leurs requêtes détournées.
- L’affichage permanent de la requête tapée. De cette manière, l’utilisateur aura toujours un repère en cas d’oubli ou de perte de concentration.
- L’intégration de la recherche vocale (voice search) dans une boutique e-commerce. Cette technologie innovante offre aux utilisateurs une recherche plus rapide et plus interactive, surtout pour les personnes qui ne savent pas écrire correctement et qui ne sont pas à l’aise avec l’orthographe.
- L’intégration de la saisie automatique (autocomplete), qui constitue une fonctionnalité pratique pour simplifier et accélérer la recherche du visiteur et lui délivrer une expérience utilisateur plus souple.
- La réalisation d’un test UX (ou test utilisateur) de manière itérative et constante, à l’aide des outils dédiés comme: Testapic, Lookback, Ferpection, etc. Les tests utilisateurs donnent des insights utiles sur le bon fonctionnement du champ de recherche et sur le niveau de maîtrise des utilisateurs de cet outil.
- L’application des guidelines du 3WC Web Accessibility dans l’objectif de faciliter la recherche aux personnes en situation de handicap. Par exemple, il est recommandé de définir certains attributs, tels que : for=”search” de la balise <label>, pour aider une personne avec un handicap physique à activer plus facilement le champ de recherche.
Créer un search box convivial
Il est important d’intégration d’une micro-interaction subtile afin de montrer au visiteur que le search box change d’état (disparition du placeholder, changement du format de la bordure de la barre de recherche, etc), en fonction des ses actions : survol, clic, etc. C’est ce qui permet de créer une interaction plus immersive.
Adapter le search box à la recherche mobile
Avec plus de 92 % de connexions à internet depuis un appareil mobile, il devient indispensable de concevoir un search box qui s’aligne sur les propriétés des petits écrans et qui offre les mêmes fonctionnalités sur les différents terminaux.
Intégrer l’historique de recherche
L’historique de recherche permet de mémoriser les anciennes requêtes que le visiteur a utilisées. Cette fonctionnalité lui fait gagner du temps dans le cas où il veut revenir à sa première requête après sa modification ou l’utilisation d’autres expressions de recherche. Ainsi, il aura plus de liberté et plus d’aisance dans ses recherches, ce qui implique une meilleure réduction du taux de rebond.
L’utilisation d’un champ lexical riche
Il arrive de perdre un visiteur parce que votre système lui retourne un résultat vide, puisqu’il n’existe pas dans votre base de données un terme équivalent au terme de recherche employé par ce dernier. Pour éviter ce constat, vous devez développer un champ lexical riche qui regroupe le maximum de synonymes et d’expressions similaires qui portent le même sens.
De ce fait, vous évitez de rendre aux visiteurs un résultat vide, tout simplement parce qu’ils ont utilisé l’expression “un vêtement de nuit” au lieu de peignoir, par exemple, comme vous l’avez mentionné dans votre base de données.
Éviter les pages blanches
Les pages blanches et les résultats vides sont parmi les grands facteurs de frustration et de fuite des visiteurs. A cet effet, vous devez fédérer toutes les techniques qui permettent d’éviter ce genre de problèmes et d’assurer la réactivité durable de votre site, telles que les redirections, un champ lexical abondant, etc.
Gardez votre site en état actif constant, c’est-à-dire, qui répond toujours aux requêtes tapées, même à travers des alternatives équivalentes au résultat attendu et évitez les réponses nulles.
Mot de la fin
Le search box est un levier de rétention et de conversion important. Sur un site e-commerce, il facilite la recherche des produits et optimise le parcours du tunnel d’achat, permettant de gagner la satisfaction des clients qui ont une intention d’achat prononcée et de convertir les prospects en clients.
Vous ne devez pas négliger le rôle important du champ de recherche pour améliorer votre ROI et appliquer les bonnes pratiques pour bénéficier de ses avantages. Notamment, vous devez choisir l’emplacement idéal pour assurer la bonne visibilité de la barre de recherche. Aussi, il faut optimiser l’ergonomie et la convivialité de ce composant pour rendre son expérience de recherche plus intéressante.
by 
