Qui cherche, trouve ?

Les best-practices pour un champ de recherche optimal

Tous les concepteurs de sites et d’applications comprennent aujourd’hui l'importance de la recherche dans l'expérience utilisateur. Pas forcément centrale quand le contenu est limité (200 pages maxi), elle le devient de plus en plus à mesure que le site ou l’application gagne en taille et en complexité. Il en va de même pour son design et sa fonctionnalité. Alors comment concevoir un champ de recherche parfait ? Quel emplacement ? Quelle taille ? Bouton ou pas ? On vous fait le topo et on ouvre même un peu les perspectives.

Le champ de recherche

Il est probablement ce que votre site a de plus puissant à offrir. C’est d’ailleurs l’outil le plus utilisé des sites e-commerce, portails d'informations et agences de voyages en ligne. Leurs utilisateurs s’en servent pour trouver un produit très précis ou quand ils ne trouvent pas ce qu’ils cherchent via le menu de navigation.

Deux éléments seulement le constituent : un champ de saisie et un bouton. Mais ils jouent un rôle si central dans l'interface utilisateur, qu’ils justifient à eux seuls une série de guidelines.

Surtout être user friendly

Il est important de placer le champ de recherche là où les utilisateurs s'attendent à le trouver. L’emplacement idéal serait le coin supérieur droit ou gauche. Dans tous les cas, il doit être facile à repérer et accessible sur chaque page pour permettre aux utilisateurs de s’en servir n’importe quand (particulièrement vrai pour les pages sans fin telles que 404).

Aussi bête que cela puisse paraître, le champ de recherche doit ressembler à un champ de recherche et être simple à utiliser. Les designs conceptuels ou les options de recherche avancée affichées par défaut peuvent en perturber plus d’un !

UTILISER LA SACROSAINTE LOUPE
Certaines icônes sont universelles et la loupe en est une ! Elle est au champ de recherche ce que le burger est au menu. Les utilisateurs la reconnaissent instantanément, tout particulièrement quand elle est ultra schématique. Alors bye bye les artifices graphiques !
Mais si la recherche est une fonction clef de votre application ou de votre site, ne vous contentez pas de ne mettre que l’icône. Affichez le champ de saisie avec son texte indicatif : les utilisateurs apprécieront de gagner en immédiateté.

METTRE UN BOUTON, ET PAS UN PETIT
Un bouton permet aux utilisateurs de comprendre qu'il faut déclencher la recherche après l’avoir saisie, en appuyant sur Entrée ou en cliquant sur ledit bouton. Celui-ci ne doit pas être trop petit pour que l’on puisse le pointer facilement avec sa souris. Sa « grande » taille peut par ailleurs faciliter le repérage du champ de recherche sur la page.

EVITER LES CHAMPS DE SAISIE RIKIKI

Certes, ils n’empêchent pas les utilisateurs de taper de longues requêtes, mais seule une partie de leur saisie est visible. Ils ne peuvent pas la relire et la modifier facilement et se sentent donc obligés de saisir une recherche courte et imprécise. Alors que si le nombre de caractères visibles n’est pas trop limité, leur requête est plus facile à lire et à interpréter. Un minimum de 27 caractères permettrait d’accepter 90% des requêtes.

Possible alternative en cas de manque de place : un champ de recherche qui étend sa zone de saisie de texte au clic.

Tenter l'auto-suggestion/completion

De nombreux utilisateurs manquent d’inspiration lors de la formulation de leur recherche et abandonnent souvent après quelques tentatives infructueuses. En essayant de prédire leur requête en fonction des caractères saisis, l’autosuggestion facilite le processus. Elle se sert pour cela de l’historique des recherches comme base de données, les utilisateurs faisant souvent les mêmes requêtes.

Les suggestions doivent être proposées le plus vite possible, dès le 3^ème caractère par exemple. Les utilisateurs apprécient quand l’information saisie est différenciée de la suggestion, l’une ou l’autre en gras par exemple. Pas la peine en revanche de multiplier le nombre de mots, sauf si vous cherchez à compliquer la lecture.

Avant même la saisie, un ou plusieurs exemples de requête peuvent être suggérés dans le champ, histoire que l’utilisateur comprenne bien l’étendue du moteur de recherche. Mais, encore une fois, ce n’est pas une raison pour lister tout le catalogue produits !

L’autosuggestion, et plus largement le champ de recherche, ne peuvent pas tout régler. Sur des sites de contenus qui ne sont pas marchands, certains utilisateurs ne savent pas toujours ce qu’ils peuvent chercher, même s’ils aimeraient accéder à ce qui pourraient les intéresser. La solution...

Le tri sélectif 😉

Le fin mot de l'histoire

Vous l’aurez compris, la recherche est une activité fondamentale et un élément essentiel d'une application ou d'un site riche de contenus. A tel point que la taille d’un champ de saisie ou le look d’une icône peuvent considérablement influencer l'expérience utilisateur. Mais un champ de recherche n’est pas forcément la réponse à toutes les problématiques. Chaque site ou application a ses propres besoins qu’il faut analyser pour répondre au mieux aux besoins de ses utilisateurs.

lire les autres articles