Barre de recherche

La composante Barre de recherche permet à l’utilisateur de faire des recherches dans un site Internet ou une application à partir de mots clés. 

Quand l'utiliser

On place la barre de recherche lorsqu’on veut mettre de l’avant l’option de recherche. Par exemple sur une 
page d’accueil, ou pour donner accès plus facilement à une base de données.

Il existe deux types de barre de recherche : simple et avancée.

Barre de recherche simple

La barre de recherche simple permet à l’utilisateur de faire des recherches à partir de mots simples ou de 
courtes phrases. Elle est constituée d’un champ texte ainsi que de l’icône de la loupe.

Exemple


Barre de recherche avancée

La barre de recherche avancée est similaire à  la barre de recherche simple, mais se distingue par l’ajout de l’option « Recherche avancée » sous le champ texte, ce qui permet l’affichage des filtres à la recherche. On utilise la barre de recherche avancée lorsque des options de raffinement de recherche sont disponibles à l’utilisateur. (Ex: dates, thèmes, régions)

Exemple


Comment l’utiliser

Une barre de recherche doit être facilement accessible pour permettre à l’utilisateur d’effectuer des requêtes rapidement.

L’option de recherche avancée est présentée sous la forme d’un lien situé sous le champ texte à gauche.

La barre de recherche doit être permissive afin d’accepter les erreurs et les fautes d’orthographe.

L’icône de la loupe est située à droite du champ texte. L’icône doit être présentée sous la forme d’un bouton cliquable qui permet de lancer la recherche.

Le texte de l’espace réservé (placeholder) permet d’indiquer à l’utilisateur à quel endroit il effectue sa recherche. Ce texte indicatif doit être situé dans la barre de recherche avec la mention « Rechercher sur [nom du site ou de la plateforme] ». La couleur du texte indicatif doit être distincte du texte de saisie du champ d’un gris clair pour ne pas confondre avec le texte d’une recherche.

Informations techniques

Dimensions

Le champ texte et le bouton ont une hauteur totale de 40px. La largeur est variable selon la grille employée. L’espace réservé est à 8 px de la limite gauche et droite du champ de recherche. Lorsque le texte saisi dans le champ déborde, le texte glisse vers la gauche en masquant le début du texte.

En format mobile, la barre de recherche garde les mêmes caractéristiques. La largeur est variable selon la grille employée et elle prend toujours la pleine largeur de celle-ci.

Le bouton de recherche est un carré de 40px par 40px avec l’icône de la loupe centrée dans celui-ci. La hauteur et la largeur de l’icône sont de 24px.

Le bouton garde les mêmes caractéristiques et les mêmes dimensions en format mobile.

Espacements

Espace réservé

L’espace réservé est à 8 px de la limite gauche et droite du champ de recherche.

Barre de recherche avancée

En plus des informations données pour la barre de recherche simple, la barre de recherche avancée comprend l’ajout du texte « Recherche avancé ». Il doit être situé sous le champ texte avec un espacement de 12px et aligné à la gauche de celui-ci.

La barre de recherche avancée en format mobile garde les mêmes caractéristiques. 

Exemple


CSS du champ
border: 1px solid #808a9d
height: 40px
width: 765px

CSS du texte de l’espace réservée
font-family: Open Sans
font weight: regular
font-size: 14px
color: #647287 (gris clair)

CSS bouton
height: 40px
width: 40px
color: #095797

CSS lien
font-family: Open Sans
font weight: regular
font-size: 14px
color: #095797

Dernière mise à jour : 6 août 2021