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 (exemples : 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 40 px. La largeur est variable selon la grille employée. 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 40 px par 40 px avec l’icône de la loupe centrée dans celui-ci. La hauteur et la largeur de l’icône sont de 24 px.
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ée ». Il doit être situé sous le champ texte avec un espacement de 12 px 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;
CSS du bouton
height: 40px;
width: 40px;
color: #095797;
CSS du lien de recherche avancée
font-family: Open Sans;
font weight: regular;
font-size: 14px;
color: #095797;
Dernière mise à jour : 30 août 2023