Un champ de recherche est l’une des pièces essentielles de presque tous les sites Web. Bien que parfois, la création de ce petit élément devienne une réflexion après coup, il n’ya aucune raison pour que le champ de recherche ne soit pas aussi beau que le reste d’un site Web.
La conception d'un champ de recherche doit refléter celle du reste du site, être fonctionnelle et facile à utiliser, et être placée à un emplacement évident pour les utilisateurs. Aujourd'hui, nous allons jeter un oeil à quelques superbes champs de recherche et à quelques outils pour vous aider dans votre propre conception.
Votre site a-t-il besoin d'un champ de recherche?
La réponse simple est oui. Si votre site contient une quantité importante de contenu (pensez plus qu’une page d’agrandissement ou une page de démarrage), un champ de recherche est indispensable.
Avoir un champ de recherche permet aux utilisateurs de trouver plus facilement du contenu. Il peut également vous aider à collecter des informations sur ce que les utilisateurs veulent rechercher et sur votre site, tels que des informations sur les produits, l'utilisation des mots clés, les souhaits et les besoins des utilisateurs.
D'autre part, les sites qui fonctionnent comme une page d'accroche ou une page de garde pourraient convenir sans l'inclusion d'une fonction de recherche. En règle générale, vous pourriez penser que les sites Web d'une page entrent dans cette catégorie, mais cela dépend vraiment de la taille, de la portée et de la conception. Les sites Web d'une seule page offrant une grande quantité de contenu grâce à l'utilisation d'éléments tels que le défilement parallaxe pourraient bénéficier de la fonctionnalité de recherche.
Fonction de recherche
Une des plus grandes questions en matière de recherche est la suivante: que doit-il faire? Bien que cela puisse sembler une question évidente, la façon dont les fonctions de recherche peuvent varier d’un site à l’autre. Les utilisateurs peuvent avoir des attentes différentes quant au fonctionnement de la recherche en fonction du contenu du site.
Recherche simple: Le type de recherche de site Web le plus courant est conçu autour d’une boîte contenant un lieu pour saisir ce que vous recherchez et une recherche? ou? soumettre? bouton. (Nous utilisons ce type de recherche ici sur le site Design Shack.) Souvent, la boîte contient ce qui est interrogeable sur le site, tel que des mots-clés ou des numéros d'articles.
Recherche intelligente: Google est le leader en matière de recherche intelligente, qui aide à préciser ce que vous recherchez en vous basant sur des termes de recherche courants et sur la pertinence du site.
Recherche filtrée: Les sites utilisant la recherche filtrée donnent aux utilisateurs des options pour ce qui ou quoi chercher dans le site. Amazon est un excellent exemple d'utilisation de la recherche filtrée. Dans la barre du haut, vous pouvez rechercher un élément sur l'ensemble du site ou le réduire à une catégorie de produits donnée. (Amazon utilise également la recherche intelligente, indiquant que vous n'êtes pas limité à un type de fonctionnalité de recherche.)
Emplacement du champ de recherche
Il y a une bonne raison pour laquelle presque chaque site que vous visitez a un champ de recherche en haut de l'écran. C'est là où les utilisateurs s'attendent.
Une analyse effectuée par Site Search Today a montré que parmi les 50 plus grands détaillants américains, tous avaient un champ de recherche situé en haut de la page. Parmi ceux-ci, 54% avaient un champ de recherche situé en haut à droite, 30% en haut au centre et 16% en haut à gauche de la page. Les résultats étaient similaires dans une étude menée auprès de détaillants britanniques avec une mise en garde importante: la recherche est généralement située en haut au centre du site, puis en haut à droite.
L'emplacement à éviter est situé n'importe où sous le parchemin ou au bas du site. (C'est-à-dire, sauf si vous incluez un champ de recherche aux deux emplacements.) Les concepteurs doivent également éviter de masquer le champ de recherche dans le menu de navigation ou dans une barre d'outils.
Identifiants de recherche
Les outils de recherche doivent être faciles à identifier et à utiliser. Si les utilisateurs ne peuvent pas trouver l'outil, cela peut causer de la frustration ou obliger un utilisateur à quitter votre site.
Les identifiants de recherche courants sont une zone avec le mot de recherche ou une loupe à côté d'une zone de saisie. C'est tout. Lors de la conception de la recherche, l’une de ces options est votre meilleur choix.
Et n'oubliez pas le bouton d'action. Tout comme les identificateurs de recherche, le bouton permettant d’exécuter la recherche proprement dite doit également être simple. Utilisez un mot tel que? Recherche? ou? trouver.? ?Aller? est une autre option acceptable.
Conseils de conception de recherche
Lorsqu'il s'agit de créer un champ de recherche (ou de nombreux autres éléments d'interface utilisateur courants), la simplicité est la clé. Un champ de recherche nécessite plusieurs éléments: un champ de saisie, un titre, un bouton d'action et des instructions.
Lors de la conception d'une zone de recherche, la conception doit être centrée sur une zone. Cela semble simple, non? N'oubliez pas que la zone doit être suffisamment grande pour taper (et voir) les termes de recherche courants relatifs à votre site et contenir un texte suffisamment grand pour être lu dans une simple police de caractères. Éloignez-vous des types de caractères super petits, de nouveauté ou de script.
Faites bien comprendre que vous avez une recherche. Étiquetez votre fonctionnalité de recherche en tant que telle, avec un titre à côté ou au-dessus de la case ou avec du texte à l'intérieur de la case pour indiquer aux utilisateurs de "rechercher le site ici".
Assurez-vous que les utilisateurs savent comment utiliser la recherche. Incluez dans la zone de recherche des instructions simples qui leur indiquent ce qu’ils peuvent trouver en utilisant cet outil. (Mais assurez-vous que l'exemple de texte disparaît lorsque l'utilisateur clique pour saisir ou activer la zone.) Enfin, incluez un bouton d'appel à l'action clair pour la soumission de recherche.
Outils de recherche et ressources
Moteur de recherche Google
Vous pouvez ajouter une recherche Google sur votre site avec un outil simple, gratuit pour les fonctionnalités de base et personnalisable, en fonction du design de votre site. Google dispose également d'un outil de recherche payant qui inclut des bonus supplémentaires, notamment plus d'options de conception, pour 100 USD par an.
Entrée de recherche avec suggestion
Ce simple champ se présente sous la forme d’un fichier Adobe Photoshop que vous pouvez personnaliser pour relancer la conception de votre champ de recherche. Le fichier vectoriel en couches est fourni avec une fonctionnalité de suggestion automatique et ne coûte que 2 $ de Creative Market.
Barre de recherche Dropdown
Ce fichier de barre de recherche simple utilise un format de recherche simple avec une liste déroulante pour les options de menu.Le fichier Photoshop est téléchargeable gratuitement avec un crédit approprié.
Boîte de recherche extensible
Si vous cherchez à coder votre champ de recherche, consultez cette option extensible disponible sur CodePen.
CSS3 Form Pack
Si vous n'êtes pas sûr du style de champ de recherche que vous recherchez, le pack de formulaires CSS3 comprend six styles de formulaire de recherche. La licence pour le pack complet est de 4 $ pour une belle collection de goodies.
Comment construire un formulaire de recherche
En construisant à partir du code, vous pouvez également avoir beaucoup de contrôle sur votre champ de recherche. SpeckyBoy Design a un excellent exemple de code simple pour un champ de recherche propre facile à suivre pour presque toutes les personnes possédant des connaissances de base en codage.
Conclusion
Bien que disposer d'un excellent champ de recherche ne soit pas la partie la plus amusante du processus de conception, il s'agit souvent d'une partie essentielle de votre site. Pensez d'abord à l'utilisateur lors de la création d'un champ de recherche, puis à la conception globale.
Les zones de recherche peuvent ajouter une grande fonctionnalité à votre site tout en ayant un aspect superbe Optez pour une boîte qui corresponde au thème général de votre site Web, sans toutefois le cacher.
Si vous voulez voir encore plus de champs de recherche, consultez la galerie Design Shack.
Source de l'image: Boîte de recherche par Jamie Syke.