Les moteurs de recherche internes permettent aux internautes de trouver rapidement les informations qu’ils souhaitent. Le champ de recherche est alors un élément clé dans un vaste site web, pour permettre une facilité d’accès au contenu. C’est par ailleurs un élément d’accessibilité pour les utilisateurs qui naviguent uniquement avec le clavier.
Pour toutes ces raisons, le champ de recherche est très important et doit être réalisé en suivant certaines règles. Les quelques règles qui résument cet article serait de réaliser un champ de recherche visible, compréhensible, simple et suffisamment large pour pouvoir écrire ou éditer un requête.
A propos de cette analyse
Intérêt de l’analyse
Cet article se propose d’étudier les champs de recherches de plusieurs sites web très populaires. Cela permet d’apprendre à partir de cas concrets. Cela est d’autant plus avantageux qu’il n’est pas toujours possible de généraliser une seule bonne méthode pour réaliser un formulaire de recherche, car il existe des cas particuliers.
L’objectif de cet article n’est pas de faire une critique gratuite des sites web analysés. Ces sites web sont très populaires et de grandes qualités. Ils ont au contraire beaucoup à nous apprendre.
Ce que l’analyse ne dit pas
Il faut garder à l’esprit que cette analyse ne précise pas dans quels contextes ces moteurs sont placés sur le site. Les captures d’écran ne révèlent pas l’emplacement des champs de recherche et le design du site dans son ensemble. Par ailleurs, il est possible pour certains de ces sites que le champ de recherche ne soit pas une priorité. Par exemple, il se peut que pour des raisons marketing un autre élément soit plus proéminent sur la page (exemple: un call-to-action).
Enfin, cet article ne teste pas la façon dont les résultats apparaissent à l’utilisateur ainsi que la pertinence de ces résultats.
Liste des sites analysés
Information: les sites analysés ont été choisie au hasard parmi des listes de sites francophones populaires. Par ailleurs, cet article présente les sites par ordre alphabétique à partir de leur nom de domaine.
01net.com
Moteur de recherche 01net
Note: cette capture d’écran à été redimensionnée pour les besoins de l’article.
Points positifs
Le champ de recherche est assez gros pour faire une recherche de plusieurs mots. Le champ de recherche contient le mot « Rechercher » pour comprendre le but de cet espace blanc et disparait lorsque le visiteur souhaite entrer un mot sur ce champ de recherche.
Points négatifs
Les moteurs de recherche internet ne devraient jamais proposer l’opportunité de faire une recherche sur le web. Pour faire une recherche sur internet, les internautes ont déjà leur moteur de recherche préféré en favoris dans leur navigateur. Il est plus logique d’effectuer une recherche sur le site du moteur de recherche que sur un autre site. Par ailleurs, proposer deux boutons complique le nombre de possibilités que l’internaute peut effectuer (cf. la loi de Hick). En réalité, la seul raison qui pourrait justifier un tel choix consisterait à avoir un partenariat financier avec le moteur de recherche.
L’intitulé du bouton n’est pas clair. L’idéal serait d’avoir l’intitulé de l’action sur le bouton.
Allocine.fr
Moteur de recherche Allocine
Note: cette capture d’écran à été redimensionnée pour les besoins de l’article.
Points positifs
Un exemple de recherche est montré. Cela est très pratique pour rapidement comprendre que le formulaire de recherche peut contenir plusieurs types d’information (titre de film, nom d’un cinéma, code postal …). Le champ de recherche est par ailleurs assez grand pour contenir plusieurs mots (pratique pour les longs titres de film). L’intitulé du lien est clair et précis.
Points négatifs
Il serait pratique de faire un effet sur le bouton au survol de la souris.
Amazon.fr
Moteur de recherche Amazon
Note: cette capture d’écran à été redimensionnée pour les besoins de l’article.
Points positifs
Il faut savoir que le champ de recherche d’Amazon occupe automatiquement toute la largeur de l’écran disponible. Le champ du formulaire s’étend donc automatiquement pour être le plus large possible. Pour la capture d’écran ci-dessus, la fenêtre du navigateur à volontairement été redimensionnée en moins large. Cela est vraiment très bien pour entrer le titre précis d’un produit (certains titre de livre sont parfois long, surtout si l’internaute inclus le nom de l’auteur ou l’année de publication).
Il faut aussi noter que la liste descendante permettant d’affiner la recherche sur une partie du site est une bonne option. D’ailleurs, mettre cette liste par défaut sur « Toutes nos boutique » est également un bon point, comparé à certains sites qui oublient de proposer un champ de recherche qui fouille sur tout le site.
Enfin, c’est un bon point d’avoir un bouton avec une couleur différente pour le faire ressortir.
Points négatifs
Bien que la largeur du formulaire soit un point positif, cela peut éventuellement poser des problèmes d’usabilité lorsque la largeur d’écran est grande. En effet, l’oeil humain n’a pas une vue d’ensemble de ce formulaire de recherche. De ce fait, le visiteur n’a pas forcément une représentation mentale de cet élément. Il est compliqué de relier mentalement deux éléments lorsqu’ils sont distants l’un de l’autre. Une possibilité d’amélioration pourrait consister à faire une largeur maximum pour ce formulaire et dans le cas où l’utilisateur à un écran large et qu’il entre plus de X caractères le champ de recherche pourrait s’agrandir automatiquement. Une telle possibilité pourrait être réalisée grâce au javascript.
La liste déroulante à malheureusement des intitulés de catégories difficilement différentiable rapidement. Par ailleurs les catégories du menu de Amazon sont différent des catégories présentent dans la liste déroulante.
A noter qu’en circonstance normale il aurait été préférable de retirer le mot « Rechercher » et de remplacer l’intitulé du bouton « Go » par « Rechercher« . Toutefois, dans ce cas de figure, sachant que l’oeil humain va d’abord regarde à gauche du formulaire de recherche (cf. les études d’eye-tracking), il est judicieux de présenter la fonction de ce champ de formulaire avec l’inscription « Rechercher ».
Cdiscount.com
Moteur de recherche Cdiscount
Points positifs
Pratique que le champ de recherche possède le mot « Recherche » en gris clair, qui disparait lorsque l’utilisateur sélectionne le champ de recherche. La présence d’une liste déroulante pour améliorer la recherche est également un bon point, surtout sachant que l’option par défaut permet de chercher sur tout le site. Enfin, la couleur du bouton de recherche est facilement visible.
Points négatifs
La première chose évidente qui saute aux yeux c’est que ce formulaire est bien trop petit et difficilement visible à côté de tous les éléments visuels qui distraient l’oeil de l’internaute. Il y a non seulement un champ de recherche petit mais la police d’écriture est petite également (ce qui n’est pas très bien adapté pour l’accessibilité du site).
La liste déroulante ne présente pas les catégories de la même façon que le menu. Les catégories sont présentées de manière aléatoire dans ce menu. Par ailleurs, certains titres de catégories pourraient être simplifiés. Par exemple « Le sport » pourrait tout simplement s’intituler « Sport« , ce qui serait plus facile à scanner.
On a l’impression que l’intitulé « Ok » est tout ratatiné dans le bouton de recherche. Il serait tellement plus intéressant que ce bouton soit plus grand.
Les trois petits points du texte « Recherche… » ne sont pas nécessaires. Ils ajoutent un peu de bruit.
Ciao.fr
Moteur de recherche Ciao
Points positifs
La clarté est très impressionnante. La couleur du bouton de recherche est un bon choix pour le remarquer facilement. Ce qui est également très impressionnant c’est que le champ de recherche est automatiquement validé lors de l’arrivé sur le site, il n’y a pas besoin de le sélectionner pour faire une recherche, il est possible de directement taper sur le clavier à l’entré sur le site. Cette petite idée est non seulement pratique mais également accessible pour les internautes qui naviguent uniquement avec leur clavier.
Points négatifs
Difficile de comprendre à quoi correspond ce champ de recherche rapidement. Pour que l’internaute comprenne qu’il s’agit d’un champ de recherche il doit non seulement comprendre que le petit symbole dans le cadre orange est une loupe, mais il doit également faire une association mentale pour comprendre que la loupe signifie qu’il s’agit d’une fonction de recherche.
Pour finir, le bouton est bizarrement à l’intérieur du champ de recherche, ce qui est assez étrange et peu commun. A cause de ce petit détail, il n’est pas évident de comprendre que le cadre orange est un bouton associé au champ de recherche.
Clubic.com
Moteur de recherche Clubic
Note: cette capture d’écran à été redimensionnée pour les besoins de l’article.
Points positifs
Le champ de recherche est suffisamment large. Le bouton possède un bon intitulé qui définit bien l’action qui va se produire lors d’un clique de souris.
Points négatifs
L’icône de la loupe n’est pas indispensable puisque le formulaire de recherche à déjà un texte qui le définit et que le bouton est bien labellisé. Par ailleurs, lorsqu’il y a un large champ à remplir avec un bouton à côté, les internautes reconnaissent souvent qu’il s’agit d’un champ de recherche. De ce fait, il semble que cet icône ajoute du bruit et que cet espace de recherche puisse bien fonctionner sans sa présence.
D’une manière littérale, il n’est pas possible de chercher un « prix« . Par contre, il est possible de chercher le prix d’un produit. De ce fait, le texte inclus dans le champ de recherche pourrait être adapté.
Avez-vous compris, à partir de la capture d’écran, à quoi servent les liens « Actus », « Télécharger », « Comparateur de prix », « Dossiers », « Forums », « Jeux » et « Google »? Au cas où vous n’auriez pas compris, il s’agit de liens qui permettent de faire une recherche ciblé. En cliquant sur « Dossiers », par exemple, le moteur de recherche effectue une recherche uniquement sur les dossiers du site. Personnellement, j’ai mis beaucoup de temps à comprendre cela (cela reste relatif).
Comme dit précédemment, il est inutile de proposer aux internautes d’effectuer une recherche sur le web entier à partir d’un site web qui n’est pas un moteur de recherche. Je suggèrerais donc de supprimer ce lien. Malgré tout, sachant que les résultats sont présentés sur Clubic, cela augmente leur nombre de pages vues (ce qui est profitable puisqu’il y a des publicités sur toutes les pages). Il reste à savoir si la suppression du lien vaut la perte de revenu attribué aux pages vues supplémentaires.
Commentcamarche.net
Moteur de recherche Comment ça marche
Points positifs
Le champ de recherche est suffisamment large. Le mot « Rechercher » et la loupe permettent de comprendre facilement de quoi il s’agit. Il faut noter que la bordure rouge est en prolongement avec le bouton en forme de loupe, cela permet donc de facilement identifier l’élément de recherche. Le bouton utilise une couleur qui ressort, ce qui permet de bien discerner le call-to-action. Enfin, il y a un effet lorsque la souris survole le bouton, cela permet de bien comprendre qu’il s’agit d’un bouton.
Points négatifs
N’hésitez pas à laisser un commentaire à cet article si vous trouvez un défaut à ce formulaire de recherche.
Dailymotion.com
Moteur de recherche Dailymotion
Points positifs
Le champ de recherche permet de rentrer environ 33 caractères, ce qui est probablement suffisant. Le bouton est explicite.
Points négatifs
A votre avis, à quoi sert le petit icône en forme de loupe à gauche? Est-ce qu’il permet quelque chose en plus? Est-ce qu’il est cliquable? En réalité il ne fait rien du tout, il sert uniquement à indiquer qu’il s’agit d’une zone de recherche. Ce qui est ambigüe avec cet icône c’est qu’il se situe à l’intérieur du champ où il faut taper les mots. Ce n’est qu’en effectuant une recherche que l’utilisateur se rend compte que les mots commence à droite de cette loupe (ce qui n’est pas très commun).
Annonces.ebay.fr
Moteur de recherche eBay
Note: cette capture d’écran à été redimensionnée pour les besoins de l’article.
Points positifs
Le champ de recherche est assez grand, le bouton est bien labellisé, une liste déroulante permet de spécifier une catégorie pour la recherche et cette liste déroulante est par défaut sur « Toutes les catégories« .
Il est intéressant de noter qu’eBay n’a pas donné de design spécifique au bouton. Ce dernier utilise le design par défaut (cela évite d’alourdir la page).
Points négatifs
Quel est la différence entre un achat immédiat et une petite annonce? Le choix que doit faire l’utilisateur sur cette page d’accueil n’est pas très clair. Les connaisseurs d’eBay et les équipes de développement d’eBay sont probablement très familiers et comprennent la différence, mais ce n’est pas la même chose pour les nouveaux utilisateurs.
Il pourrait être judicieux de se demander si un call-to-action est nécessaire sur le bouton de recherche.
Facebook.com
Moteur de recherche Facebook
Points positifs
Champ suffisamment grands. Le mot « Recherche » inclus dans la zone de recherche permet de bien identifier l’élément.
Points négatifs
Le bouton est difficilement reconnaissable. Les couleurs ne le font pas ressortir. Il est de la même couleur que le texte « Recherche », alors que ce dernier disparait lorsque l’utilisateur sélectionne le champ de recherche.
Laredoute.fr
Moteur de recherche La redoute
Note: cette capture d’écran à été redimensionnée pour les besoins de l’article.
Points positifs
Le champ est assez grand pour contenir un ou plusieurs mots-clés. Il est possible d’affiner la recherche sur une seule partie du site. Par défaut, la liste déroulante est sur « Dans tout le site« . Le bouton est clairement visible.
Points négatifs
Le texte présent dans la zone de recherche n’est pas visible dans son intégralité. Si le texte est si important, autant l’écrire juste au dessous de la zone de recherche. Par ailleurs, je ne pense pas que les internautes se soucis du singulier ou plusieurs du terme « mot clé ».
La petite image de loupe n’est pas nécessaire sachant qu’il y a un mot « Rechercher » juste à côté. Les deux petits points à côté de « Rechercher » ne sont pas nécessaire, ils ajoutent un peu de bruit.
Leguide.com
Moteur de recherche Le guide
Note: cette capture d’écran à été redimensionnée pour les besoins de l’article.
Points positifs
Le champ de recherche est assez grand. Le bouton est clairement visible. Non seulement il ressemble à un bouton, mais en plus il ressort clairement dans le design. Un petite explication précise ce qu’il est possible de chercher à travers ce moteur de recherche interne.
Points négatifs
Les trois petits points associés au mot « Cherchez » ne sont pas nécessaire, ils ajoutent un peu de bruit. Le mot « Cherchez » est trop éloigné de la zone de recherche. Il faut préciser que « Un marchant, un produit, une marque » est une indication concernant l’utilisation de la zone de recherche, sinon ça pourrait laisser croire à un tagline. Bref, il faut ajouter un petit « Exemple » ou « Ex: » ou « Chercher » devant ces mots.
Lemonde.fr
Moteur de recherche Le monde
Points positifs
Indications claires. En dépit de sa petite taille, ce formulaire de recherche permet de rentrer environ 28 caractères.
Points négatifs
La couleur du champ de recherche est la même que la couleur de fond du site, ce qui le rend difficile à discerner. Difficile à deviner à partir de cette capture d’écran, mais le champ de recherche bloque la limite à 40 caractères. Il est donc strictement impossible de faire une recherche comportant plus de 40 caractères.
Il est possible de simplifier l’indication à un simple « Chercher » ou « Rechercher« . L’indication « sur Le Monde.fr » ne semble pas indispensable. Par ailleurs, sachant que le nom de domaine est « lemonde.fr« , il est plus judicieux d’attacher les deux mots et de garder la capitalisation pour bien discerner les deux mots (soit: LeMonde.fr). Ou alors, autant enlever le « .fr » car pour les utilisateurs il s’agit de la même marque. A l’intérieur de l’entreprise il est évident que le journal papier et le site web sont deux sources distinctes, mais les internautes sont bien consciente que lorsqu’ils visitent le site web il s’agit d’une source enligne (donc il n’est pas nécessaire d’ajouter le « .fr »).
Enfin, le bouton ne ressemble pas à un bouton conventionnel, un petit effet de 3D permet de bien comprendre que l’élément peut être cliqué.
Linternaute.com
Moteur de recherche L'internaute
Points positifs
La zone est bien labellisée, il est possible de faire une recherche sur une partie du site et le bouton utilise une couleur qui le différencie.
Points négatifs
La largeur du champ de recherche est de 24 caractères environs. Ce n’est pas si mauvais que ça, mais ça pourrait être mieux.
Mettre le mot « Rechercher » uniquement en majuscule n’est pas la bonne solution. Cela donne l’impression que le site hurle au visiteur et c’est par la même occasion moins facile à lire.
La liste déroulante est assez longue, ne correspond pas aux catégories du menu de navigation et il y a une redondance du mot « Magazine » (voir sur le site pour mieux comprendre). Par ailleurs, l’intitulé « L’internaute Magazine » comme nom pour faire une recherche sur tout le site n’est pas aussi claire que « sur tout le site« . Ça pose même un souci avec le nom des autres catégories qui ont également le mot « Magazine« .
Orange.fr
Moteur de recherche Orange
Points positifs
La zone de recherche est bien distincte, le bouton est bien labellisé et ressemble à un bouton « cliquable ». Le champ de recherche est assez grand.
Points négatifs
Je viens de (re)découvrir qu’Orange est également un moteur de recherche sur le web. Pour cela il a fallu que je test, car je n’arrivais pas à croire l’onglet intitulé « web ». Le gros souci c’est que la plupart des gros moteurs de recherche possèdent une page d’accueil très simple où il est juste possible de faire une recherche. Ici, le fait qu’Orange possède une zone de recherche qui par défaut va chercher sur tout le web est assez ambigu. L’utilisateur ne fait pas forcément attention à l’onglet « Web » et pense faire une recherche sur le site. Or pour rechercher sur le site il faut regarder le quatrième onglet.
Après quelques recherches, j’ai découvert qu’il y avait un site Orange consacré uniquement au moteur de recherche. Cela signifie qu’il n’est pas nécessaire de proposer une option de recherche sur le web à partir du portail Orange (ou au moins, pas comme option de recherche par défaut). Car ironiquement, si un visiteur ne se rend pas compte qu’il à fait une recherche sur le web, il va avoir des résultats de recherche qui vont le faire partir sur un autre site.
Il ne reste plus qu’à se poser la question: est-ce que l’utilisation du moteur de recherche sur le web d’Orange est principalement intentionnel ou s’agit-il la plupart du temps d’une mauvaise compréhension des visiteurs?
Dès lors que le bouton est bien labellisé, il n’est pas nécessaire d’ajouter une icône en forme de loupe.
Pixmania.com
Moteur de recherche Pixmania
Points positifs
Le champ de recherche est labellisé avec le mot « recherche« , il y a une liste déroulante pour approfondir la recherche et cette liste déroulante est par défaut sur « Tout le site« .
Points négatifs
Le bouton de recherche n’est pas très distinct à cause du mauvais choix des couleurs. En effet, le bouton possède presque la même couleur que la couleur de fond à côté de lui.
Priceminister.com
Moteur de recherche Priceminister
Points positifs
La barre de recherche est très large, les indications inclussent dans la zone de recherche spécifient le type de requête qui peut être utilisé et le bouton est bien labellisé.
Points négatifs
Le texte présent dans la zone de recherche est composé de 11 mots, ce n’est pas possible de le scanner, il faut le lire. Il est possible de supprimer quelques mots pour simplifier ce texte. Voici un texte alternatif: « Rechercher sur le site: produit, code barre, vendeur … » (ce qui fait 8 mots au lieu de 11).
Rueducommerce.fr
Moteur de recherche Rue du commerce
Points positifs
Le champ de recherche est à la fois long et haut, ce qui en fait une zone proéminente sur le site. Le texte descriptif présent dans la zone de recherche détail ce qu’il est possible de chercher.
Points négatifs
L’icône de la loupe n’est pas forcément indispensable. Il pourrait y avoir un effet sur le bouton au survol de la souris.
Skyrock.com
Moteur de recherche Skyrock
Points positifs
Le bouton est bien labellisé, le champ de recherche est assez grand et il est possible de sélectionner la catégorie de recherche.
Points négatifs
Dans la liste déroulante il y a une option permettant de chercher sur le web, grâce à Google. Cette option n’est pas nécessaire. Par ailleurs, cela complique la compréhension des autres options car l’option « Photo » présente à côté de « Web » pourrait laisser penser qu’il s’agit d’un moteur de recherche d’image sur tout le web, alors qu’il s’agit d’une recherche d’image sur le site.
Le bouton ne ressemble pas beaucoup à un élément cliquable.
Il n’y a pas d’option globale pour faire une recherche sur tout le site.
Wat.tv
Moteur de recherche Wat.tv
Points positifs
Le bouton est à la fois bien labellisé, clairement visible grâce à ses couleurs, mais ressemble également à un élément cliquable. Le texte présent dans la zone de recherche explique les possibilités de recherche.
Points négatifs
Globalement la zone de recherche est un peu petite comparé à l’importance de cet élément sur un tel site.
Wikio.fr
Moteur de recherche Wikio
Points positifs
Le bouton précise explicitement l’action et la zone de recherche. Le champ de recherche est assez grand.
Points négatifs
Le texte situé sous la zone de recherche devrait peut-être remplacer « médias et blogs » par « sites d’actualités » car il y a déjà une zone du site consacré aux blogs (ce qui est un peu ambigüe).
Fr.wikipedia.org
Moteur de recherche Wikipedia
Points positifs
La zone de recherche est bien délimité et facilement reconnaissable.
Points négatifs
J’ai beau être un grand utilisateur d’internet et un visiteur régulier de Wikipédia, je n’ai absolument aucune idée de la signification du bouton « Lire« . Ce bouton est à gauche et est en gras, donc semble plus important que le bouton « Rechercher« . En général, lorsque j’utilise la zone de recherche de Wikipedia je lance la recherche avec la touche « entrée » sur mon clavier. Est-ce que la touche « entrée » du clavier sélectionne « Lire« ? Puisque ça semble être l’option principale, alors à quoi sert la touche « Rechercher« ? Et si la touche « entrée » du clavier utilise l’option « Rechercher » alors à quoi sert le bouton « Lire« ? Est-ce que ça fait une lecture vocale de la page?
Après recherche, il s’avère que « Rechercher » présente une liste de résultat alors que « Lire » ouvre directement le premier résultat, de la même façon que l’option « j’ai de la chance » sur Google. Cela ne fonctionne qu’à la condition qu’il existe une page avec le mot-clé de la recherche. Ce concept n’est vraiment pas facile à comprendre. Il serait peut-être plus judicieux d’utiliser seulement l’option « Lire » sous l’intitulé « Rechercher » et de faire un lien vers des recherches avancées.
Lorsque l’utilisateur effectue une recherche, une sélection de recherche courante est proposée (de la même manière que Google suggest). C’est très pratique, sauf que cela cache les deux boutons, ce qui rend compliqué l’utilisation de ce formulaire de recherche. Pour pouvoir cliquer sur un bouton, il faut d’abord cliquer sur une zone neutre de l’écran, pour que les suggestions disparaissent et donc que les deux boutons soit accessible.
Par ailleurs, la zone de recherche fait 24 caractères de long, ce n’est pas si mal mais ça pourrait être mieux. Cela est d’autant plus vrai que la fonctionnalité similaire à « Google suggest » présente parfois des résultats qui dépasse la largeur du champ de recherche.
Youtube.com
Moteur de recherche Youtube
Points positifs
Extrêmement simple et efficace. La zone est clairement visible, bien labellisée, assez grande, le bouton semble cliquable et présente un effet au survol de la souris.
Points négatifs
N’hésitez pas à laisser un commentaire à cet article si vous trouvez un défaut à ce formulaire de recherche.
Mot de la fin
Il faut retenir que certains points présentés ne reposent uniquement que sur l’opinion de l’auteur. En revanche d’autres points sont des règles d’usabilité reconnues. Les points de vue peuvent être discutés en commentaires.
A savoir que l’une des méthodes permettant de juger la qualité d’un moteur de recherche reste encore les tests d’usabilité qualitatifs ou quantitatifs.