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ée ». 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 : 15 août 2022