. Comment créer un menu efficace pour son site (ou blog) -

Comment créer un menu efficace pour son site (ou blog)

Posted by Harmony Com 0 comments

Dernièrement j’ai servi d’interface pour une cliente avec le webmaster. Et j’ai pu voir à quel point le concept de menu (ou arborescence) pour un site était encore flou !

Alors je me suis dit qu’un article pourrait être utile, même si mon guide gratuit pour créer un site pro vous donne des conseils à ce sujet.

La navigation d’un site (ou blog) permet d’accéder aux différentes pages ou catégories d’articles : elle est cruciale. L’arborescence est le « plan » du site, avec ses pages et sous-pages.

créerun menu de site ou blog efficace

Les conseils de base pour un menu de site efficace

  • faîtes simple : sauf rares cas (par exemple activité très créative, originale), mieux vaut utiliser des termes simples, clairs, que l’internaute a l’habitude de trouver dans un menu. Il doit comprendre de suite, même dans la rue, dans le bus sur mobile, etc… Donc laissez de côté vos élans créatifs pour le menu !
  • faîtes court. Un menu peut s’agrandir au fil du temps et si vous utilisez 2-3 mots par section, ou plus parfois dans les sous-pages, votre menu deviendra rapidement trop grand et ne tiendra plus sur une page. Préférez la création d’un autre sous-menu au besoin, que vous pouvez placer en sidebar (barre latérale)

Isabelle Mathieu (référence des médias sociaux) a opté pour un menu minimaliste. Elle a en revanche évité les sous-pages pour la page « services »,  en mettant des icônes et titres directement dans la page (en contenu). Ils font office de sous-menu. Plus sympa visuellement, mais ce système n’ayant pas de liens, il est moins favorable pour le référencement (SEO).

menu de site simple

Voici un menu très différent, original sur le texte comme sur la forme : à réserver à des cas particuliers. Comme ici, Michel et Augustin, qui a toujours misé sur l’originalité.


menu original

Exemple typique de menu pour un site vitrine simple :

  • accueil
  • présentation
  • produits ou services (avec sous-pages au besoin pour les différentes familles de produits ou service)
  • références, témoignages ou portfolio
  • contact

Pour un site e-commerce, je vous invite à voir cet article. Vous aurez forcément des sous-menus avec les catégories d’articles, un menu pour les comptes clients, un autre (en général en pied de page) pour les CGV, etc…

Et pour tout site on a souvent un menu en footer (pied de page) avec les mentions légales, CGV si nécessaire, etc…

Alors ne cherchez pas à tout mettre sur un seul menu : il est souvent illisible, trop chargé. Proposez l’essentiel en vous rappelant que des liens peuvent ensuite être mis sur les pages, dans le contenu. Tout n’a pas à figurer sur le menu principal. Mettez-vous à la place du visiteur pour lui présenter ce qu’il cherchera en priorité et avec ses mots.

Certains outils et templates (thèmes graphiques) vous limitent en terme de nombre de menus. Si vous avez besoin de plusieurs menus et que c’est vraiment important pour votre activité, ceci peut guider votre choix de solution ou de template. Pour des outils tels que WordPress, on peut néanmoins compter sur des outils (plugins, site builder) pour ajouter des menus à un template.

Profondeur du menu

On dit souvent qu’il faut que le visiteur puisse accéder au contenu souhaité en 3 clics maximum.

C’est juste un repère mais il permet de garder en tête de proposer un menu intuitif, clair. Particulièrement important pour un site e-commerce. Il faut bien penser les catégories d’articles, pour qu’elles parlent de suite au client potentiel.

Pour un blog on utilise en général 2 menus principaux :

  • un pour les pages (à propos, contact…), comme sur ce blog tout en haut
  • un pour les catégories d’articles, que j’ai mis sous le 1er menu sur ce blog

Aspect

Ne négligez pas l’aspect du menu : il doit aussi être clair, facile à lire.

Préférez une police très lisible et choisissez une taille suffisante pour que la lecture soit aisée.

Côté couleurs, même conseil : évitez les couleurs flashy, le noir sur un bordeaux, du jaune sur du blanc, etc… Bref, on reste sur la lisibilité avant tout.

On peut par exemple :

  • utiliser juste du texte, sans « bouton » (souvent un choix judicieux pour des sites e-commerce lourds)
  • mettre un bouton très léger, par exemple avec juste un contour, une barre dessous pour le délimiter (comme sur ce blog), une barre sur le côté qui sépare les éléments…
  • utiliser des boutons avec un fond foncé, et un texte blanc ou très clair
  • et l’inverse, avec un fond de bouton très clair et un texte foncé
  • ajouter une icône, une image (comme sur le menu Michel et Augustin). Attention : l’effet peut vite être brouillon. L’image doit rester discrète et ne pas faire des boutons trop larges, au risque de ne pas avoir le menu sur une seule ligne

Les sous-pages doivent aussi être lisibles. Ici on préfère en général utiliser un fond pour les boutons, de façon à ce que le menu reste lisible, en se détachant du contenu présent dessous. Conservez un ensemble cohérent pour les polices et les couleurs, avec le menu général.

menu e-commerce

Même chose si vous avez plusieurs menus. En revanche, jouez au besoin sur la taille du texte pour hiérarchiser l’information. Par exemple le menu pour les comptes clients ou les CGV est généralement beaucoup plus discret que le menu général. Par exemple ci-dessus, La Redoute a choisi en haut à droite un menu avec des icônes mais une police plus petite.

Vérifiez aussi que lorsque le bouton est cliqué ou survolé, le menu reste lisible.

Enfin :

  • adaptez les espaces entre les éléments du menu à sa taille. Evitez de tout coller néanmoins si le menu est chargé : pensez plutôt à créer un autre menu pour l’aérer, ou des sous-pages
  • conservez le même menu au même endroit sur toutes les pages du site
  • vérifiez que votre menu est bien responsive design (ou que vous proposez un site pour mobile)

Voilà, vous avez de quoi proposer un menu efficace pour votre site ou blog !

Sandra PEREZ – Harmony Com

 

Harmony Com
The following two tabs change content below.
Sortie d'une école de commerce (marketing et gestion), après quelques expériences commerciales, je suis tombée dans le web dès 99. Webmaster freelance dès 2004, j'étais déjà spécialisée TPE ! Avec le web 2.0, j'ai repris une activité plus conforme à mes compétences : la communication pour TPE. Ma philosophie : du sur mesure qui va à l'essentiel ! Conseil / accompagnement - Rédaction commerciale - Social média - Print / logo
Laissez un commentaire : votre e-mail ne sera jamais utilisé ! En laissant un commentaire, vous acceptez la politique de confidentialité du blog.

Nom

Email

Site web

Previous Post
«
Next Post