Menus déroulants : identifiez les contenus extensibles

Je ne vais pas vous retenir très longtemps. Juste un détail d’ergonomie, très concret, que je voulais saisir, après un détour sur le site officiel de l’Assemblée Nationale de France.

Lorsque, dans votre menu déroulant, un troisième niveau est prévu, pas partout mais à certains endroits seulement, il convient de créer un code graphique qui rend évidente la possibilité d’explorer certains contenus davantage en profondeur.

Ci-dessous, de petites flèches pointent vers la droite, lorsque les contenus contiennent des entrées de troisième niveau. Simple et efficace. Bonne pratique à généraliser.

Source : www.assemblee-nationale.fr

Notez que ce menu fonctionne plutôt bien pour plusieurs raisons :

  • Les entrées de premier niveau sont limitées (4 thèmes)
  • Les libellés sont parlants
  • Le graphisme et la taille des boutons est confortable
  • Le menu déroulant réagit immédiatement au passage de la souris
  • Il fonctionne aussi bien dans Firefox que dans Internet Explorer

A lire aussi :

Cette entrée a été publiée dans Bonnes pratiques. Vous pouvez la mettre en favoris avec ce permalien.

5 réponses à Menus déroulants : identifiez les contenus extensibles

  1. Firewalkwizme dit :

    Dommage qu’il ne soit pas du tout accessible au clavier…

  2. jmh dit :

    @ Firewalkwizme: Bien vu. Comme quoi il y en a des choses à respecter pour un simple petit menu.

  3. Muriel GANI dit :

    Un autre détail me gêne : la non persistance du 3ème niveau. Si la souris va en diagonale – soit le chemin le plus direct pour sélectionner un item – le 3ème niveau disparait. En focus groupes, j’ai vu des novices bien perturbés par ces disparitions ! Autrement dit, la sélection d’un item de 3ème niveau oblige à survoler d’abord le 1er item de la liste puis à descendre (un trajet à angle droit anti-naturel!)
    C’est souvent le cas dans ce type de menu, mais pas toujours : voir par exemple ce tutoriel : dosimple.ch/articles/Menu…
    Tant que je suis là, bravo pour votre conférence à Parisweb !
    Muriel

  4. Jacques PYRAT dit :

    Il est pas mal ce menu dosimple.ch/articles/Menu… et en plus il marche avec la touche tabulation.

    Mais il marche mal avec Maj-Tab (pour revenir en arrière).

  5. dg dit :

    Un petit tour sur ce site (http://www.ville-rillieux-la-pap... pour abonder dans votre sens. Ici ce sont les visuels qui habillent les liens

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>