{"id":11991,"date":"2019-07-25T10:30:42","date_gmt":"2019-07-25T08:30:42","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=11991"},"modified":"2025-08-20T17:19:26","modified_gmt":"2025-08-20T15:19:26","slug":"web-design-barre-de-recherche","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-barre-de-recherche\/","title":{"rendered":"Web design : 6 astuces pour cr\u00e9er la barre de recherche parfaite"},"content":{"rendered":"

Loupe, champ libre, liste pr\u00e9remplie\u2026 La barre de recherche d’un site web et d’une application mobile peut prendre des repr\u00e9sentations bien diff\u00e9rentes.<\/p>\n

Parmi les fonctionnalit\u00e9s les plus utilis\u00e9es sur un site web, cet \u00e9l\u00e9ment m\u00e9rite d’\u00eatre bien pens\u00e9 et compl\u00e8tement adapt\u00e9 \u00e0 votre site et vos contenus. Un site e-commerce donnera ainsi acc\u00e8s \u00e0 l’ensemble de son catalogue produit en peu d’espace. Un site m\u00e9dia incitera son lecteur \u00e0 consulter le contenu le plus pertinent.<\/p>\n

Cet outil est aussi le moyen pour vous, de conna\u00eetre les attentes de vos clients, les pages les plus populaires et les besoins pour lesquels du contenu m\u00e9riterait d’\u00eatre propos\u00e9.<\/p>\n

Pour cr\u00e9er la barre de recherche parfaite, adoptez une d\u00e9marche d’UX design et plongez dans la peau de vos utilisateurs. Nous vous donnons quelques conseils pour cr\u00e9er la fonctionnalit\u00e9 la plus efficace et logique.<\/p>\n

1. Placez votre barre de recherche en Header<\/h2>\n

Ne faites pas partie des 1% des sites qui ne proposent pas d’option de recherche.<\/p>\n

Pas d’originalit\u00e9 non plus pour le positionnement de la barre de recherche : pas plus bas que le Header ou le slider<\/strong> (bien avant la ligne de flottaison). Les utilisateurs ont l’habitude de taper leur recherche dans cette premi\u00e8re partie apparente, adaptez-vous \u00e0 cet usage.<\/p>\n

\"Barre<\/p>\n

Certains sites proposent \u00e9galement une barre de recherche en slider. C’est pertinent pour un module plus \u00e9labor\u00e9 pour des r\u00e9servations par exemple.<\/p>\n

Cette premi\u00e8re clef d’entr\u00e9e sur vos contenus et vos produits est un booster de conversions. N’oubliez pas que les consommateurs sont exigeants et n’h\u00e9siteront pas \u00e0 quitter votre site s’ils ne trouvent pas ce qu’ils souhaitent dans les premi\u00e8res secondes de leur connexion.<\/p>\n

2. Sugg\u00e9rez du contenu pour inspirer le lecteur<\/h2>\n

Panorama des contenus du site et liens sugg\u00e9r\u00e9s<\/h4>\n

Une barre de recherche enrichie<\/strong> permettra \u00e0 votre utilisateur de trouver de l’inspiration, de consulter d’autres contenus de votre site ou de d\u00e9couvrir des produits nouveaux.<\/p>\n

Structurez bien vos liens sugg\u00e9r\u00e9s avec des cat\u00e9gories et des intitul\u00e9s courts.<\/p>\n

L’ajout d’image est optionnel. Cela peut \u00eatre utile pour l’univers du voyage ou du pr\u00eat-\u00e0-porter par exemple, pour mettre en avant une destination phare ou une offre promotionnelle.<\/p>\n

Autoremplissage<\/h4>\n

Proposez des contenus automatiquement en fonction du champ s\u00e9mantique tap\u00e9 par l’internaute dans la barre de recherche. Cela permettra de l’aider \u00e0 trouver des contenus pertinents ou pr\u00e9ciser sa demande.<\/p>\n

Surlignez ou passez en gras les mots cl\u00e9s de sa requ\u00eate.<\/p><\/blockquote>\n

\"Autoremplissage<\/p>\n

Allez plus loin en proposant une pr\u00e9diction de recherche<\/strong> au fur et \u00e0 mesure que l’utilisateur remplit sa requ\u00eate.<\/p>\n

3. La loupe s’impose pour le symbole de la barre de recherche<\/h2>\n

Petite, grande, flat, en relief, peu importe, mais c’est bien la loupe que vous devrez utiliser en web design pour repr\u00e9senter votre barre de recherche.<\/p>\n

Cet \u00e9l\u00e9ment distinctif sert \u00e9galement \u00e0 faire un bouton “entrer” pour valider sa recherche et acc\u00e9der aux r\u00e9sultats.<\/p>\n

4. Conservez la fonctionnalit\u00e9 dans tout votre site<\/h2>\n

Il est indispensable de conserver la barre de recherche partout dans la navigation de votre site.<\/p>\n

Bien que les recherches soient souvent effectu\u00e9es au d\u00e9but du parcours client, lorsque l’internaute arrive sur votre site, pensez aussi que la barre de recherche doit le guider tout au long de sa navigation. C’est \u00e9galement un moyen de l’amener \u00e0 visiter d’autres pages de votre blog.<\/p>\n

Pour cela, int\u00e9grez votre barre de recherche :<\/p>\n