Champs de recherche : Tendances et statistiques

Il y a quelques temps, un article avait été posté sur le blog : 30 Barres de recherche cleans et minimalistes . A travers ce nouvel article sur le même sujet, nous allons tenter de comprendre comment concevoir un champs de recherche efficace, quelles sont les tendances et pour finir nous mettrons un peu les mains dans le code afin de rendre nos formulaires accessibles à tous ! Si vous êtes prêts, allons-y !

Les patterns les plus fréquents

Lorsque l'on doit aborder une problématique, il est souvent intéressant de se demander comment procèdent les autres dans le même cas de figure. Reprendre des codes connus de l'utilisateur est en effet un bon moyen de lui simplifier la tâche. La barre de recherche et son utilisation a grandement évolué, transformant cet outil en véritable moyen de navigation interne, c'est pourquoi nous allons, au travers de cette brève étude découvrir quels sont les tendances les plus fortes, les standarts, mais aussi comment les utiliser et de quelles façons ceux ci peuvent créer ou résoudre des problèmes.

Cette étude a été réalisée sur un panel de 100 design comprenant des sites au design relativement récent (moins de 2 ans), de tous formats (blogs, e-commerce, portail, services en ligne, etc) afin d'être le plus représentatif possible.

Placement

Le placement de la barre de recherche est un élément clé de son efficacité. Ayant évolué, il est devenu un moyen de navigation aussi important que la navigation principale et peut même dans certains cas la remplacer totalement (moteurs de recherche, contenus créés massivement par les utilisateurs, encyclopédies en ligne, etc).

Cette évolution de l'outil explique logiquement le fait que dans 96% des cas, le champs de recherche soit situé au niveau ou avant la navigation principale. C'est en effet évident : le champs de recherche doit être visible rapidement et facilement en cas de nécessité. Plus étonnant par contre, une forte tendance se dégage pour la partie droite de la page : 85%. On peut donc presque considérer que cet emplacement est devenu un standard : sauf si vous avez une raison de la placer aillueurs, votre barre de recherche est supposée être à droite dans la partie haute de votre design.

Les 4% classés dans "Autres" représentent des cas de figures relativement marginaux : le champs de recherché placé sous la limite du fold, ou le champs de recherche en tant que contenu principal de la page.

Forme du bouton

La mise en place du champs de recherche et de son bouton est elle aussi une information importante : l'apparence joue-t-elle un rôle primordial ou pas ? Peut-on supposer que l'utilisateur a une représentation claire de ce qu'il "attend" visuellement comme champs de recherche ?

Selon les chiffres, non. Les résultats sont assez proches les uns des autres pour qu'on ne distingue vraiment de tendance dominante. Le bouton séparé du champs, avec 45%  est le plus fréquent. C'est le format classique d'un couple formulaire/bouton dans les OS et dans les styles par défauts des navigateurs internet, on peu donc considérer que c'est une valeur sûre. Il prend néanmoins plus de place que la version compacte qui atteint 31% d'utilisation : moins volumineuse, cette mise en place est pratique si vous voulez restreindre la place prise par votre champs de recherche ou que celui-ci est limité.

Fait assez étonnant, on peut constater que 24% des designs du panel optent pour une version sans bouton. Cette option est intéressante, encore une fois pour un gain de place, mais aussi si l'on souhaite limiter le nombre d'éléments visuels, néanmoins ce choix peut pénaliser les utilisateurs débutants ou ne naviguant pas sur ordinateur (pas de touche "Entrée" sur tous les mobiles par exemple). Il convient donc de s'assurer que le public du site utilisera un ordinateur pour naviguer, et qu'ils ont un niveau d'informatique qui leur permet de savoir comment valider une recherche sans bouton.

Représentation du bouton

Dans la façon de représenter le bouton encore une fois pas de tendance qui se dégage réellement, la version texte compte 40% d'utilisation contre 36% pour la version avec une icone. Les 24% restants étant les 24 designs n'utilisant pas de bouton dans la partie précédente.

Comme nous l'avons noté plus haut, l'espace disponible peut nous forcer à utiliser une version moins volumineuse, l'icone ayant de ce côté là l'avantage sur le texte, même si celui-ci parait plus clair et compréhensible, notament pour les publics débutants.

Un peu d'ergonomie

Le champs de recherche n'échappe pas à l'ergonomie, qui nous dicte quelques règles pour des champs efficaces et pratiques. Nous allons tenter de les décrypter et de voir quand elles sont fondamentales ou optionnelles.

Assez d'espace pour 25 caractères

Afin de permettre d'afficher en entier une recherche de deux mots, l'espace visible recommandé est de 25 caractères. Biensûr la capacité du champs doit être illimitée même si le contenu de la recherche défile dans le champs.

Pour une recherche de tag il est possible de faire un champs plus court, environ 18 caratères, mais si la nature de la recherche (en loccurence un tag) n'est pas évidente il est possible que l'utilisateur tape une recherche classique et puisse manquer de place.

Dans le cas d'un moteur de recherche ou d'un site de vente en ligne, il est bon de favoriser encore plus d'espace, l'utilisateur pouvant chercher un produit ou une page particulière, ou bien une référence qu'il souhaiterai vérifier avant de rechercher. 40 caractères semble idéal bien que l'on puisse se permettre de monter jusqu'à 75 sans problème !

La taille du champs a une réelle importance, elle va influencer ce que l'utilisateur va saisir comme recherche. Prenons par exemple un champs de formulaire qui vous demande votre année de naissance. Si celui-ci propose de la place pour 4 caractère, vous la remplirez naturellement en entier. Si elle ne propose que 2 caractère, il est fort probable que vous ne saisissiez que les 2 derniers sans vraiment vous poser de question. Il en va de même pour votre recherche ou l'utilisateur pourra choisir de rechercher toute une phrase ou question, ou seulement un mot-clé.

Un champs de recherche vierge

Il est préférable que le champs de recherche soit, par défaut vierge et donc d'évitez les textes comme "Saisissez votre recherche". Cette pratique est pourtant très courante et peut s'avérer utile pour indiquer au visiteur le type ou le format de requête que vous attendez. Il est pour celà possible de remplir le champs de valeur d'exemple "maison, voiture..." pour une recherche de mots-clés ou bien "comment allumer la lumière ?" pour une recherche de phrase.

Si vous choisissez cette option, veillez à ce que le contenu disparaisse automatiquement quand l'utilisateur clique sur le champs de recherche, sans quoi il serait forcé de vider le champs avant de le remplir.

Lorsque l'on se trouve sur la page de résultat de la recherche, celle-ci peut aussi contenir la précédente recherche, afin de permettre à l'utilisateur de la modifier ou de l'améliorer en fonction des résultats.

Un champs  de recherche qui ressemble à un champs de recherche !

Afin de permettre à l'utilisateur de repérer et de s'asurer qu'un élément est bien un champs de recherche, faire en sorte que l'élément, de part son aspect corresponde à ce qu'il est sensé être (notion d'affordance).

L'ergonomie préconise un fond blanc ou clair pour le champs de recherche et le bouton, tout deux avec un contour et éventuellement des bords arrondis. La fantaisie n'est pas particulièrement de mise. Si vous décidez d'outre-passer ces recommandations, veuillez toujours à ce que votre champs de recherche ai bien l'air d'être un champs de recherche !

Du texte pour le bouton

Comme nous l'avions évoqué plus haut, le texte reste le moyen le plus clair et efficace de bien faire comprendre de quoi il retourne. Des actions comme "Rechercher" ou "Chercher" sont à favoriser, au détriment de mots plus abstraits comme "Go" ou "Ok" qui ne sont pas vraiment propres à une recherche.

Bien que les icones soient considérées comme à éviter celle-ci restent un moyen assez pratique d'obtenir un bouton compréhensible. La flêche est celà dit à oublier, trop vague, préférez la loupe qui est beaucoup plus reconnue.

La recherche avancée

Le champs de recherche avancée est très peu utilisé. Le terme "avancé" et la puissance des outils de recherche classique fait que peu d'utilisateurs s'y essayent. S'en passer c'est économiser en développement et en place !

Aller plus loin

Pré-remplissage

Le pré-remplissage d'un champs de recherche peut être assez pratique. Il peut servir à signifier à l'utilisateur que l'élément est un champs de recherche, ou lui indiquer la meilleure façon de taper sa recherche en lui montrant un exemple. Bien que l'ergonomie recommande de ne pas avoir recours à cette pratique, il est possible que vous ayez besoin ou envie d'e l'utiliser. Voyons donc ensemble comment procéder à ce pré-remplissage le mieux posible grâce à Javascript et la librairie JQuery.

Voici donc notre champs de recherche :

<input type="text" id="search" value="Camion"/>

Nous avons donc ajouté à notre champs le message "Camion" qui suggère à l'utilisateur de taper des mots-clés. La première chose à faire est maintenant d'effacer ce contenu quand l'utilisateur clique sur le champs.

$("#search").focus(function(){
   $(this).val("");
});

Ce code fonctionne, seulement si l'utilisateur clique sur le champs, pour corriger sa recherche par exemple, celui-ci sera vidé. Nous devons donc vérifier que le champs contient le texte par défaut avant de le vider, si oui on le vide, sinon on ne fait rien.

$("#search").focus(function(){
	if($(this).val() == "Camion"){
		$(this).val("");
	}
});

Jusqu'ici tout va bien... Mais que se passe-t-il si le visiteur n'a pas activé Javascript ? Il devra vider le champs lui même ! Dans ce cas, nous allons le remplir avec Javascript, de cette façon si ce dernier n'est pas activé, le remplissage ne sera pas ajouté. On retire donc le paramètre value de notre input et on ajoute au début de notre script Javascript cette ligne de code : 

$("#search").val("Camion");

Et voilà, nous avons maintenant un champs qui se rempli de façon automatique pour donner l'information voulue, et qui se vide pour ne pas gêner l'utilisateur ! Biensûr ce script est largement améliorable, vous pouvez par exemple ré-insérer le contenu par défaut si l'utilisateur quitte le champs en le laissant vierge, ou changer la couleur du texte pour le contenu par défaut, etc.

Accéssibilité

Pour rendre notre champs de recherche accéssible, il est impératif de lui attribuer un élément label afin d'aider au mieux les utilisateurs de lecteurs d'écrans par exemple. Seulement il arrive que l'on ne souhaite pas afficher cet élément, soit parce qu'il est évident pour les voyants, soit par manque de place par exemple. Nous allons donc voir en CSS comment ajouter un élément label qui ne soit visible qu'aux utilisateur de lecteurs d'écrans.

<label for="search" id="label-search">Recherche</label>
<input type="text" id="search" />

La propriété display:hidden permettrai de cacher visuellement le label, mais il s'avère qu'elle le cache aussi à la plupart des lecteurs d'écrans, nous devons donc trouver une autre solution. Pour résoudre ce problème, nous allons donc placer de façon absolue notre label en dehors de l'écran.

label-search {
   position:absolute;
   left:-10000px;
   top:auto;
   width:1px;
   height:1px;
   overflow:hidden;
}

Le label est donc placé à 10 000px à gauche de l'origine de l'écran, et à la même distance du haut que sa distance d'origine. On lui attribue aussi des valeurs width, height et overflow pour être certains que le texte ne dépassera pas ou ne sera pas décalé. Si vous souhaitez avoir plus d'informations au sujet de cette méthode, n'hésitez pas à consulter cet article de Ideose qui explique très bien le fonctionnement et montre d'autre utilisation possible de codes similaires.

Le mot de la fin

Slip.

Non je plaisante. Avant de clore cet article, voici la liste des sources qui ont participé à la rédaction de cet article :

• 30 Barres de recherche cleans et minimalistes sur le BlogDuWebdesign
• La liste des 100 designs de l'étude rassemblés sur mon compte Zootool
• Le champs de recherche sur Le Blog de l'Ergonomie Web
• Contenu nécessaire aux lecteurs d'écrans sur Ideose

Et vous avez vous vos astuces personnelles pour le champs de recherche idéal ? Vos petits bouts de codes qui rendent vos champs magnifiques et accessibles ? N'hésitez pas à tout partager dans les commentaires et à nous faire diffuser à votre tour vos connaissances.