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.

Si vous aussi vous êtes fan de l’interface de l’iPhone alors je vous recommande vivement de consulter les recommandations officielles pour concevoir des interfaces : iPhone Human Interface Guidelines. Un document très intéressant pour comprendre la logique des interfaces et surtout les recommandations pour prendre en compte les contraintes d’affichage.

On y apprend donc que l’interface est découpé en différentes zones (status bar, navigation bar, toolba, tab bar…) :

Que la barre de navigation utilise des boutons distincts pour la navigation et les actions :

Qu’il existe différent états et comportement des fenêtres (action sheet, nodal view, alert) :

Bref, une documentation très instructive et remarquablement bien faite. J’aime particulièrement cette entrée en matière : “Great applications follow certain fundamental human interface design principles, regardless of the hardware they run on. That’s because these principles are based on the way people—users—think and work, not on the capabilities of the device“.

Pour faire suite aux articles de Frédéric “Tout savoir sur les chemins de navigation (breadcrumb)” et “Peut-on se passer des menus de navigation ?” voici une découverte très intéressante que je souhaite partager avec vous.

Il s’agit de l’article 37 Examples of Unique Navigation sur inspiredology.com.

J’ai particulièrement aimé ma visite sur les trois sites suivants :

Jaymeblackmon.com pour les rolovers du menu de navigation

Porsche.com pour les gros menus présentant les modèles de Porsches.

Salinas-rio.com.br pour l’ajout des illustrations dans le menu de navigation

Et vous, quels sont vos préférés ?

Lorsque vous vendez du service (ou même des produits avec beaucoup de caractéristiques techniques), il est essentiel de bien présenter les différentes offres et surtout de ne pas générer de la confusion chez le prospect. Plus facile à dire qu’à faire car vous pouvez avoir des offres très similaires ou complexes à présenter. Idéalement il faut un tableau comparatif qui donne envie et où chacun va trouver facilement l’offre qui lui correspond et se persuader qu’elle est mieux que les autres.

Pour attayer votre réflexion je vous propose donc deux très bons articles : Pricing Tables: Examples And Best Practices et Design Decisions: The new Highrise signup chart.

Dans le premier article, il est question des meilleures pratiques :

• Faire ressortir les différences et non les similitudes ;
• Mettre en avant un choix pour faciliter la prise de décision des indécis ;
• Ne pas surcharger le tableau pour pouvoir utiliser une typo plus grande ;
• Clôturer le tableau avec des appels à l’action simples.

Pour illustrer ceci, voici un exemple avec le très bon tableau des offres de CrazyEgg :

Dans le deuxième article, il est question de la refonte du tableau de présentation des offres de Highrise dont voici la version initiale :

Vous noterez le côté brouillon de ce tableau avec beaucoup de bruit et du contenu difficile à décrypter (trop de tailles de typo différentes, de couleurs et stimuli visuels). Voici la version finale :

Nous avons ici une page bien plus incitative avec une belle promesse au-dessus du tableau, moins de bruit, une meilleure segmentation (“For big groups, For small teams…“) et des appels à l’action bien plus visibles. Vous noterez également qu’il existe une offre gratuite mais qu’elle est complètement mise en retrait (en bas à gauche du tableau).

Pour prolonger cette réflexion je vous engage à visiter les sites des constructeurs automobile US qui proposent  des Car Comparator très intéressants.

C’est une bien surprenante observation que nous livre la société Miratech (spécialisée en eye-tracking) dans sa dernière newsletter : La deuxième annonce Google est plus regardée que la première.

Cette affirmation est fondée sur une séance d’observation d’une quarantaine d’internautes français, américains et japonais. Les enseignements sont les suivants :

• Le deuxième lien sponsorisé est plus regardé que le premier et même plus que les second et troisième liens organiques ;

  

• Les liens sponsorisés ne sont pas regardés dans l’ordre ;
• Les liens sponsorisés de haut de page sont plus regardés que ceux de droite ;
• Le sixième lien sponsorisé de droite est plus regardé que les quatrième et cinquième ;

  

• Les images modifient le schéma de lecture.

  

Voilà qui est donc très instructif et qui nous confirme que les résultats organiques (en particulier le premier lien) sont le centre d’attention de la page, du moins dans une liste de résultats textuels car les vignettes d’images ou de vidéos attirent immanquablement l’oeil.

Cette observation qui vient compléter une précédente étude d’occulométrie publiée par les équipes de Google : Eye-tracking studies: more than meets the eye.