Le champ de recherche est une partie tr\u00e8s utilitaire de votre site Web commun. Mais cela ne veut pas dire qu’il faut l’ignorer. L’oppos\u00e9.<\/p>\n
La recherche offre aux utilisateurs un moyen facile de trouver ce qu’ils recherchent et peut s’av\u00e9rer inestimable sur les sites riches en contenu. Cela vaut donc la peine de prendre plus de temps pour vous assurer que votre domaine de recherche est attrayant, remarquable et facile \u00e0 utiliser.<\/p>\n
Dans cet esprit, voici une collection d’extraits qui font passer l’humble domaine de la recherche au niveau sup\u00e9rieur. Ils vont des simples am\u00e9liorations esth\u00e9tiques CSS aux interfaces utilisateur 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 loupe omnipr\u00e9sente qui, lorsqu’elle est cliqu\u00e9e, se transforme en une barre de recherche compl\u00e8te. Cliquer sur le \u00ab X \u00bb ram\u00e8ne tout au point de d\u00e9part. Cela peut \u00eatre une bonne solution pour les petits \u00e9crans car vous pouvez simplement enregistrer le champ lorsqu’il n’est pas utilis\u00e9.<\/p>\n
Cet exemple offre des fonctionnalit\u00e9s similaires au pr\u00e9c\u00e9dent, mais avec une diff\u00e9rence importante. Au lieu de cliquer pour r\u00e9v\u00e9ler le champ de recherche, l’utilisateur doit survoler l’ic\u00f4ne. C’est peut-\u00eatre une chose relativement petite, mais cela peut donner 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 voyager beaucoup. Mais s’ils ne trouvent pas ce qu’ils recherchent, cela signifie g\u00e9n\u00e9ralement qu’ils devront revenir \u00e0 l’en-t\u00eate du site Web pour effectuer une recherche. Ici, nous avons une barre de recherche “collante” qui sera attach\u00e9e en haut de l’\u00e9cran lorsque vous faites d\u00e9filer la page. Cette fonctionnalit\u00e9 utile peut rendre la vie beaucoup plus facile pour les 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. C’est aussi bien qu’une fois cliqu\u00e9, ce champ de recherche remplisse tout l’\u00e9cran. Cela permet aux utilisateurs de se concentrer uniquement sur leurs recherches et, avec un peu de travail, les concepteurs peuvent ajouter d’autres informations li\u00e9es \u00e0 l’\u00e9cran.<\/p>\n
Il peut arriver que les utilisateurs souhaitent uniquement rechercher des zones sp\u00e9cifiques de votre site. Bien qu’un sondage personnalis\u00e9 ne soit pas exactement un nouveau concept, ce n’\u00e9tait pas toujours un processus visuellement attrayant. C’est ce qui rend cette d\u00e9mo de champ de recherche personnalis\u00e9 si \u00e9l\u00e9gante. Il comporte une s\u00e9rie d’ic\u00f4nes, chacune repr\u00e9sentant une zone diff\u00e9rente o\u00f9 une recherche peut \u00eatre effectu\u00e9e (info-bulles les 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 s’assurer 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 au fur et \u00e0 mesure de la recherche de l’utilisateur.<\/p>\n
Comment cr\u00e9er un domaine de recherche qui se d\u00e9marque sans sortir comme un pouce endolori ? Utiliser un peu de 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 et cela cr\u00e9e un bel effet visuel sans d\u00e9passer la page.<\/p>\n
Pour les sites qui permettent aux utilisateurs de rechercher plus d’un ensemble de donn\u00e9es, cet exemple peut \u00eatre tr\u00e8s utile. Tirez parti de jQuery pour permettre \u00e0 l’utilisateur de basculer entre 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. Et les exemples ci-dessus sont la preuve que vous pouvez apporter des am\u00e9liorations utiles sans trop d’efforts suppl\u00e9mentaires. Donc, si vous avez oubli\u00e9 de pr\u00eater une attention particuli\u00e8re \u00e0 l’apparence de la fonction de recherche de votre site, c’est un excellent point de d\u00e9part.<\/p>\n