Conseils pour construire la navigation de votre site

Pour que vos visiteurs ne se perdent pas dans le labyrinthe des pages de votre site, il y a, dans la création web. UN élément décisif qui fera le succès ou non de votre site : la navigation entre vos pages. Vous êtes nombreux à nous avoir demandé des conseils pour concevoir une bonne navigation. La team WebAcappella répond à vos questions !

Comment concevoir une navigation ?

La navigation de votre site doit toujours être simple et intuitive. L’internaute qui visite votre site ne doit pas passer son temps à chercher l’information qu’il désire, il doit la trouver en un ou deux clics grâce à une bonne hiérarchisation de vos pages.

Le premier conseil de la team WebAcappella est le suivant : avant d’ouvrir le logiciel pour commencer à réaliser votre site, prenez un crayon à papier et une page blanche pour lister toutes les pages que vous allez devoir créer puis concevez votre plan de site : hiérarchisez, classez vos pages. Si vous avez beaucoup de pages et que certaines d’entre elles tournent autour d’un même sujet, essayez de les regrouper dans une même rubrique.

Combien de menus différents peut-on mettre dans un site ?

Pour votre site vitrine ou votre boutique en ligne, vous pouvez utiliser plusieurs types de menus.

Dans le cadre d’un site vitrine, un seul menu de navigation suffit. Placé en haut de vos pages pour être tout le temps visible, le menu, qu’il soit horizontal ou vertical, servira de repère visuel à l’internaute. Le visiteur saura toujours où aller pour naviguer à l’intérieur de votre site et trouver les pages qu’il souhaite. Ainsi, placez le toujours au même endroit.

Un conseil : comme indiqué dans l’article sur les Maquettes et Pieds de Page, utilisez une maquette pour construire votre site et insérez-y votre menu de navigation. Vous serez sûr de l’avoir fixé toujours au même endroit.

Dans le cadre d’une boutique en ligne, nous conseillons d’avoir deux types de menus :

  • Un menu horizontal placé en haut de page pour mettre en avant vos pages génériques comme « Accueil », « A propos de la boutique », « Conditions Générales de Vente » et « Contact ».
  • Un menu latéral orienté « Produits » qui classera en catégories les produits proposés sur votre site.

Menus dynamiques, boutons, quelle solution choisir ?

Si vous avez peu de pages dans votre site et que vous n’avez pas une navigation à tiroirs qui hiérarchise l’ordre et l’agencement de vos pages alors amusez-vous avec l’élément « boutons ». Autrement, préférez les menus dynamiques que vous pourrez ajouter à votre page, comme les boutons, dans le menu « Insérer » dans WebAcappella.

a) Les boutons

boutonAjoutez un élément « bouton » dans votre page et commencez par définir l’aspect général du bouton (glossy, dégradé ou uniforme) ainsi que le degré d’arrondi de ses coins.

Ensuite, il est temps de passer à une phase importante : fixer des règles de couleurs pour les différents « états » du bouton :

  • L’état « normal » c’est à dire l’apparence du bouton quand il est inactif.
  • L’état « survolé » lorsque la souris passe dessus le bouton
  • L’état « actif » quand le bouton correspond à la page en cours de visualisation.

Un conseil : il est intéressant de jouer avec les couleurs et avec le texte (souligné ou non) pour bien définir 3 états différents au bouton. Ainsi, visuellement, l’internaute comprendra où il est dans le site et où il doit cliquer pour afficher une nouvelle page.

Pour finir, vous allez pouvoir décider de souligner ou non le texte, d’ajouter un pictogramme qui s’affichera dans votre bouton (votre logo par exemple) puis de donner un effet « d’ombre portée ».

Une fois les différents effets paramétrés, cliquez sur les autres onglets de l’inspecteur de propriétés de l’élément bouton. Il est temps maintenant de donner un nom à votre bouton, de choisir les propriétés du texte qui seront identiques pour tous les états du bouton (police, taille, etc) et de définir le lien vers la page de votre site.

b) Les menus dynamiques

Parfait pour les sites ayant beaucoup de pages ou une navigation nécessitant une hiérachisation des pages, le menu dynamique devra être pensé et construit à partir d’un menu principal (visible tout le temps) et de sous menus qui s’afficheront au survol de la souris.

Insérez dans un premier temps votre élément « menu dynamique » dans la maquette de votre page puis cliquez sur la liste déroulante pour choisir entre un menu horizontal ou vertical.

menuDans le cadre principal, vous allez pouvoir créer votre navigation et ajouter un menu et des sous-menus grâce aux onglets « «+ », « – ». Hiérarchisez ensuite vos pages en cliquant simplement sur les flèches.

Pour chaque menu et sous menu, pensez à lui donner un nom et à sélectionner la page vers laquelle il redirigera l’internaute.

Dès que vous avez fini de construire votre navigation, passez à la seconde étape en cliquant sur l’onglet «  Aspect du menu dynamique » dans l’inspecteur de propriétés. Ici, vous allez pouvoir paramétrer tous les aspects visuels de votre menu principal puis de vos sous-menus :

  •  le type de police, la taille, la couleur
  •  le fond de couleur en dégradé ou uni
  •  le style survolé
  •  la bordure de votre menu : coins de la bordure pour un effet arrondi, couleur des séparateurs entre les onglets du menu et couleur de la bordure.

Cliquez ensuite sur l’onglet « Sous-menus » pour en définir les aspects visuels.

Vous n’avez maintenant plus qu’à tester votre site pour vérifier l’apparence de vos menus puis, une fois satisfait, publiez-le.

Voilà quelques conseils qui, nous espérons, vous aideront à concevoir une navigation optimale pour votre site. A bientôt pour un prochain article.