7 meilleures pratiques dans la conception et le placement des boîtes de recherche
Le champ de recherche est l’un des éléments les plus importants d’un site Web. Quel que soit le type d’entreprise que vous avez, il est essentiel de disposer d’un champ de recherche bien conçu pour que les visiteurs puissent facilement trouver ce qu’ils recherchent. Cela ne signifie pas qu’il suffit d’ajouter simplement une fonction de recherche sans même penser à son apparence.
Vous devrez tenir compte de la fonctionnalité, de la convivialité, de l’esthétique et même de l’emplacement du champ de recherche. Tout cela pour que vous puissiez améliorer l’expérience utilisateur sur votre site Web, ce qui peut même entraîner une augmentation des conversions.
Alors, que devez-vous faire lors de la conception d’un champ de recherche ? Bien que les recommandations exactes puissent être subjectives en fonction de vos besoins et de vos objectifs, il existe quelques conseils généraux qui pourraient fonctionner pour différents types de sites Web. Voici donc quelques-unes des meilleures pratiques en matière de conception et de placement des champs de recherche :
1 Mettez-le en évidence
La première et la plus importante règle dans la conception de la boîte de recherche est de la rendre facilement perceptible. Vous êtes peut-être trop concentré sur l’esthétique du design pour créer un champ de recherche qui se fond avec le reste du site Web. Mais il est important de se rappeler que vous ajoutez un champ de recherche pour les personnes qui souhaitent trouver quelque chose sur votre site Web. Les faire rechercher le champ de recherche n’aura aucun sens et pourrait même avoir un impact négatif sur leur expérience.
Cela ne signifie pas que vous devez faire des compromis sur l’esthétique. Créez un design qui s’harmonise parfaitement avec la conception de votre site Web existant tout en étant suffisamment visible pour que les gens le remarquent. Ainsi, la taille de la boîte doit être grande mais pas trop grande car elle prend trop de place sur la page. Et la couleur doit être contrastée tout en restant complémentaire au reste des couleurs utilisées sur la page.
Le champ de recherche Best Buy en est un bon exemple, car le blanc contraste avec le bleu de la page tout en s’alignant sur les autres couleurs utilisées dans la conception de la page. La taille du champ de recherche n’est pas trop grande tout en étant suffisamment visible pour que les internautes le remarquent immédiatement lorsqu’ils accèdent à la page.
2 Mettez en surbrillance le bouton Soumettre
Comme mentionné précédemment, le but d’un champ de recherche est de faciliter les choses pour les visiteurs du site. Évitez de trop compliquer les choses avec de minuscules boutons de soumission sur lesquels les utilisateurs doivent se concentrer pour cliquer. Faire ressortir le bouton Soumettre améliore la visibilité du champ de recherche lui-même et facilite également le clic des utilisateurs.
Que vous choisissiez d’utiliser une icône de loupe ou d’épeler "Soumettre" dans le bouton de soumission, c’est à vous de décider. Cependant, concentrez-vous sur la taille et la couleur du bouton afin de vous assurer que les utilisateurs n’auront aucun mal à le trouver après avoir tapé le Expliquez-leur clairement ce qu’ils doivent faire une fois qu’ils ont saisi ce qu’ils recherchent.
Certains sites Web vont même jusqu’à ne mettre que l’icône de la loupe pour que les visiteurs recherchent quelque chose. Cela peut s’avérer très bénéfique pour l’esthétique du site Web, comme dans le cas de Levi’s Strauss. Mais ce n’est pas un exemple de conception de boîte de recherche optimale.
Bien que cela semble bon en termes de design, cela peut être gênant pour les visiteurs car ils doivent attendre que le champ de recherche se charge après avoir cliqué sur l’icône de la loupe. Cela peut être frustrant, surtout si vous accédez au site depuis un endroit où la connexion est lente. Au lieu de le charger séparément, il serait peut-être préférable que le champ de recherche se développe au même endroit où la loupe est placée.
Lorsque vous êtes coincé avec un espace limité, mais que la recherche est importante, il peut être agréable de la faire se fondre dans la navigation supérieure. C’est exactement ce que shralpin a fait sur son site mobile.
Xero Shoes, en revanche, n’a pas du tout de bouton d’envoi. Les visiteurs devront entrer un mot-clé dans le champ de recherche, puis appuyer sur Entrée pour rechercher quelque chose sur le site. Maintenant, vous pensez peut-être que ce n’est pas si mal de simplement appuyer sur la touche Entrée pour lancer la recherche, mais qu’en est-il du reste des visiteurs? Certains d’entre eux peuvent rechercher spécifiquement le bouton d’envoi et peuvent avoir du mal à effectuer une recherche en utilisant ce type de conception.
Le bouton d’envoi d’Amazon est assez visible en orange tandis que le reste du champ de recherche est en blanc. La couleur du bouton d’envoi contraste également avec la couleur plus foncée de l’en-tête du site Web. Ainsi, bien qu’ils n’utilisent qu’une icône de loupe comme bouton d’envoi, il est toujours bien visible contrairement à l’exemple de Levi. Assurez-vous que l’icône est rembourrée, car cela augmentera la visibilité.
3 Placez-le là où les utilisateurs sont le plus susceptibles de regarder
Il y a un débat en cours sur le meilleur endroit pour mettre le champ de recherche sur un site Web. Mais si vous parcourez certains des sites Web les plus populaires, vous remarquerez que les champs de recherche sont souvent placés en haut au centre ou en haut à droite de la page. Cela ressort clairement de l’étude publiée par SLI Systems. L’analyse a révélé que 54 % des détaillants placent le champ de recherche en haut à droite, 30 % au centre et seulement 16 % à gauche.
Cela signifie que les visiteurs peuvent s’attendre à trouver le champ de recherche en haut à droite de votre site Web. Le placer à un endroit inattendu signifie que les utilisateurs devront peut-être déployer des efforts supplémentaires pour trouver le champ de recherche. Malgré cela, c’est toujours une bonne idée d’étudier l’activité des visiteurs à l’aide d’une carte thermique ou d’un outil de suivi oculaire. Cela vous aidera à identifier où ils sont le plus susceptibles de chercher, vous aidant à comprendre où vous devez placer le champ de recherche sur votre site.
Que vous choisissiez la gauche, la droite ou le centre ; assurez-vous qu’il se trouve vers le haut de la page, car c’est là que les visiteurs sont les plus susceptibles de scanner en premier selon une étude de suivi oculaire de NN Group. quelle position semble être la plus performante pour vous.
Voici un exemple de champ de recherche placé sur le côté droit de la page de Get Plus Followers.
Le placement de la boîte de recherche d’EBay est au centre de la page, où il est bien visible et l’une des premières choses que les visiteurs remarqueront sur le site Web.
4 Combiner la saisie semi-automatique avec des graphiques
Votre site Web peut figurer parmi les 62,5 % utilisant la fonction de saisie semi-automatique dans leur champ de recherche. Afin d’obtenir un avantage concurrentiel, vous pouvez encore améliorer la fonctionnalité en ajoutant des aperçus d’images du produit ainsi que des suggestions de saisie semi-automatique dans votre fonction de recherche. En effet, seuls 28,2 % des sites Web participants implémentent actuellement cette fonctionnalité.
Pour continuer à plaider en faveur de la saisie semi-automatique avec des graphiques, vous voudrez peut-être jeter un coup d’œil au cas de LED Hut. Après avoir ajouté des aperçus d’images à ses suggestions de saisie semi-automatique, le fournisseur d’éclairage LED a réussi à augmenter son taux de conversion de recherche de 200 %. Voici à quoi cela ressemblera lorsque vous ajouterez des aperçus d’image à la suggestion de recherche.
5 Évitez d’isoler ou de surcharger le champ de recherche
Le premier point mentionnait à quel point il est important de mettre en avant le champ de recherche. Cela signifie que vous devez éviter de surcharger les zones environnantes avec des icônes ou d’autres éléments qui pourraient distraire les visiteurs du champ de recherche. Le champ de recherche doit être hiérarchisé et ciblé. En même temps, évitez d’en faire trop, car vous pourriez finir par isoler le champ de recherche au point de le rendre difficile à trouver.
Le champ de recherche de Snow and Rock est un bon exemple de champ de recherche bien conçu. Comme vous pouvez le voir dans l’image ci-dessous, il n’y a pas trop d’éléments qui encombrent la zone où il est placé. Mais vous pouvez toujours le voir vers le centre-gauche de la page et n’est pas placé à un endroit où les utilisateurs auront du mal à le trouver. Le bouton d’envoi contraste également avec le reste des couleurs du site Web, ce qui le distingue.
6 Optez pour un champ de recherche extensible
Lorsque vous cherchez des moyens d’économiser de l’espace tout en rendant le champ de recherche visible pour les utilisateurs, vous pouvez opter pour un champ de recherche croissant. C’est un choix idéal pour les sites Web dans lesquels la recherche n’est peut-être pas trop essentielle, mais vous souhaitez tout de même donner aux utilisateurs la possibilité de rechercher quelque chose. Au lieu d’ajouter uniquement une icône de loupe, vous ajouterez un petit champ de recherche à côté pour servir d’indice visuel aux visiteurs du site. Lorsqu’un utilisateur clique sur le champ, la zone s’agrandit et permet aux utilisateurs d’entrer le terme dont ils ont besoin.
Voici un bon exemple de Net-a-Porter. Si vous regardez en haut à droite du site Web, vous voyez que le champ de recherche est visible mais pas trop grand. Il y a une icône de loupe pour que les utilisateurs identifient qu’il s’agit d’une option de recherche.
Mais une fois que vous avez cliqué sur le champ, le champ de recherche s’agrandit pour que vous saisissiez le terme de recherche requis. Cette combinaison d’esthétique et de convivialité est excellente pour un site Web qui doit inclure de nombreux éléments sur la page d’accueil, car elle vous aide à économiser de l’espace sans compromettre la visibilité du champ de recherche.
Le champ de recherche existe pour les personnes qui ont déjà une idée de ce qu’elles recherchent. Mais qu’en est-il de ceux qui ne sont pas trop sûrs de ce qu’ils recherchent. Vous pouvez avoir une fonctionnalité de suggestion de saisie semi-automatique, mais l’ajout d’une fonction de liste déroulante juste à côté du champ de recherche peut être une bonne idée pour certains sites Web. Il donne aux utilisateurs un sens de l’orientation et leur donne des indices sur ce qu’il faut rechercher.
Cette tactique s’est avérée un succès pour Casa Mineira, une société immobilière basée au Brésil. Dans une étude de cas menée sur le site Web, le remplacement du champ de recherche standard par des menus déroulants a permis de générer davantage de prospects. En fait, la variation a entraîné 57,25 % de prospects en plus qu’auparavant.
La raison pour laquelle cette variation a si bien fonctionné est que les visiteurs ont reçu un chemin d’action clair et qu’ils ont pu trouver rapidement ce qu’ils cherchaient. Dans la conception précédente, les visiteurs devaient être certains de ce qu’ils recherchaient exactement. Alors pour mieux guider les visiteurs, ils ont décidé de couvrir une grande variété de lieux et de types d’hébergement.
Mais il est important de se rappeler que cette option n’est peut-être pas la meilleure pour tous les types de sites Web. Un magasin de commerce électronique, par exemple, peut ne pas être en mesure de rendre la recherche plus fonctionnelle pour les visiteurs utilisant cette technique. Mais pour les sociétés immobilières et les entreprises liées aux services, une fonctionnalité de recherche déroulante pourrait être la solution idéale.
Conclusion
Vous avez maintenant une meilleure compréhension de la conception et du placement des champs de recherche à l’aide d’exemples et de conseils. Alors, qu’avez-vous appris de cela ? Vous avez peut-être remarqué l’accent mis sur la proéminence et la visibilité du champ de recherche. Cela signifie que le contraste des couleurs, l’esthétique et la taille du champ de recherche sont parmi les aspects les plus importants.
Vous devez vous concentrer sur la fonctionnalité et l’esthétique combinées, ce qui peut ne pas être facile à exécuter. Le meilleur conseil que vous puissiez obtenir est d’effectuer des tests A/B sur différentes conceptions et positions, comme mentionné dans les points précédents. Vous avez des questions sur la conception du champ de recherche ? N’hésitez pas à laisser un commentaire ci-dessous.