icone conception UX design

Le design du menu de navigation relève des techniques de conception UX design.
Découvrez des exemples illustrés et des ressources pour concevoir vos systèmes de navigations de site web.
Des modèles de wireframes et une formation en ligne sont disponibles en accès payant.

Navigation et conception de site web

Révisé en Octobre 2019

Définitions du design de navigation

design de navigation

Comment concevoir la navigation de votre site web ? Quel système de navigation devait vous choisir ? Quelles techniques et quelles méthodes pour opérer des choix en matière de design de navigations ?
Cet article présente des méthodologies pour vous aider dans le design de navigation de votre site web. Ce travail relève de l'architecture de l'information, du design de l'information et du design de l'interaction. La démarche s'inscrit dans le cadre de la conception éditoriale et de la conception fonctionnelle. Designer le menu de navigation est une étape stratégique, et pourtant, vous trouverez relativement peu de documentation sur le sujet, qu'il s'agisse du web, de publications, ou d'ouvrages. Pourquoi tant de mystères autour d'un sujet pourtant si simple ?
Avant d'aller plus loin, vous pouvez visualiser une sélection d'exemples de design de navigation réalisés par le studio IAFACTORY.

Le design de navigation est l'étape qui consiste à définir le système de navigation de votre site web : les principaux raccourcis, le nombre d'items de navigation ainsi que la forme du menu de navigation. La navigation permet aux utilisateurs finaux d'explorer le dispositif digital et de se mouvoir dans la structure du site. On parle de parcours navigationnel.
C'est une étape qui semble parfois relever d'un choix de conception purement esthétique ou de partis pris du concepteur. En réalité, le design de navigation poursuit plusieurs logiques et nous allons décortiquer les différents points qui influencent le design du menu de navigation et le choix du type de navigation le plus adapté à un site...

Dans les faits, le design de navigation est directement relié aux choix opérés en matière de segmentation éditoriale et d'arborescence. Il est également question de tenir compte des enjeux en matière de référencement SEO (search engine optimization). Le design de l'interaction et les parcours d'utilisation sont naturellement au coeur du design de navigation dans la mesure où le menu joue un rôle de raccourcis vers les éléments les plus importants du dispositif digital : la notion d'importance concerne l'émetteur (flux business) mais aussi les récepteurs (flux usager). Il y a donc des enjeux en matière d'UX design d'expérience utilisateur...
Les problématiques ergonomiques sont également très présentes dans le design de navigation. Et les considérations de design adaptatif doivent également être prises en compte...

Comme vous le voyez, beaucoup de paramètres viennent faire pression sur l'étape du design de navigation. Nous allons faire le point sur chacun d'entre eux.

Design de navigation et besoins du commanditaire

Un site web poursuit des objectifs économiques, d'image de marque, de communication... La navigation doit naturellement être le reflet des offres business du commanditaire, dans la mesure où la navigation est un élément de positionnement du site. En effet, la navigation d'un dispositif digital est un élément de positionnement stratégique. Les labels de niveau 1 figurent au côté du logo dans l'en-tête, avec les principaux éléments d'identité visuelle...

Le design de navigation doit permettre de visualiser les activités principales du commanditaire pour un site business, ou les chaines de contenus les plus importantes pour un portail éditorial. Ces critères d'importance considèrent des données de trafic et des indicateurs de performances économiques (transformation). Il apparaît naturel que les principaux points de navigation soient aussi ceux qui permettent à l'annonceur d'assurer la pérennité de ses activités en ligne et hors ligne.
Elémentaire, me direz-vous... Pas tant que ça en fait. Observez les processus de design autour de vous et vous verrez que le design de navigation relève bien souvent de l'ésotérisme, sous couvert d'ergonomie ceci et d'UX design cela.

La navigation est d'abord un outil de démarcation stratégique pour l'annonceur, dans une logique communicationnelle et business : contraste et différentiel concurrentiel, positionnement stratégique, clarification de l'offre de services, de produits et de contenus offert par l'émetteur. Il faut pouvoir embrasser les offres en un coup d'oeil. Concevoir et designer un menu de navigation présuppose un travail sur l'architecture de l'information... Architecture de l'information ?

Architecture de l'information et navigation

L'architecture de l'information est le système qui sous-tend l'organisation des contenus et des services d'un site. On le matérialise généralement sous forme d'arborescence. L'arborescence implique une logique de classification hiérarchique, par niveaux fédérée autour de thèmes centraux. Dans les faits, un site internet n'est absolument pas un système arborescent :)... un site internet repose sur la structure fondamentale du lien (lien hypertexte) qui implique une structure d'organisation des contenus analogique : association d'idées, liens, maillage. Un site est une toile, et pas une arborescence !

Il est important de clarifier qu'un support numérique n'est que rarement arborescent. L'arborescence des contenus est un document de communication simplifié qui facilite la communication entre les porteurs du projet. Le design de navigation s'appuie sur l'arborescence, mais il n'est pas le reflet exact de l'arborescence.

La structure de l'architecture de l'information nécessite des choix de regroupements pouvant être appréhendés par les utilisateurs finaux : l'architecte de l'information se base sur des systèmes d'organisation des contenus déjà connus par les usagers. En effet, en dehors des instances culturelles (société, école, famille), les logiques d'organisation sont propres à chaque individu. Les systèmes de classifications universels sont le fruit de compromis, de normes, de standards. Dans les faits, un individu n'aura que rarement une logique de classification identique à un autre individu (prenez le classement des dossiers sur un ordinateur, par exemple)... Ces réflexions signifient que l'architecte de l'information doit bâtir une organisation structurée autour de catégorisation relativement universelle, afin de limiter le travail de classification de l'utilisateur d'une part, et surtout pour proposer des classements déjà connus : l'usager ne doit pas avoir à réapprendre ou à apprendre de nouvelles catégorisations sur votre site...
Nous vous renvoyons à l'article portant sur la segmentation des contenus pour plus de détails. La segmentation éditoriale est l'étape stratégique du découpage de l'information structurée autour de grappes...

Une architecture de l'information implique des systèmes de classification très diversifiés. Ces réflexions sur l'architecture de l'information sont importantes car le design de navigation va notamment prendre appui sur l'IA (IA : information architecture)... Vous devez ainsi bien saisir les différences entre les types d'architecture de l'information :

  • Structure hiérarchique : par niveau, par ordre de grandeur (arborescence).
  • Structure matricielle : dynamique, à la demande (navigation à facettes).
  • Structure séquentielle : linéaire (annuaire web, par étape).
  • Structure analogique : associative, suggestive (cocon sémantique).
  • Structure prédictive : anticipation (aide vocale...).
  • Structure mix : un mélange de tout :).

Votre site pourra ainsi s'appuyer sur une structure hiérarchique pour un ou deux thèmes, sur une structure analogique pour les des catégories plus flexibles... L'architecture de l'information gagne à proposer des systèmes de classification mixés, notamment pour proposer différents moyens d'accéder à l'information (on parle de flexibilité de l'architecture de l'information). Ceci nous amène à dire quelques mots sur les parcours d'utilisation.

Design de l'interaction et navigation

Le design de l'interaction considère le mouvement de l'utilisateur au sein du support numérique. Le concepteur peut prévoir des parcours centraux et des parcours secondaires pour guider l'utilisateur dans la structure du site. Dans les faits, chaque usager suit sa propre logique et opère par stratégie de contournement du parcours central. Il y a 1001 façons d'explorer un site, et les utilisateurs sont très bons pour ne pas suivre ce qui a été prévu par le concepteur...
Ceci étant dit, ces quelques faits ne dédouanent pas le concepteur d'un travail rigoureux sur le design de l'interaction.

Le design de l'interaction a un rôle clé dans la navigation : le menu va fournir des raccourcis et mettre en scène les parcours les plus importants au regard des objectifs fixés dans la stratégie digitale...
On oriente les parcours d'une part autour des objectifs business, et on les construit pour leur capacité à aider l'utilisateur à accéder à l'information. Le concepteur va ainsi mixer :

  • Parcours rationnel : l'utilisateur déroule les niveaux de l'arborescence.
  • Parcours guidé : l'utilisateur est assisté.
  • Parcours impulsif : l'utilisateur est orienté directement sur un contenu, un service (promotion, offre commerciale, élément incontournable).
  • Parcours associatif : l'utilisateur et orienté par suggestion et rebond.
  • Parcours imposé : formel, séquencé (processus).
  • [...]

Si vous prenez l'exemple d'un site ecommerce, le parcours rationnel est celui dans lequel l'utilisateur utilise le menu de navigation pour trouver une catégorie de produits. Le parcours guidé va correspondre aux guides d'achat ou aux modules d'aide au choix où le consommateur est guidé à la façon du travail de conseiller en magasin. Le parcours impulsif repose sur le principe des têtes de gondoles et des opérations commerciales et considèrent des stratégies opportunistes. Les parcours associatifs sont ceux qui ont lieu dans les fiches produits dans les zones de suggestions (ceux qui ont acheté ceci ont aussi acheté cela). Enfin, le parcours imposé correspond à un tunnel d'achat ou une création de compte par exemple...

Le design de navigation gagne à mixer ces différentes typologies de parcours qui sont autant de moyens d'explorer les contenus d'un support numérique... Comme vous le constatez, la navigation ne se résume pas à calquer simplement l'arborescence :)... Il y a d'autres paramètres relativement importants qui doivent être pris en compte au moment du design de navigation, dont le SEO !

Design de navigation et SEO

L'optimisation in-page est un facteur clé de réussite dans une stratégie de référencement orientée SEO. Le menu de navigation est un élément assez important sur le plan du maillage SEO...
Dans la pratique, les acteurs du web utilisent principalement deux typologies de maillage des contenus : le silo, et le cocon.

Le silo (siloing) considère l'organisation de l'information autour d'un thème central, du général vers le particulier, structuré autour d'une logique arborescente et impliquant un parcours rationnel. 9 sites sur 10 ont ce type de structure. Les silos sont souvent le reflet d'une organisation pyramidale de l'information calquée sur le business ou l'organisation interne du donneur d'ordre. Le siloing donne de bons résultats sur le plan du référencement, notamment parce qu'il adopte une stratégie sémantique verticale, de la notion générale vers l'unité d'information la plus précise. Les moteurs de recherche aiment ce type de structuration :)...

Le réseau (cocon sémantique) suggère une organisation de l'information construite sur l'association d'idées dans la lignée d'une carte mentale (carte heuristique, mind-map). Les cocons reposent sur la structure fondamentale du maillage par lien (structure organique). C'est une stratégie SEO très puissante pour élargir la couverture sémantique d'un thème (champ sémantique, champ lexical). Les spécialistes SEO parlent de cocon en considérant que la structure du site gagne à être bâtie sur des scénarios d'associations d'idées : créer un maillage de suggestions autour d'une expression-clé (à la façon de Google). Le cocon sémantique suggère une construction du maillage centrée sur les besoins supposés des utilisateurs dans une logique UX. Ceci vaut pour la théorie. Dans les faits, le cocon sémantique est orienté SEO et pas UX. Les cocons sémantiques visent à couvrir un maximum d'expressions clés... Ces techniques se développent mais ne sont pas encore très répandues. Les cocons sémantiques suggèrent une organisation plus chaotique de l'information, et bien que les individus aiment les rebonds d'idées, les organisations de contenus qui ne sont pas classiques requièrent plus d'apprentissage. A utiliser avec précaution donc, en soutien des silos.

D'autre part, le système de navigation gagne à limiter le nombre d'items proposés. On parle généralement de 100 liens maximum par pages, mais cela peut être moins... Plus vous proposerez d'items de navigation dans votre menu, plus le jus des liens sera dilué au sein de la page. Le jus de lien est cette notion complexe qui considère que, plus il y a de liens dans une page, plus le poids du lien est divisé dans sa capacité à transmettre de la popularité à une autre page. Pour faire une analogie, c'est comme si vous aviez une carafe d'eau. Plus il y a de verres (liens), plus le jus sera dilué... Logique :).
Pensez bien à cette notion au moment de mettre en place des mégas panneaux de navigation !

Une autre notion importante sur le plan SEO concerne les libellés des liens. Les libellés des liens doivent être significatifs, mais surtout représentatifs d'expression-clé potentiellement saisies par les utilisateurs finaux. Le planificateur de mots clés de Google est une aide précieuse pour choisir les expressions-clés les plus porteuses.

Enfin, dans une logique de sémantique, la navigation gagne à mettre en scène les noeuds les plus importants. Les noeuds les plus importants sur le plan SEO sont ceux qui fédèrent les thèmes les plus porteurs en matière de trafic. Ce sont les pages qui doivent recevoir le plus de liens. Les moteurs doivent pouvoir accéder rapidement aux carrefours de contenus. En revanche il n'est pas essentiel, ni recommandé d'ailleurs, que le menu de navigation donne accès à tous les niveaux. Cela va multiplier le nombre de liens, diminuer le jus de lien, et accentuer le travail de classification de la part de l'utilisateur, ce qui nous amène aux considérations ergonomiques.

Navigation et ergonomie web

Sur le plan de l'ergonomie, le design du menu de navigation doit être considéré à travers 3 conventions importantes : le guidage, la charge de travail, la signification des codes...
De quoi s'agit-il ?

Le premier rôle de la navigation est de guider l'utilisateur, afin de faciliter son parcours dans la structure du site. La notion de guidage suppose une stratification de l'information par ordre d'importances. Une fois encore, la notion d'importance est à rapporter aux objectifs du site.

La charge de travail considère le volume d'informations présenté au sein du menu de navigation. Les ergonomes agitent le drapeau du nombre magique de Miller pour appeler à minifier et factoriser la navigation. Le nombre magique de Miller renvoie à une étude selon laquelle les capacités mémorielles seraient limitées à 7 plus ou moins 2 éléments en simultané. Autrement dit, on aurait plus ou moins conscience de 7 choses en même temps. Selon cette règle, on devrait alors fixer le nombre d'items de la navigation :).
Règle fantaisiste ou non, dans la lignée des délires sur les règles de 3 clics, c'est le principe général qu'il faut retenir. Nos capacités cognitives sont limitées, et plus il y a d'informations affichées en même temps, plus il faut de temps pour les classer... et plus il est difficile de les retenir.
Bien qu'il soit iconoclaste de le dire, vous pouvez allègrement dépasser les 7 items de navigations principaux, et aller jusqu'à 15 ! Il faudra toutefois veiller à limiter les niveaux 2 dans une optique SEO...

Enfin, le troisième critère considère la signification des codes. Les libellés des liens de navigation doivent être significatifs (pas de jargon interne, pas de sigle...). Les récepteurs doivent être en mesure de déterminer les contenus rassemblés derrière un item de navigation, il faut donc opter pour des mots-clés fédérateurs à fort potentiel évocateur (sans oublier le SEO et la sémantique !). Ceci nous amène à considérer le référentiel côté usager et donc le design d'expérience utilisateur.

Navigation et UX design

Le design d'expérience utilisateur considère l'expérience et l'agrément d'utilisation comme les clés du processus de conception. Les méthodologies UX sont à l'opposé des méthodes de conception centrée sur le donneur d'ordre. Dans les méthodes UX design, on cherche à équilibrer les flux issus de l'émetteur (flux business) et les flux issus des usagers (flux utilisateurs). La logique poursuivie est celle d'une proposition de valeur faisant office de point d'achoppement entre l'offre et la demande. Beaucoup de palabres, et au final, quel lien avec le design du menu de navigation ?

Les considérations rejoignent les problématiques d'architecture de l'information et d'ergonomie : plus le designer utilise des éléments standardisés et connus, moins les usagers devront faire des efforts d'apprentissage.

Dans la logique du design UX, la notion d'importance bascule vers les utilisateurs finaux. Pour caricaturer, on ne cherchera plus forcément à pousser les rayons les plus rentables, mais ceux qui correspondent aux besoins identifiés lors d'études usagers (recueil des besoins utilisateurs, tri de cartes, tests utilisateurs) : le support, le service après-vente, des contenus particuliers... Il ne suffit pas d'invoquer l'UX, encore faut-il avoir des données réelles provenant du terrain pour connaître la nature de ces informations plébiscitées par les utilisateurs finaux...

La notion d'UX appelle également la mise en place de test de navigation pour vérifier ses performances : on réalisera des tests de trouvabilité pour tester le système d'architecture de l'information mis en place, sur le fond, mais également la clarté du menu de navigation mis en place, sur la forme. Comme vous le voyez, architecture de l'information et design de navigation sont deux notions dynamiques et solidaires. L'une ne va pas sans l'autre.

Design de l'information et navigation

Nous avons parlé d'architecture de l'information et de design de l'interaction comme autant de concepts essentiels du design de navigation : ces deux disciplines participent effectivement à travailler le fond, c'est à la dire le système qui sous-tend l'organisation des contenus. Reste à évoquer la forme avec le design de l'information.

Le design de l'information, dans un projet digital, est la discipline qui considère la mise en forme et la ventilation des éléments à l'écran. Le design de l'information du menu de navigation est un exercice stratégique de conception : nombre d'items, typologies des interactions (menu déroulant), présentations de la navigation, choix du positionnement du menu (horizontal, vertical)...

Nous allons détailler les typologies de menu de navigation et les éléments importants à considérer dans le design de la nav, un peu plus loin, dans les méthodologies du design de navigation. On parlera également des problématiques de responsive design et de leurs conséquences sur le design du menu de navigation.

Des modèles pour concevoir la navigation

IAFACTORY vous propose de nombreux modèles de wireframes pour vous aider dans vos projets de conception. Ces modèles de wireframing sont à télécharger au sein de notre shop. Le téléchargement est immédiat.

Nous proposons également des tutoriels pour vous aider à organiser les contenus (le fond) puis à choisir les bons formats (la forme) dans vos projets de conception.

Objectifs du webdesign de navigation

Fluidifier les parcours au sein du site

L'objectif central de la navigation d'un site web est de fluidifier les parcours : donner des raccourcis pour les scénarios d'utilisation stratégiques, mettre en avant les rayons les plus porteurs en matière de business, valoriser les contenus et les sections plébiscitées par les usagers.

Le menu de navigation n'est pas nécessairement le reflet exact de l'arborescence. Un ensemble d'arbitrages doivent être apportés au moment de faire les choix des éléments à figurer dans la navigation. C'est le processus de design et la combinaison des dynamiques entre le fond et la forme qui vont permettre d'aboutir aux choix définitifs en matière de design de navigation.

Pour vous aider dans la conception de votre menu de navigation, voici les éléments que vous devez garder à l'esprit. Un design de navigation doit :

  • Être flexible et évolutif pour accueillir de nouveaux éléments !
  • Guider l'utilisateur dans le dispositif.
  • Mettre en scène des libellés significatifs.
  • Valoriser des items évocateurs sur le contenu pointé (affordance).
  • Limiter la charge de travail.
  • Positionner l'émetteur sur le plan stratégique. Contraste concurrentiel.
  • Permettre de balayer l'offre de l'annonceur en un coup d'oeil.
  • Fluidifier les parcours d'utilisation.
  • Favoriser les accès aux noeuds d'information.
  • Diversifier les parcours d'accès à l'information.
  • Considérer les enjeux SEO et limiter le nombre de liens.
  • Être en phase avec les capacités d'exploration des spiders (attention au javascript).

Exemples de design de navigation

icone telecharger des modeles pour analyse UX
TÉLÉCHARGER
150 livrables projets !
Kit de livrables projet : 2,60€ le modèle

zoning intranet zoning intranet
ux Intranet Loreal
iafactory - Julien MUCKENSTURM
navigation ordre alphabétique navigation ordre alphabétique
ux Arkema
iafactory - Julien MUCKENSTURM
navigation à facettes navigation à facettes
ux Arkema
iafactory - Julien MUCKENSTURM
navigation site ecommerce navigation site ecommerce
ux Carrefour
iafactory - Julien MUCKENSTURM
navigation catalogue de courses navigation catalogue de courses
ux Carrefour courses en ligne
iafactory - Julien MUCKENSTURM
menu de navigation burger mobile menu de navigation burger mobile
ux Cdiscount mobile
iafactory - Julien MUCKENSTURM
menu de navigation en panneau menu de navigation en panneau
ux The arpenters
iafactory - Julien MUCKENSTURM
design de navigation exemple design de navigation exemple
ux Chanel
iafactory - Julien MUCKENSTURM
principes de navigation principes de navigation
ux Comptoir des bois
iafactory - Julien MUCKENSTURM
navigation logiciel navigation logiciel
ux logiciel CRM
iafactory - Julien MUCKENSTURM
navigation latérale navigation latérale
ux Samse
iafactory - Julien MUCKENSTURM
design de navigation simple design de navigation simple
ux Ds
iafactory - Julien MUCKENSTURM
exemple de design de navigation exemple de design de navigation
ux Icade
iafactory - Julien MUCKENSTURM
Calques de navigation Calques de navigation
ux Look Cycle
iafactory - Julien MUCKENSTURM
Menu de navigation en colonne de gauche Menu de navigation en colonne de gauche
ux Samse
iafactory - Julien MUCKENSTURM
design de navigation design de navigation
ux Univ. de Poitiers
iafactory - Julien MUCKENSTURM
Zoning de navigation Zoning de navigation
ux Valeo
iafactory - Julien MUCKENSTURM
Principes de navigation Principes de navigation
ux Valeo
iafactory - Julien MUCKENSTURM
Menu déroulant navigation Menu déroulant navigation
ux XXX
iafactory - Julien MUCKENSTURM
Panneau de navigation Panneau de navigation
ux Paco Rabanne
iafactory - Julien MUCKENSTURM
Menu de navigation responsive design Menu de navigation responsive design
ux Paco Rabanne
iafactory - Julien MUCKENSTURM
Menu de navigation overlayer Menu de navigation overlayer
ux Parrot
iafactory - Julien MUCKENSTURM
Navigation overlayer ordre alphabétique Navigation overlayer ordre alphabétique
ux Conforama
iafactory - Julien MUCKENSTURM
exemple de zoning exemple de zoning
référence ux Securite routiere
iafactory - Julien MUCKENSTURM

Méthode : comment concevoir la navigation ?

icone formation ux design en ligne
MAÎTRISER
les méthodes UX design
Formation UX en ligne : 18,00€ l'heure

Méthodologie du design de navigation

Au moment de concevoir la navigation, on se pose un tas de question, et au final, les designers font souvent des choix parce que la navigation sur ce site-là est tellement efficace !
Le problème, c'est que le design de navigation d'un site est le reflet d'une partie de son architecture de l'information, et il y a très peu de chance que cette dernière soit identique à celle de votre site...
Bref, le design de navigation centré sur le benchmarking est une grave hérésie. On ne conçoit pas un système de navigation sur des tendances. Mais sur un ensemble de points très factuels que nous allons détailler.

Au risque de vous décevoir, sachez qu'il y a toujours plusieurs façons de faire en matière de design de navigation ! Comme vous le répètera le Docteur Ergo : pas une navigation juste, juste une navigation. Le design de navigation, comme l'architecture de l'information relèvent d'un ensemble de choix. Ces choix sont les fruits du processus de design qui implique une dynamique rationnelle et créative... Mais un bon design, c'est d'abord un design qui va être compris. Les standards restent plus que jamais, de puissants alliés pour vous aider à concevoir. Ce qui nous amène à parler des typologies de modes de navigation.

Typologies des modes de navigations

Voici quelques basiques de la navigation à considérer au moment du processus de design de navigation...
Première question : quel est le meilleur système de navigation, les barres de navigation horizontales ou les barres de navigation en colonne ?
La réponse est très simple : ça dépend :).
Les impacts de ce choix sont assez fondamentaux en matière d'interface et sur le plan du zoning, car dans un cas, on va devoir composer avec une sidebar (colonne de navigation) et c'est un élément qui peut être encombrant.

  • Menu de navigation horizontal
    - Adapté pour 6 à 10 items maximums.
    - Limité en matière d'encombrement pour les premiers niveaux.
    - Fort potentiel de positionnement stratégique.
    - Standardisé.
    - Facilement accessible (en haut).
    - Scannable.
    - Flexible en matière de design pour varier les présentations (call to action).
    - Mais de moins en moins utilisé par les utilisateurs (cf. la navigation c'est Google !).
  • Menu de navigation vertical
    - Adapté pour plus de 10 items, jusqu'à 15 - 25 items.
    - Illimité en matière d'encombrement pour les premiers niveaux et les niveaux inférieurs. Potentiel de positionnement un peu plus faible.
    - Zone très visible dans les tests eye-tracking.
    - Nécessite une cohabitation avec le corps de page.
    - Accès moins évident que la navigation horizontale (positionnement relatif par rapport à votre position dans la page).
    - Rigide sur le plan des formats (pas d'élasticité horizontale).
    - Positionnement : à gauche. Ne jamais mettre la navigation à droite, car beaucoup de sites utilisent une sidebar à droite pour valoriser les zones de rebond et les publicités...

Une navigation positionnée en colonne implique plus de pression sur le design : la barre de navigation est persistante et chaque gabarit doit composer avec cet encombrement. C'est un élément très favorable au repérage mais assez contraignant sur le plan de l'espace de la page.
Sans aucune discussion possible, la navigation positionnée en colonne de gauche implique un travail de design plus compliqué qu'une interface reposant sur une navigation horizontale. Essayez par exemple de concevoir un dispositif ecommerce de taille critique avec un design 100% structuré autour d'une colonne de navigation à gauche. Vous verrez, c'est très délicat et il faudra un design sophistiqué pour faire cohabiter navigation et contenu dans chacun des gabarits du site.

Sur le plan de l'ergonomie et de l'expérience d'utilisation, le menu horizontal et la barre de navigation à gauche sont des standards. Tous les deux sont bien intégrés. Mais tout est question de design...

Zoning d'interface et design de navigation

Le zoning d'interface se traduit par une affectation de zones à chaque partie de l'écran. Les fonctions de navigation doivent naturellement être envisagées au moment de définir le zoning de l'interface.

On parle ici de conception macro, avant de travailler de façon précise la conception détaillée au travers des wireframes. L'affectation de la zone de navigation va considérer la typologie du site, la problématique du design adaptatif, et naturellement les niveaux de navigation.

La navigation doit considérer le corps de page, y compris les contenus, comme les scénarios de navigation les plus efficaces dans les sous-niveaux. Pour les 2 premiers niveaux, il faudra définir le positionnement de la navigation à l'écran. On déterminera si le nombre d'items et l'envergure navigationnelle est assez factorisée pour apparaître sur le plan horizontal...

Si les libellés de navigation sont longs, et surtout si les niveaux 2 sont supérieurs à 8 items, il faudra considérer l'opportunité d'une navigation verticale. C'est l'amplitude de l'architecture de l'information et les objectifs de design qui aide à effectuer les choix en matière de design de navigation. En tous les cas, le zoning de l'interface permet d'anticiper les problématiques d'encombrement avant d'entreprendre les opérations de conception détaillée...

Rappelez-vous qu'il est toujours possible d'opter pour plusieurs modèles de navigation. Il peut être intéressant de faire des tests utilisateurs pour déterminer les systèmes les plus performants pour votre site. Sur le plan des résultats, rien ne vaut les tests empiriques.

Nombre d'items de navigation

La navigation doit proposer des raccourcis vers les noeuds critiques du dispositif digital. Il n'y a pas de règles sur le nombre d'items. Ce qui compte, c'est que principaux parcours d'utilisation soit mis en avant. Que les fonctions centrales soient accessibles. Tout est affaire d'équilibre. De charge de travail limité...
Le menu de navigation n'a pas vocation à porter tout le plan du site ! Il ne faut pas oublier qu'en matière d'usage, ce sont les contenus au sein du corps de la page qui sont principalement utilisés pour naviguer.
Un système de navigation doit donc être considéré dans la dynamique de l'interface, chaque écran type hub pouvant faire office de relais de navigation.

Qu'il s'agisse de création de logiciel, de conception de site ecommerce, de design de site de courses en ligne, de portail d'information média, il est tout à fait acceptable d'avoir 15 items de premier niveau ! Les tests utilisateurs ne donnent pas de retour négatif sur ce type de pratique, dès lors que l'envergure éditoriale et fonctionnelle l'exige... Regardez des sites comme Lequipe, Lefigaro, Cdiscount, Carrefour ooshop. Tous ces dispositifs font partis des sites web avec les plus fortes audiences, et tous mettent en scène des systèmes d'architecture de l'information à très forte densité. Le nombre d'items est un concept alambiqué : on peut toujours trouver des combinaisons élégantes entre architecture de l'information et design de l'information pour mettre en scène des menus de navigation importants. C'est le rôle du design de trouver des solutions pour que l'information soit lisible, scannable, compréhensible.

Si vous partez sur une structure de 15 items par niveaux, vous aurez plus de 3615 catégories à disposition pour classer l'information (15 niveaux 1, puis 15 x 15 niveaux = 225 N2, puis 15 x 15 x 15 niveaux 3 = 3375 N3). Autant dire que le système de navigation central ne pourra jamais figurer tous ces éléments en une fois !
Plus il y a de verticalité, comme le suppose ce cas, et plus il sera recommandé d'opter pour une barre de navigation latérale...

Classements des items de navigation

Un système de navigation performant suppose une architecture de l'information parfaitement structurée. Plus il y a d'items dans la navigation, et plus le système de classification devra apparaître de façon évidente. Même si l'ordre alphabétique est considéré comme has-been, c'est un mode de classification absolument phénoménal sur le plan de l'intuitivité...

Le travail de design de navigation doit particulièrement être fin sur le plan de la présentation des items. Vous avez le choix...

  • Navigation par ordre alphabétique
    Organisation la plus universelle et la moins utilisée pour un site...
  • Navigation par thématique éditoriale
    L'organisation la plus répandue sur le web et dans les logiciels. Sur le plan du SEO, cela se traduit par les silos. Principe des chaines éditoriales (content channels).
  • Navigation par typologie
    C'est une branche de la structuration par thème. L'information est ordonnancée autour de la typologie du contenu : vidéo, podcast, photo, dossier...
  • Navigation par tâche
    Autre typologie d'organisation par thème. Ici on parle plutôt de tâches : acheter, vendre, louer, sous-louer pour l'univers de l'immobilier par exemple.
  • Navigation géographique
    Les informations s'organisent autour d'un lieu. Principe Leboncoin...
  • Navigation par profil
    Logique assez complexe. Il faut considérer des modèles d'organisation de l'information personnalisés pour chaque catégorie de profil. Convient aux sites gouvernementaux.
  • Navigation par association d'idées
    Logique d'agencement de l'information basée sur l'intuitivité. Dans la continuité du mind-mapping. Suggestion, idée relative (avec les fraises, la chantilly :).
  • [...] liste non exhaustive, ce qui vous laisse entrevoir de nombreuses possibilités.

Plus le design de l'information sera homogène (format homogène, classement reposant sur des bases cohérentes) et plus le travail de classification sera rapide. Il sera alors d'autant plus facile de faire ressortir un item particulièrement important (mise en relief, couleur, call to action sous forme de bouton).
Attention toutefois : la mise en exergue ne fonctionne que si elle valorise 1 ou 2 éléments maximum, sinon vous court-circuiterez la logique de classification...

La navigation est morte...

Les analyses empiriques le démontrent. La navigation meurt. Les outils de navigation sont désormais les moteurs de recherche. La navigation, c'est Google !
La rapidité des réponses fournies par Google et la fiabilité du moteur en font l'outil de recherche absolu, et tant pis pour votre navigation... Les comportements d'usage tendent vers les allers-retours flash entre le site et Google. L'utilisation devient multi-sites et chaque individu opère comme un méta moteur...

La navigation Google se traduit par des taux de rebond élevés (aller-retour unique entre Google et votre site). Un taux de rebond élevé n'est pas forcément un signe d'alerte rouge. C'est une tendance de fond. Les outils de recherche fournissent des résultats plus rapidement et avec moins d'efforts. Pas besoin de réapprendre un système de navigation sur chaque site. Toutes les réponses sont dans le champ de recherche de Bing, Yandex, et Google.

Vous devez prendre en compte cet état de fait dans le design de navigation... En effet, la longue traine vous rapportera du trafic dans tous les niveaux de votre architecture de l'information, et rare seront les utilisateurs à faire l'effort de déployer votre navigation. Le maillage doit être intégré au sein des pages, pour tenter de guider l'utilisateur à travers le contenu, plutôt que par la navigation. C'est frustrant mais c'est ainsi. Votre site aura beau être très bien organisé, il fournira toujours des réponses moins rapides que Google, sur le plan navigationnel. Placez la navigation in page, directement dans les contenus, à l'aide des liens, comme Wikipedia. Et le tour est joué.

Menu déroulant

Que dire des menus déroulants ?
Qu'ils ne sont pas de bons ambassadeurs SEO ? Qu'ils impliquent trop de charge de travail ? Qu'ils sont bien pratiques comme fourre-tout ? Qu'on aura toujours la possibilité de pousser l'un ou l'autre rayon pour une opération commerciale ?

Oui, on peut dire au moins tout ça du menu déroulant. Si les menus déroulants proposent quelques raccourcis simples, alors ils peuvent être pertinents dans le design de navigation. En revanche, s'il est questions de positionner tous les items de second niveau ou de troisième niveau, autant dire que c'est plutôt un mauvais parti pris...

Le menu déroulant doit par ailleurs proposer une structure technique adaptée au crawling des outils de recherche. Les javascripts trop sophistiqués doivent être bannis. On préfèrera des menus simples autour du combo HTML & CSS. Tout simplement. L'utilisation de menu-déroulant pose des question d'utilisabilité en environnement responsive, d'où la nécessité de les utiliser avec parcimonie...

Responsive design et navigation

Les rollovers (apparition d'un élément au survol) ne sont pas adaptés aux terminaux tactiles. L'utilisation de menu déroulant ou de panneaux doivent être activés au Tap sur les tablettes et les téléphones mobiles. Cela signifie que le tap n'est pas un élément cliquable pointant directement une page... Cette problématique pousse les concepteurs à imaginer toute sorte de menu de navigation ultra sophistiqués pour fonctionner efficacement sur supports tactiles...

On ne peut pas dire que le design de navigation dans un environnement responsive soit une sinécure. Les burgers sont utilisés sur tablette et smartphone avec un ajout de surcouche javascript pour contourner les problématiques de menu déroulant. Parfois, même, on charge d'autres menus de navigation par rapport au terminal, ce qui présente le risque de multiplier le nombre de liens pointant vers une page (des liens dans le menu desktop et des liens différents dans le menu mobile car le design est différent...).

Même si le design responsive représente une formidable opportunité pour adapter un contenu à partir d'une même source, il faut bien reconnaître que les sites responsive posent des problèmes fondamentaux sur les plans de l'architecture de l'information et du design de l'interaction. En effet, le design de l'information est adaptable, mais les parcours sont eux, définis une fois pour toute... Or, les logiques d'utilisation diffèrent d'un format d'écran à l'autre, et il est donc handicapant de devoir proposer une structure de design d'interaction fixe pour tous les supports. Même problématique pour l'architecture de l'information. Les navigations responsive ne sont jamais parfaites. Elles sont toujours le fruit de compromis sophistiqués.

Navigation à facettes

Un mot pour conclure sur les navigations à facettes. Il s'agit de systèmes de navigation dynamiques par filtres successifs du catalogue. Les facettes vont de pair avec la technologie AJAX et doivent faire l'objet d'une attention particulière sur le plan du SEO (problématiques des URL dynamiques).

Les facettes reposent sur le principe des catalogues matriciels. C'est un système de navigation expert auquel il est toujours utile de proposer une alternative assistée (parcours guidé). Les navigations à facettes sont intéressantes pour les catalogues de très grande envergure.

Un système de facette est assez complexe sur le plan technique, mais également en matière de design de l'information et d'ergonomie. Tous les cas de figure doivent être étudiés afin que la maquette fonctionnelle puisse figurer les cas d'encombrement critique.

Démarche pour le design de navigation

Le design du menu de navigation suppose :

  • Un système d'architecture de l'information au point.
  • Différentes modalités d'accéder aux informations.
  • Un mix entre silo et cocon sémantique.
  • Une prise en compte des différents parcours d'utilisation.
  • Des synergies entre la navigation et l'interface.
  • Une prise en compte des enjeux SEO.
  • L'utilisation de javascripts basiques.
  • La limitation du nombre d'items dans une optique SEO.
  • L'optimisation des labels de navigation dans une optique SEO.
  • L'utilisation d'un vocabulaire accessible dans une logique UX.
  • Le choix d'un mode de navigation horizontal ou vertical.
  • L'usage d'une classification homogène pour faciliter le scan de l'utilisateur.
  • Des formats homogènes de navigation dans tout le site.
  • L'utilisation modérée des menus déroulants.

Travaux complémentaires au design de navigation web

Le design du menu de navigation suggère, en amont, des travaux portant sur la structuration du site (le fond) :

Le design du menu de navigation suggère, en aval, des travaux portant sur la mise en forme :

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources pour le design de navigation

APPROFONDIR
le fonctionnement

Livre : Mapping websites, Paul Khan
Mapping websites, Paul Khan

Aller plus loin sur le design de navigation web

Formation vidéo à visionner :

Livrables à télécharger :

Etudes de cas à lire :

Travaux à visualiser :

Supports de cours (débutant) à étudier :

Compétences métier pour le design de navigation :

Fiche métier :

Livres à bouquiner :

Autres ressources sur le web :

  • Signalez nous des ressources sympa autour des arborescences de site web en utilisant les commentaires !
Plus de techniques de conception
STRUCTURATION DES CONTENUS
Sélection, organisation et priorisation des contenus projetés au sein d'une vue hiérarchique détaillée.
arborescence éditoriale
CONCEPTION D'INTERFACE
Clarification de la structure du site, des gabarits et des fonctions attribuées à chaque zone.
zoning
CONCEPTION D'INTERFACE
Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing