Certains sites web nous rendent perplexes… La section « Nous contacter » mène au produit et on peine pour trouver le bouton « Acheter ». Autrement dit, on rame. Alors que sur d’autres, la navigation est simple comme bonjour et chaque bouton mène naturellement au suivant.

Lorsque vous créez un site internet, les différents éléments de la page doivent s’accorder pour permettre aux visiteurs du site de l’explorer avec fluidité et simplicité. C’est le rôle du menu. Il est absolument déterminant pour l’expérience utilisateur d'optimiser la navigation sur votre site. Voyons cela de plus près.

Que sont les menus web ?

Un menu web est une série de liens permettant de naviguer entre les différentes pages ou sections d’un site. Il existe plusieurs sortes de menus, en fonction du contenu et du design des pages. On retrouve :

• Le menu de navigation classique : ce menu le plus répandu est placé dans l’en-tête du site web, généralement sous forme de liste horizontale.
  

• • Le menu sticky : également appelé menu fixe ou flottant, il reste en place lorsque les internautes font défiler la page. Il est idéal pour les sites one-page.
  

• Le menu Hamburger : une icône composée de trois bandes horizontales qui ouvre un menu lorsqu’on clique dessus. Il est particulièrement utilisé pour les versions mobiles.
  

• Le menu déroulant : un menu dans lequel une liste d'options supplémentaires s'ouvre lorsque les visiteurs cliquent sur (ou survolent) l'un des éléments. Celui-ci convient aux sites avec beaucoup de contenu.
  

• Le menu sidebar (ou barre latérale) : une liste des éléments du menu située à gauche ou à droite d’une page web.

Passons à la pratique. Ci-dessous, vous trouverez 10 exemples inspirants de menus web conçus avec Wix. Ils sont la preuve vivante que les menus peuvent être utilisés de façon créative. Associez les dernières tendances web design aux bonnes pratiques de navigation sur le web et vous obtiendrez le combo parfait.

01. Brittney Johnson : une navigation interactive

Brittney Johnson place la facilité de navigation au cœur de son portfolio en ligne. Si bien que la page d'accueil est uniquement dédiée au menu. Les œuvres de Brittney sont listées à gauche et, lorsqu'elles sont survolées, une image du projet apparait à droite.

La sidebar, créée via Velo by Wix, transforme la navigation du site en une expérience agréable et interactive. Il y a aussi un menu minimaliste dans l’en-tête du site pour pouvoir à tout moment se rendre sur la page « À propos » et la page d’accueil.

02. Payton Pitts : un menu hamburger revisité

Le site de photographie de Payton Pitts est à la pointe des tendances avec son logo en écriture manuscrite et ses couleurs ocres. La navigation est élégante, avec une grande icône hamburger aux lignes de taille différente, pour un look unique.

Lorsqu’on clique dessus, le menu s'ouvre dans une sidebar (créée avec une lightbox) qui occupe la partie gauche de l'écran avec une jolie peinture abstraite. Notez que les liens de réseaux sociaux de Payton sont placés comme un menu secondaire plus discret sur la droite.

03. Yang’s Place : une navigation simple axée sur la marque

Le site web du restaurant chinois Yang’s Place met en valeur la marque avec son logo situé au premier plan à la fois dans l’en-tête du site web et dans le menu plein écran. Le logo sur l'en-tête reste fixe sur toutes les pages et renvoie les visiteurs à la page d'accueil – c’est idéal pour améliorer l'expérience utilisateur.

La navigation sur ce site passe par un menu hamburger (qui s'ouvre sur un menu plein écran) et une disposition géométrique de photos et de zones de texte sur la page d'accueil, créées via la Wix Pro Gallery.

04. Protea : un menu classique à découvrir

Avec de grandes images de mets et de sa salle dans la Napa Valley, le site web de ce restaurant met en valeur les plats fraîchement préparés et l’ambiance chaleureuse. La navigation reste classique avec un menu qui n’apparait que lorsque l’on clique sur l’icône hamburger.

Une fois le menu ouvert, il reste fixe sur la page même lorsqu’on la fait défiler, comme un menu flottant. Une sidebar à droite de l’écran dirige les visiteurs vers les différents comptes de médias sociaux du site et un bouton d’appel à l’action au haut de page permet de réserver une table à tout moment.

05. William LaChance : un menu long scrolling animé

Le portfolio de cet artiste comporte un menu sidebar classique, mais aussi un menu avec des images et des boîtes vidéo qui s’animent lorsqu’on fait défiler la page. Il utilise des animations et des couleurs flashy pour attirer l’attention des visiteurs.

Cette partie vive et colorée contraste avec la sidebar plus sobre. La navigation est donc à la fois simple et interactive. Contrairement aux animations qui ne figurent que sur la page d’accueil, la sidebar se trouve sur toutes les pages internes du site.

06. I Love Dust : un menu dispatché aux quatre coins de l'écran

Le site web de cette agence de graphisme en met plein la vue, avec une vidéo plein écran un tantinet psychédélique qui présente le travail du studio. À l’inverse, le menu du site est simple et statique, avec un élément dans chaque coin de l’écran.

Pour obtenir un menu fractionné, une des dernières tendances de web design, il suffit d’épingler des éléments sur les côtés de votre écran.

07. Mantra : un menu plein écran avec un message

Mantra est un studio de design axé sur le sport et de fait, on tombe sur une vidéo plein écran qui remue lorsqu’on accède à son site. Quand on clique sur l’icône hamburger, l’écran devient tout bleu et n’affiche que cinq éléments de menu en grandes lettres blanches.

Choisir de placer le menu sur tout l’écran est audacieux et cela s’accorde parfaitement avec le style de ce site. La police de grande taille renforce ce sentiment de fougue et en fait LE menu adapté au design.

08. Stolen Goods : un menu simplet et efficace

Les articles de cette boutique en ligne font de l’effet avec leurs motifs joliment illustrés, sérigraphiés à la main. Le design épuré du site et les espaces blancs permettent de mettre les photos de produits en valeur. Mais en tant que véritable marque de design et d’art, vous pouvez compter sur Stolen Goods pour donner vie au site avec un style exceptionnel.

Le menu d'en-tête classique a été retravaillé, attirant l'attention des visiteurs avec une typographie large et colorée. Sa palette de couleurs pâles est aussi plaisante que fonctionnelle. Elle permet de savoir sur quelle page on se trouve grâce aux tons rose et bleu.

09. Ruby Love : un menu déroulant pour une boutique eCommerce

Spécialisé dans des produits de protection pour la période menstruelle, Ruby Love propose une pléthore d'articles : sous-vêtements, pyjamas, maillots de bain etc. Ainsi, ce site eCommerce a besoin d’un système de navigation capable d’inclure toutes ces infos.

Le menu déroulant est idéal : une nouvelle liste s’ouvre lorsqu'on survole un élément. Avez-vous remarqué la femme au premier plan qui a le regard tourné vers le menu ? Cet effet subtil peut aussi contribuer à accroître l'engagement des utilisateurs du site.

10. Doris Liou : un menu illustré avec des animations surprises

Ce portfolio comporte les dessins de l’artiste californienne Doris Liou. Le menu d'en-tête illustré donne une ambiance conviviale. Chaque icône est réalisée au crayon, avec un petit journal pour la page « Illustration » et une fleur pour les « Médias sociaux ».

Lorsque les icônes de menu sont survolées, des gifs colorés et animés s’y introduisent et les rendent vivantes. Et quand nous survolons le nom de l’illustrateur, nous pouvons voir un petit personnage enjoué flotter. Ce bonhomme sympathique se trouve également dans le favicon du site, liant ainsi le tout et ajoutant un plus à la marque et à la visibilité du portfolio.