3 exemples de menus de navigation déroulant

Même si les statistiques prouvent que les internautes utilisent des écrans toujours plus grands, ils ne maximisent pas pour autant la taille de la fenêtre de leur navigateur. Résultat : la largeur de référence pour un site web est (et restera encore pour un certain temps) de 1024 pixels. Mais comme les éditeurs de sites ont de plus en plus de choses à dire / afficher il a bien fallu gagner de la place. D’où le recours aux menus de navigation déroulants (autrement appelés drop-down menu ou fly-out menu).

Je vous propose aujourd’hui de nous intéresser à 3 implémentations différentes de menus de navigation déroulants.

Minimaliste : FlickR

FlickR est un service de partage de photo très simple à utiliser. Simple et minimaliste, à l’image de son système de navigation :

Pas de traitement graphique complexe, ici tout est fait en texte. Une fine bordure est affichée au survol de la souris pour inviter l’utilisateur à s’intéresser à la petite flèche (l’item de navigation ressemblent alors à un onglet). Un clic sur l’intitulé mène à la tête de section alors qu’un clic sur la flèche déroule les items de sous-navigation.

Si l’épuration graphique est en cohérence avec le design du site, force est de constater que la lisibilité laisse à désirer du fait d’un cloisonnement trop faible : on a beaucoup de mal à voir la limite du menu (il manque peut-être une ombre portée).

Maximaliste : American Eagle

À l’opposé de FlickR nous trouvons American Eagle qui propose un menu gigantesque :

Première chose intéressante : le temps de latence. Le menu est déployé (et rangé) au bout d’1/2 seconde, une très bonne chose pour ne pas surprendre les utilisateurs qui laissent traîner leur souris, d’autant plus que le menu est gigantesque et qu’il couvre une bonne partie de la page.

Au niveau du traitement graphique, vous noterez un très bon cloisonnement des différentes sous-rubriques ainsi que des mises en avant (à gauche et en bas). Vous apprécierez également le léger débordement de l’onglet sélectionné. Par contre quel que les liens ne soient pas soulignés au survol de la souris !

Intermédiaire : Threadless

Finissons avec Threadless qui exploite les forces des deux précédents exemples :

Un menu qui est graphiquement très léger tout en apportant un peu de sophistication avec une typo en image. Une interaction très dynamique avec un déroulement immédiat en sans clic. Une très bonne exploitation de l’espace avec des sous-catégories bien cloisonnées et des raccourcis intéressants (cf. les liens « Sales »). Le liseré qui délimite le menu est également un bon dosage entre discrétion et visibilité.

Bref, c’est du très bon travail même si j’aurais tout de même souligné les liens au survol de la souris (je trouve le retour visuel encore trop timide) et si j’aurais ajouté une ombre portée sous le menu pour renforcer l’impression de survol.

Conclusion

Mes conseils pour bien concevoir votre menu de navigation déroulant :

• Ne négligez pas les retours visuels pour attirer l’attention (au survol de l’item de navigation ou des liens dans les menus) ;
• Vous pouvez mettre un grand nombre de liens à condition de bien cloisonner les sous-rubriques ;
• Privilégiez un déroulement automatique du menu plutôt que sur clic de la souris ;
• Le temps de latence est un plus, surtout au niveau de la disparition du menu ;
• N’oubliez pas l’ombre portée pour bien marquer la différence entre menu et « fond de page ».

Si vous avez d’autres (bon) exemples, n’hésitez pas à les publier.