Le champ de recherche est une partie utilitaire de votre site Web moyen. Mais cela ne signifie pas qu’il doit être ignoré. Tout le contraire.
La recherche offre aux utilisateurs un moyen facile de trouver ce qu’ils recherchent et peut être inestimable sur les sites avec beaucoup de contenu. Il est donc utile de prendre le temps supplémentaire pour vous assurer que votre zone de recherche est attrayante, remarquable et facile à utiliser.
Dans cet esprit, voici une collection d’extraits qui font passer l’humble champ de recherche au niveau supérieur. Ils vont des simples améliorations CSS esthétiques aux interfaces utilisateur infusées 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 la 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 pourrait être une bonne solution pour les écrans plus petits, car vous pouvez simplement enregistrer le champ lorsqu’il n’est pas utilisé.
Passez la souris dessus et recherchez
Cet exemple offre des fonctionnalités similaires à la précédente, mais avec une différence importante. Plutôt que d’avoir à cliquer pour afficher le champ de recherche, un utilisateur a juste besoin de survoler l’icône. Cela peut être une chose relativement petite, mais cela pourrait fournir un coup de pouce en termes de convivialité. Encore une fois, une option potentiellement solide pour les espaces restreints.
Les défileurs doivent également rechercher
Sur les appareils mobiles, les utilisateurs peuvent effectuer de nombreux déplacements. Mais s’ils ne trouvent pas ce qu’ils recherchent, cela signifie souvent qu’ils devront retourner à l’en-tête du site 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é pratique peut faciliter la vie des 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. Il est également agréable qu’une fois cliqué, ce champ de recherche occupe tout l’écran. 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 à l’écran.
Recherche personnalisée simple
Il peut arriver que les utilisateurs souhaitent rechercher uniquement des zones spécifiques de votre site. Bien qu’une recherche personnalisée ne soit pas exactement un nouveau concept, elle n’a pas toujours été un processus visuellement attrayant. C’est ce qui rend cette démo de champ de recherche personnalisée si élégante. Il possède une série d’icônes, chacune représentant une zone différente où une recherche peut être effectuée (infobulles plus utiles). L’utilisateur clique simplement sur la zone qu’il souhaite rechercher, c’est facile!
Animation de contexte
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ère-plan et ajouter des informations textuelles lors de la recherche de l’utilisateur.
Transparence
Comment créez-vous une zone de recherche qui se démarque sans dépasser comme un pouce endolori? Utiliser une certaine 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, ce qui crée un bel effet visuel sans dépasser la page.
Recherche multiple
Pour les sites qui permettent aux utilisateurs de rechercher plusieurs jeux de données, cet exemple peut être très utile. Profitez de jQuery pour permettre à l’utilisateur de basculer entre les différents champs de recherche, mettant ainsi toutes les fonctionnalités de recherche au même endroit.
La fin s’est avérée
Les champs de recherche peuvent jouer un rôle essentiel pour garder les utilisateurs sur votre site Web. Et les exemples ci-dessus prouvent que vous pouvez apporter des améliorations utiles sans trop d’effort. Donc, si vous avez négligé de porter une attention particulière à l’apparence de la fonction de recherche de votre site, cela vous donnera un excellent point de départ.
