Le champ de recherche est une partie très utilitaire de votre site Web commun. Mais cela ne veut pas dire qu’il faut l’ignorer. L’opposé.
La recherche offre aux utilisateurs un moyen facile de trouver ce qu’ils recherchent et peut s’avérer 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 à utiliser.
Dans cet esprit, voici une collection d’extraits qui font passer l’humble domaine de la recherche au niveau supérieur. Ils vont des simples améliorations esthétiques CSS aux interfaces utilisateur JS qui aident à créer une expérience plus immersive.
Icône de morphing
L’animation de transformation est toujours un plaisir. Ici, nous avons l’icône de loupe omniprésente qui, lorsqu’elle est cliquée, se transforme en une barre de recherche complète. Cliquer sur le « X » ramène tout au point de départ. Cela peut être une bonne solution pour les petits écrans car vous pouvez simplement enregistrer le champ lorsqu’il n’est pas utilisé.
Survolez et recherchez
Cet exemple offre des fonctionnalités similaires au précédent, mais avec une différence importante. Au lieu de cliquer pour révéler le champ de recherche, l’utilisateur doit survoler l’icône. C’est peut-être une chose relativement petite, mais cela peut donner un coup de pouce en termes de convivialité. Encore une fois, une option potentiellement solide pour les espaces restreints.
Les scrollers doivent également rechercher
Sur les appareils mobiles, les utilisateurs peuvent voyager beaucoup. Mais s’ils ne trouvent pas ce qu’ils recherchent, cela signifie généralement qu’ils devront revenir à l’en-tête du site Web pour effectuer une recherche. Ici, nous avons une barre de recherche “collante” qui sera attachée en haut de l’écran lorsque vous faites défiler la page. Cette fonctionnalité utile peut rendre la vie beaucoup plus facile pour les utilisateurs.
Un écran plein de matière
La conception matérielle de Google est beaucoup utilisée ces jours-ci. Par conséquent, il est naturel que le langage de conception s’applique également à la recherche. C’est aussi bien qu’une fois cliqué, ce champ de recherche remplisse tout l’écran. 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ées à l’écran.
Recherche personnalisée simple
Il peut arriver que les utilisateurs souhaitent uniquement rechercher des zones spécifiques de votre site. Bien qu’un sondage personnalisé ne soit pas exactement un nouveau concept, ce n’était pas toujours un processus visuellement attrayant. C’est ce qui rend cette démo de champ de recherche personnalisé si élégante. Il comporte une série d’icônes, chacune représentant une zone différente où une recherche peut être effectuée (info-bulles les plus utiles). L’utilisateur clique simplement sur la zone qu’il souhaite rechercher, c’est facile !
Animation contextuelle
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ère-plan et ajouter des informations textuelles au fur et à mesure de la recherche de l’utilisateur.
Transparence
Comment créer un domaine de recherche qui se démarque sans sortir comme un pouce endolori ? Utiliser un peu de transparence est une façon de le faire. Ici, nous avons un champ de recherche translucide en haut d’une image plein écran. Cependant, la bordure blanche est forte et cela crée un bel effet visuel sans dépasser la page.
recherche multiple
Pour les sites qui permettent aux utilisateurs de rechercher plus d’un ensemble de données, cet exemple peut être très utile. Tirez parti de jQuery pour permettre à l’utilisateur de basculer entre différents champs de recherche, mettant ainsi toutes les fonctionnalités de recherche au même endroit.
la fin est finie
Les champs de recherche peuvent jouer un rôle essentiel pour garder les utilisateurs sur votre site. Et les exemples ci-dessus sont la preuve que vous pouvez apporter des améliorations utiles sans trop d’efforts supplémentaires. Donc, si vous avez oublié de prêter une attention particulière à l’apparence de la fonction de recherche de votre site, c’est un excellent point de départ.
