Sur la majorité des sites contenant plus de quelques dizaines de pages, la recherche est utilisée par 30 à 60 % des visiteurs comme premier moyen de trouver ce qu’ils cherchent. Pourtant, le champ de recherche reste l’un des composants les plus négligés des produits digitaux. Un input vide, un bouton « Rechercher », et la page de résultats par défaut du moteur sous-jacent : l’expérience est restée la même qu’au début des années 2000, alors que les attentes utilisateurs ont radicalement évolué.
Les utilisateurs comparent tous les champs de recherche à Google. Tout ce qui s’en éloigne est perçu comme inférieur, et les utilisateurs abandonnent rapidement. Tour des composants à intégrer, des patterns qui font la différence et des erreurs encore fréquentes dans les implémentations actuelles.
L’anatomie d’un champ de recherche moderne
Un champ de recherche performant ne se résume pas à un input et un bouton. Six composants entrent en jeu.
| Composant | Rôle | Impact si absent |
|---|---|---|
| Placeholder explicite | Indiquer ce qu’on peut chercher | Hésitation, recherches vides |
| Icône de loupe | Signaler le composant | Confusion avec d’autres inputs |
| Autocomplétion | Suggérer pendant la saisie | Saisies erronées, requêtes vides |
| Recherches récentes | Faciliter la répétition d’usage | Friction sur usages répétés |
| Suggestions populaires | Guider sur les recherches utiles | Audience perdue sur le no-results |
| Croix d’effacement | Recommencer rapidement | Frustration sur la correction |
L’absence d’un seul de ces composants dégrade visiblement les métriques : taux de recherche réussie, temps moyen avant résultat trouvé, taux de retour sur le champ.
Le placeholder : une opportunité gâchée
Le placeholder par défaut « Rechercher » est l’occasion manquée la plus fréquente. Il ne dit rien à l’utilisateur sur ce qu’il peut chercher, et n’oriente pas son comportement.
Un placeholder explicite multiplie les recherches utiles. « Rechercher un produit, une marque, une catégorie » oriente immédiatement. « Rechercher un article, un auteur, un sujet » sur un blog. « Rechercher un client, une facture, un projet » sur un SaaS. La précision du placeholder réduit les recherches vides ou mal ciblées, qui sont la première source de no-results frustrants.
L’autocomplétion : le composant critique
L’autocomplétion fait probablement plus pour la qualité de la recherche que tous les autres composants réunis. Quatre règles pour qu’elle fonctionne.
Déclencher tôt
Idéalement à partir du deuxième ou troisième caractère. Plus tôt, on suggère trop large. Plus tard, l’utilisateur a déjà fini sa saisie.
Suggérer des entités, pas des chaînes
Suggérer le produit complet avec image et prix, pas juste la chaîne textuelle. L’utilisateur va directement sur la fiche produit sans repasser par une page de résultats.
Limiter à 5-7 suggestions
Au-delà, l’utilisateur n’a plus le temps de scanner. Mieux vaut filtrer plus durement que noyer.
Catégoriser si pertinent
Sur un site multi-types (produits, articles, marques), regrouper les suggestions par catégorie aide la lecture. Algolia et Elastic ont popularisé cette pratique.
Les recherches récentes
Quand l’utilisateur ouvre le champ sans avoir tapé, afficher ses dernières recherches transforme l’expérience pour les usages répétés. C’est particulièrement utile sur les SaaS, les marketplaces et les outils internes où l’utilisateur revient souvent sur les mêmes éléments.
Les recherches récentes doivent être stockées localement (cookie ou localStorage), accessibles rapidement, effaçables individuellement et globalement. Sur les comptes utilisateurs, elles peuvent être synchronisées entre appareils.
Le traitement du no-results
L’écran zéro résultat est le moment où la recherche se rate ou se rattrape. Voir notre analyse des empty states pour le cadre général. Trois patterns spécifiques à la recherche.
- Suggestion d’orthographe corrigée : « Vouliez-vous dire… ». Réduit massivement les sorties immédiates.
- Élargissement automatique : si la recherche stricte ne donne rien, élargir aux résultats partiels en signalant le changement.
- Produits populaires de remplacement : afficher des éléments en lien avec la session, ou tout simplement les plus consultés du site.
Le no-results brut « Aucun résultat » sans alternative est l’une des erreurs UX les plus coûteuses sur les sites e-commerce. Il pousse à la sortie immédiate sans aucune chance de récupération.
Filtres et facettes après recherche
Une fois la recherche lancée, la page de résultats devient un autre chantier. Les filtres et facettes (catégories, prix, marques, attributs) doivent être visibles, manipulables sans rechargement, et conserver le contexte de la recherche initiale.
| Pattern | Avantage | Quand l’utiliser |
|---|---|---|
| Sidebar gauche desktop | Visibilité permanente | Catalogue large avec nombreux filtres |
| Bottom sheet mobile | Ergonomie tactile | Mobile prioritaire |
| Modale de filtres | Concentration sur le tri | Filtres complexes, peu utilisés ensemble |
| Tags actifs en haut | Visibilité des filtres appliqués | Toujours, en complément des autres patterns |
L’accessibilité de la recherche
Quatre points à respecter sans exception.
- Label associé au champ même si visuellement caché.
- Annonce vocale du nombre de résultats par les lecteurs d’écran.
- Navigation clavier dans l’autocomplétion (flèches haut/bas, Enter pour valider, Echap pour fermer).
- Focus visible sur le champ et chaque suggestion en navigation clavier.
L’accessibilité de la recherche est l’une des zones les plus auditées par les vérifications de conformité, et elle est souvent défaillante. Voir le guide European Accessibility Act pour les exigences applicables.
La performance : une obligation
L’autocomplétion qui répond en plus de 200 millisecondes paraît cassée. Sur des bases volumineuses, cela impose un index dédié à la recherche, distinct de la base principale. Les solutions matures (Algolia, Elasticsearch, Meilisearch) répondent en moins de 50 millisecondes même sur des millions de documents.
Un champ de recherche lent est la garantie d’un abandon rapide. Investir dans l’infrastructure de recherche est l’un des leviers d’expérience les plus rentables sur un site catalogue.
Mesurer la performance d’une recherche
Trois métriques principales.
- Taux de recherche réussie : utilisateurs qui cliquent sur un résultat parmi ceux retournés.
- Taux de no-results : recherches sans aucun résultat. Cible : moins de 5 %.
- Taux de conversion post-recherche : utilisateurs qui ont cherché et acheté ou converti.
Les utilisateurs qui passent par la recherche convertissent typiquement 2 à 4 fois plus que la moyenne du site. Améliorer la recherche est donc un levier direct de revenus, pas seulement de confort.
En résumé
La recherche est l’un des composants les plus utilisés et les moins travaillés des produits digitaux. Six composants doivent figurer dans tout champ moderne (placeholder, icône, autocomplétion, recherches récentes, suggestions populaires, croix d’effacement). L’autocomplétion bien faite est probablement le levier le plus puissant. Le no-results sans alternative est l’une des erreurs les plus coûteuses. Sur les sites où la recherche concentre une part significative du trafic, son optimisation génère un retour sur investissement supérieur à la plupart des autres chantiers de design. C’est aussi l’un des points où l’écart entre les meilleurs sites et les autres se mesure le plus directement à l’œil nu, en quelques tests utilisateurs sur le terrain.
