Le champ de recherche est une partie utilitaire de votre site Web moyen. Mais cela ne signifie pas qu’il doit \u00eatre ignor\u00e9. Tout le contraire.<\/p>\n
La recherche offre aux utilisateurs un moyen facile de trouver ce qu’ils recherchent et peut \u00eatre inestimable sur les sites avec beaucoup de contenu. Il est donc utile de prendre le temps suppl\u00e9mentaire pour vous assurer que votre zone de recherche est attrayante, remarquable et facile \u00e0 utiliser.<\/p>\n
Dans cet esprit, voici une collection d’extraits qui font passer l’humble champ de recherche au niveau sup\u00e9rieur. Ils vont des simples am\u00e9liorations CSS esth\u00e9tiques aux interfaces utilisateur infus\u00e9es JS qui aident \u00e0 cr\u00e9er une exp\u00e9rience plus immersive.<\/p>\n
L’animation de transformation est toujours un plaisir. Ici, nous avons l’ic\u00f4ne de la loupe omnipr\u00e9sente qui, lorsqu’elle est cliqu\u00e9e, se transforme en une barre de recherche compl\u00e8te. Cliquer sur le “X” ram\u00e8ne tout au point de d\u00e9part. Cela pourrait \u00eatre une bonne solution pour les \u00e9crans plus petits, car vous pouvez simplement enregistrer le champ lorsqu’il n’est pas utilis\u00e9.<\/p>\n
Cet exemple offre des fonctionnalit\u00e9s similaires \u00e0 la pr\u00e9c\u00e9dente, mais avec une diff\u00e9rence importante. Plut\u00f4t que d’avoir \u00e0 cliquer pour afficher le champ de recherche, un utilisateur a juste besoin de survoler l’ic\u00f4ne. Cela peut \u00eatre une chose relativement petite, mais cela pourrait fournir un coup de pouce en termes de convivialit\u00e9. Encore une fois, une option potentiellement solide pour les espaces restreints.<\/p>\n
Sur les appareils mobiles, les utilisateurs peuvent effectuer de nombreux d\u00e9placements. Mais s’ils ne trouvent pas ce qu’ils recherchent, cela signifie souvent qu’ils devront retourner \u00e0 l’en-t\u00eate du site pour effectuer une recherche. Ici, nous avons une barre de recherche \u00abcollante\u00bb qui sera attach\u00e9e en haut de l’\u00e9cran lorsque vous faites d\u00e9filer la page. Cette fonctionnalit\u00e9 pratique peut faciliter la vie des utilisateurs.<\/p>\n
La conception mat\u00e9rielle de Google est beaucoup utilis\u00e9e ces jours-ci. Par cons\u00e9quent, il est naturel que le langage de conception s’applique \u00e9galement \u00e0 la recherche. Il est \u00e9galement agr\u00e9able qu’une fois cliqu\u00e9, ce champ de recherche occupe tout l’\u00e9cran. Cela permet aux utilisateurs de se concentrer uniquement sur leur recherche, et avec un peu de travail, les concepteurs pourraient ajouter d’autres informations connexes \u00e0 l’\u00e9cran.<\/p>\n
Il peut arriver que les utilisateurs souhaitent rechercher uniquement des zones sp\u00e9cifiques de votre site. Bien qu’une recherche personnalis\u00e9e ne soit pas exactement un nouveau concept, elle n’a pas toujours \u00e9t\u00e9 un processus visuellement attrayant. C’est ce qui rend cette d\u00e9mo de champ de recherche personnalis\u00e9e si \u00e9l\u00e9gante. Il poss\u00e8de une s\u00e9rie d’ic\u00f4nes, chacune repr\u00e9sentant une zone diff\u00e9rente o\u00f9 une recherche peut \u00eatre effectu\u00e9e (infobulles plus utiles). L’utilisateur clique simplement sur la zone qu’il souhaite rechercher, c’est facile!<\/p>\n
Fournir un contexte visuel lors d’une recherche permet de garantir que les utilisateurs sont sur la bonne voie. Cet extrait utilise AJAX pour modifier la couleur d’arri\u00e8re-plan et ajouter des informations textuelles lors de la recherche de l’utilisateur.<\/p>\n
Comment cr\u00e9ez-vous une zone de recherche qui se d\u00e9marque sans d\u00e9passer comme un pouce endolori? Utiliser une certaine transparence est une fa\u00e7on de le faire. Ici, nous avons un champ de recherche translucide en haut d’une image plein \u00e9cran. Cependant, la bordure blanche est forte, ce qui cr\u00e9e un bel effet visuel sans d\u00e9passer la page.<\/p>\n
Pour les sites qui permettent aux utilisateurs de rechercher plusieurs jeux de donn\u00e9es, cet exemple peut \u00eatre tr\u00e8s utile. Profitez de jQuery pour permettre \u00e0 l’utilisateur de basculer entre les diff\u00e9rents champs de recherche, mettant ainsi toutes les fonctionnalit\u00e9s de recherche au m\u00eame endroit.<\/p>\n
Les champs de recherche peuvent jouer un r\u00f4le essentiel pour garder les utilisateurs sur votre site Web. Et les exemples ci-dessus prouvent que vous pouvez apporter des am\u00e9liorations utiles sans trop d’effort. Donc, si vous avez n\u00e9glig\u00e9 de porter une attention particuli\u00e8re \u00e0 l’apparence de la fonction de recherche de votre site, cela vous donnera un excellent point de d\u00e9part.<\/p>\n