Menus déroulants enrichis
Je surfe en ce moment sur arte.tv pour m’imprégner de leurs contenus, en vue d’une prochaine formation.
Même si l’ambition des formations que je vais animer est de monter plus haut encore la barre de la qualité éditoriale de la chaîne Arte, disons d’emblée que, dès le départ, mon client se situe trois crans au-dessus des concurrents. Allez goûter à la soupe de France2 ou de TF1… vous comprendrez.
Parmi les innovations intéressantes sur le site arte.tv, des menus déroulants enrichis. Comme dans l’exemple ci-dessous, où chaque élément du menu est présenté par un texte en deux temps, avec un contraste de graisse, et accompagné d’un visuel (parfois perfectible quant à lui).
Si vous avez, en magasin, d’autres exemples de menus déroulants enrichis, ça m’intéresse !
Et si vous voulez optimiser vos interfaces, faites appel à nous 🙂
Commentaires des lecteurs
Comment by Thomas — 8 September 2008
Fred Cavazza en a un peu parlé :
http://www.fredcavazza.net/2007/...
http://www.fredcavazza.net/2008/...
De même que superfiction…
http://www.superfiction.net/blog...
Mais il est souvent question de menus déroulants "techniquement" enrichis, incluant des champs ou des menus de recherche…
Dans le cas d’Arte, il s’agit davantage d’apparence esthétique et de lisibilité…
Comment by Sam — 8 September 2008
hello,
sur http://www.decathlon.fr/ avec son ordre alphabetique et un pas mal vu recement sur http://www.saveur-biere.com/
sinon article sur evolution des menus deroulants avec l apport des css notamment :
http://www.superfiction.net/blog...
sam
Comment by jmh — 9 September 2008
@ Sam et Thomas : Merci pour vos références, tout à fait intéressantes.
Comment by Colas — 9 September 2008
C’est étonnant à quel point arte sait attirer la qualité, je ne suis pas surpris que leur site web soit aussi bien foutu.
Ils ont récemment fait un lifting de leur image graphique sur la chaîne, et c’est vachement réussi encore.
Autrement, en très bon exemple de menu enrichi, j’ai http://www.actionenvelope.com/, où là il ya aussi des champs de formulaires.
Dans un autre style, il y a l’excellente navigation alphabétique d’offixemax.com, mais je ne sais pas si ca rentre dans la catégorie des menus enrichis.
Comment by Frank — 9 September 2008
Bonjour,
Il existe quand même quelques petits bémols sur ce menu et la qualité générale du site.
La navigation au clavier est impossible
Le menu est illisible si les images sont désactivées et certaines parties du site également (menu de droite).
De plus, j’ai cru voir que tous les outlines des liens étaient supprimés (pas bien)
La manière dont est caché le titre de chaque item risque de poser problème (display:none;) car pris en compte par certaines synthèses vocales. De plus comme le texte alternatif de l’image correspondante n’est pas renseigné aucun moyen de savoir où l’on se trouve.
Le premier menu se trouvant dans la partie haute est inactif si javascript est désactivé.
Je trouve vraiment dommage que les sites d’informations en général ne fassent pas plus attention aux publics qui en ont le plus besoin.
On parle de réduire la fracture numérique et pourtant le surenchérissement d’effets certes agréables pour certains ne fait à mon avis que la renforcer si un minimum de vérifications ne sont pas faites auparavant.
Comment by jmh — 9 September 2008
@ Frank : Est-il possible d’offrir ce type d’effets (menus déroulants riches) dans le respect des normes d’accessibilité ?
Comment by Frank — 10 September 2008
Sans se placer au sens strict des normes il est possible de faire certains types de menus déroulants même « riches » et rester un « minimum » accessible si l’on prends certaines précautions ce qui n’est pas le cas ici.
Je dis un minimum car de toutes façons un menu déroulant c’est de facto prendre le risque de gêner ou de rendre la navigation difficile à certaines catégories d’internautes.
Dans le cas de ce menu, je pense qu’il est possible d’apporter des modifications pour limiter les dégâts.
Rendre accessible le premier item via le clavier et même en admettant que le menu ne se déroule pas (si il se déroule tant mieux), que celui-ci permette l’accès à une page reprenant les sous-rubriques.
Supprimer le "span hidden" du titre du premier item de chaque menu et laisser l’image avec le texte alternatif adéquat, une synthèse vocale lira le texte alternatif, si les images sont désactivées le texte alternatif prendra le relais.
Ne pas supprimer les outlines des liens (la partie pointillée qui spécifie le focus) seul repère lorsque l’on navigue au clavier, ou alors dans ce cas là déclarer la position focus avec un changement visible et pour Internet Explorer qui ne connait pas focus la position active.
Doubler l’image de fond du menu avec des éléments ayant une couleur (les li par exemple) comme il ne semble pas y avoir de dégradé dans la partie centrale cela doit être jouable.
Une chose importante dans l’accessibilité c’est qu’il n’y ai pas de perte d’informations et donc qu’une alternative soit présente.
Si je prends par exemple le menu de saveur bière et que je désactive les images je ne perds rien et c’est relativement lisible.
Comment by Yves — 11 September 2008
Le seul qui me vienne à l’esprit : http://www.derbigum.be/
mais quant à en évaluer l’accessibilité, j’avoue que je cale.
Comment by katsoura — 9 September 2009
Samsung offre un large menu déroulant: http://www.samsung.com/be_fr/ind...
Comment by katsoura — 25 November 2009
Allez, encore un 🙂
http://www.marieclairemaison.com...