Vitrine des superbes designs d'interface utilisateur du champ de recherche

C'est assez courant sur Internet où, si nous n'obtenons pas ce que nous cherchons sur un site Web, nous avons recours à la recherche. Le champ de recherche a toujours été une partie essentielle d'un site Web. Si vous exploitez un site Web à forte intensité de contenu, c'est encore plus inévitable. Ils sont généralement placés dans les zones suivantes: en-tête, menu de navigation supérieur ou barre latérale (pli supérieur). Parfois, nous pouvons également ajouter un autre en bas de page pour faciliter la recherche aux utilisateurs..

Nous avons parcouru un long chemin depuis le Web 1.0; la recherche sur le Web n'est plus limitée à entrez le mot clé et cliquez sur Rechercher. Les développeurs s’efforcent de rendre la recherche plus agréable pour leurs visiteurs en réorganisant et en ajoutant davantage de fonctions, indique le filtrage de la recherche pour obtenir des résultats plus ciblés, en fournissant des mots clés ou des historiques de recherche au fur et à mesure de la frappe..

Dans le post d'aujourd'hui, nous présentons de superbes champs de recherche avec des fonctionnalités prometteuses que nous avons appris à connaître. Que vous cherchiez à réorganiser votre site Web ou simplement à rechercher l'inspiration pour une meilleure boîte de recherche, cet article est pour vous. Liste complète après le saut!

PlaylistNow

En commençant par le préfixe "Je suis", ce module de recherche tente de faire correspondre intelligemment et de répertorier les résultats correspondant à votre requête au fur et à mesure de la frappe..

Recherche par défilement

Suggérée par le designer Nico Nuzzaci, cette zone de recherche créative vous permet d'effectuer une recherche en tapant ou en faisant défiler le panneau alphabétique..

Liste de texte

Ce module de recherche combine plusieurs fonctions: il enveloppe vos requêtes de recherche au format balises et vous permet de supprimer une balise de recherche spécifique. Il vient également avec l'auto-complétion. Vous semble familier? C'est similaire au module de marquage Facebook!

Rappelez-vous le lait

Semblable à la recherche YouTube, le champ de recherche vous indique instantanément si quelque chose correspond à votre résultat. Encore un autre exemple intelligent de fonctionnalité de suggestion automatique.

Emplois authentiques

Je pense que Authentic Jobs avait déjà lancé sa recherche avec des résultats instantanés avant Google.

Kontain

La zone de recherche de Kontain permet aux utilisateurs d'effectuer une recherche générale ou de filtrer les résultats de la recherche en "mises à jour" ou "utilisateur"..

New York Magazine

Semblable à Kontain, la recherche de NY Magazine permet un filtrage plus profond.

Thème Forêt

Encore un autre exemple de filtrage dans le module de recherche pour aider les visiteurs à obtenir ce qu'ils veulent dans un temps minimal.

Rechercher, trier et filtrer

Le champ de recherche de Brian ressemble à un module de recherche avancée très bien fait. vous personnalisez l'apparence des résultats avant d'appuyer sur le bouton de recherche.

Tumblr

Module de recherche subtile et petit sur la barre latérale - soignée!

Pages de menu

Si vous recherchez un module de recherche complet et que l'espace est une contrainte, cette approche peut s'avérer utile..

Quotezuki

Module de recherche juste après le logo, c'est vraiment difficile à rater.

C Spire Wireless

Une grosse boîte de recherche qui n'apparaît qu'en survolant l'onglet de recherche; un autre bon moyen d'utiliser l'espace.

Spokeo

Recherche sélective avec filtrage effectué à merveille.

VoucherCodes

La meilleure idée est probablement de regarder la nature de son entreprise, claquer le pli en haut et en plein centre de la boîte de recherche.

iStockPhoto

Semblable à d'autres sites, iStockPhoto offre une quantité énorme de ressources à ses lecteurs, le filtrage de la recherche est donc essentiel..

TasteBook

Boîte de recherche simple mais impressionnante.

Grooveshark

Grooveshark vous permet d'écouter et de partager de la musique en ligne. la première page ne contient rien d'autre qu'un simple champ de recherche permettant de rechercher la musique de votre choix. C'est totalement logique.

Les joueurs avec des emplois

Bel exemple de la manière dont Google Custom Search est personnalisé.

David Torondel

Beau champ de recherche sombre qui se marie bien avec la conception du site.

Plus

• Création d'un champ de recherche CSS3 basculant (Hongkiat)
• Concevoir le champ de recherche sacré: exemples et meilleures pratiques (Magazine Smashing)
• Beau tutoriel sur les formulaires de recherche CSS3 (Mur de concepteur Web)