Français
La barre de recherche se compose généralement d'un champ de saisie de texte et d'un bouton Envoyer. Celle de la boutique démo de Luigi's Box est également équipée de la saisie semi-automatique.
Introduction
La fonction de recherche est un élément de design essentiel sur les sites web riches en contenu. Lorsque les utilisateurs se retrouvent sur un site relativement complexe, ils s’appuient sur la fonction de recherche pour trouver ce dont ils ont besoin.
La fonction de recherche se compose de deux éléments fondamentaux : un champ de saisie qui vous permet d’entrer du texte et un bouton Envoyer. Les barres de recherche pourraient sembler être un outil relativement simple, mais le processus de conception nécessite beaucoup de recherche et d’attente.
Ce qui se dresse entre vous et votre réussite pourrait, après tout, être quelque chose d’aussi simple que la conception du champ de recherche pour votre site web.
Nous avons consulté notre équipe d’experts produit afin de vous donner quelques conseils utiles qui vous permettront d’améliorer le fonctionnement de la recherche sur votre site. Nous allons parler des bonnes pratiques en matière de conception de l’expérience (UX) et de l’interface utilisateur (UI), vous montrer quelques sites qui mettent très bien cela en pratique et vous présenter certains logiciels capables de vous aider à optimiser votre recherche interne.
Qu’est-ce qu’une barre de recherche
Une barre de recherche est un composant de l’interface qui permet aux utilisateurs de saisir des requêtes de recherche et de récupérer des résultats à partir d’une base de données, d’un site web ou d’une application. Elle se compose généralement d’un champ de saisie de texte et d’un bouton pour lancer la recherche.
Pourquoi la barre de recherche est-elle importante
Imaginez que vous consultez un site web qui vend des baskets, et vous avez jeté votre dévolu sur un modèle en particulier. Est-ce que vous choisiriez de parcourir l’ensemble du site pour trouver ce modèle précis ? Probablement pas. Vous iriez plutôt saisir le nom ou le type du modèle dans le champ de recherche, appuyer sur Entrée, et voilà ! Vous avez trouvé ce que vous cherchiez.
Mais que se passe-t-il si la barre de recherche n’est pas bien conçue ? Une étude menée par Baymard montre que 39 % des sites e-commerce rencontrent de gros problèmes avec leur fonction de recherche. Cela souligne l’importance d’une fonction de recherche bien conçue, qui est souvent négligée et pourtant essentielle pour une expérience utilisateur harmonieuse.
La conception et la facilité d’utilisation de la barre de recherche contribuent énormément au succès des sites e-commerce. Elle permet non seulement aux utilisateurs de trouver exactement ce qu’ils cherchent, mais les aide également lorsqu’ils ne savent pas exactement ce dont ils ont besoin.
Sur un site web, la barre de recherche est un élément de conception sous-estimé. D’après notre propre recherche :
2x
Les personnes qui utilisent la recherche sont deux fois plus susceptibles d'acheter que ceux qui utilisent la navigation.
50%
La recherche représente environ 50 % des revenus d'une boutique en ligne.
73%
des e-shops ayant une personne dédiée à l'optimisation de leur recherche voient leurs revenus augmenter.
58%
des e-shops surveillent les indicateurs de leur recherche sans prendre aucune mesure.
Bonnes pratiques de conception de l’IU pour votre barre de recherche
Cette section explore les bonnes pratiques pour concevoir une barre de recherche solide.
1. Créez un design axé sur le mobile
Les utilisateurs mobiles représentent plus de 50 % du trafic internet mondial, et cette part ne cesse d’augmenter d’une année sur l’autre. Compte tenu de cette tendance, il est essentiel d’accorder la priorité à une conception adaptée aux mobiles pour votre barre de recherche.
La conception de l’UX de la barre de recherche doit être développée en pensant à l’espace d’un écran mobile. Son emplacement doit être visible et facilement accessible par un simple mouvement du pouce. Une barre de recherche persistante, qui reste visible en haut ou en bas lorsque les visiteurs font défiler la page web, est également une excellente caractéristique pour les appareils mobiles.
2. Garantir la visibilité
Ne demandez pas à vos visiteurs de chercher la barre de recherche. Certains concepteurs font l’erreur de cacher l’option de recherche dans le bouton du menu, ou ne rendent pas le champ de recherche suffisamment visible.
Il est important d’afficher le champ de texte au complet, car masquer la fonction de recherche derrière une icône réduit sa visibilité et augmente les coûts de l’interaction.
Veillez à ce que votre barre de recherche soit facilement reconnaissable en utilisant l’icône loupe et en plaçant le bouton Rechercher juste à côté du champ de recherche. Vous pouvez également améliorer sa visibilité en utilisant des couleurs d’arrière-plan qui contrastent avec le thème de votre site web.
Pour les appareils mobiles, utilisez une barre de recherche persistante sur la partie centrale en haut de l’écran pour obtenir les meilleurs résultats.
3. Conserver un design cohérent sur l’ensemble du site
Veillez à placer la fonction de recherche au même endroit sur l’ensemble de votre site.
Les visiteurs s’attendent à trouver le champ de recherche au même endroit, et ayant la même apparence, que sur la première page qu’ils ont consultée. Si votre site manque de cohérence, cela peut créer de la confusion et avoir un impact négatif sur vos taux de conversion.
4. Mettre en œuvre la saisie semi-automatique
Souvent, vos visiteurs ne savent pas exactement ce qu’ils cherchent. Et certains utilisateurs n’ont simplement pas envie de saisir de longs termes de recherche.
La saisie semi-automatique est une puissante fonctionnalité de la barre de recherche qui prédit les requêtes des utilisateurs et offre des suggestions en fonction de ce qu’ils ont déjà saisi, leur historique de recherche, la page en cours, etc.
Cette fonctionnalité ouvre de nombreuses possibilités de susciter l’intérêt des visiteurs du site web. Par exemple, une seule requête peut générer de nombreux résultats de recherche en lien avec la saisie, tels que des catégories de produits, des marques connues, augmentant ainsi la probabilité de nouvelles conversions.
Luigi’s Box exit rate after a failed search statistic
Bonnes pratiques de conception de l’IU pour votre barre de recherche
Comment la barre de recherche peut-elle se transformer en outil qui permet d’augmenter le rendement de la boutique en ligne ? Parlons des conseils et des bonnes pratiques pour une conception de l’UI de la recherche interne qui soit vecteur de vente.
1. Conception axée sur le mobile
Les utilisateurs mobiles représentent plus de 50 % du trafic internet mondial, et cette part ne cesse d’augmenter d’une année sur l’autre. Si l’on tient compte de cette statistique, la meilleure pratique en termes de conception de barre de recherche consiste à penser d’abord aux utilisateurs mobiles !
La conception de l’UX de la barre de recherche doit être développée en pensant à l’espace d’un écran mobile. Son emplacement doit être visible et facilement accessible par un simple mouvement du pouce. Des barres de recherche persistantes sont également une bonne idée pour les appareils mobiles.
2. Visibilité
Ne demandez pas à vos visiteurs de chercher la recherche. Certains concepteurs commettent l’erreur fatale qui consiste à cacher l’option de recherche dans le bouton du menu. Les autres ne rendent pas le champ de recherche suffisamment visible pour les visiteurs.
Il est essentiel d’afficher le champ de texte au complet, car masquer la fonction de recherche derrière une icône réduit sa visibilité et augmente les coûts de l’interaction.
Faites en sorte d’utiliser l’icône loupe comme icône de recherche pour la rendre bien visible et proposez un bouton de recherche juste à côté du champ de recherche. Utilisez des couleurs d’arrière-plan qui contrastent avec le thème de votre site web, pour la mettre en évidence.
Pour les appareils mobiles, utilisez une barre de recherche persistante sur la partie centrale en haut de l’écran pour obtenir les meilleurs résultats.
Les études suggèrent que les coins en haut à droite ou à gauche, au-dessus de la barre de navigation, sont les meilleurs endroits où placer le widget de recherche.
3. Un design cohérent sur l’ensemble du site
Veillez à placer la fonction de recherche au même endroit sur l’ensemble de votre site. Le design de la barre de recherche devrait également être cohérent sur toutes les pages web. L’icône loupe devrait être aussi présente dans le même espace.
Les visiteurs vont s’attendre à trouver le champ de recherche là où il était sur la page d’accueil, et ils sauront à quoi il ressemble. S’il ne se trouve pas au même endroit les autres pages, ou s’il n’a pas la même apparence, cela peut créer de la confusion et avoir un impact sur vos conversions.
4. Saisie semi-automatique
Le plus souvent, les utilisateurs typiques ont une idée de ce qu’ils cherchent, mais ne sont pas sûrs. Dans d’autres cas, le terme qu’ils recherchent est long, et ils n’ont pas envie de le taper au complet. La meilleure solution à ces deux scénarios, et à bien d’autres problèmes, est la fonction de saisie semi-automatique.
La saisie semi-automatique est une fonctionnalité de la barre de recherche qui prédit ce que l’utilisateur recherche et propose des suggestions en fonction de ce qu’ils ont déjà saisi, leur historique de recherche, la page en cours, etc. C’est une fonction de recherche incroyablement populaire utilisée par toutes les grandes marques.
Cette fonctionnalité ouvre un monde de possibilités qui vous permettent de présenter des articles aux visiteurs du site web. Par exemple, pour une seule requête, vous pourriez proposer plusieurs résultats de recherche en lien avec la saisie en fonction de la catégorie du produit, les marques connues, etc. En présentant autant d’options aux visiteurs de votre site, vous leur donnez plus d’occasions de se convertir.
La saisie semi-automatique offre un retour rapide aux requêtes des utilisateurs
Elle assure immédiatement aux utilisateurs qu’ils sont au bon endroit – votre boutique – et qu’ils prennent le bon chemin pour trouver le produit souhaité – que vous offrez et qui est en stock. Très souvent, elle est également utilisée comme un moyen de navigation rapide pour aller directement vers la bonne catégorie de produits dans votre structure de catégories. Sa rapidité est essentielle, car les acheteurs l’utilisent aussi pour répéter rapidement des saisies de recherche avant de se lancer dans l’expérience de recherche complète avec le filtrage avancé et le tri.
Michal Barla
Directeur des produits & Co-Fondateur, Luigi's Box
5. Images affichées dans les résultats
Il est également important de se concentrer sur l’interface utilisateur des résultats de recherche. Afficher des images de produits contribue à l’accroissement des ventes. Souvent, les gens se représentent visuellement le produit qu’ils recherchent sur votre site web. Alors, s’ils voient, dans les résultats de recherche, une image du produit qui correspond à celle qu’ils ont en tête, cela améliore leur probabilité de conversion.
6. Texte de remplacement
Un moyen efficace d’aider les personnes à comprendre ce qu’ils recherchent est d’inclure un exemple de terme de recherche dans le champ de saisie sous forme de texte de remplacement. Vous pouvez en proposer si l’utilisateur peut faire des recherches à l’aide de différents paramètres. Grâce à HTML5, il est facile d’ajouter un texte de remplacement dans les champs de saisie.
7. Garder le mot-clé dans le champ
Après avoir terminé la recherche, le mot clé devrait rester visible dans la fenêtre de recherche. Cela permet à l’utilisateur de modifier ou d’ajouter à la requête initiale et de lancer une nouvelle recherche. Cela améliore l’expérience utilisateur dans son ensemble et réduit le taux de rebond.
Assurez-vous que la barre de recherche puisse se souvenir et afficher le mot clé de la dernière requête.
Le mot clé devrait demeurer dans la fenêtre de recherche.
Les bonnes pratiques UX pour la conceptionde votre barre de recherche
Une conception efficace pour l’UX de la recherche ne se limite pas à l’esthétique visuelle. Le fonctionnement actuel de la recherche sur votre site web joue un grand rôle. Voici quelques bonnes pratiques de recherche en termes de technologie pour vous aider à améliorer l’UX de votre barre de recherche et obtenir les résultats souhaités.
1. Rapidité
Personne n’a le temps d’attendre que votre site web veuille bien charger les résultats de recherche. C’est particulièrement vrai dans le cas de la saisie semi-automatique.
Pour l’expérience utilisateur, la rapidité est essentielle. Si les visiteurs n’obtiennent pas les résultats tout de suite, ils vont fermer la fenêtre et acheter chez vos concurrents.
2. Qualité de la correspondance
L’utilisateur ne va toujours vous donner le mot clé exact. Il peut s’agir d’une faute de frappe, d’une intention de recherche ou d’un contexte manquant, de l’utilisation de synonymes, etc. L’algorithme de l’outil de recherche devrait être suffisamment sophistiqué pour prendre en compte tous les facteurs, reconnaître exactement ce que l’utilisateur recherche, et fournir ensuite des correspondances de recherche précises.
La capacité de votre outil de recherche à fournir une excellente qualité de correspondance va déterminer la rapidité avec laquelle votre entreprise se développe. Alors faites-en sorte de choisir un outil de recherche de grande qualité.
3. Recherche vocale
La recherche vocale est rapidement en train de devenir la norme du secteur et est très populaire pour les appareils mobiles. Elle offre un moyen de recherche pratique pour les utilisateurs mobiles.
Elle facilite la recherche pour les individus ayant un handicap qui ne peuvent pas taper une requête de recherche. La recherche vocale est l’une des fonctions d’accessibilité les plus pratiques, et en l’intégrant à la fenêtre de recherche, vous ouvrez votre commerce à un plus large public.
Si vous incorporez la capacité de recherche vocale à la barre de recherche de votre site web, assurez-vous d’utiliser une icône micro pour le montrer. L’icône micro est synonyme de fonction de recherche vocale, ce qui permet aux visiteurs de la découvrir rapidement.
4. Filtres dynamiques
Les filtres sont devenus populaires dans le secteur e-commerce comme outil qui permet aux clients de rechercher des articles à l’aide de critères variés.
Ils permettent aux clients de voir une gamme de produits sans avoir à faire le tri entre des milliers d’alternatives, ce qui améliore l’expérience d’achat.
Les filtres de recherche étant dynamiques, les boutiques en ligne peuvent rendre le shopping encore plus pratique. Cette fonctionnalité choisit de manière automatique uniquement les filtres appropriés à une catégorie donnée.
Cela signifie que les acheteurs peuvent filtrer les guitares par le nombre de cordes, mais ils verront des filtres complètement différents pour une batterie.
Les détaillants en ligne ont constaté une augmentation de 26 % des conversions suite à la mise en œuvre de filtres dynamiques
Luigi’s Box dynamic filters arcade demo.
5. Mobile search bar
As m-commerce continues to grow, search features should perform just as well on smartphones as on desktops.
Fully-featured search forms accessible on mobile websites significantly enhance the experience for all users by meeting their expectations. Incorporating advanced features such as typo correction, lemmatization, or autofill can make a significant difference and increase your chances of selling more items.
6. Search results UX
Categories
Add categories to narrow down search results and improve the overall user experience. For example, shoes, clothes, accessories, and other similar products, can be divided into gender-based categories. This will make it easier for people to find their desired products.
Results per page
Twenty results per page is ideal. This allows you to display a substantial number of products without overwhelming visitors with too many options.
Descriptions
Instead of merely listing specifications, include a sentence or two to describe the product. This provides an opportunity to use impactful language and entice visitors to click.
Brands
Brand-based result filtering allows you to leverage the already established brand loyalty to push sales on your website.
7. Personalization based on previous behavior
While the shopping journey often begins with a search, it doesn’t always end with a sale. Personalization can make search bar interactions more effective by tailoring suggestions and results to each shopper’s past behavior.
With advanced search software, you can leverage visitors’ past queries to personalize their experience. The search algorithm uses data from their browsing history, purchases, or behaviour, to optimize the process, presenting users with the products they’re most likely to buy.
Boost your e-shop's conversion rate with Luigi's Box personalized site search powered by AI.
7. Personnalisation basée sur le comportement antérieur
Le parcours en ligne d’un utilisateur commence par une recherche mais ne se termine pas toujours par un achat la première fois. Il se peut que les visiteurs reviennent plusieurs fois sur votre site avant d’acheter.
Un outil de recherche perfectionné, tel que Luigi’s Box, va vous permettre d’utiliser leurs parcours précédents sur votre site pour créer une expérience de recherche personnalisée. Notre algorithme utilise les données de l’historique des recherches antérieures en montrant aux utilisateurs les produits qu’ils sont les plus susceptibles d’acheter
Boostez le taux de conversion et la valeur moyenne des commandes de votre boutique en ligne grâce à une recherche interne personnalisée pilotée par l'IA.
Bonus : travaillez sur le contenu pour obtenir de meilleurs résultats
Le contenu est roi ! Un bon texte peut faire des merveilles pour convaincre les visiteurs de votre site d’acheter. Veillez à ce que tous les produits contiennent une description détaillée qui couvre toutes les caractéristiques importantes. Un bon contenu inclut également des images du produit. Vérifiez que les photos de vos produits soient de bonne qualité, et que toutes les images aient la même dimension. Aucun produit ne doit être dépourvu d’informations sur les prix ou les tableaux des tailles (le cas échéant). Accordez une grande importance au contenu de votre site web, car il joue un rôle énorme dans l’expérience utilisateur.
Recherche de jantes Karoq de taille 16 sur l'e-shop officiel Škoda.
2. Acer
La boutique Acer dispose d’une barre de recherche large que les clients remarquent immédiatement. La saisie semi-automatique affiche les requêtes et les produits populaires, présentant des suggestions de produits avant que les utilisateurs ne saisissent leurs requêtes.
Recherche avec saisie semi-automatique et requêtes populaires sur la boutique en ligne Acer
3. 11teamsports
Une autre barre de recherche avec des suggestions instantanées de la saisie semi-automatique de produits et de requêtes populaires. Après avoir saisi “ars”, l’utilisateur obtient des exemples de kits et de marchandise pour le club de football d’Arsenal.
Saisie semi-automatique présentant des produits populaires du club de football Arsenal.
4. Kik
La barre de recherche sur le site web de Kik se présente avec un texte de remplacement incitant le visiteur à utiliser la recherche pour trouver les produits désirés.
Recherche de "chaussettes" sur la boutique kik.de.
5. Bobcat
La recherche de Bobcat propose des suggestions de saisie semi-automatique d’une manière plus directe, facilement compréhensible. Elle s’accompagne de requêtes pivotantes, qui donnent aux utilisateurs des idées sur ce qu’ils peuvent chercher.
Les meilleurs outils de barre de recherche du marché
La conception, l’emplacement et la fonctionnalité de la barre de recherche sont certes essentiels, mais le moteur qui l’alimente joue un rôle également crucial pour déterminer l’expérience utilisateur. Explorons davantage cet aspect en examinant certaines des entreprises leader dans le domaine du moteur de recherche e-commerce.
1. Luigi’s Box
Fondée en Slovaquie, Luigi’s Box a d’abord été conçue comme une solution permettant de traiter les problèmes de la recherche interne pour les entreprises e-commerce. Au fil des ans, elle a gagné en reconnaissance sur le marché européen pour son approche novatrice.
2. Algolia
Établie en 2012 à Paris, Algolia a vite élargi son empreinte jusqu’à San Francisco et d’autres sites internationaux. Elle est connue pour son approche centrée sur le développeur et s’est taillée une position solide sur le marché de la recherche en tant que service.
3. Elasticsearch
Née d’un projet parallèle de Shay Banon en 2010, Elasticsearch est ensuite devenue le produit principal d’Elastic, une société fondée à Amsterdam. Elle est devenue depuis un leader dans le domaine des technologies de recherche open-source.
4. SearchSpring
Fondée en 2007 à Colorado Springs, SearchSpring a vu le jour en tant que réponse aux besoins grandissants en termes de solutions avancées pour la recherche e-commerce. Elle sert depuis un grand nombre de marques et de détaillants.
5. FactFinder
Trouvant ses racines en Allemagne, FactFinder est présente sur le secteur de la recherche e-commerce depuis le début des années 2000. Elle est reconnue sur le marché européen pour ses solutions de recherche et de navigation solides.
6. Klevu
Originaire de Finlande, Klevu a été établie en 2013. Axée sur les solutions pilotées par l’IA, l’entreprise a étendu sa présence à l’Europe et l’Amérique du Nord.
7. Doofinder
Fondée en Espagne en 2011, l’objectif de Doofinder était d’améliorer l’expérience de recherche e-commerce pour les entreprises à travers l’Europe. Elle a depuis élargi sa clientèle et ses offres.
8. Loop54
Basée à Stockholm, en Suède, Loop54 a commencé son parcours en 2011. L’accent mis par l’entreprise sur les solutions pilotées par IA l’a distinguée sur le marché nordique du commerce électronique.
Conclusion
Concevoir une barre de recherche pour un site web est un art. Bien réalisée, elle peut sérieusement vous aider à booster votre taux de conversion et à développer votre entreprise. Ne faites pas l’impasse sur les petits détails. Ces éléments de design sont essentiels car ils jouent un rôle primordial dans l’expérience utilisateur.
La conception UX de la barre de recherche devrait être effectuée en se concentrant d’abord sur les mobiles. Le meilleur design pour une barre de recherche va aussi toujours dépendre d’un fonctionnement de qualité supérieure. Alors assurez-vous de choisir un outil de recherche rapide et futuriste qui offre de puissantes fonctionnalités telles que la recherche à facettes, la recherche personnalisée, la saisie semi-automatique et bien d’autres.
Foire aux questions
Pourquoi devrais-je avoir une solution de recherche sur mon site ?
Dans l’ensemble, 73 % des boutiques en ligne qui mettent en œuvre une fonction de moteur de recherche voient leurs revenus augmenter. Une fonction de recherche propose aux visiteurs de votre site une fonction de recherche avancée qui prend les données saisies par l’utilisateur, ainsi que l’historique, pour proposer des correspondances de produits précises et personnalisées. Cela créé une expérience de shopping harmonieuse, ce qui diminue le taux de rebond, améliorer le temps moyen de la session et booste les conversions.
Comment créer une barre de recherche efficace ?
Une barre de recherche bien conçue devrait être adaptée aux mobiles et rester visible et cohérente sur l’ensemble d’un site web. Le fonctionnement du champ de recherche devrait être rapide et offrir de puissantes fonctionnalités, telles que la saisie semi-automatique, la recherche à facettes, la recherche vocale, des filtres dynamiques, des résultats de recherche personnalisés, et bien d’autres. Efforcez-vous simplement de rendre le processus de recherche aussi simple que possible pour l’utilisateur.
Puis-je créer ma propre barre de recherche ?
Vous pouvez tout à fait créer une solution de barre de recherche pour votre site web. En fait, vous avez plusieurs options. Par exemple, vous pouvez choisir des bibliothèques publiques, des technologies open-source, Elasticsearch, des plug-ins, etc. Toutefois, si vous souhaitez disposer d’un outil de recherche dont le fonctionnement est excellent et qui offre de nombreuses fonctionnalités futuristes, Luigi’s Box est votre meilleure option.
Filip Kubelka dirige le marketing produit chez Luigi's Box. Son parcours dans la traduction façonne sa vision de la recherche : la précision est essentielle, et les mots que vous choisissez pour décrire un problème révèlent souvent si vous le comprenez vraiment. Il écrit sur les véritables défis auxquels font face les équipes e-commerce en matière de recherche et de découverte de produits.
Plus d'articles de blog de cet auteur