Web design : 8 bonnes pratiques à respecter pour une meilleure navigation

Tout utilisateur qui se rend sur un site souhaite naviguer facilement à travers les différents contenus. Cela signifie qu’il doit savoir où il est et...

Publié par Charlotte Chollat

Tout utilisateur qui se rend sur un site souhaite naviguer facilement à travers les différents contenus. Cela signifie qu’il doit savoir où il est et où il va.

Si le parcours de navigation est trop flou ou trop compliqué il y a de forte chance pour que l’internaute quitte le site web puisqu’il n’arrivera pas à trouver les informations recherchées rapidement.

Pour garder vos utilisateurs sur votre site, les éléments de navigation ne doivent pas être négligés. Voici les bonnes pratiques à respecter…

1. Déterminez l’organisation de votre menu dès le début

Dès le début de votre projet vous devez déterminer les différentes pages qui composeront votre site web. Cela demande de réfléchir aux informations et fonctionnalités que vous offrirez.

Vient ensuite la hiérarchisation de ces informations. Vous pouvez construire un diagramme pour mettre en évidence les différents niveaux de navigation.

Dans la construction de votre arborescence, veillez à respecter les règles qui suivent  :

  • Ne mettez pas plus de 7 rubriques au risque de perdre vos utilisateurs et de compliquer la mémorisation de votre menu
  • Classez vos rubriques par ordre d’importance  : les rubriques au début et à la fin de votre menu attirent plus le regard

2. Soyez descriptif

Les mots que vous employez pour les rubriques de votre menu et dans vos call-to-action doivent être soigneusement choisis. Avant même de cliquer, l’utilisateur doit savoir le type d’information qu’il va trouver sur la prochaine page.

Vos énoncés doivent donc être clairs et précis.

N’hésitez pas choisir des énoncés plus longs, basés sur des mots ou expressions clés descriptifs. Les avantages concernent le SEO et l’expérience utilisateur  :

  • Les moteurs de recherche comprendront plus facilement les sujets / thématiques sur lesquels vous souhaitez vous positionner
  • Les visiteurs pourront se rendre sur des pages répondant réellement à leurs attentes et trouveront plus rapidement ce qu’ils cherchent

3. Ne réinventez pas le web design

Vous pouvez exprimer votre créativité dans vos visuels, vos contenus écrits, dans la disposition de vos éléments ou encore dans la typographie. Mais pas dans les éléments de navigation.

Dans le web design, et comme partout ailleurs, il existe des conventions. Ces dernières fonctionnent car les personnes y sont habituées. Donc, ne les changez pas, sauf si votre « nouvelle » navigation est plus appropriée.

Voici quelques conventions existantes pour la navigation  :

  • Le logo est situé en haut à gauche ou en haut au centre
  • La barre de navigation principale est située en haut de l’écran (horizontale) ou sur la gauche (verticale)
  • L’icône du menu hamburger permet d’ouvrir le menu s’il n’est pas visible (notamment sur mobile)
  • La barre de navigation est responsive

Convention menu

4. Insérez un lien sur votre logo

Il s’agit là d’une autre convention en matière de navigation sur un site web.

Votre logo n’est pas seulement présent pour rappeler aux internautes sur quel site ils se trouvent. Il doit participer pleinement à la navigation, d’autant plus qu’il est situé tout près de votre menu principal.

Lorsqu’un utilisateur clique sur votre logo, il doit être redirigé sur votre page d’accueil.

5. Créez un footer adapté

Jusque-là nous nous sommes concentrés sur le haut de votre site web, mais la navigation peut aussi avoir lieu en bas de page.

Le footer est généralement réservé aux mentions légales et est de plus en plus utilisé pour renseigner les coordonnées et les liens vers les réseaux sociaux.

Mais vous vous demandez peut-être si ce bas de page peut être utilisé pour renseigner un plan de votre site. La réponse à cette question dépend de la quantité d’information que vous avez en ligne.

Pour les e-commerces par exemple, la plupart des internautes s’attend à trouver des informations supplémentaires dans le pied de page  :

  • Service après-vente
  • Carte de fidélité
  • Cartes cadeaux
  • Trouver un magasin
  • Retour des produits et remboursement
  • Conditions générales de vente
  • Etc.

Navigation footer

Pour les « petits » sites internet, le footer n’a pas besoin de contenir le sitemap. Les utilisateurs doivent normalement naviguer facilement à travers le menu principal.

6. Privilégiez une barre de navigation fixe

La navigation dite « sticky » correspond à un menu principal qui reste en haut de page et qui est toujours visible, où que se situe l’utilisateur.

Cette pratique est idéale sur les sites one page puisqu’elle permet aux internautes de poursuivre leur navigation facilement, sans qu’ils aient besoin de remonter en haut de la page.

Alternative
Si votre barre de navigation n’est pas fixe, ajoutez à minima un bouton permettant le retour en haut de page.

7. Indiquez où se trouve le visiteur

Les utilisateurs de votre site doivent toujours savoir où ils se situent. Pour cela, plusieurs solutions peuvent être combinées  :

  • Mettez en évidence par une couleur la rubrique du menu principal où se situe l’internaute
  • Ajoutez un fil d’Ariane
  • Ajoutez une bannière en haut de chaque page avec le titre de cette dernière

8. Utilisez à bon escient le mega menu

Le mega menu correspond à un large panneau de navigation qui apparaît lorsqu’on clique ou que l’on passe la souris sur un item du menu principal. Ce type de menu permet à un utilisateur de voir en un seul coup d’œil toutes les options et sous-pages qui se cachent derrière un énoncé.

Le mega menu est donc pratique, mais seulement lorsqu’il est bien utilisé  :

  • Préconisez-le sur un site e-commerce ou tout autre site qui dispose de nombreuses catégories ou de nombreux services.
  • Visuellement, hiérarchisez les informations en les classant par catégorie et/ou en intégrant des icônes explicites.

Mega Menu Adidas

La navigation d’un site web a un impact sur votre trafic et vos conversions. Veillez donc à respecter toutes ces bonnes pratiques pour répondre aux besoins de votre cible.

Si vous avez besoin d’aide dans la création de votre web design, faites appel à un freelance qualifié sur Codeur.com.

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Webmarketing

Facebook et ses connexions en une image

Paul Butler, un employé du réseau social, s’est amusé à tracer les connexions Facebook pour les représenter sur un planisphère. Le résultat ? L’image ci-dessus...

Publié le par Team WebActus
Webmarketing

Skype 8.0 : mise à jour obligatoire avant le 1er septembre 2018

La nouvelle version de Skype, Skype 8.0, est disponible. Elle intègre un nouveau design plus moderne et des fonctionnalités bienvenues. Autre info à...

Publié le par Thomas Coeffe