Innovablog, Le Web où l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,…

Vous les avez certainement déjà rencontrés sur vos sites e-commerce favoris, puisqu’ils sont utilisés de plus en plus fréquemment, les menus riches fleurissent dans les arborescences. Leurs buts sont multiples :

• améliorer la navigation interne du site, c’est là une fonctionnalité de base,
• enrichir la présentation des produits,
• rendre accessible le contenu en profondeur,
• augmenter la visibilité de certains contenus pour nos amis les moteurs de recherche : objectif SEO,
• enfin, présenter une palette de fonctionnalités et améliorer l’expérience utilisateur.

Fred Cavazza nous les avait déjà évoqués pour partie. Je vous propose ici une revue de ce que l’on peut trouver aujourd’hui sur de nombreux sites.

Le menu déroulant façon pur Html

Avant d’aller plus loin, rappelons-nous de ce qu’est un menu standard. Il s’agit de ce que l’on appelle vulgairement un menu déroulant, qui utilise la balise Html <select>, ce qui donne sans plus de mise en forme quelque chose comme cela :

Un menu déroulant sur le site français d’Amazon

Ce qui caractérise ce type de menu, c’est donc la présence à l’extrémité droite d’une flèche pointée vers le bas, qui donne une indication ergonomique à l’utilisateur : au clic, du contenu additionnel va apparaître au dessous. C’est ce que l’on appelle une convention.

Les merveilles de la technologie, et notamment des feuilles de style, ont détourné cette convention pour l’appliquer à de nouveaux objets (on recrée l’illusion d’un select sur n’importe quel autre balise, voir sur une image). Voici un exemple sur mon profil LinkedIn :

Menu pour gagner du temps

Premier exemple, sur le site d’American Eagle Outfitters. Une barre d’outil propose 4 choix. pour y accéder, deux façons : un clic direct sur le libellé OU un survol de la fameuse flèche pointée vers le bas.

Je souhaite accéder à ma wish list. Pour cela, je passe donc ma souris sur la flèche, et le menu se déplie :

Dans cet exemple, le menu propose aussi bien du texte, que des formulaires. Si j’avais directement cliqué sur l’intitulé de la rubrique, j’aurais atterri sur cette page, qui ne fait que dupliquer fonctionnellement le menu :

Encore un exemple offrant une richesse fonctionnelle sur le site My Yahoo, où un menu vous permet de sélectionner votre propre contenu :

Un menu offrant des fonctionnalité avancées

On peut également utiliser des menus “riches” pour là encore gagner un clic et en ergonomie. L’exemple ci-dessous tiré du site Getty images, montre à quel point on peut offrir une réelle richesse fonctionnelle dans le menu. Il s’agit ici d’un moteur de recherche, le menu permet d’afficher ce qu’une page “Recherche avancée” aurait pu fournir.

Autre exemple, cette fois-ci issu de Google Analytics. Vous êtes très probablement très nombreux à l’utiliser régulièrement, voire quotidiennement. Derrière cette flèche pointée vers le bas, se cache différentes options de filtre (calendrier, comparaisons) :

Encore un exemple de la Google company, cette fois-ci tiré du produit Reader. Un menu de recherche avancée vous est proposer, permettant de balayer l’ensemble des billets de vos feeds (au passage hyper efficace et rapide). Là encore, on utilise la convention du menu déroulant classique, alors qu‘il ne s’agit en réalité qu’une imbrication CSS de <div> et de <span> :

Un dernier exemple, tiré du site Monster, permettant d’affiner sa recherche :

Un menu pour mettre en valeur son offre

On constate également d’autres utilisations de cette convention. C’est le cas du site Saveur bière, qui en fait un usage assez réussi, dans son menu principal. Prenons l’exemple de la scodne rubrique nommée”Tireuses et fûts“. Celle-ci propose une flèche orientée vers le bas à son bord droit. L’utilisateur comprend que lorsqu’il passe sur celle-ci, le menu apparaît. C’est ce qui se passe. Ce dernier propose ainsi les différents sous-niveaux avec visuels à l’appui.

C’est au passage l’un des grands bénéfices de cette technique, à savoir l’utilisation de différents supports en plus du texte de base attendu. Nous avons vu plus haut l’utilisation d’inputs pour la recherche, ici c’est une utilisation plus graphique :