Hihi

Mesdames et messieurs les graphistes, développeurs, intégrateurs ou que sais-je encore, approchez, approchez ! Aujourd'hui nous avons de très beaux menus à vous présenter et, en cette période de solde, nous vous faisons cadeau d'une remise de -20% pour tout achat de menu déroulant, d'onglets ou même de menu latéral... Profitez-en, vous ne verrez pas ça tous les jours !

Dans la grande foire de la navigation, il y a un élément des plus primordial : les menus. Il y en a de toutes les formes, toutes les couleurs, bref il y a de la matière d'oeuvre pour les créatifs. Néanmoins, il ne faut pas oublier qu'un menu est un outil de navigation qui compte à lui seul pour une grande partie de l'ergonomie d'un site. Faisons ensemble un petit tour d'horizon des menus les plus fréquemment rencontrés pour en saisir les avantages et inconvénients.

Les menus verticaux

La première forme de menu la plus fréquente est le menu vertical positionné sur le côté du contenu. Il se décline en plusieurs formes : à gauche ou à droite, une colonne ou plusieurs, encadrant le contenu, etc. Chaque forme correspond à un usage particulier : en effet, le menu à gauche sera accessible au premier clic, mais s'effacera rapidement devant le contenu, tandis que le menu à droite prolongera le contenu (puisque nous lisons de gauche à droite) et sera plus visible aux yeux du visiteur qui y reviendra en fin de lecture si quelque chose s'y trouvant l'a attiré (couleurs vives, logo, titre particulier,...). La multiplicité des colonnes permettra de séparer le menu en plusieurs blocs indépendants de manière à diminuer la hauteur du menu, favorisant ainsi l'organisation de la navigation et évitant d'avoir à faire défiler trois mètres de texte pour accéder à un lien qui nous intéressait (ce qui est particulièrement vrai pour certains blogs qui ont des menus interminables à cause des nombreux widgets rajoutés. La position de ces colonnes (côté à côte ou de chaque côté du contenu) permet de compartimenter la navigation ou au contraire de lui donner une unité en fonction de la relation entre les différents éléments du menu.

• Les plus : Accessible pendant la lecture du contenu.
• Les moins : Peu d'originalité, une largeur réduite en inhérente à la faible résolution du visiteur peut entraîner une longueur excessive du menu s'il est mal pensé.

Les menus horizontaux

Disposés généralement en haut de la page, avant ou après le header, ces menus sont les plus visibles car ils sont situés avant même le contenu. Si le visiteur cherche un lien, il sait qu'il n'a qu'à remonter en haut de la page pour le trouver, il n'a pas à le chercher. Ce menu peut être de type classique ou alors déroulant (nous y reviendrons plus tard) de manière à contrebalancer le faible nombre d'éléments qu'ils peuvent contenir. Attention toutefois à ce type de navigation qui peut bousiller tout un gabarit sous de très faibles résolutions (périphériques mobiles, etc) étant donné qu'ils ne sont généralement pas prévus pour s'étaler sur deux lignes.

• Les plus : Très visible et facilement accessible.
• Les moins : Peu de place, se limite uniquement aux catégories principales.

Les footers-menus

Vous avez probablement déjà rencontré un blog sur lequel vous n'avez aperçu aucun lien de navigation avant d'arriver en bas de page où ce concentraient tous les liens sur plusieurs colonnes. Ce nouveau type de menu a commencé à se répandre en 2006 et son principal mérité est de centrer l'expérience du visiteur uniquement sur la lecture du contenu : celui-ci n'est pas tenté par un autre lien voisin du contenu pendant sa lecture et peut se réorienter rapidement une fois l'article lu. Malheureusement, la mise en valeur du contenu à un prix à payer puisqu'une personne non intéressée par le contenu va plus facilement fermer l'onglet du navigateur que visiter un autre lien qui aurait pu l'intéresser. Un autre inconvénient est de devoir descendre tout en bas de la page pour accéder à la navigation, surtout si la page est longue (page d'accueil d'un blog, grand billet et nombreux commentaires, etc. L'expérience est donc peu agréable pour le visiteur et limite le nombre de pages vues.

• Les plus : Une mise en valeur indéniable du contenu.
• Les moins : Difficultés liées à la mise en retrait du système de navigation.

Les menus déroulants

Qu'il s'agisse de menus verticaux ou horizontaux, ils peuvent être déroulants grâce à une surcouche de Javascript. Cela permet dans un premier temps d'avoir une information concise sur la catégorisation du site, puis ensuite de préciser son choix au passage de la souris. Attention toute fois aux problèmes inhérents à l'utilisation du Javascript : le menu doit être utilisable même dans le cas où le Js est désactivé. C'est à dire qu'il faut dans un tel cas soit afficher les sous catégories directement dans le menu originel grâce à une sous-liste (pour un menu vertical par exemple), soit rendre les catégories cliquables et donnant accès à une page sur laquelle l'on retrouve un menu complémentaire avec les sous-catégories. Cela implique donc le déploiement d'un dispositif annexe de navigation qui n'utilise pas le js, d'où l'apparition de contraintes de développement supplémentaires.

• Les plus : Un menu concis au premier coup d'oeil, mais précis au passage de la souris.
• Les moins : Une navigation non dynamique doit être disponible pour prévenir les cas où la navigation dynamique ne serait pas utilisable.

Synthèse

Il existe de nombreux moyens de navigations, certains sont listés ici, d'autres ne le sont pas et d'autres enfin restent à inventer. Chacun d'adapte à un type de contenu, à une mise en page particulière et chacun a aussi des inconvénients qu'il convient de minorer pour rendre l'expérience du visiteur à la fois agréable et simple. Pour se faire, il est possible de combiner plusieurs types de navigation de manière à obtenir une ergonomie satisfaisante en compensant les faiblesses de certains menus par l'ajout d'autres menus. Le but du jeu est ainsi de faire s'effacer la navigation face au contenu et d'inciter le visiteur à voguer de page en page et à ainsi rester le plus longtemps possible sur votre site. S'il reste longtemps, s'il se trouve intéressé par votre contenu et qu'il n'est pas dérouté par la navigation, il y a fort à parier qu'il reviendra et qu'il ne reviendra pas seul. Négliger l'ergonomie de la navigation d'un site est au final aussi voire plus grave que négliger son contenu.

Chaque Noël que nous passons est un évènement tout aussi marquant que notre anniversaire. Imaginez alors que telles le nombre croissant de bougie que nous posons chaque année sur le gâteau d'anniversaire qui nous est d'ailleurs bien souvent dédicacé, nous ajoutions à chaque Noël un sapin de plus dans la maison. La demeure ressemblerait vite à une forêt, et il ne serait pas rare de voir l'oncle traditionnellement vêtu de son costume rouge et de sa longue barbe blanche se balancer de guirlande en guirlande avec les cadeaux dans sa hotte. Les petits singes qui ont été tout sauf sages tout au long de l'année mais qui auront de toute façon droit à leur cadeaux se balanceront des boules, à couverts derrière les troncs des sapins qui, en perdant leurs épines, formerait un nouveau tapis sur le carrelage glacé de la salle à manger. Tellement épineux d'ailleurs que l'oncle ayant malheureusement raté la dernière guirlande avant la livraison annuelle pourra passer le reste de la soirée à se passer de la pommade sur le derrière.

Vous imaginez le tableau ? Risible vous croyez ? Meuh nan, même pas. En attendant, moi je file chercher le tube de pommade, j'ai le derrière en compote. Ha, et j'oubliais : Joyeux Noël au peu de lecteurs qu'il me reste ainsi qu'aux autres !

Si j'ai un peu de temps à moi demain et si cela vous dit, je peux refaire un petit podcast de Noël musical comme l'année dernière. Manifestez-vous dans les commentaires (si vous arrivez encore à aligner deux mots sur le clavier après avoir usé et abusé du champagne et avoir vidé la cave des grands parents) ! Retour des billets sérieux dès demain (normalement).