* * * * *

Abonnez-vous !

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

  • A propos de l’auteur
  • Archives
  • Contacts
  • 25
    avr 08
    Catégorie : Ergonomie

    Design, ergonomie : ces menus qui nous changent la vie



    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.

    Menus riches

    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 :

    Menu classic : Amazon
    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 riche : 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.

    Menu riche : AE

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

    Menu riche : American Eagle Outfitters

    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 :

    Menu riche : AE Wish List

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

    Menu riche : My Yahoo

    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.

    Menu riche : Getty images

    Menu riche : Google Analytics menuAutre 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) :

    Menu riche : Google analytics

    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> :

    Menu riche : Google Reader

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

    Menu riche : Monster

    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“. Menu riche : Saveur bière détail du menuCelle-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 :

    Menu riche : Saveur bière

    Cet article vous a plu ? Ne perdez plus aucune info : abonnez-vous gratuitement !

    A vous de jouer ! Laissez un commentaire :

    XHTML: Vous pouvez utiliser ces tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

    Innovablog motorisé par WordPress
    Theme Wordpress par Olivier Favre
    Site Map
    RSS Feed
    Contenu intégralement sous licence Creative Commons