La search bar est un composant de recherche global, généralement positionné en haut d’une interface. Il permet de lancer des recherches sur un ensemble étendu de contenu. Ce composant peut apparaître dans un en-tête, en barre flottante ou en overlay, comme sur un moteur de recherche.
Localisation :
- Dans un header global de site ou d'application
- Comme barre de recherche centrale sur une page d’accueil
- En plein écran sur mobile
- Dans une page dédiée à la recherche ou dans le composant header navigation
Texte d'aide
Le texte d'aide donne des indications supplémentaires sur le champ de saisie, comme la manière dont il sera utilisé. Il ne doit occuper qu'une seule ligne pour simplifier sa compréhension.
Il doit décrire le format attendu, si celui-ci est spécifique.
Message d'erreur
Le message d'erreur vient apporter des informations supplémentaires à l'utilisateur lors de la complétion ou lors de la validation d'un formulaire.
Il doit expliciter la cause de l'erreur, et fournir une suggestion de correction si nécessaire.
Comportement général
Le comportement général d'un champ de texte comprend les aspects suivants :
Saisie de texte :
Les utilisateurs peuvent entrer du texte dans le champ en utilisant le clavier ou d'autres dispositifs d'entrée appropriés. Le texte saisi s'affiche en temps réel dans le champ de texte.
Édition de texte :
Les utilisateurs peuvent sélectionner, copier, couper et coller du texte à l'intérieur du champ. Ils peuvent également déplacer le curseur de texte pour effectuer des modifications ou naviguer à travers le contenu.
Réactivité au clavier :
Les champs de texte doivent permettre la navigation au clavier en utilisant les touches de tabulation pour passer d'un champ à l'autre et les touches de direction pour déplacer le curseur de texte à l'intérieur du champ.
Retour visuel :
Les champs de texte doivent fournir un retour visuel clair pour indiquer l'état du champ, tel que la mise en évidence lorsque le champ a le focus ou lorsqu'il y a une erreur de saisie.
Effacement du contenu :
Les utilisateurs doivent avoir la possibilité d'effacer ou de supprimer le contenu du champ de texte, que ce soit en utilisant la touche de suppression ou en cliquant sur un bouton d'effacement intégré.
Validation de saisie :
Les champs de texte peuvent inclure des mécanismes de validation pour vérifier que la saisie répond à certaines conditions, par exemple en vérifiant la longueur du texte, le format ou l'exactitude des données saisies.
Compatibilité avec les dispositifs tactiles :
Les champs de texte doivent prendre en charge les interactions tactiles pour les utilisateurs qui interagissent avec l'interface via des écrans tactiles, en permettant la saisie et la modification du texte de manière intuitive.
🟢 Exemples corrects
- ✔️ Barre avec champ, loupe, bouton de fermeture
- ✔️ Affichage adaptatif responsive
- ✔️ Activation via icône + retour clavier + fermeture
🔴 Exemples incorrects
- ❌ Barre affichée sans possibilité de navigation au clavier
- ❌ Absence de bouton de fermeture sur mobile
- ❌ Aucun feedback au focus ou champ non labellisé